npm - @rio-cloud/uikit-mcp - Versions diffs - 1.0.0 - Mend

@rio-cloud/uikit-mcp 1.0.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (198) hide show

package/data/pages/Getting-started/start/changelog.json ADDED Viewed

@@ -0,0 +1,22 @@
+{
+  "metadata": {
+    "captured_at": "2025-11-21T12:06:59.652Z",
+    "source": "https://uikit.developers.rio.cloud/#start/changelog",
+    "category": "Getting started",
+    "section": "Welcome",
+    "slug": "start/changelog",
+    "version": "v1.13.2",
+    "hash_algorithm": "sha256",
+    "hash": "3a4fb79518b1950da204e0cdf419fb13090a6b9c232df854c92b1d3cf20f0cde"
+  },
+  "title": "Changelog",
+  "lead": "In addition, a \"getFuelIcon\" helper function was introduced that maps fuel types to their corresponding icons, ensuring consistent and correct icon usage across the application.",
+  "content": [
+    {
+      "heading": "Changelog",
+      "body": "- Fixed Obfuscate data Fixed a bug that triggered an infinite loop when data-pii was applied to a nested child element.\n- Update Button Added new \"unstyled\" buttons style\n\n- Fixed Fixed bundling npm package. Resolve nested folder structure in npm package build.\n\n- Fixed fuel type utils Fixed missing root export for fuel type utils.\n- Fixed Action button style Fixed the muted style for action buttons.\n- Fixed MapMarker Fixed the active styling for the map marker active state to visually balance the state icon.\n- Update Rioglyph Added the missing feature to use external SVGs as a rioglyph icon.\n- Update FilePicker Added new \"fullHeight\" flag to set the dropzone wrapper element to 100% height. This comes in handy, when the dropzone should have 100 % height so it can grow.\n- New max-content Added new \"min-width-max-content\" and \"min-width-min-content\" utility classes. The first prevents content from breaking by expanding to fit its full width, while the second allows content to shrink to the smallest width possible without overflowing.\n- New Grid Added new \"grid-template-end--1\" utility class. This class allows grid items to span until the last grid line, effectively positioning them to extend to the end of the grid.\n- New Obfuscate data Added new \"data-hide-pii\" attribute to the <html> element to obfuscate sensitive data directly in the frontend. Obfuscate names, emails, or phone numbers — without needing backend filtering or extra code changes.\n- Icons New icons rioglyph-circle-dashed rioglyph-square-dashed rioglyph-cube-dashed rioglyph-cube rioglyph-group-blocks rioglyph-dashboard-view rioglyph-ok-dashed rioglyph-prompt rioglyph-recycle rioglyph-warehouse rioglyph-status-change rioglyph-status-change-horizontal rioglyph-transition-right rioglyph-transition-push-right rioglyph-migrate rioglyph-convert rioglyph-shelve rioglyph-conveyor-belt rioglyph-tracking-package rioglyph-issue-tracking Updated icons rioglyph-ok-sign rioglyph-ok-circle\n\n- Fixed Select Fixed an issue in the Select component where clearing the filter input after a no-results search caused the option list to remain incomplete. The dropdown now correctly restores the full option set when the filter is cleared.\n- Fixed AssetTree Fixed an issue where clicking the checkbox on a tree group would also toggle its expanded state. Now, selecting a tree group via its checkbox only triggers selection and no longer expands or collapses the group. This prevents unintended virtualization behavior where expanding a node could cause the tree to switch into virtualized mode, resulting in the loss of tree group selections.\n- Fixed Callout Removed overflow hidden from callouts so dropdowns can be shown correctly.\n- Fixed Ellipsis Fixed \"ellipsis-1\" class.\n- New Rioglyph, fuel type utils Added a new component for rendering Rioglyph icons as a span element. The component also supports paired icons, allowing two glyphs to be displayed together as a combined symbol. In addition, a \"getFuelIcon\" helper function was introduced that maps fuel types to their corresponding icons, ensuring consistent and correct icon usage across the application.\n- Update FormLabel Added missing \"Node\" type info for supportingText the props table and changed the handling of supportingText styling so that the text-italic class is only applied when the supportingText is a string. If you provide a string wrapped in a div or span, you have to set the italic class manually.\n- Update Tree Added a new \"pairIcon\" prop to TreeItem allowing pair icons to be individually specified in the Tree component.\n- Update ClearableInput Added new input mask related props \"maskOverwrite\", \"maskDefinitions\", and \"maskDispatch\" to support dynamic masking for more complicated use cases and to give more control over the masking.\n- Update useOnboardingTour Updated the typings and documentation for the useOnboardingTour hook.\n- Style Pills Updated the hover style for the application header navigation as well as for the nav pills.\n- Icons As RIO will support more fuel types in the future, and because of inconsistencies in existing naming conventions, we introduced a new icon: \"rioglyph-fuel-liquid\". This icon replaces \"rioglyph-fuel-diesel\" to better represent a broader range of liquid fuels. With this change, there are now four dedicated fuel icons available, plus one for a mixed fuel type. rioglyph-fuel-liquid rioglyph-fuel-electric rioglyph-fuel-hydrogen rioglyph-fuel-gas rioglyph-fuel-mix With this approach, frontends can use the same icon for diesel or gasoline and also for CNG and natural gas by simply using the new \"getFuelIcon\" function form the Rioglyph component. NOTE The old “rioglyph-fuel-diesel” icon will continue to work, but it will no longer be listed in the UIKIT demo page icon list. Additional new icons: rioglyph-video rioglyph-video-off\n- Demo Service-specific settings Updated the ApplicationHeader demo to include an example of service-specific settings, establishing a consistent approach for presenting unique configurations that cannot be included in the global user profile settings. It helps ensure a familiar user experience across different services while keeping global settings clean and focused.\n\n> Note: The old “rioglyph-fuel-diesel” icon will continue to work, but it will no longer be listed in the UIKIT demo page icon list.\n\n- Fixed Map settings Updated implementation for map satellite view to support zoom limits by using a hybrid map layer approach.\n- Fixed SteppedProgressBar Fixed styling issue in circular variant of the SteppedProgressBar when an item is active.\n- Fixed SplitDialog Fixed left side width for larger dialogs. Added new prop to hide the split divider.\n- Fixed FormLabel Fixed usage of HTML tag label only when part \"htmlFor\" is set and has a value.\n- Update Tree Added a new \"expandedIcon\" prop to the TreeGroups to support showing a different icon when the group is expanded.\n- Update Sticky table columns Renamed \"table-sticky-cell-first\" and \"table-sticky-cell-last\" to \"table-sticky-column-first\" and \"table-sticky-column-last\" for improved clarity. Updated the styles to respect the table header and prevent content from peeking through when horizontally scrolled.\n- New useAverage, useCount, useMin, useMax, useSum Added useAverage, useCount, useMin, and useMax, and useSum hooks for locale-aware numeric aggregation of object lists. Supports specifying a dot-separated path to the target property.\n- New Table grid lines Added new table class \"table-grid-lines\" that is useful when building data heavy tables.\n- New Table row span and Table double row header Added new table examples showcasing row span and double header layouts to demonstrate table design capabilities for data heavy tables.\n- New Progress bars indeterminate style Added new indeterminate style to show a progress bar even when you not know how long it will take.\n- Demo Templates Added new template sections and several UI block examples. Updated the template menu structure to improve navigation and discoverability.\n- Demo Email generator We’ve built a neat little email editor that helps you compose emails and copy the HTML code.\n- Demo Route generator There is a new route generator with a JSON export of the LAT/LNG coordinates.\n\n- Fixed Map settings Changed implementation for map satellite view as the old implementation relied on deprecated Here APIs.\n\n- Fixed Fixed an issue where clicking the \"Scroll to Top\" arrow button would block further scrolling down the page. The scroll behavior is now fully restored after returning to the top, ensuring smooth navigation throughout.\n- Fixed DatePicker Fixed styling issue in DatePicker inputs with error feedback where input text was unnecessarily cut off due to padding for the clear icon, even when no clear button was rendered.\n- Fixed ApplicationHeader Fixed an issue where the application header rendered in mobile style on initial page load when the container width could not be determined in time. This resolves visual jumping between mobile and desktop header layouts during mount.\n- Fixed SavableInput / SavableDateInput Moved error handling into the components to simplify feedback styling. Added two new props, \"errorMessage\" and \"hideErrorIcon\", to control the visual appearance of error feedback.\n- Fixed Panels, Pills, Badges Fixed various element styles for brand themes.\n- Update Tree Added a new \"icon\" prop to TreeItem allowing icons to be individually specified or explicitly omitted in the Tree component. Also updated the TreeGroups to support icon values with or without the rioglyph- prefix for improved flexibility.\n- New CSS Container queries Introduced new utility classes to make use of container queries, enabling responsive spacing and layout adjustments based on container width rather than viewport size. For more details, please check out our responsiveness guidelines.\n- New Rounded table Added new utility classes \"table-bottom-rounded\" and \"table-rounded\" for use when placing a table inside a container with border radius. These utilities help visually align the table with the container’s rounded corners.\n- Icons Added icons icons rioglyph-train rioglyph-cargo rioglyph-design\n- Style We migrated our codebase from Less to Sass to modernize our tooling and take advantage of the latest CSS capabilities, as Less is no longer actively maintained.\n- Demo Renamed the main navigation items to improve clarity and consistency. “Design” is now called Foundations, and “UI Templates” has been simplified to Templates to better reflect their purpose.\n- Demo Added new sections and examples to UI templates that serve as a quick starting point for developing your own layouts and interfaces. See Expandable details, Details views, and Progress cards. Moved the panel example from the foundations tab to Panel variants.\n\n- Fixed Tooltip / SimpleTooltip Fixed delaying tooltips using a single delay number. Tooltip delay now only applies to showing, not hiding. To configure both show and hide delays, use the object format instead of a single delay number.\n- Fixed ClearableInput Properly pass external ref to underlying masked input component using its inputRef prop.\n- Fixed DatePicker Fixed an issue where the DatePicker would render incorrectly when used as a child inside a table cell.\n- Update TableHead, TableCol Extended table components to pass additional props to the underlying tag.\n- Update useTableSelection Extended useTableSelection hook to allow setting the selected rows and change the active row from the outside using the \"setSelectedRowIds\" and \"setActiveRowId\" setter functions.\n- Update Select, Multiselect We’ve reverted the max-width of the Select, and Multiselect dropdown to 100% to stay consistent with other components and to prevent unnecessary line breaks within dropdown items. If the dropdown appears too wide, you can use the dropdownClassName prop to apply a shorter max-width-x utility class as needed.\n- Update AssetTree Extend the Tree component to virtualize tree items when a certain threshold is reached. The number of items rendered beyond the visible area can be controlled using the \"overscan\" prop. This change improves performance for large trees and long lists.\n- Update Map Extend the Map component to allow specifying minimum and maximum zoom levels. By default, the minimum zoom level is set to 3, defining the furthest zoomed-out view. The maximum zoom level, representing the closest zoomed-in view, is set to 20. Improved zoom behavior to reduce momentum and allow for more controlled zooming.\n- Update FormLabel Extend the FormLabel component to allow passing in a React element as supporting text, making it easier to add question mark icons with tooltips.\n- New SavableDateInput Added new dedicated savable input component that wraps the DatePicker.\n- New BarList Added BarList component to display customizable, animated horizontal bars for comparative data.\n- New useTableExport Added new custom hook to easily export table data as CSV.\n- New useIsFocusWithin Added new custom hook to easily detect if the focus is inside a defined document node.\n- Docu Pagination Added usage documentation for pagination and explained why the load more button is preferred for tables.\n- Demo UI Templates Added new sections showcasing various UI templates and blocks that serve as a quick starting points for developing your own layouts and interfaces.\n\n- Fixed Map Fixed issue with satellite view layer not rendering correctly when Norwegian language is selected.\n- Fixed usePostMessage Remove logging of triggered events to the console.\n- Fixed Height classes Corrected height calculation when using \"\"...-height-100vh\" classes inside module-content; vertical padding was not properly subtracted.\n- Update URL feature toggles Made the feature toggle value types more precise. Added new feature toggle definition functions that allow you to specify a default value.\n- Update AssetTree Extended the Tree component with an onTypeFilterChange callback, allowing the service to filter selected assets accordingly.\n- Update Multiselect Added a maximum width of 200px for the Multiselect dropdown component. Additionally, there are two new props \"dropdownClassName\" and \"btnClassName\" to allow further customization similar to the Select component.\n- Update ButtonToolbar Extend alignment prop to center buttons.\n- Update Switch Added new \"className\" prop to the Switch.\n- Update ButtonDropdown Added new prop \"toggleButtonType\" to ButtonDropdown component to allow using a button, a tag or a label as toggle element.\n- Update ClearableInput Added a new prop \"maskVisibility\" to control when the mask pattern is visible. Deprecated the prop \"alwaysShowMask\". in favor of maskVisibility.\n- Update useOnboardingTour Expose internal onDestroyed callback. Add \"disableActiveInteraction\" prop to disable interaction of highlighted elements.\n- Update useSorting Added new callback function \"setSortDirection\" allowing to set sort direction when used with table card sorting.\n- New useLocationSuggestions Added new custom hook to fetch locations from Here API that can be used for search inputs.\n- New useSearch Added new custom hook to filter a list of objects by a search value.\n- New useTableSelection Added new custom hook to handle both single and multiple row selection in tables, optimized for large datasets.\n- New TableHead, TableCol Added new table components \"TableHead\" and \"TableCol\" to simplify table structures especially when used with custom hooks like \"useTableSelect\" and \"useSorting\".\n- New SvgImage Added new component that helps rendering SVG images hosted on RIO's CDN and lets you customize the colors for various brand themes.\n- Icons New icons rioglyph-envelope-open rioglyph-envelope-indicator\n- Migration\n- Replaced Replaced react-input-mask with react-imask in TimePicker and ClearableInput components. The mask prop format has changed and is no longer fully compatible with the old react-input-mask syntax. The main difference is the number placeholder, which has changed from \"9\" to \"0\". Please update the mask prop accordingly when using the ClearableInput with an input mask.\n\n- Fixed Banner Fixed height animation of the Banner component when expanding. Added prop \"initialAnimation\" to disable initial content animation.\n- Fixed FormLabel Check for various input group sizes to render respective label text sizes.\n- Fixed SplitDialog / ListMenu Fixed the issue where a ListMenu dropdown was rendering all menu items on mobile upon mount. Now, only the dropdown is rendered initially.\n- Fixed RIOglyph Removed default aspect ration of 1/1 because of problems in flex/grid layouts.\n- Fixed Checkbox Fixed broken indeterminate state\n- Update RIOglyph Added new rioglyph-align-top, rioglyph-align-bottom and rioglyph-align-baseline classes for proper alignment width texts. Replaced previously introduced has-inline-icon with new rioglyph-align classes.\n\n- Fixed Collapse Fixed visible content overflow in the Collapse and Expander components during content animations.\n- Fixed ApplicationLayout Fixed the issue with passing a ref to the ApplicationLayout by exposing the underlying wrapper element. When merging the external ref with the internal ref, the wrapper is now properly exposed, eliminating the need for accessing ref.current.current in the invoking component.\n- Fixed ButtonDropdown / useClickOutside Fixed performance of rendering many dropdowns in a large table by introducing an \"isActive\" flag to the useClickOutside hook so that events are only registered and listening when the dropdown is actually open.\n- Fixed Route Fixed rendering of dashed routes via the \"lineDash\" prop.\n- Fixed List groups Fixed list group buttons active style.\n- Icons RIOGlyph We've transitioned the RIOGlyph icon font to an SVG-based system and allowing support for custom SVGs. Please read our guidelines Almost all RIOGlyph implementations will work out of the box. However, in certain cases, adjustments are required because RIOGlyph icons no longer behave as a font. What has changed? Previously, icons acted like text, inheriting line-height and vertical-alignnaturally. Now, as SVG elements, icons better have layout adjustments in inline text scenarios. The HTML structure for MapMarkers has been changed to accommodate the new icons. Please update the DOM selectors in your tests accordingly if they rely on the markup. All icons can now also be displayed as filled icons by adding rioglyph-filled Recommended solution <span className=\"has-inline-icon\"> Lorem ipsum dolor sit amet <span className=\"rioglyph rioglyph-face-smile\"></span> </span> Lorem ipsum dolor\n- Update Dialog Changed dialog footer to use flex layout to ensure proper button positioning. No more need to add \"pull-right\" or custom flex classes.\n- Update Dialog animation Add support for the browser's \"prefers-reduced-motion\" flag. When this flag is enabled, dialog animations are disabled. This can be helpful for customers experiencing performance issues while running the application.\n- Update ListMenu Added new props to ListMenuItem to allow adding a badge for the list menu group header.\n- Update AppNavigationBar Added new props to AppNavigationBar to support a back button title, a subtitle, and a title size. The title is now always centered.\n- Update Notifications Replaced the underlying notification library with \"react-toastify\", introducing new options while maintaining the same API for backward compatibility. This update also includes a refreshed notification style.\n- Update Charts Updated internal Recharts library to latest version 2.15.0 to remove some warnings.\n- Style Labels Updated the design of standard labels for a more modern look and added documentation on when to use them.\n- New Button Added new \"muted-filled\" button for occasions where the default button is to prominent and the muted button is to subtle.\n- New StepButton Added new \"StepButton\" component for convenience and to ensure consistent styling of this type of button.\n- New ButtonToolbar Added new \"ButtonToolbar\" component for convenience and to ensure consistent spacing of buttons.\n- New FormLabel Added new \"FormLabel\" component for convenience to be used on form elements that utilizes a \"htmlFor\" prop and a label or other form elements.\n- New LabeledElement Added a simple wrapper component that associates a label with any content, ensuring a unified label style. It simplifies the usage of labels for both form and non-form elements\n- New Card Added new \"Card\" component for convenience to apply default styling for a card like element. This component aims to simplify and align common card styling.\n- New Avatar Added new \"Avatar\" component for showing the user name initials, a user image, or a user icon.\n- New Banner Added new \"Banner\" component for rendering informational content on a page.\n- New AccentBar Added new \"AccentBar\" component for visual cues.\n- New VirtualList Added new \"VirtualList\" component for rendering large lists using a windowing approach.\n- New useToggle Added new \"useToggle\" component to simplify boolean state handling. Use it to handle toggle-based logic like switches, modals, or content visibility.\n- New Chart colors Added new chart colors to the chart color map.\n- Demo Draggable map marker Added new map demo to showcase draggable map marker.\n- Icons New icons rioglyph-light-bulb Renamed icons rioglyph-filled-chart rioglyph-area-chart Updated icons rioglyph-am rioglyph-angle-double-down rioglyph-angle-double-left rioglyph-angle-double-right rioglyph-angle-double-up rioglyph-area-in rioglyph-area-out rioglyph-beacon rioglyph-bookable-poi rioglyph-bookmark-square rioglyph-brake rioglyph-businessman rioglyph-car-wash rioglyph-carrier rioglyph-component-custom-recurrent rioglyph-component-custom rioglyph-construction rioglyph-delivery-completed rioglyph-delivery-error rioglyph-delivery-late rioglyph-delivery-on-track rioglyph-delivery-warning rioglyph-delivery rioglyph-document-out rioglyph-download rioglyph-driver-card rioglyph-driver rioglyph-drivercard-in rioglyph-drivercard-out rioglyph-erase rioglyph-file-signature rioglyph-fill rioglyph-folder-open rioglyph-home rioglyph-inbox-in rioglyph-inbox-out rioglyph-log-in rioglyph-logout rioglyph-map-location rioglyph-map-marker rioglyph-pencil-square rioglyph-pm rioglyph-retrofit rioglyph-role-management rioglyph-tachograph-download rioglyph-tms rioglyph-trailer rioglyph-user rioglyph-volume rioglyph-warning-sign rioglyph-weight\n- React 18\n- Update Dependencies Updated the minimum React version requirement to 18 to ensure compatibility with the latest features and optimizations. If you are using older versions of React, please update.\n- Guidelines\n- Removed Removed the outdated cross-browser style documentation.\n- Update Notifications Extended the writing style guide for guidance for using different notification types\n- Update Commonly misspelled words Extend the writing style guide for a list of commonly misspelled or misformatted words\n- Update Formatting numbers with units Extended the list of formats for examples of \"kilowatt-hour\" and \"megawatt-hour\". Please note that these units are not yet officially supported by TC39.\n\nAlmost all RIOGlyph implementations will work out of the box. However, in certain cases, adjustments are required because RIOGlyph icons no longer behave as a font.\n\n- Previously, icons acted like text, inheriting line-height and vertical-alignnaturally.\n- Now, as SVG elements, icons better have layout adjustments in inline text scenarios.\n- The HTML structure for MapMarkers has been changed to accommodate the new icons. Please update the DOM selectors in your tests accordingly if they rely on the markup.\n- All icons can now also be displayed as filled icons by adding rioglyph-filled\n\n```html\n<span className=\"has-inline-icon\">\n    Lorem ipsum dolor sit amet <span className=\"rioglyph rioglyph-face-smile\"></span>\n</span>\n```\n\n- Fixed ApplicationLayout Fixed the application layout to ensure the body contains only a single child, addressing issues with the recently introduced grid layout for the body scrollbar element.\n\n- Fixed SplitDialog Fixed the SplitDialog prop documentation for \"useOverflow\" to clarify that its default value is \"true,\" unlike other dialogs.\n- Fixed Multiselect Fixed the Multiselect component to correctly manage the dropdown state and filter value when used in multiline mode with an active filter.\n- Update Tree Added \"treeHeaderContent\" prop to the Tree component for rendering additional custom content at the top of the tree, useful for navigation pills.\n- Update Dialog Extended dialog sizes for \"fullheight-lg\" and \"fullheight-xl\".\n- New useOnboardingTour Introducing a new way to onboard users via an onboarding tour by using the \"useOnboardingTour\" custom hook. Note that weh have deprecated the \"clickflow\" prop for the OnboardingTip component with this new feature.\n- New OnboardingDialog Added new OnboardingDialog to initiate a onboarding tour and acts as the welcome dialog for the user of a service.\n- New Grid rows Added new grid helper class \"grid-rows-auto-1fr-auto\" to support a 3 row layout with expandable middle row.\n- Icons Updated icons rioglyph-cost-efficency Added icons rioglyph-newspaper rioglyph-rocket rioglyph-trophy rioglyph-check-badge rioglyph-check-shield rioglyph-sparkles rioglyph-academic-cap rioglyph-onboarding rioglyph-bookmark rioglyph-bookmark-square\n\n- Fixed AssetTree Fixed asset tree height by setting the \"scrollbar-content-wrapper\" to display flex and let the tree wrapper grow in the flex column direction.\n\n- Fixed SmoothScrollbars Changed height-100pct to min-height-100pct because of height side-effects in chrome.\n- Icons Added icons icons rioglyph-oil-can\n\n- Fixed Pills Fix rendering icons in justified filled pills when there is an icon only.\n- Fixed SmoothScrollbars Added height-100pct to the recently introduced smooth scrollbar content wrapper. This also fixes a side-effect on the AssetTree component.\n- Fixed MapMarker Tone down the POI marker color to better match the new Geofence color and to work better on a large satellite map.\n\n- Fixed Route Fix setting route arrow style. Added color constants for using status colors for routes. Extend demo examples to showcase usage of route styles and colors.\n- Fixed SmoothScrollbars Fix updating the scrollbar handle when the content height changes. This fix introduces a new wrapper div to check the children's height. Please check your tests and update them in case you rely on the old structure.\n- Fixed Select Fixed an issue with updating the dropdown menu options after the initial render, ensuring that the filter utilizes the updated DOM nodes.\n- Update LineChart Extended charts to render additional axis. The demos have been extended for interactive legends to highlight active lines.\n- Update Route Extended Route component to allow storing custom data to it which can be used when clicking on the routes polyline to set the route active.\n- Update Map isoline Extended the Polygon component to import the RIO colors to use it for an isoline or other polygons. Extended the demo to also include isoline colors.\n- Update Colors Adapted the \"gray-decent\" slightly and with that all derived classes like \"bg-decent\" and \"hover-bg-decent\"\n- Update Forms All form inputs have a subtle shadow now.\n- New Map marker A new map marker color has been added for road restrictions. The geofence color has been updated to avoid confusion with the restriction color used by HERE maps for their road restrictions. The new geofence color provides significantly better contrast and is clearer to see on the satellite map type.\n- New Chat Added new pure CSS chat component\n- New FadeUp Added new components to fade in from the bottom when an element appears on screen. This can be used to stagger elements on scroll.\n- New FadeExpander Added new components to expand content. This can be used to reveal or hide additional content triggered by all kinds of interaction.\n- New Cursor Added more cursor-style utility classes\n- New Shadows Added new shadow classes \"shadow-subtle\" and \"shadow-muted\", as well as directional classes \"shadow-muted-down\" and \"shadow-default-down\" to be used on light and white backgrounds. The hard shadow direction styles are now slightly more blurred to remove the hard line in the shadow. Note: the following shadow classes are deprecated: \"shadow-smooth-to-top\", \"shadow-smooth-to-bottom\", \"shadow-hard-to-top\", and \"shadow-hard-to-bottom\". Please use \"shadow-smooth-up\", \"shadow-smooth-down\", \"shadow-hard-up\", and \"shadow-hard-down\" instead.\n- New useSorting Added new useSorting hook for easily sorting any list by specified key using natural sort order\n- New URL feature toggles Added URL-based feature toggle handling and description of how to use them\n- Icons Added icons icons rioglyph-bookable-poi rioglyph-car-wash Updated icons rioglyph-truck rioglyph-truck-baseline rioglyph-truck-breakdown rioglyph-truck-unit rioglyph-van rioglyph-van-baseline rioglyph-trailer rioglyph-trailer-baseline rioglyph-trailerposition rioglyph-car rioglyph-car-baseline rioglyph-bus rioglyph-bus-baseline rioglyph-bus-breakdown rioglyph-filling-e-station rioglyph-filling-station rioglyph-euro-note rioglyph-order rioglyph-palette rioglyph-palette-broken rioglyph-parcel rioglyph-parcel-broken rioglyph-empty\n- Design\n- Update Border radius and shadows The default border radius has been increased, and new shadow styles have been introduced, affecting various elements such as buttons, inputs, and panels. These updates collectively enhance the overall design, providing a more modern, refined, and visually appealing look and feel.\n\nNote: the following shadow classes are deprecated: \"shadow-smooth-to-top\", \"shadow-smooth-to-bottom\", \"shadow-hard-to-top\", and \"shadow-hard-to-bottom\". Please use \"shadow-smooth-up\", \"shadow-smooth-down\", \"shadow-hard-up\", and \"shadow-hard-down\" instead.\n\n- Update ButtonDropdown Added forwardRef to ButtonDropdown and pass it to the underlying dropdown toggle button. Fixed ButtonDropdown demo page examples.\n- Fixed Tooltip Wrapped Tag and Switch component in forwardRef so they work with the OverlayTrigger and SimpleTooltip component\n- New Map fullscreen demo Added a fullscreen map demo with rendering some metrics for inspection and customer feedback\n\n- Fixed Fixed dark mode listener when trying to read the theme from the colorScheme cookie\n- Fixed Charts Fixed rendering of chart legends for all charts\n- Update LineChart, AreaChart Extended LineChart and AreaChart components with reference lines\n- Update Select Added \"isLoading\" prop to show a loading spinner inside the Select and Multiselect dropdown\n- Update useKey Extend useKey hook to allow specifying specific keys to listen for\n- New ComposedChart Added new simple ComposedChart component to render a combination of line, area, and bar charts\n- New GroupedItemList Added new GroupedItemList component to render a list grouped by a specific key with the flexibility to customize the group header and the rendered items\n- New LicensePlate Added new LicensePlate component to display license plate information with various customization options\n- Icons Added and updated icons rioglyph-air-pay rioglyph-euro-note rioglyph-language rioglyph-calendar-parking rioglyph-engine\n- Guidelines\n- Update Notifications Extended the writing style guide for notification and \"copy to clipboard\" guidelines\n\n- Fixed TreeOptions Fixed tree options tooltip position\n- Fixed DataTab Fixed DataTab title to avoid being set to the div element and used as native tooltip\n- Fixed SimpleDialog, SplitDialog Fixed typings of SimpleDialog and SplitDialog\n- Fixed Select Fixed italic placeholders for Select and Multiselect\n- Fixed Fixed DateRangePicker type for backwards compatibility\n- Update Sliders Added new \"color\" prop\n- Update Switch Added new \"color\" prop\n- Update Forms Added new focus shadow for form inputs and changed the input border color\n- Update OverlayTrigger, Tooltip, OnboardingTip, Popover The OverlayTrigger and Popover components are no longer based on react-bootstrap. They have been rewritten to remove the dependency and to fix some warnings when used with React 19.\n- New useElapsedTime Added new useElapsedTime hook to get the time since a component was mounted or from a provided starting time\n- New Flexbox Added class \"flex-0\" to flexbox utility classes\n- New Rounded Added class \"rounded-inherit\" to rounded utility classes\n- Colors\n- Update RIO Theme The danger color has been slightly adjusted to better match the other colors. Dark mode colors for danger, warning, and success have also been updated.\n- Update VW Theme Adapt highlight colors to VWAG guidelines\n- Guidelines\n- Update Formatting guide Extracted number and date formatting guidelines into a dedicated formatting guide page. This makes it easier to find and to keep the writing style guide shorter.\n- New Form labels and placeholders Extended the writing style guide for form labels and placeholders\n\n- Fixed MapSettings Fixed rendering of map settings dropdown header items\n- Fixed Checkbox Fixed the rendering position of the checkbox in the grid layout using align-baseline, ensuring it remains stable when checked and unchecked\n\n- Fixed MapSettings Fixed rendering of map settings dropdown when used in unit tests\n- Fixed Tree Fixed Tree scrolling when used as a standalone component without the wrapping AssetTree and when a \"scrollHeight\" is defined\n- Fixed AssetTree Merged the nested elements \".TreeLabel\" and \".TreeLabelName\" into a single element for TreeNode and TreeLeaf. This reduces the number of DOM elements and enhances performance. Note that you may need to update selector paths in integration tests if they reference tree items.\n- Fixed Key Fixed key style for dark mode\n\n- Fixed SmoothScrollbars Added missing root export for SmoothScrollbars component\n- Fixed ErrorState, EmptyState, CustomState Fixed button alignment for mobile screens\n- Fixed Marker Fixed \"list-group-item\" style when using color indicators\n- Fixed Multiselect Fixed filter input padding when Multiselect is used with a leading input addon\n- Fixed useAfterMount Fixed hook useAfterMount functionality\n- Update MapSettings Enhance MapSettings to include item labels. Substitute MapSettingsPanel with a Dropdown when labels are available. Please provide labels for users to improve usability. Note that providing labels will become mandatory in the future.\n- Update Marker Added new mapMarker \"cursor\" props\n- Update ListMenu Added new prop \"trailingInputAddon\" to allow adding additional elements to the filter input\n- Update DeviceUtils Added new device utils helper function to check for Apple Mac OS to be used for showing mac specific keys\n- New Feedback Added new feedback components to simplify requesting user feedback for various use cases\n- New Key Added style for keys by using the \"<kbd>\" HTML tag\n- New Visibility Added new \"visibility-hidden\" class to only target the visibility without setting display to none\n- New Input resize Added new input resize classes\n- Icons Added new Icon rioglyph-layer-pois\n\n- Fixed CalendarStripe Fixed CalendarStripe component when resizing and rendering different amounts of columns\n- Fixed AssetTree Fixed rendering issue in AssetTree component when switching mode between \"fly\" and \"fluid\" externally\n- Fixed Marker Fixed broken Marker component when using it without an icon\n- Fixed Pills Fixed disabled styles for stacked and filled nav-pills\n- Fixed Traton Theme Fixed border radius for Dropdown, MapMarker, Slider, Tag, and Buttons\n- Update Marker Updated marker style for active and inactive markers. Extend marker colors for status colors. Adapt default colors for map for better readability in light and dark mode. Added new prop \"pinging\" to SingleMapMarker to render a pinging animation. Another new prop \"anchorIconName\" was added to render an icon directly on the markers anchor. The map direction icon can now be replaced via the new \"stateIconName\" prop and the default moving state can be changed.\n- Update AssetTree Added new prop \"treeOptionsTooltip\" to Tree component to show a tooltip for the tree options dropdown\n- Update ActionBarItem Updated the \"ActionBarItem.List\" style used for the service info popover. Please make sure to use the \"ActionBarItem.List\" and \"ActionBarItem.ListItem\" components to design the service info for the application header.\n- Update ErrorState, EmptyState, CustomState Added the prop \"bsStyle\" to the state components buttons to define other button styles like a default button. Also, when providing an href value, the button is rendered as a link. The headline size will increase now at the xl breakpoint to have a slightly smaller text size for smaller screens.\n- Update NoData Improved readability by improving text color contrast. Removed text uppercase according to the writing style guide.\n- Update Fieldset Update \"fieldset\" and \"legend\" style for grouping form elements. Added demo to showcase utility of using fieldsets in forms.\n- Icons Icons Update icons optical center to work better within circles like the direction icon for the map marker rioglyph-direction rioglyph-parking rioglyph-antenna rioglyph-heart rioglyph-location-arrow\n- New CSS Grid & Subgrid Added multiple CSS Subgrid utility classes and examples. Extended Grid classes and documentation\n- New Added bg-none and hover-bg-none class\n\n- Typescript Migration\n- Breaking With this version, we have started migrating all components towards Typescript for better typing support and documentation. With this migration, we will remove the internal types.ts file. As it was not intended to be used by any service, please make sure you update your imports accordingly. Check out the How to for more details. Be aware of possible changed component types as well.\n- Breaking Map With this version the HERE map implementation has changed significantly since we have migrated the map internally to the latest HERE APIs. This includes also the map rendering where the default render engine has changed from WebGL to HARP. Raster maps are rendered with the P2D engine. Due to this migration, the map types have a different design now. To make use of the new rendering engine, please add the following HERE dependency to your project. <script type=\"text/javascript\" src=\"https://js.api.here.com/v3/3.1/mapsjs-harp.js\"></script>\n- Removed Fade Removed several deprecated props from the Fade component\n- Removed Removed \"BrowserWarning\" component\n- Removed Removed \"text-muted\" utility class. Use \"text-color-gray\" instead\n- Removed Removed \"GroupSelectionUtil\" getNewGroupedSelected utility function\n- Removed Removed getOffsetTopWholeScreen utility function\n- Breaking BottomSheet / Sidebar Renamed prop \"useBackdrop\" to \"hasBackdrop\" for BottomSheet and Sidebar component\n- Breaking CalendarStripe Deprecated \"render\" prop of \"CalendarStripe\" component in favor of new \"renderDay\" prop\n- Breaking Collapse / ExpanderPanel / ExpanderList Removed callbacks \"onEnter\", \"onEntering\", \"onExit\", and \"onExiting\" for ExpanderPanel and Collapse components. We introduced Framer Motions \"onAnimationStart\" callback instead. The ExpanderPanel header style underwent slight changes. The \"in\" class for the collapse is no longer used. Additionally, the \"react-transition-group\" library has been replaced with \"framer-motion\". The prop \"mountOnEnter\" has been removed from the ExpanderPanel, ExpanderList and Collapse components. Use \"unmountOnExit\" instead to control whether the collapsed content should be removed from the DOM when it is collapsed. The collapse prop \"in\" has been renamed to \"open\" to align with other components.\n- Breaking List Groups and Expanders List groups no longer have a border and a border-radius by default. This has the advantage that they can now be used within other elements without having to overwrite many CSS values. To get the same look as before, you need to set the classes \"border\" and \"rounded\". Expander lists now have props for these two CSS properties, which are set to true by default.\n- Breaking Resizer The Resizer component has been migrated from class component to functional component. With that the updated size value need to be set with a state setter function. Example: const handleResize = (diff: number) => setBoxWidth(oldWidth => oldWidth - diff)\n- Breaking Select / Multiselect Changed roles of Select and Multiselect dropdown menu from \"list\" to \"menu\" and the role of the individual select options from \"presentation\" to \"listitem\" to be aligned with the ButtonDropdown component. Fixed automatic drop direction check to open the dropdown above the toggle when there is not enough space. Removed deprecated size values \"small\" and \"large\" in favor of \"sm\" and \"lg\".\n- Breaking Select The type definition for the Select component has changed. The more impactful change is the type for the \"onChange\" callback which has changed to handle the removal of a selection and therefor \"undefined\" will be returned. onChange={(selectedOption: SelectOption | undefined) => handleChange(selectedOption?.id)} Also important to note that the SelectOption type no longer can be imported via the \"types.ts\" file. Please adapt your import accordingly import Select, { type SelectOption } from \"@rio-cloud/rio-uikit/Select\";\n- Breaking Split SortArrows, SortArrowUp, and SortArrowDown in dedicated components. Change imports to default imports.\n- Removed useResizeObserver The \"Observer Entry\" object may now be null, so it can't reliably be destructured anymore. This doesn't work anymore: const [ref, {borderBoxSize}] = useResizeObserver(); console.log(borderBoxSize); Update your code like so: const [ref, observerEntry] = useResizeObserver(); console.log(observerEntry?.borderBoxSize); Also, an option to specify the HTML element type of the generated ref was added (defaults do div).\n- Fixed Blockquote Change default blockquote padding from percentage to pixel. Please add custom padding classes to change it to your needs.\n- Fixed BottomSheet Fixed maximum width for BottomSheet component when using the \"detach\" prop. Allow defining the detach offset.\n- Fixed Chart Colors Fixed export of shared colors for diagrams\n- Fixed Loading Guidelines Fixed spinner size for buttons to avoid button size changes. Extended loading guidelines for spinner buttons in tables.\n- Fixed Sidebar Automatically switch Sidebar mode from \"fluid\" to \"fly\" to be put above the content when the ApplicationBody's module-content width reaches a defined minimum. This avoids breaking the entire application layout for fluid Sidebars on smaller screens or when resizing Sidebars.\n- Fixed SimpleTooltip Renamed SimpleTooltip prop \"tooltipWidth\" to \"width\" to align with underlying Tooltip component\n- Fixed Spinner Outlined spinner buttons\n- Fixed Spinner in Buttons Fixed style for spinner in button block\n- Fixed Tags Fixed 1px offset of tag icons\n- Fixed Tooltip Fixed tooltip arrow position on small elements\n- Update AutoSuggest Migrated AutoSuggest component to Typescript and cleaned up its props\n- Update AssetTree Added new TreeSummaryRow component to allow for more tree item type filter like fuel type. With this we also added a new \"supType\" property to the TreeItem to filter for it and to show a paired icon.\n- Update Button Added \"iconName\" prop to Button component to reduce boilerplate code when using icons. Use native HTML \"disabled\" prop instead of separate class.\n- Update ClearableInput Added an input mask to the ClearableInput to allow custom input formats to avoid user input mistakes\n- Update Dialog Added focus trap to Dialog component. Deprecate \"onHide\" callback in favor of \"onClose\". Extended the dialog for compound components to allow wrapping title, body, and footer with forms. Replaced the Dialog animation with framer-motion. As a result, the class \"modal-ender-done\" has been removed. Added new \"xs\" dialog variant\n- Update ExpanderPanel Added new \"onOpen\" and \"onClose\" callbacks to ExpanderList items\n- Update ExpanderPanel / Combined Tables in ExpandablePanel Added \"iconClassName\" prop to ExpanderPanel component to to allow for 100% width in the panel header. This comes in handy when using a table inside the header and the body that shall have the same column width. With that we also added a design demo to showcase the usage of the tow tables inside the expander panel.\n- Update Forms Added horizontal form demo\n- Update LoadMoreButton Extended LoadMoreButton component with props \"isInteractive\" and \"progressBarStyle\" to customize behavior and style\n- Update Map Settings / Map Layer Migrated the Here Map traffic layers to use the new APIs when using the WebGL mode. For raster maps tiles, we still have to use the deprecated APIs as there is no alternative for now. We also fixed the map translations so other countries are also properly translated and don't show their city names in their native language.\n- Update Multiselect Added prop \"multiline\" to allow wrapping selected item around within the multiline toggle. The style of the selected items has changed to be more muted so it better integrates with other form elements.\n- Update NumberInput / NumberControl Migrated NumberInput and NumberControl to Typescript and updated their typings. Added check to avoid entering letters or special characters into the input field for Firefox and Safari. Added prop for warning and error messages. Added new prop \"noDefault\" to keep the input empty instead of using the default value of 0. Fixed the NumberControl spinner buttons when holding down the mouse button to increase and decrease the value and leaving the input field.\n- Update TimePicker Added prop for rendering warning and error messages\n- Update Onboarding Added props \"previousButton\" and \"nextButton\" to Onboarding component to enable a better onboarding click flow\n- Update Print CSS Notifications are now hidden while printing the page when using our print.css\n- Update Select Added prop \"inputAddon\" to Select component to allow for adding icons as addon to the toggle button Enhanced the background color of selected options for the Select and Multiselect component\n- Update Sidebar Added prop \"hasSmoothScrollbar\" to Sidebar component to enable the built-in scrollbars instead of using the native browser scrollbars\n- Update Slider or RangeSlider Added \"valueLabelUnit\" prop to Slider and RangeSlider to use a label for the slider values\n- Update SplitDialog Added new \"leftContentClassName\" and \"rightContentClassName\" to the split dialog\n- Update Buttons Add gray-lightest hover background color to muted, link, and action buttons\n- Update Timeline Added new classes \"timeline-date-thin\" and \"timeline-date-dashed\" as well as color classes to change the timeline width and style. Updated Timeline examples to showcase variations as it's built with atomic classes.\n- New EditableContent Added new EditableContent component that allows for inline text editing\n- New DeviceUtils Added new \"isRetinaDevice\" to deviceUtils\n- New Divider Added new Divider component for horizontal and vertical dividing lines\n- New Forms New form \"form-group-not-editable\" style toggling editable forms\n- New FrameDialog Added new FrameDialog component that can be used to open a dialog from a widget iframe in the parent window\n- New Grid stack Added new grid stacking classes \"grid-stack\" and \"grid-stack-item\" as an alternative to position absolute\n- New HTML Emails New guidelines demo for HTML emails created with react email\n- Icons Icons rioglyph-drag-n-drop rioglyph-robot rioglyph-pin-range rioglyph-pin rioglyph-calendar-plus rioglyph-exclamation rioglyph-info rioglyph-question rioglyph-fuel-diesel rioglyph-fuel-electric rioglyph-fuel-hydrogen rioglyph-fuel-gas rioglyph-archive rioglyph-map rioglyph-map-location rioglyph-book rioglyph-face-frown rioglyph-face-neutral rioglyph-face-smile rioglyph-paper-clip rioglyph-share-nodes rioglyph-handshake rioglyph-stack rioglyph-building rioglyph-file-signature rioglyph-signature rioglyph-location-arrow rioglyph-wallet rioglyph-user-group rioglyph-window rioglyph-inbox rioglyph-inbox-stack rioglyph-inbox-in rioglyph-inbox-out rioglyph-id rioglyph-ruler rioglyph-cards-add rioglyph-truck-unit rioglyph-user-add rioglyph-user-ok rioglyph-user-remove rioglyph-pencil-square rioglyph-megaphone rioglyph-code-brackets rioglyph-code-braces rioglyph-hash rioglyph-server-stack rioglyph-shopping-bag rioglyph-search-list rioglyph-tasks rioglyph-fingerprint rioglyph-flag rioglyph-fire rioglyph-puzzle\n- New Line Height Added new \"line-height-150rel\" class\n- New Page Added new Page component for displaying documents\n- New SaveableInput Added new SaveableInput component\n- New TimedBottomSheet Added new TimedBottomSheet component to control a bottom sheets visibility with timers\n- New SmoothScrollbars Added a new SmoothScrollbars component\n- New Text Wrapping Added new \"text-wrap-balance\" class\n- New useFocusTrap Added new useFocusTrap hook that can be used for custom overlays\n- New useHover Added new useHover hook that can be used for style changes on hover for certain elements that can not be influenced by hover utility classes alone\n- New usePostMessage Added new usePostMessage hook that can be used to exchange messages between an iframe and the parent window\n- Loading CSS\n- CSS With this version, the UIKIT adds its CSS link into the header automatically if it is not present. This should help to ease the update of the UIKIT library and the corresponding CSS. This means, you can remove the link from your index.html and only update the UIKIT dependency in yourpackage.json. See Automatic loading of UIKIT CSS Files\n- Color Combinations\n- Guideline For accessibility purposes, aim for a good color contrast between the foreground color (e.g. text, links, etc.) and the background color, we have added a new \"Color Combinations\" section. See Color Combinations\n- Writing style guide\n- Guideline We have introduced some general writing guidelines to enhance consistency in UX writing and to maintain a unified voice. See Writing style guide\n\n```html\n<script type=\"text/javascript\" src=\"https://js.api.here.com/v3/3.1/mapsjs-harp.js\"></script>\n```\n\n```jsx\nconst handleResize = (diff: number) => setBoxWidth(oldWidth => oldWidth - diff)\n```\n\n```jsx\nonChange={(selectedOption: SelectOption | undefined) => handleChange(selectedOption?.id)}\n```\n\n```jsx\nimport Select, { type SelectOption } from \"@rio-cloud/rio-uikit/Select\";\n```\n\n```jsx\nconst [ref, {borderBoxSize}] = useResizeObserver();\n\nconsole.log(borderBoxSize);\n```\n\n```jsx\nconst [ref, observerEntry] = useResizeObserver();\n\nconsole.log(observerEntry?.borderBoxSize);\n```\n\n- Added focus trap to Dialog component. Deprecate \"onHide\" callback in favor of \"onClose\". Extended the dialog for compound components to allow wrapping title, body, and footer with forms. Replaced the Dialog animation with framer-motion. As a result, the class \"modal-ender-done\" has been removed.\n- Added new \"xs\" dialog variant\n\n- Added prop \"inputAddon\" to Select component to allow for adding icons as addon to the toggle button\n- Enhanced the background color of selected options for the Select and Multiselect component\n\n- Icons Deleted Icons:fax\n- Fixed Fixed alignment of collapsed header menu items. See ApplicationHeader\n- Fixed Fixed fade in animation when the inital animation is set to false. See Fade\n- Fixed Fixed close animation for BottomSheet when hight is set to window height. See BottomSheet\n- Fixed Fixed AspectRatioPlaceholder declaration file name.\n- Fixed Fixed text ellipsis of selects. See Selects\n- Update Refactored DataTabs props. See DataTabs Merged hoverTextColor and hoverBgColor props to tabHoverClassName Merged activeTextColor and activeBgColor props to tabActiveClassName added arrowClassName prop added tabsWrapperClassName prop added tabClassName prop added new className prop to DataTab child component\n- Update Added new \"fullheight\" Dialog Size and renamed \"full\" to \"fullwidth\". See Dialog\n- Update MapSettings panels are now closing on click outside. See MapSettings\n- Update Extended the SimpleTooltip component to pass the \"delay\" and \"popperConfig\" props to the underlying component. See SimpleTooltip\n- Update Remove left padding from ReleaseNotes component to better work with images. Please add padding-left-15 manually, in case you want to work with lists. See ReleaseNotes\n- New Added new CalendarStripe component. See CalendarStripe\n- New Added new hook \"usePrevious\" to access state values of previous component render cycle. See usePrevious\n- Icons Added or updated icons: rioglyph-card-reader rioglyph-card-hotel rioglyph-api rioglyph-currency-euro rioglyph-thumbs-up rioglyph-thumbs-down rioglyph-hand-up rioglyph-hand-down rioglyph-hand-left rioglyph-hand-right See Icons\n\n- Merged hoverTextColor and hoverBgColor props to tabHoverClassName\n- Merged activeTextColor and activeBgColor props to tabActiveClassName\n\n- added arrowClassName prop\n- added tabsWrapperClassName prop\n- added tabClassName prop\n\n- added new className prop to DataTab child component",
+      "examples": []
+    }
+  ],
+  "see_also": []
+}

package/data/pages/Getting-started/start/goodtoknow.json ADDED Viewed

@@ -0,0 +1,32 @@
+{
+  "metadata": {
+    "captured_at": "2025-11-21T12:06:59.573Z",
+    "source": "https://uikit.developers.rio.cloud/#start/goodtoknow",
+    "category": "Getting started",
+    "section": "Guidelines",
+    "slug": "start/goodtoknow",
+    "version": "v1.13.2",
+    "hash_algorithm": "sha256",
+    "hash": "a0b12f6d84cc09da6413d936773d23257bb45551e49f58b112e5359927236e46"
+  },
+  "title": "Good to know",
+  "lead": null,
+  "content": [
+    {
+      "heading": "Good to know",
+      "body": "",
+      "examples": []
+    },
+    {
+      "heading": "IntelliSense for CSS class names in HTML",
+      "body": "",
+      "examples": []
+    },
+    {
+      "heading": "CSS Hyphens",
+      "body": "> Note: Hyphens is language-sensitive. Its ability to find break opportunities depends on the language, defined in the lang attribute of a html element. Not all languages are supported yet, and support depends on the specific browser.",
+      "examples": []
+    }
+  ],
+  "see_also": []
+}

package/data/pages/Getting-started/start/guidelines/color-combinations.json ADDED Viewed

@@ -0,0 +1,58 @@
+{
+  "metadata": {
+    "captured_at": "2025-11-21T12:07:00.051Z",
+    "source": "https://uikit.developers.rio.cloud/#start/guidelines/color-combinations",
+    "category": "Getting started",
+    "section": "Guidelines",
+    "slug": "start/guidelines/color-combinations",
+    "version": "v1.13.2",
+    "hash_algorithm": "sha256",
+    "hash": "0f14b17e083328f24971ea15f699199c1fca10fe5dd71ed303166af8f4910c50"
+  },
+  "title": "Color combinations",
+  "lead": "For accessibility purposes, aim for a good color contrast between the foreground color (e.g. text, links, etc.) and the background color. This contrast ensures people with moderately low vision can tell the colors apart and see your content.",
+  "content": [
+    {
+      "heading": "Color combinations",
+      "body": "",
+      "examples": [
+        {
+          "caption": "Example 1",
+          "rendered_html": "<div class=\"playground-content  bg-white padding-20 padding-bottom-25 rounded-top\" style=\"width: 100%;\"><div class=\"display-grid gap-20\"><div><div class=\"lead \"><div class=\"display-flex justify-content-between\"><div>White text on brand backgrounds</div></div><hr class=\"margin-top-10 border-color-light\"></div><div class=\"display-grid column-gap-25 gap-15 line-height-125rel grid-cols-1 grid-cols-4-sm\"><div class=\"bg-primary position-relative rounded padding-y-20 padding-x-15 text-center text-size-14 display-grid place-items-center border text-color-white contrast-check contrast-good\" data-contrast=\"2.5\"><div class=\"text-color-white\"><b>white</b> text on bg-<b>primary</b></div><div class=\"\n            contrast-indicator\n            position-absolute left-0 top-50pct translate-x-50pct-y-50pct padding-5\n            rounded-circle display-grid place-items-center text-color-white \n            border border-color-white\n        \"><span class=\"rioglyph rioglyph-ok\"></span><span class=\"rioglyph rioglyph-remove\"></span></div></div><div class=\"bg-secondary position-relative rounded padding-y-20 padding-x-15 text-center text-size-14 display-grid place-items-center border text-color-white contrast-check contrast-good\" data-contrast=\"5.73\"><div class=\"text-color-white\"><b>white</b> text on bg-<b>secondary</b></div><div class=\"\n            contrast-indicator\n            position-absolute left-0 top-50pct translate-x-50pct-y-50pct padding-5\n            rounded-circle display-grid place-items-center text-color-white \n            border border-color-white\n        \"><span class=\"rioglyph rioglyph-ok\"></span><span class=\"rioglyph rioglyph-remove\"></span></div></div></div></div><div><div class=\"lead \"><div class=\"display-flex justify-content-between\"><div>Black text on highlight backgrounds</div></div><hr class=\"margin-top-10 border-color-light\"></div><div class=\"display-grid column-gap-25 gap-15 line-height-125rel grid-cols-1 grid-cols-4-sm\"><div class=\"bg-primary position-relative rounded padding-y-20 padding-x-15 text-center text-size-14 display-grid place-items-center border text-color-black contrast-check contrast-bad\" data-contrast=\"8.42\"><div class=\"text-color-black\"><b>black</b> text on bg-<b>primary</b></div><div class=\"\n            contrast-indicator\n            position-absolute left-0 top-50pct translate-x-50pct-y-50pct padding-5\n            rounded-circle display-grid place-items-center text-color-white \n            border border-color-white\n        \"><span class=\"rioglyph rioglyph-ok\"></span><span class=\"rioglyph rioglyph-remove\"></span></div></div><div class=\"bg-secondary position-relative rounded padding-y-20 padding-x-15 text-center text-size-14 display-grid place-items-center border text-color-black contrast-check contrast-bad\" data-contrast=\"3.66\"><div class=\"text-color-black\"><b>black</b> text on bg-<b>secondary</b></div><div class=\"\n            contrast-indicator\n            position-absolute left-0 top-50pct translate-x-50pct-y-50pct padding-5\n            rounded-circle display-grid place-items-center text-color-white \n            border border-color-white\n        \"><span class=\"rioglyph rioglyph-ok\"></span><span class=\"rioglyph rioglyph-remove\"></span></div></div></div></div></div></div>",
+          "tabs": []
+        },
+        {
+          "caption": "Example 2",
+          "rendered_html": "<div class=\"playground-content  bg-white padding-20 padding-bottom-25 rounded-top\" style=\"width: 100%;\"><div class=\"display-grid gap-20\"><div><div class=\"lead \"><div class=\"display-flex justify-content-between\"><div>White text on gray backgrounds</div></div><hr class=\"margin-top-10 border-color-light\"></div><div class=\"display-grid column-gap-25 gap-15 line-height-125rel grid-cols-1 grid-cols-4-sm\"><div class=\"bg-decent position-relative rounded padding-y-20 padding-x-15 text-center text-size-14 display-grid place-items-center border text-color-white contrast-check contrast-bad\" data-contrast=\"1.03\"><div class=\"text-color-white\"><b>white</b> text on bg-<b>decent</b></div><div class=\"\n            contrast-indicator\n            position-absolute left-0 top-50pct translate-x-50pct-y-50pct padding-5\n            rounded-circle display-grid place-items-center text-color-white \n            border border-color-white\n        \"><span class=\"rioglyph rioglyph-ok\"></span><span class=\"rioglyph rioglyph-remove\"></span></div></div><div class=\"bg-lightest position-relative rounded padding-y-20 padding-x-15 text-center text-size-14 display-grid place-items-center border text-color-white contrast-check contrast-bad\" data-contrast=\"1.07\"><div class=\"text-color-white\"><b>white</b> text on bg-<b>lightest</b></div><div class=\"\n            contrast-indicator\n            position-absolute left-0 top-50pct translate-x-50pct-y-50pct padding-5\n            rounded-circle display-grid place-items-center text-color-white \n            border border-color-white\n        \"><span class=\"rioglyph rioglyph-ok\"></span><span class=\"rioglyph rioglyph-remove\"></span></div></div><div class=\"bg-lighter position-relative rounded padding-y-20 padding-x-15 text-center text-size-14 display-grid place-items-center border text-color-white contrast-check contrast-bad\" data-contrast=\"1.2\"><div class=\"text-color-white\"><b>white</b> text on bg-<b>lighter</b></div><div class=\"\n            contrast-indicator\n            position-absolute left-0 top-50pct translate-x-50pct-y-50pct padding-5\n            rounded-circle display-grid place-items-center text-color-white \n            border border-color-white\n        \"><span class=\"rioglyph rioglyph-ok\"></span><span class=\"rioglyph rioglyph-remove\"></span></div></div><div class=\"bg-light position-relative rounded padding-y-20 padding-x-15 text-center text-size-14 display-grid place-items-center border text-color-white contrast-check contrast-bad\" data-contrast=\"1.44\"><div class=\"text-color-white\"><b>white</b> text on bg-<b>light</b></div><div class=\"\n            contrast-indicator\n            position-absolute left-0 top-50pct translate-x-50pct-y-50pct padding-5\n            rounded-circle display-grid place-items-center text-color-white \n            border border-color-white\n        \"><span class=\"rioglyph rioglyph-ok\"></span><span class=\"rioglyph rioglyph-remove\"></span></div></div><div class=\"bg-gray position-relative rounded padding-y-20 padding-x-15 text-center text-size-14 display-grid place-items-center border text-color-white contrast-check contrast-bad\" data-contrast=\"2.21\"><div class=\"text-color-white\"><b>white</b> text on bg-<b>gray</b></div><div class=\"\n            contrast-indicator\n            position-absolute left-0 top-50pct translate-x-50pct-y-50pct padding-5\n            rounded-circle display-grid place-items-center text-color-white \n            border border-color-white\n        \"><span class=\"rioglyph rioglyph-ok\"></span><span class=\"rioglyph rioglyph-remove\"></span></div></div><div class=\"bg-dark position-relative rounded padding-y-20 padding-x-15 text-center text-size-14 display-grid place-items-center border text-color-white contrast-check contrast-good\" data-contrast=\"4.41\"><div class=\"text-color-white\"><b>white</b> text on bg-<b>dark</b></div><div class=\"\n            contrast-indicator\n            position-absolute left-0 top-50pct translate-x-50pct-y-50pct padding-5\n            rounded-circle display-grid place-items-center text-color-white \n            border border-color-white\n        \"><span class=\"rioglyph rioglyph-ok\"></span><span class=\"rioglyph rioglyph-remove\"></span></div></div><div class=\"bg-darker position-relative rounded padding-y-20 padding-x-15 text-center text-size-14 display-grid place-items-center border text-color-white contrast-check contrast-good\" data-contrast=\"7.41\"><div class=\"text-color-white\"><b>white</b> text on bg-<b>darker</b></div><div class=\"\n            contrast-indicator\n            position-absolute left-0 top-50pct translate-x-50pct-y-50pct padding-5\n            rounded-circle display-grid place-items-center text-color-white \n            border border-color-white\n        \"><span class=\"rioglyph rioglyph-ok\"></span><span class=\"rioglyph rioglyph-remove\"></span></div></div><div class=\"bg-darkest position-relative rounded padding-y-20 padding-x-15 text-center text-size-14 display-grid place-items-center border text-color-white contrast-check contrast-good\" data-contrast=\"12.22\"><div class=\"text-color-white\"><b>white</b> text on bg-<b>darkest</b></div><div class=\"\n            contrast-indicator\n            position-absolute left-0 top-50pct translate-x-50pct-y-50pct padding-5\n            rounded-circle display-grid place-items-center text-color-white \n            border border-color-white\n        \"><span class=\"rioglyph rioglyph-ok\"></span><span class=\"rioglyph rioglyph-remove\"></span></div></div></div></div><div><div class=\"lead \"><div class=\"display-flex justify-content-between\"><div>Black text on gray backgrounds</div></div><hr class=\"margin-top-10 border-color-light\"></div><div class=\"display-grid column-gap-25 gap-15 line-height-125rel grid-cols-1 grid-cols-4-sm\"><div class=\"bg-decent position-relative rounded padding-y-20 padding-x-15 text-center text-size-14 display-grid place-items-center border text-color-black contrast-check contrast-good\" data-contrast=\"20.48\"><div class=\"text-color-black\"><b>black</b> text on bg-<b>decent</b></div><div class=\"\n            contrast-indicator\n            position-absolute left-0 top-50pct translate-x-50pct-y-50pct padding-5\n            rounded-circle display-grid place-items-center text-color-white \n            border border-color-white\n        \"><span class=\"rioglyph rioglyph-ok\"></span><span class=\"rioglyph rioglyph-remove\"></span></div></div><div class=\"bg-lightest position-relative rounded padding-y-20 padding-x-15 text-center text-size-14 display-grid place-items-center border text-color-black contrast-check contrast-good\" data-contrast=\"19.71\"><div class=\"text-color-black\"><b>black</b> text on bg-<b>lightest</b></div><div class=\"\n            contrast-indicator\n            position-absolute left-0 top-50pct translate-x-50pct-y-50pct padding-5\n            rounded-circle display-grid place-items-center text-color-white \n            border border-color-white\n        \"><span class=\"rioglyph rioglyph-ok\"></span><span class=\"rioglyph rioglyph-remove\"></span></div></div><div class=\"bg-lighter position-relative rounded padding-y-20 padding-x-15 text-center text-size-14 display-grid place-items-center border text-color-black contrast-check contrast-good\" data-contrast=\"17.47\"><div class=\"text-color-black\"><b>black</b> text on bg-<b>lighter</b></div><div class=\"\n            contrast-indicator\n            position-absolute left-0 top-50pct translate-x-50pct-y-50pct padding-5\n            rounded-circle display-grid place-items-center text-color-white \n            border border-color-white\n        \"><span class=\"rioglyph rioglyph-ok\"></span><span class=\"rioglyph rioglyph-remove\"></span></div></div><div class=\"bg-light position-relative rounded padding-y-20 padding-x-15 text-center text-size-14 display-grid place-items-center border text-color-black contrast-check contrast-good\" data-contrast=\"14.56\"><div class=\"text-color-black\"><b>black</b> text on bg-<b>light</b></div><div class=\"\n            contrast-indicator\n            position-absolute left-0 top-50pct translate-x-50pct-y-50pct padding-5\n            rounded-circle display-grid place-items-center text-color-white \n            border border-color-white\n        \"><span class=\"rioglyph rioglyph-ok\"></span><span class=\"rioglyph rioglyph-remove\"></span></div></div><div class=\"bg-gray position-relative rounded padding-y-20 padding-x-15 text-center text-size-14 display-grid place-items-center border text-color-black contrast-check contrast-good\" data-contrast=\"9.49\"><div class=\"text-color-black\"><b>black</b> text on bg-<b>gray</b></div><div class=\"\n            contrast-indicator\n            position-absolute left-0 top-50pct translate-x-50pct-y-50pct padding-5\n            rounded-circle display-grid place-items-center text-color-white \n            border border-color-white\n        \"><span class=\"rioglyph rioglyph-ok\"></span><span class=\"rioglyph rioglyph-remove\"></span></div></div><div class=\"bg-dark position-relative rounded padding-y-20 padding-x-15 text-center text-size-14 display-grid place-items-center border text-color-black contrast-check contrast-bad\" data-contrast=\"4.76\"><div class=\"text-color-black\"><b>black</b> text on bg-<b>dark</b></div><div class=\"\n            contrast-indicator\n            position-absolute left-0 top-50pct translate-x-50pct-y-50pct padding-5\n            rounded-circle display-grid place-items-center text-color-white \n            border border-color-white\n        \"><span class=\"rioglyph rioglyph-ok\"></span><span class=\"rioglyph rioglyph-remove\"></span></div></div><div class=\"bg-darker position-relative rounded padding-y-20 padding-x-15 text-center text-size-14 display-grid place-items-center border text-color-black contrast-check contrast-bad\" data-contrast=\"2.83\"><div class=\"text-color-black\"><b>black</b> text on bg-<b>darker</b></div><div class=\"\n            contrast-indicator\n            position-absolute left-0 top-50pct translate-x-50pct-y-50pct padding-5\n            rounded-circle display-grid place-items-center text-color-white \n            border border-color-white\n        \"><span class=\"rioglyph rioglyph-ok\"></span><span class=\"rioglyph rioglyph-remove\"></span></div></div><div class=\"bg-darkest position-relative rounded padding-y-20 padding-x-15 text-center text-size-14 display-grid place-items-center border text-color-black contrast-check contrast-bad\" data-contrast=\"1.72\"><div class=\"text-color-black\"><b>black</b> text on bg-<b>darkest</b></div><div class=\"\n            contrast-indicator\n            position-absolute left-0 top-50pct translate-x-50pct-y-50pct padding-5\n            rounded-circle display-grid place-items-center text-color-white \n            border border-color-white\n        \"><span class=\"rioglyph rioglyph-ok\"></span><span class=\"rioglyph rioglyph-remove\"></span></div></div></div></div></div></div>",
+          "tabs": []
+        },
+        {
+          "caption": "Example 3",
+          "rendered_html": "<div class=\"playground-content  bg-white padding-20 padding-bottom-25 rounded-top\" style=\"width: 100%;\"><div class=\"display-grid gap-20\"><div><div class=\"lead \"><div class=\"display-flex justify-content-between\"><div>White text on status backgrounds</div></div><hr class=\"margin-top-10 border-color-light\"></div><div class=\"display-grid column-gap-25 gap-15 line-height-125rel grid-cols-1 grid-cols-4-sm\"><div class=\"bg-info position-relative rounded padding-y-20 padding-x-15 text-center text-size-14 display-grid place-items-center border text-color-white contrast-check contrast-good\" data-contrast=\"4.25\"><div class=\"text-color-white\"><b>white</b> text on bg-<b>info</b></div><div class=\"\n            contrast-indicator\n            position-absolute left-0 top-50pct translate-x-50pct-y-50pct padding-5\n            rounded-circle display-grid place-items-center text-color-white \n            border border-color-white\n        \"><span class=\"rioglyph rioglyph-ok\"></span><span class=\"rioglyph rioglyph-remove\"></span></div></div><div class=\"bg-success position-relative rounded padding-y-20 padding-x-15 text-center text-size-14 display-grid place-items-center border text-color-white contrast-check contrast-good\" data-contrast=\"2.48\"><div class=\"text-color-white\"><b>white</b> text on bg-<b>success</b></div><div class=\"\n            contrast-indicator\n            position-absolute left-0 top-50pct translate-x-50pct-y-50pct padding-5\n            rounded-circle display-grid place-items-center text-color-white \n            border border-color-white\n        \"><span class=\"rioglyph rioglyph-ok\"></span><span class=\"rioglyph rioglyph-remove\"></span></div></div><div class=\"bg-warning position-relative rounded padding-y-20 padding-x-15 text-center text-size-14 display-grid place-items-center border text-color-white contrast-check contrast-good\" data-contrast=\"2.29\"><div class=\"text-color-white\"><b>white</b> text on bg-<b>warning</b></div><div class=\"\n            contrast-indicator\n            position-absolute left-0 top-50pct translate-x-50pct-y-50pct padding-5\n            rounded-circle display-grid place-items-center text-color-white \n            border border-color-white\n        \"><span class=\"rioglyph rioglyph-ok\"></span><span class=\"rioglyph rioglyph-remove\"></span></div></div><div class=\"bg-danger position-relative rounded padding-y-20 padding-x-15 text-center text-size-14 display-grid place-items-center border text-color-white contrast-check contrast-good\" data-contrast=\"4.57\"><div class=\"text-color-white\"><b>white</b> text on bg-<b>danger</b></div><div class=\"\n            contrast-indicator\n            position-absolute left-0 top-50pct translate-x-50pct-y-50pct padding-5\n            rounded-circle display-grid place-items-center text-color-white \n            border border-color-white\n        \"><span class=\"rioglyph rioglyph-ok\"></span><span class=\"rioglyph rioglyph-remove\"></span></div></div></div></div><div><div class=\"lead \"><div class=\"display-flex justify-content-between\"><div>Black text on status backgrounds</div></div><hr class=\"margin-top-10 border-color-light\"></div><div class=\"display-grid column-gap-25 gap-15 line-height-125rel grid-cols-1 grid-cols-4-sm\"><div class=\"bg-info position-relative rounded padding-y-20 padding-x-15 text-center text-size-14 display-grid place-items-center border text-color-black contrast-check contrast-bad\" data-contrast=\"4.94\"><div class=\"text-color-black\"><b>black</b> text on bg-<b>info</b></div><div class=\"\n            contrast-indicator\n            position-absolute left-0 top-50pct translate-x-50pct-y-50pct padding-5\n            rounded-circle display-grid place-items-center text-color-white \n            border border-color-white\n        \"><span class=\"rioglyph rioglyph-ok\"></span><span class=\"rioglyph rioglyph-remove\"></span></div></div><div class=\"bg-success position-relative rounded padding-y-20 padding-x-15 text-center text-size-14 display-grid place-items-center border text-color-black contrast-check contrast-good\" data-contrast=\"8.47\"><div class=\"text-color-black\"><b>black</b> text on bg-<b>success</b></div><div class=\"\n            contrast-indicator\n            position-absolute left-0 top-50pct translate-x-50pct-y-50pct padding-5\n            rounded-circle display-grid place-items-center text-color-white \n            border border-color-white\n        \"><span class=\"rioglyph rioglyph-ok\"></span><span class=\"rioglyph rioglyph-remove\"></span></div></div><div class=\"bg-warning position-relative rounded padding-y-20 padding-x-15 text-center text-size-14 display-grid place-items-center border text-color-black contrast-check contrast-good\" data-contrast=\"9.19\"><div class=\"text-color-black\"><b>black</b> text on bg-<b>warning</b></div><div class=\"\n            contrast-indicator\n            position-absolute left-0 top-50pct translate-x-50pct-y-50pct padding-5\n            rounded-circle display-grid place-items-center text-color-white \n            border border-color-white\n        \"><span class=\"rioglyph rioglyph-ok\"></span><span class=\"rioglyph rioglyph-remove\"></span></div></div><div class=\"bg-danger position-relative rounded padding-y-20 padding-x-15 text-center text-size-14 display-grid place-items-center border text-color-black contrast-check contrast-good\" data-contrast=\"4.59\"><div class=\"text-color-black\"><b>black</b> text on bg-<b>danger</b></div><div class=\"\n            contrast-indicator\n            position-absolute left-0 top-50pct translate-x-50pct-y-50pct padding-5\n            rounded-circle display-grid place-items-center text-color-white \n            border border-color-white\n        \"><span class=\"rioglyph rioglyph-ok\"></span><span class=\"rioglyph rioglyph-remove\"></span></div></div></div></div></div></div>",
+          "tabs": []
+        },
+        {
+          "caption": "Example 4",
+          "rendered_html": "<div class=\"playground-content  bg-white padding-20 padding-bottom-25 rounded-top\" style=\"width: 100%;\"><div class=\"display-grid gap-20\"><div><div class=\"lead \"><div class=\"display-flex justify-content-between\"><div>White text on driving status backgrounds</div></div><hr class=\"margin-top-10 border-color-light\"></div><div class=\"display-grid column-gap-25 gap-15 line-height-125rel grid-cols-1 grid-cols-4-sm\"><div class=\"bg-status-available position-relative rounded padding-y-20 padding-x-15 text-center text-size-14 display-grid place-items-center border text-color-white contrast-check contrast-good\" data-contrast=\"3.47\"><div class=\"text-color-white\"><b>white</b> text on bg-<b>status-available</b></div><div class=\"\n            contrast-indicator\n            position-absolute left-0 top-50pct translate-x-50pct-y-50pct padding-5\n            rounded-circle display-grid place-items-center text-color-white \n            border border-color-white\n        \"><span class=\"rioglyph rioglyph-ok\"></span><span class=\"rioglyph rioglyph-remove\"></span></div></div><div class=\"bg-status-driving position-relative rounded padding-y-20 padding-x-15 text-center text-size-14 display-grid place-items-center border text-color-white contrast-check contrast-good\" data-contrast=\"3.65\"><div class=\"text-color-white\"><b>white</b> text on bg-<b>status-driving</b></div><div class=\"\n            contrast-indicator\n            position-absolute left-0 top-50pct translate-x-50pct-y-50pct padding-5\n            rounded-circle display-grid place-items-center text-color-white \n            border border-color-white\n        \"><span class=\"rioglyph rioglyph-ok\"></span><span class=\"rioglyph rioglyph-remove\"></span></div></div><div class=\"bg-status-resting position-relative rounded padding-y-20 padding-x-15 text-center text-size-14 display-grid place-items-center border text-color-white contrast-check contrast-good\" data-contrast=\"5.43\"><div class=\"text-color-white\"><b>white</b> text on bg-<b>status-resting</b></div><div class=\"\n            contrast-indicator\n            position-absolute left-0 top-50pct translate-x-50pct-y-50pct padding-5\n            rounded-circle display-grid place-items-center text-color-white \n            border border-color-white\n        \"><span class=\"rioglyph rioglyph-ok\"></span><span class=\"rioglyph rioglyph-remove\"></span></div></div><div class=\"bg-status-working position-relative rounded padding-y-20 padding-x-15 text-center text-size-14 display-grid place-items-center border text-color-white contrast-check contrast-good\" data-contrast=\"5.9\"><div class=\"text-color-white\"><b>white</b> text on bg-<b>status-working</b></div><div class=\"\n            contrast-indicator\n            position-absolute left-0 top-50pct translate-x-50pct-y-50pct padding-5\n            rounded-circle display-grid place-items-center text-color-white \n            border border-color-white\n        \"><span class=\"rioglyph rioglyph-ok\"></span><span class=\"rioglyph rioglyph-remove\"></span></div></div></div></div><div><div class=\"lead \"><div class=\"display-flex justify-content-between\"><div>Black text on driving status backgrounds</div></div><hr class=\"margin-top-10 border-color-light\"></div><div class=\"display-grid column-gap-25 gap-15 line-height-125rel grid-cols-1 grid-cols-4-sm\"><div class=\"bg-status-available position-relative rounded padding-y-20 padding-x-15 text-center text-size-14 display-grid place-items-center border text-color-black contrast-check contrast-bad\" data-contrast=\"6.06\"><div class=\"text-color-black\"><b>black</b> text on bg-<b>status-available</b></div><div class=\"\n            contrast-indicator\n            position-absolute left-0 top-50pct translate-x-50pct-y-50pct padding-5\n            rounded-circle display-grid place-items-center text-color-white \n            border border-color-white\n        \"><span class=\"rioglyph rioglyph-ok\"></span><span class=\"rioglyph rioglyph-remove\"></span></div></div><div class=\"bg-status-driving position-relative rounded padding-y-20 padding-x-15 text-center text-size-14 display-grid place-items-center border text-color-black contrast-check contrast-bad\" data-contrast=\"5.76\"><div class=\"text-color-black\"><b>black</b> text on bg-<b>status-driving</b></div><div class=\"\n            contrast-indicator\n            position-absolute left-0 top-50pct translate-x-50pct-y-50pct padding-5\n            rounded-circle display-grid place-items-center text-color-white \n            border border-color-white\n        \"><span class=\"rioglyph rioglyph-ok\"></span><span class=\"rioglyph rioglyph-remove\"></span></div></div><div class=\"bg-status-resting position-relative rounded padding-y-20 padding-x-15 text-center text-size-14 display-grid place-items-center border text-color-black contrast-check contrast-bad\" data-contrast=\"3.87\"><div class=\"text-color-black\"><b>black</b> text on bg-<b>status-resting</b></div><div class=\"\n            contrast-indicator\n            position-absolute left-0 top-50pct translate-x-50pct-y-50pct padding-5\n            rounded-circle display-grid place-items-center text-color-white \n            border border-color-white\n        \"><span class=\"rioglyph rioglyph-ok\"></span><span class=\"rioglyph rioglyph-remove\"></span></div></div><div class=\"bg-status-working position-relative rounded padding-y-20 padding-x-15 text-center text-size-14 display-grid place-items-center border text-color-black contrast-check contrast-bad\" data-contrast=\"3.56\"><div class=\"text-color-black\"><b>black</b> text on bg-<b>status-working</b></div><div class=\"\n            contrast-indicator\n            position-absolute left-0 top-50pct translate-x-50pct-y-50pct padding-5\n            rounded-circle display-grid place-items-center text-color-white \n            border border-color-white\n        \"><span class=\"rioglyph rioglyph-ok\"></span><span class=\"rioglyph rioglyph-remove\"></span></div></div></div></div></div></div>",
+          "tabs": []
+        },
+        {
+          "caption": "Example 5",
+          "rendered_html": "<div class=\"playground-content  bg-white padding-20 padding-bottom-25 rounded-top\" style=\"width: 100%;\"><div class=\"display-grid gap-20\"><div><div class=\"lead \"><div class=\"display-flex justify-content-between\"><div>White text on highlight backgrounds</div></div><hr class=\"margin-top-10 border-color-light\"></div><div class=\"display-grid column-gap-25 gap-15 line-height-125rel grid-cols-1 grid-cols-4-sm\"><div class=\"bg-highlight-decent position-relative rounded padding-y-20 padding-x-15 text-center text-size-14 display-grid place-items-center border text-color-white contrast-check contrast-bad\" data-contrast=\"1.05\"><div class=\"text-color-white\"><b>white</b> text on bg-<b>highlight-decent</b></div><div class=\"\n            contrast-indicator\n            position-absolute left-0 top-50pct translate-x-50pct-y-50pct padding-5\n            rounded-circle display-grid place-items-center text-color-white \n            border border-color-white\n        \"><span class=\"rioglyph rioglyph-ok\"></span><span class=\"rioglyph rioglyph-remove\"></span></div></div><div class=\"bg-highlight-lightest position-relative rounded padding-y-20 padding-x-15 text-center text-size-14 display-grid place-items-center border text-color-white contrast-check contrast-bad\" data-contrast=\"1.08\"><div class=\"text-color-white\"><b>white</b> text on bg-<b>highlight-lightest</b></div><div class=\"\n            contrast-indicator\n            position-absolute left-0 top-50pct translate-x-50pct-y-50pct padding-5\n            rounded-circle display-grid place-items-center text-color-white \n            border border-color-white\n        \"><span class=\"rioglyph rioglyph-ok\"></span><span class=\"rioglyph rioglyph-remove\"></span></div></div><div class=\"bg-highlight-lighter position-relative rounded padding-y-20 padding-x-15 text-center text-size-14 display-grid place-items-center border text-color-white contrast-check contrast-bad\" data-contrast=\"1.21\"><div class=\"text-color-white\"><b>white</b> text on bg-<b>highlight-lighter</b></div><div class=\"\n            contrast-indicator\n            position-absolute left-0 top-50pct translate-x-50pct-y-50pct padding-5\n            rounded-circle display-grid place-items-center text-color-white \n            border border-color-white\n        \"><span class=\"rioglyph rioglyph-ok\"></span><span class=\"rioglyph rioglyph-remove\"></span></div></div><div class=\"bg-highlight-light position-relative rounded padding-y-20 padding-x-15 text-center text-size-14 display-grid place-items-center border text-color-white contrast-check contrast-bad\" data-contrast=\"1.57\"><div class=\"text-color-white\"><b>white</b> text on bg-<b>highlight-light</b></div><div class=\"\n            contrast-indicator\n            position-absolute left-0 top-50pct translate-x-50pct-y-50pct padding-5\n            rounded-circle display-grid place-items-center text-color-white \n            border border-color-white\n        \"><span class=\"rioglyph rioglyph-ok\"></span><span class=\"rioglyph rioglyph-remove\"></span></div></div><div class=\"bg-highlight position-relative rounded padding-y-20 padding-x-15 text-center text-size-14 display-grid place-items-center border text-color-white contrast-check contrast-good\" data-contrast=\"2.5\"><div class=\"text-color-white\"><b>white</b> text on bg-<b>highlight</b></div><div class=\"\n            contrast-indicator\n            position-absolute left-0 top-50pct translate-x-50pct-y-50pct padding-5\n            rounded-circle display-grid place-items-center text-color-white \n            border border-color-white\n        \"><span class=\"rioglyph rioglyph-ok\"></span><span class=\"rioglyph rioglyph-remove\"></span></div></div><div class=\"bg-highlight-dark position-relative rounded padding-y-20 padding-x-15 text-center text-size-14 display-grid place-items-center border text-color-white contrast-check contrast-good\" data-contrast=\"4.16\"><div class=\"text-color-white\"><b>white</b> text on bg-<b>highlight-dark</b></div><div class=\"\n            contrast-indicator\n            position-absolute left-0 top-50pct translate-x-50pct-y-50pct padding-5\n            rounded-circle display-grid place-items-center text-color-white \n            border border-color-white\n        \"><span class=\"rioglyph rioglyph-ok\"></span><span class=\"rioglyph rioglyph-remove\"></span></div></div><div class=\"bg-highlight-darker position-relative rounded padding-y-20 padding-x-15 text-center text-size-14 display-grid place-items-center border text-color-white contrast-check contrast-good\" data-contrast=\"5.84\"><div class=\"text-color-white\"><b>white</b> text on bg-<b>highlight-darker</b></div><div class=\"\n            contrast-indicator\n            position-absolute left-0 top-50pct translate-x-50pct-y-50pct padding-5\n            rounded-circle display-grid place-items-center text-color-white \n            border border-color-white\n        \"><span class=\"rioglyph rioglyph-ok\"></span><span class=\"rioglyph rioglyph-remove\"></span></div></div><div class=\"bg-highlight-darkest position-relative rounded padding-y-20 padding-x-15 text-center text-size-14 display-grid place-items-center border text-color-white contrast-check contrast-good\" data-contrast=\"9.67\"><div class=\"text-color-white\"><b>white</b> text on bg-<b>highlight-darkest</b></div><div class=\"\n            contrast-indicator\n            position-absolute left-0 top-50pct translate-x-50pct-y-50pct padding-5\n            rounded-circle display-grid place-items-center text-color-white \n            border border-color-white\n        \"><span class=\"rioglyph rioglyph-ok\"></span><span class=\"rioglyph rioglyph-remove\"></span></div></div></div></div><div><div class=\"lead \"><div class=\"display-flex justify-content-between\"><div>Black text on highlight backgrounds</div></div><hr class=\"margin-top-10 border-color-light\"></div><div class=\"display-grid column-gap-25 gap-15 line-height-125rel grid-cols-1 grid-cols-4-sm\"><div class=\"bg-highlight-decent position-relative rounded padding-y-20 padding-x-15 text-center text-size-14 display-grid place-items-center border text-color-black contrast-check contrast-good\" data-contrast=\"20.02\"><div class=\"text-color-black\"><b>black</b> text on bg-<b>highlight-decent</b></div><div class=\"\n            contrast-indicator\n            position-absolute left-0 top-50pct translate-x-50pct-y-50pct padding-5\n            rounded-circle display-grid place-items-center text-color-white \n            border border-color-white\n        \"><span class=\"rioglyph rioglyph-ok\"></span><span class=\"rioglyph rioglyph-remove\"></span></div></div><div class=\"bg-highlight-lightest position-relative rounded padding-y-20 padding-x-15 text-center text-size-14 display-grid place-items-center border text-color-black contrast-check contrast-good\" data-contrast=\"19.46\"><div class=\"text-color-black\"><b>black</b> text on bg-<b>highlight-lightest</b></div><div class=\"\n            contrast-indicator\n            position-absolute left-0 top-50pct translate-x-50pct-y-50pct padding-5\n            rounded-circle display-grid place-items-center text-color-white \n            border border-color-white\n        \"><span class=\"rioglyph rioglyph-ok\"></span><span class=\"rioglyph rioglyph-remove\"></span></div></div><div class=\"bg-highlight-lighter position-relative rounded padding-y-20 padding-x-15 text-center text-size-14 display-grid place-items-center border text-color-black contrast-check contrast-good\" data-contrast=\"17.38\"><div class=\"text-color-black\"><b>black</b> text on bg-<b>highlight-lighter</b></div><div class=\"\n            contrast-indicator\n            position-absolute left-0 top-50pct translate-x-50pct-y-50pct padding-5\n            rounded-circle display-grid place-items-center text-color-white \n            border border-color-white\n        \"><span class=\"rioglyph rioglyph-ok\"></span><span class=\"rioglyph rioglyph-remove\"></span></div></div><div class=\"bg-highlight-light position-relative rounded padding-y-20 padding-x-15 text-center text-size-14 display-grid place-items-center border text-color-black contrast-check contrast-good\" data-contrast=\"13.37\"><div class=\"text-color-black\"><b>black</b> text on bg-<b>highlight-light</b></div><div class=\"\n            contrast-indicator\n            position-absolute left-0 top-50pct translate-x-50pct-y-50pct padding-5\n            rounded-circle display-grid place-items-center text-color-white \n            border border-color-white\n        \"><span class=\"rioglyph rioglyph-ok\"></span><span class=\"rioglyph rioglyph-remove\"></span></div></div><div class=\"bg-highlight position-relative rounded padding-y-20 padding-x-15 text-center text-size-14 display-grid place-items-center border text-color-black contrast-check contrast-good\" data-contrast=\"8.42\"><div class=\"text-color-black\"><b>black</b> text on bg-<b>highlight</b></div><div class=\"\n            contrast-indicator\n            position-absolute left-0 top-50pct translate-x-50pct-y-50pct padding-5\n            rounded-circle display-grid place-items-center text-color-white \n            border border-color-white\n        \"><span class=\"rioglyph rioglyph-ok\"></span><span class=\"rioglyph rioglyph-remove\"></span></div></div><div class=\"bg-highlight-dark position-relative rounded padding-y-20 padding-x-15 text-center text-size-14 display-grid place-items-center border text-color-black contrast-check contrast-bad\" data-contrast=\"5.05\"><div class=\"text-color-black\"><b>black</b> text on bg-<b>highlight-dark</b></div><div class=\"\n            contrast-indicator\n            position-absolute left-0 top-50pct translate-x-50pct-y-50pct padding-5\n            rounded-circle display-grid place-items-center text-color-white \n            border border-color-white\n        \"><span class=\"rioglyph rioglyph-ok\"></span><span class=\"rioglyph rioglyph-remove\"></span></div></div><div class=\"bg-highlight-darker position-relative rounded padding-y-20 padding-x-15 text-center text-size-14 display-grid place-items-center border text-color-black contrast-check contrast-bad\" data-contrast=\"3.59\"><div class=\"text-color-black\"><b>black</b> text on bg-<b>highlight-darker</b></div><div class=\"\n            contrast-indicator\n            position-absolute left-0 top-50pct translate-x-50pct-y-50pct padding-5\n            rounded-circle display-grid place-items-center text-color-white \n            border border-color-white\n        \"><span class=\"rioglyph rioglyph-ok\"></span><span class=\"rioglyph rioglyph-remove\"></span></div></div><div class=\"bg-highlight-darkest position-relative rounded padding-y-20 padding-x-15 text-center text-size-14 display-grid place-items-center border text-color-black contrast-check contrast-bad\" data-contrast=\"2.17\"><div class=\"text-color-black\"><b>black</b> text on bg-<b>highlight-darkest</b></div><div class=\"\n            contrast-indicator\n            position-absolute left-0 top-50pct translate-x-50pct-y-50pct padding-5\n            rounded-circle display-grid place-items-center text-color-white \n            border border-color-white\n        \"><span class=\"rioglyph rioglyph-ok\"></span><span class=\"rioglyph rioglyph-remove\"></span></div></div></div></div></div></div>",
+          "tabs": []
+        },
+        {
+          "caption": "dark text on bg-decent",
+          "rendered_html": "<div class=\"playground-content  bg-white padding-20 padding-bottom-25 rounded-top\" style=\"width: 100%;\"><div class=\"display-grid gap-20\"><div><div class=\"lead \"><div class=\"display-flex justify-content-between\"><div>Gray text on gray backgrounds</div></div><hr class=\"margin-top-10 border-color-light\"></div><div class=\"display-grid column-gap-25 gap-15 line-height-125rel grid-cols-1 grid-cols-4-sm\"><div class=\"bg-decent position-relative rounded padding-y-20 padding-x-15 text-center text-size-14 display-grid place-items-center border text-color-decent contrast-check contrast-bad\" data-contrast=\"1\"><div class=\"text-color-decent\"><b>decent</b> text on bg-<b>decent</b></div><div class=\"\n            contrast-indicator\n            position-absolute left-0 top-50pct translate-x-50pct-y-50pct padding-5\n            rounded-circle display-grid place-items-center text-color-white \n            border border-color-white\n        \"><span class=\"rioglyph rioglyph-ok\"></span><span class=\"rioglyph rioglyph-remove\"></span></div></div><div class=\"bg-decent position-relative rounded padding-y-20 padding-x-15 text-center text-size-14 display-grid place-items-center border text-color-lightest contrast-check contrast-bad\" data-contrast=\"1.04\"><div class=\"text-color-lightest\"><b>lightest</b> text on bg-<b>decent</b></div><div class=\"\n            contrast-indicator\n            position-absolute left-0 top-50pct translate-x-50pct-y-50pct padding-5\n            rounded-circle display-grid place-items-center text-color-white \n            border border-color-white\n        \"><span class=\"rioglyph rioglyph-ok\"></span><span class=\"rioglyph rioglyph-remove\"></span></div></div><div class=\"bg-decent position-relative rounded padding-y-20 padding-x-15 text-center text-size-14 display-grid place-items-center border text-color-lighter contrast-check contrast-bad\" data-contrast=\"1.17\"><div class=\"text-color-lighter\"><b>lighter</b> text on bg-<b>decent</b></div><div class=\"\n            contrast-indicator\n            position-absolute left-0 top-50pct translate-x-50pct-y-50pct padding-5\n            rounded-circle display-grid place-items-center text-color-white \n            border border-color-white\n        \"><span class=\"rioglyph rioglyph-ok\"></span><span class=\"rioglyph rioglyph-remove\"></span></div></div><div class=\"bg-decent position-relative rounded padding-y-20 padding-x-15 text-center text-size-14 display-grid place-items-center border text-color-light contrast-check contrast-bad\" data-contrast=\"1.41\"><div class=\"text-color-light\"><b>light</b> text on bg-<b>decent</b></div><div class=\"\n            contrast-indicator\n            position-absolute left-0 top-50pct translate-x-50pct-y-50pct padding-5\n            rounded-circle display-grid place-items-center text-color-white \n            border border-color-white\n        \"><span class=\"rioglyph rioglyph-ok\"></span><span class=\"rioglyph rioglyph-remove\"></span></div></div><div class=\"bg-decent position-relative rounded padding-y-20 padding-x-15 text-center text-size-14 display-grid place-items-center border text-color-gray contrast-check contrast-good\" data-contrast=\"2.16\"><div class=\"text-color-gray\"><b>gray</b> text on bg-<b>decent</b></div><div class=\"\n            contrast-indicator\n            position-absolute left-0 top-50pct translate-x-50pct-y-50pct padding-5\n            rounded-circle display-grid place-items-center text-color-white \n            border border-color-white\n        \"><span class=\"rioglyph rioglyph-ok\"></span><span class=\"rioglyph rioglyph-remove\"></span></div></div><div class=\"bg-decent position-relative rounded padding-y-20 padding-x-15 text-center text-size-14 display-grid place-items-center border text-color-dark contrast-check contrast-good\" data-contrast=\"4.31\"><div class=\"text-color-dark\"><b>dark</b> text on bg-<b>decent</b></div><div class=\"\n            contrast-indicator\n            position-absolute left-0 top-50pct translate-x-50pct-y-50pct padding-5\n            rounded-circle display-grid place-items-center text-color-white \n            border border-color-white\n        \"><span class=\"rioglyph rioglyph-ok\"></span><span class=\"rioglyph rioglyph-remove\"></span></div></div><div class=\"bg-decent position-relative rounded padding-y-20 padding-x-15 text-center text-size-14 display-grid place-items-center border text-color-darker contrast-check contrast-good\" data-contrast=\"7.23\"><div class=\"text-color-darker\"><b>darker</b> text on bg-<b>decent</b></div><div class=\"\n            contrast-indicator\n            position-absolute left-0 top-50pct translate-x-50pct-y-50pct padding-5\n            rounded-circle display-grid place-items-center text-color-white \n            border border-color-white\n        \"><span class=\"rioglyph rioglyph-ok\"></span><span class=\"rioglyph rioglyph-remove\"></span></div></div><div class=\"bg-decent position-relative rounded padding-y-20 padding-x-15 text-center text-size-14 display-grid place-items-center border text-color-darkest contrast-check contrast-good\" data-contrast=\"11.92\"><div class=\"text-color-darkest\"><b>darkest</b> text on bg-<b>decent</b></div><div class=\"\n            contrast-indicator\n            position-absolute left-0 top-50pct translate-x-50pct-y-50pct padding-5\n            rounded-circle display-grid place-items-center text-color-white \n            border border-color-white\n        \"><span class=\"rioglyph rioglyph-ok\"></span><span class=\"rioglyph rioglyph-remove\"></span></div></div><div class=\"bg-lightest position-relative rounded padding-y-20 padding-x-15 text-center text-size-14 display-grid place-items-center border text-color-decent contrast-check contrast-bad\" data-contrast=\"1.04\"><div class=\"text-color-decent\"><b>decent</b> text on bg-<b>lightest</b></div><div class=\"\n            contrast-indicator\n            position-absolute left-0 top-50pct translate-x-50pct-y-50pct padding-5\n            rounded-circle display-grid place-items-center text-color-white \n            border border-color-white\n        \"><span class=\"rioglyph rioglyph-ok\"></span><span class=\"rioglyph rioglyph-remove\"></span></div></div><div class=\"bg-lightest position-relative rounded padding-y-20 padding-x-15 text-center text-size-14 display-grid place-items-center border text-color-lightest contrast-check contrast-bad\" data-contrast=\"1\"><div class=\"text-color-lightest\"><b>lightest</b> text on bg-<b>lightest</b></div><div class=\"\n            contrast-indicator\n            position-absolute left-0 top-50pct translate-x-50pct-y-50pct padding-5\n            rounded-circle display-grid place-items-center text-color-white \n            border border-color-white\n        \"><span class=\"rioglyph rioglyph-ok\"></span><span class=\"rioglyph rioglyph-remove\"></span></div></div><div class=\"bg-lightest position-relative rounded padding-y-20 padding-x-15 text-center text-size-14 display-grid place-items-center border text-color-lighter contrast-check contrast-bad\" data-contrast=\"1.13\"><div class=\"text-color-lighter\"><b>lighter</b> text on bg-<b>lightest</b></div><div class=\"\n            contrast-indicator\n            position-absolute left-0 top-50pct translate-x-50pct-y-50pct padding-5\n            rounded-circle display-grid place-items-center text-color-white \n            border border-color-white\n        \"><span class=\"rioglyph rioglyph-ok\"></span><span class=\"rioglyph rioglyph-remove\"></span></div></div><div class=\"bg-lightest position-relative rounded padding-y-20 padding-x-15 text-center text-size-14 display-grid place-items-center border text-color-light contrast-check contrast-bad\" data-contrast=\"1.35\"><div class=\"text-color-light\"><b>light</b> text on bg-<b>lightest</b></div><div class=\"\n            contrast-indicator\n            position-absolute left-0 top-50pct translate-x-50pct-y-50pct padding-5\n            rounded-circle display-grid place-items-center text-color-white \n            border border-color-white\n        \"><span class=\"rioglyph rioglyph-ok\"></span><span class=\"rioglyph rioglyph-remove\"></span></div></div><div class=\"bg-lightest position-relative rounded padding-y-20 padding-x-15 text-center text-size-14 display-grid place-items-center border text-color-gray contrast-check contrast-good\" data-contrast=\"2.08\"><div class=\"text-color-gray\"><b>gray</b> text on bg-<b>lightest</b></div><div class=\"\n            contrast-indicator\n            position-absolute left-0 top-50pct translate-x-50pct-y-50pct padding-5\n            rounded-circle display-grid place-items-center text-color-white \n            border border-color-white\n        \"><span class=\"rioglyph rioglyph-ok\"></span><span class=\"rioglyph rioglyph-remove\"></span></div></div><div class=\"bg-lightest position-relative rounded padding-y-20 padding-x-15 text-center text-size-14 display-grid place-items-center border text-color-dark contrast-check contrast-good\" data-contrast=\"4.14\"><div class=\"text-color-dark\"><b>dark</b> text on bg-<b>lightest</b></div><div class=\"\n            contrast-indicator\n            position-absolute left-0 top-50pct translate-x-50pct-y-50pct padding-5\n            rounded-circle display-grid place-items-center text-color-white \n            border border-color-white\n        \"><span class=\"rioglyph rioglyph-ok\"></span><span class=\"rioglyph rioglyph-remove\"></span></div></div><div class=\"bg-lightest position-relative rounded padding-y-20 padding-x-15 text-center text-size-14 display-grid place-items-center border text-color-darker contrast-check contrast-good\" data-contrast=\"6.96\"><div class=\"text-color-darker\"><b>darker</b> text on bg-<b>lightest</b></div><div class=\"\n            contrast-indicator\n            position-absolute left-0 top-50pct translate-x-50pct-y-50pct padding-5\n            rounded-circle display-grid place-items-center text-color-white \n            border border-color-white\n        \"><span class=\"rioglyph rioglyph-ok\"></span><span class=\"rioglyph rioglyph-remove\"></span></div></div><div class=\"bg-lightest position-relative rounded padding-y-20 padding-x-15 text-center text-size-14 display-grid place-items-center border text-color-darkest contrast-check contrast-good\" data-contrast=\"11.47\"><div class=\"text-color-darkest\"><b>darkest</b> text on bg-<b>lightest</b></div><div class=\"\n            contrast-indicator\n            position-absolute left-0 top-50pct translate-x-50pct-y-50pct padding-5\n            rounded-circle display-grid place-items-center text-color-white \n            border border-color-white\n        \"><span class=\"rioglyph rioglyph-ok\"></span><span class=\"rioglyph rioglyph-remove\"></span></div></div><div class=\"bg-lighter position-relative rounded padding-y-20 padding-x-15 text-center text-size-14 display-grid place-items-center border text-color-decent contrast-check contrast-bad\" data-contrast=\"1.17\"><div class=\"text-color-decent\"><b>decent</b> text on bg-<b>lighter</b></div><div class=\"\n            contrast-indicator\n            position-absolute left-0 top-50pct translate-x-50pct-y-50pct padding-5\n            rounded-circle display-grid place-items-center text-color-white \n            border border-color-white\n        \"><span class=\"rioglyph rioglyph-ok\"></span><span class=\"rioglyph rioglyph-remove\"></span></div></div><div class=\"bg-lighter position-relative rounded padding-y-20 padding-x-15 text-center text-size-14 display-grid place-items-center border text-color-lightest contrast-check contrast-bad\" data-contrast=\"1.13\"><div class=\"text-color-lightest\"><b>lightest</b> text on bg-<b>lighter</b></div><div class=\"\n            contrast-indicator\n            position-absolute left-0 top-50pct translate-x-50pct-y-50pct padding-5\n            rounded-circle display-grid place-items-center text-color-white \n            border border-color-white\n        \"><span class=\"rioglyph rioglyph-ok\"></span><span class=\"rioglyph rioglyph-remove\"></span></div></div><div class=\"bg-lighter position-relative rounded padding-y-20 padding-x-15 text-center text-size-14 display-grid place-items-center border text-color-lighter contrast-check contrast-bad\" data-contrast=\"1\"><div class=\"text-color-lighter\"><b>lighter</b> text on bg-<b>lighter</b></div><div class=\"\n            contrast-indicator\n            position-absolute left-0 top-50pct translate-x-50pct-y-50pct padding-5\n            rounded-circle display-grid place-items-center text-color-white \n            border border-color-white\n        \"><span class=\"rioglyph rioglyph-ok\"></span><span class=\"rioglyph rioglyph-remove\"></span></div></div><div class=\"bg-lighter position-relative rounded padding-y-20 padding-x-15 text-center text-size-14 display-grid place-items-center border text-color-light contrast-check contrast-bad\" data-contrast=\"1.2\"><div class=\"text-color-light\"><b>light</b> text on bg-<b>lighter</b></div><div class=\"\n            contrast-indicator\n            position-absolute left-0 top-50pct translate-x-50pct-y-50pct padding-5\n            rounded-circle display-grid place-items-center text-color-white \n            border border-color-white\n        \"><span class=\"rioglyph rioglyph-ok\"></span><span class=\"rioglyph rioglyph-remove\"></span></div></div><div class=\"bg-lighter position-relative rounded padding-y-20 padding-x-15 text-center text-size-14 display-grid place-items-center border text-color-gray contrast-check contrast-bad\" data-contrast=\"1.84\"><div class=\"text-color-gray\"><b>gray</b> text on bg-<b>lighter</b></div><div class=\"\n            contrast-indicator\n            position-absolute left-0 top-50pct translate-x-50pct-y-50pct padding-5\n            rounded-circle display-grid place-items-center text-color-white \n            border border-color-white\n        \"><span class=\"rioglyph rioglyph-ok\"></span><span class=\"rioglyph rioglyph-remove\"></span></div></div><div class=\"bg-lighter position-relative rounded padding-y-20 padding-x-15 text-center text-size-14 display-grid place-items-center border text-color-dark contrast-check contrast-good\" data-contrast=\"3.67\"><div class=\"text-color-dark\"><b>dark</b> text on bg-<b>lighter</b></div><div class=\"\n            contrast-indicator\n            position-absolute left-0 top-50pct translate-x-50pct-y-50pct padding-5\n            rounded-circle display-grid place-items-center text-color-white \n            border border-color-white\n        \"><span class=\"rioglyph rioglyph-ok\"></span><span class=\"rioglyph rioglyph-remove\"></span></div></div><div class=\"bg-lighter position-relative rounded padding-y-20 padding-x-15 text-center text-size-14 display-grid place-items-center border text-color-darker contrast-check contrast-good\" data-contrast=\"6.16\"><div class=\"text-color-darker\"><b>darker</b> text on bg-<b>lighter</b></div><div class=\"\n            contrast-indicator\n            position-absolute left-0 top-50pct translate-x-50pct-y-50pct padding-5\n            rounded-circle display-grid place-items-center text-color-white \n            border border-color-white\n        \"><span class=\"rioglyph rioglyph-ok\"></span><span class=\"rioglyph rioglyph-remove\"></span></div></div><div class=\"bg-lighter position-relative rounded padding-y-20 padding-x-15 text-center text-size-14 display-grid place-items-center border text-color-darkest contrast-check contrast-good\" data-contrast=\"10.16\"><div class=\"text-color-darkest\"><b>darkest</b> text on bg-<b>lighter</b></div><div class=\"\n            contrast-indicator\n            position-absolute left-0 top-50pct translate-x-50pct-y-50pct padding-5\n            rounded-circle display-grid place-items-center text-color-white \n            border border-color-white\n        \"><span class=\"rioglyph rioglyph-ok\"></span><span class=\"rioglyph rioglyph-remove\"></span></div></div><div class=\"bg-light position-relative rounded padding-y-20 padding-x-15 text-center text-size-14 display-grid place-items-center border text-color-decent contrast-check contrast-bad\" data-contrast=\"1.41\"><div class=\"text-color-decent\"><b>decent</b> text on bg-<b>light</b></div><div class=\"\n            contrast-indicator\n            position-absolute left-0 top-50pct translate-x-50pct-y-50pct padding-5\n            rounded-circle display-grid place-items-center text-color-white \n            border border-color-white\n        \"><span class=\"rioglyph rioglyph-ok\"></span><span class=\"rioglyph rioglyph-remove\"></span></div></div><div class=\"bg-light position-relative rounded padding-y-20 padding-x-15 text-center text-size-14 display-grid place-items-center border text-color-lightest contrast-check contrast-bad\" data-contrast=\"1.35\"><div class=\"text-color-lightest\"><b>lightest</b> text on bg-<b>light</b></div><div class=\"\n            contrast-indicator\n            position-absolute left-0 top-50pct translate-x-50pct-y-50pct padding-5\n            rounded-circle display-grid place-items-center text-color-white \n            border border-color-white\n        \"><span class=\"rioglyph rioglyph-ok\"></span><span class=\"rioglyph rioglyph-remove\"></span></div></div><div class=\"bg-light position-relative rounded padding-y-20 padding-x-15 text-center text-size-14 display-grid place-items-center border text-color-lighter contrast-check contrast-bad\" data-contrast=\"1.2\"><div class=\"text-color-lighter\"><b>lighter</b> text on bg-<b>light</b></div><div class=\"\n            contrast-indicator\n            position-absolute left-0 top-50pct translate-x-50pct-y-50pct padding-5\n            rounded-circle display-grid place-items-center text-color-white \n            border border-color-white\n        \"><span class=\"rioglyph rioglyph-ok\"></span><span class=\"rioglyph rioglyph-remove\"></span></div></div><div class=\"bg-light position-relative rounded padding-y-20 padding-x-15 text-center text-size-14 display-grid place-items-center border text-color-light contrast-check contrast-bad\" data-contrast=\"1\"><div class=\"text-color-light\"><b>light</b> text on bg-<b>light</b></div><div class=\"\n            contrast-indicator\n            position-absolute left-0 top-50pct translate-x-50pct-y-50pct padding-5\n            rounded-circle display-grid place-items-center text-color-white \n            border border-color-white\n        \"><span class=\"rioglyph rioglyph-ok\"></span><span class=\"rioglyph rioglyph-remove\"></span></div></div><div class=\"bg-light position-relative rounded padding-y-20 padding-x-15 text-center text-size-14 display-grid place-items-center border text-color-gray contrast-check contrast-bad\" data-contrast=\"1.53\"><div class=\"text-color-gray\"><b>gray</b> text on bg-<b>light</b></div><div class=\"\n            contrast-indicator\n            position-absolute left-0 top-50pct translate-x-50pct-y-50pct padding-5\n            rounded-circle display-grid place-items-center text-color-white \n            border border-color-white\n        \"><span class=\"rioglyph rioglyph-ok\"></span><span class=\"rioglyph rioglyph-remove\"></span></div></div><div class=\"bg-light position-relative rounded padding-y-20 padding-x-15 text-center text-size-14 display-grid place-items-center border text-color-dark contrast-check contrast-good\" data-contrast=\"3.06\"><div class=\"text-color-dark\"><b>dark</b> text on bg-<b>light</b></div><div class=\"\n            contrast-indicator\n            position-absolute left-0 top-50pct translate-x-50pct-y-50pct padding-5\n            rounded-circle display-grid place-items-center text-color-white \n            border border-color-white\n        \"><span class=\"rioglyph rioglyph-ok\"></span><span class=\"rioglyph rioglyph-remove\"></span></div></div><div class=\"bg-light position-relative rounded padding-y-20 padding-x-15 text-center text-size-14 display-grid place-items-center border text-color-darker contrast-check contrast-good\" data-contrast=\"5.14\"><div class=\"text-color-darker\"><b>darker</b> text on bg-<b>light</b></div><div class=\"\n            contrast-indicator\n            position-absolute left-0 top-50pct translate-x-50pct-y-50pct padding-5\n            rounded-circle display-grid place-items-center text-color-white \n            border border-color-white\n        \"><span class=\"rioglyph rioglyph-ok\"></span><span class=\"rioglyph rioglyph-remove\"></span></div></div><div class=\"bg-light position-relative rounded padding-y-20 padding-x-15 text-center text-size-14 display-grid place-items-center border text-color-darkest contrast-check contrast-good\" data-contrast=\"8.47\"><div class=\"text-color-darkest\"><b>darkest</b> text on bg-<b>light</b></div><div class=\"\n            contrast-indicator\n            position-absolute left-0 top-50pct translate-x-50pct-y-50pct padding-5\n            rounded-circle display-grid place-items-center text-color-white \n            border border-color-white\n        \"><span class=\"rioglyph rioglyph-ok\"></span><span class=\"rioglyph rioglyph-remove\"></span></div></div><div class=\"bg-gray position-relative rounded padding-y-20 padding-x-15 text-center text-size-14 display-grid place-items-center border text-color-decent contrast-check contrast-bad\" data-contrast=\"2.16\"><div class=\"text-color-decent\"><b>decent</b> text on bg-<b>gray</b></div><div class=\"\n            contrast-indicator\n            position-absolute left-0 top-50pct translate-x-50pct-y-50pct padding-5\n            rounded-circle display-grid place-items-center text-color-white \n            border border-color-white\n        \"><span class=\"rioglyph rioglyph-ok\"></span><span class=\"rioglyph rioglyph-remove\"></span></div></div><div class=\"bg-gray position-relative rounded padding-y-20 padding-x-15 text-center text-size-14 display-grid place-items-center border text-color-lightest contrast-check contrast-bad\" data-contrast=\"2.08\"><div class=\"text-color-lightest\"><b>lightest</b> text on bg-<b>gray</b></div><div class=\"\n            contrast-indicator\n            position-absolute left-0 top-50pct translate-x-50pct-y-50pct padding-5\n            rounded-circle display-grid place-items-center text-color-white \n            border border-color-white\n        \"><span class=\"rioglyph rioglyph-ok\"></span><span class=\"rioglyph rioglyph-remove\"></span></div></div><div class=\"bg-gray position-relative rounded padding-y-20 padding-x-15 text-center text-size-14 display-grid place-items-center border text-color-lighter contrast-check contrast-bad\" data-contrast=\"1.84\"><div class=\"text-color-lighter\"><b>lighter</b> text on bg-<b>gray</b></div><div class=\"\n            contrast-indicator\n            position-absolute left-0 top-50pct translate-x-50pct-y-50pct padding-5\n            rounded-circle display-grid place-items-center text-color-white \n            border border-color-white\n        \"><span class=\"rioglyph rioglyph-ok\"></span><span class=\"rioglyph rioglyph-remove\"></span></div></div><div class=\"bg-gray position-relative rounded padding-y-20 padding-x-15 text-center text-size-14 display-grid place-items-center border text-color-light contrast-check contrast-bad\" data-contrast=\"1.53\"><div class=\"text-color-light\"><b>light</b> text on bg-<b>gray</b></div><div class=\"\n            contrast-indicator\n            position-absolute left-0 top-50pct translate-x-50pct-y-50pct padding-5\n            rounded-circle display-grid place-items-center text-color-white \n            border border-color-white\n        \"><span class=\"rioglyph rioglyph-ok\"></span><span class=\"rioglyph rioglyph-remove\"></span></div></div><div class=\"bg-gray position-relative rounded padding-y-20 padding-x-15 text-center text-size-14 display-grid place-items-center border text-color-gray contrast-check contrast-bad\" data-contrast=\"1\"><div class=\"text-color-gray\"><b>gray</b> text on bg-<b>gray</b></div><div class=\"\n            contrast-indicator\n            position-absolute left-0 top-50pct translate-x-50pct-y-50pct padding-5\n            rounded-circle display-grid place-items-center text-color-white \n            border border-color-white\n        \"><span class=\"rioglyph rioglyph-ok\"></span><span class=\"rioglyph rioglyph-remove\"></span></div></div><div class=\"bg-gray position-relative rounded padding-y-20 padding-x-15 text-center text-size-14 display-grid place-items-center border text-color-dark contrast-check contrast-bad\" data-contrast=\"2\"><div class=\"text-color-dark\"><b>dark</b> text on bg-<b>gray</b></div><div class=\"\n            contrast-indicator\n            position-absolute left-0 top-50pct translate-x-50pct-y-50pct padding-5\n            rounded-circle display-grid place-items-center text-color-white \n            border border-color-white\n        \"><span class=\"rioglyph rioglyph-ok\"></span><span class=\"rioglyph rioglyph-remove\"></span></div></div><div class=\"bg-gray position-relative rounded padding-y-20 padding-x-15 text-center text-size-14 display-grid place-items-center border text-color-darker contrast-check contrast-bad\" data-contrast=\"3.35\"><div class=\"text-color-darker\"><b>darker</b> text on bg-<b>gray</b></div><div class=\"\n            contrast-indicator\n            position-absolute left-0 top-50pct translate-x-50pct-y-50pct padding-5\n            rounded-circle display-grid place-items-center text-color-white \n            border border-color-white\n        \"><span class=\"rioglyph rioglyph-ok\"></span><span class=\"rioglyph rioglyph-remove\"></span></div></div><div class=\"bg-gray position-relative rounded padding-y-20 padding-x-15 text-center text-size-14 display-grid place-items-center border text-color-darkest contrast-check contrast-good\" data-contrast=\"5.52\"><div class=\"text-color-darkest\"><b>darkest</b> text on bg-<b>gray</b></div><div class=\"\n            contrast-indicator\n            position-absolute left-0 top-50pct translate-x-50pct-y-50pct padding-5\n            rounded-circle display-grid place-items-center text-color-white \n            border border-color-white\n        \"><span class=\"rioglyph rioglyph-ok\"></span><span class=\"rioglyph rioglyph-remove\"></span></div></div><div class=\"bg-dark position-relative rounded padding-y-20 padding-x-15 text-center text-size-14 display-grid place-items-center border text-color-decent contrast-check contrast-good\" data-contrast=\"4.31\"><div class=\"text-color-decent\"><b>decent</b> text on bg-<b>dark</b></div><div class=\"\n            contrast-indicator\n            position-absolute left-0 top-50pct translate-x-50pct-y-50pct padding-5\n            rounded-circle display-grid place-items-center text-color-white \n            border border-color-white\n        \"><span class=\"rioglyph rioglyph-ok\"></span><span class=\"rioglyph rioglyph-remove\"></span></div></div><div class=\"bg-dark position-relative rounded padding-y-20 padding-x-15 text-center text-size-14 display-grid place-items-center border text-color-lightest contrast-check contrast-good\" data-contrast=\"4.14\"><div class=\"text-color-lightest\"><b>lightest</b> text on bg-<b>dark</b></div><div class=\"\n            contrast-indicator\n            position-absolute left-0 top-50pct translate-x-50pct-y-50pct padding-5\n            rounded-circle display-grid place-items-center text-color-white \n            border border-color-white\n        \"><span class=\"rioglyph rioglyph-ok\"></span><span class=\"rioglyph rioglyph-remove\"></span></div></div><div class=\"bg-dark position-relative rounded padding-y-20 padding-x-15 text-center text-size-14 display-grid place-items-center border text-color-lighter contrast-check contrast-bad\" data-contrast=\"3.67\"><div class=\"text-color-lighter\"><b>lighter</b> text on bg-<b>dark</b></div><div class=\"\n            contrast-indicator\n            position-absolute left-0 top-50pct translate-x-50pct-y-50pct padding-5\n            rounded-circle display-grid place-items-center text-color-white \n            border border-color-white\n        \"><span class=\"rioglyph rioglyph-ok\"></span><span class=\"rioglyph rioglyph-remove\"></span></div></div><div class=\"bg-dark position-relative rounded padding-y-20 padding-x-15 text-center text-size-14 display-grid place-items-center border text-color-light contrast-check contrast-bad\" data-contrast=\"3.06\"><div class=\"text-color-light\"><b>light</b> text on bg-<b>dark</b></div><div class=\"\n            contrast-indicator\n            position-absolute left-0 top-50pct translate-x-50pct-y-50pct padding-5\n            rounded-circle display-grid place-items-center text-color-white \n            border border-color-white\n        \"><span class=\"rioglyph rioglyph-ok\"></span><span class=\"rioglyph rioglyph-remove\"></span></div></div><div class=\"bg-dark position-relative rounded padding-y-20 padding-x-15 text-center text-size-14 display-grid place-items-center border text-color-gray contrast-check contrast-bad\" data-contrast=\"2\"><div class=\"text-color-gray\"><b>gray</b> text on bg-<b>dark</b></div><div class=\"\n            contrast-indicator\n            position-absolute left-0 top-50pct translate-x-50pct-y-50pct padding-5\n            rounded-circle display-grid place-items-center text-color-white \n            border border-color-white\n        \"><span class=\"rioglyph rioglyph-ok\"></span><span class=\"rioglyph rioglyph-remove\"></span></div></div><div class=\"bg-dark position-relative rounded padding-y-20 padding-x-15 text-center text-size-14 display-grid place-items-center border text-color-dark contrast-check contrast-bad\" data-contrast=\"1\"><div class=\"text-color-dark\"><b>dark</b> text on bg-<b>dark</b></div><div class=\"\n            contrast-indicator\n            position-absolute left-0 top-50pct translate-x-50pct-y-50pct padding-5\n            rounded-circle display-grid place-items-center text-color-white \n            border border-color-white\n        \"><span class=\"rioglyph rioglyph-ok\"></span><span class=\"rioglyph rioglyph-remove\"></span></div></div><div class=\"bg-dark position-relative rounded padding-y-20 padding-x-15 text-center text-size-14 display-grid place-items-center border text-color-darker contrast-check contrast-bad\" data-contrast=\"1.68\"><div class=\"text-color-darker\"><b>darker</b> text on bg-<b>dark</b></div><div class=\"\n            contrast-indicator\n            position-absolute left-0 top-50pct translate-x-50pct-y-50pct padding-5\n            rounded-circle display-grid place-items-center text-color-white \n            border border-color-white\n        \"><span class=\"rioglyph rioglyph-ok\"></span><span class=\"rioglyph rioglyph-remove\"></span></div></div><div class=\"bg-dark position-relative rounded padding-y-20 padding-x-15 text-center text-size-14 display-grid place-items-center border text-color-darkest contrast-check contrast-bad\" data-contrast=\"2.77\"><div class=\"text-color-darkest\"><b>darkest</b> text on bg-<b>dark</b></div><div class=\"\n            contrast-indicator\n            position-absolute left-0 top-50pct translate-x-50pct-y-50pct padding-5\n            rounded-circle display-grid place-items-center text-color-white \n            border border-color-white\n        \"><span class=\"rioglyph rioglyph-ok\"></span><span class=\"rioglyph rioglyph-remove\"></span></div></div><div class=\"bg-darker position-relative rounded padding-y-20 padding-x-15 text-center text-size-14 display-grid place-items-center border text-color-decent contrast-check contrast-good\" data-contrast=\"7.23\"><div class=\"text-color-decent\"><b>decent</b> text on bg-<b>darker</b></div><div class=\"\n            contrast-indicator\n            position-absolute left-0 top-50pct translate-x-50pct-y-50pct padding-5\n            rounded-circle display-grid place-items-center text-color-white \n            border border-color-white\n        \"><span class=\"rioglyph rioglyph-ok\"></span><span class=\"rioglyph rioglyph-remove\"></span></div></div><div class=\"bg-darker position-relative rounded padding-y-20 padding-x-15 text-center text-size-14 display-grid place-items-center border text-color-lightest contrast-check contrast-good\" data-contrast=\"6.96\"><div class=\"text-color-lightest\"><b>lightest</b> text on bg-<b>darker</b></div><div class=\"\n            contrast-indicator\n            position-absolute left-0 top-50pct translate-x-50pct-y-50pct padding-5\n            rounded-circle display-grid place-items-center text-color-white \n            border border-color-white\n        \"><span class=\"rioglyph rioglyph-ok\"></span><span class=\"rioglyph rioglyph-remove\"></span></div></div><div class=\"bg-darker position-relative rounded padding-y-20 padding-x-15 text-center text-size-14 display-grid place-items-center border text-color-lighter contrast-check contrast-good\" data-contrast=\"6.16\"><div class=\"text-color-lighter\"><b>lighter</b> text on bg-<b>darker</b></div><div class=\"\n            contrast-indicator\n            position-absolute left-0 top-50pct translate-x-50pct-y-50pct padding-5\n            rounded-circle display-grid place-items-center text-color-white \n            border border-color-white\n        \"><span class=\"rioglyph rioglyph-ok\"></span><span class=\"rioglyph rioglyph-remove\"></span></div></div><div class=\"bg-darker position-relative rounded padding-y-20 padding-x-15 text-center text-size-14 display-grid place-items-center border text-color-light contrast-check contrast-good\" data-contrast=\"5.14\"><div class=\"text-color-light\"><b>light</b> text on bg-<b>darker</b></div><div class=\"\n            contrast-indicator\n            position-absolute left-0 top-50pct translate-x-50pct-y-50pct padding-5\n            rounded-circle display-grid place-items-center text-color-white \n            border border-color-white\n        \"><span class=\"rioglyph rioglyph-ok\"></span><span class=\"rioglyph rioglyph-remove\"></span></div></div><div class=\"bg-darker position-relative rounded padding-y-20 padding-x-15 text-center text-size-14 display-grid place-items-center border text-color-gray contrast-check contrast-bad\" data-contrast=\"3.35\"><div class=\"text-color-gray\"><b>gray</b> text on bg-<b>darker</b></div><div class=\"\n            contrast-indicator\n            position-absolute left-0 top-50pct translate-x-50pct-y-50pct padding-5\n            rounded-circle display-grid place-items-center text-color-white \n            border border-color-white\n        \"><span class=\"rioglyph rioglyph-ok\"></span><span class=\"rioglyph rioglyph-remove\"></span></div></div><div class=\"bg-darker position-relative rounded padding-y-20 padding-x-15 text-center text-size-14 display-grid place-items-center border text-color-dark contrast-check contrast-bad\" data-contrast=\"1.68\"><div class=\"text-color-dark\"><b>dark</b> text on bg-<b>darker</b></div><div class=\"\n            contrast-indicator\n            position-absolute left-0 top-50pct translate-x-50pct-y-50pct padding-5\n            rounded-circle display-grid place-items-center text-color-white \n            border border-color-white\n        \"><span class=\"rioglyph rioglyph-ok\"></span><span class=\"rioglyph rioglyph-remove\"></span></div></div><div class=\"bg-darker position-relative rounded padding-y-20 padding-x-15 text-center text-size-14 display-grid place-items-center border text-color-darker contrast-check contrast-bad\" data-contrast=\"1\"><div class=\"text-color-darker\"><b>darker</b> text on bg-<b>darker</b></div><div class=\"\n            contrast-indicator\n            position-absolute left-0 top-50pct translate-x-50pct-y-50pct padding-5\n            rounded-circle display-grid place-items-center text-color-white \n            border border-color-white\n        \"><span class=\"rioglyph rioglyph-ok\"></span><span class=\"rioglyph rioglyph-remove\"></span></div></div><div class=\"bg-darker position-relative rounded padding-y-20 padding-x-15 text-center text-size-14 display-grid place-items-center border text-color-darkest contrast-check contrast-bad\" data-contrast=\"1.65\"><div class=\"text-color-darkest\"><b>darkest</b> text on bg-<b>darker</b></div><div class=\"\n            contrast-indicator\n            position-absolute left-0 top-50pct translate-x-50pct-y-50pct padding-5\n            rounded-circle display-grid place-items-center text-color-white \n            border border-color-white\n        \"><span class=\"rioglyph rioglyph-ok\"></span><span class=\"rioglyph rioglyph-remove\"></span></div></div><div class=\"bg-darkest position-relative rounded padding-y-20 padding-x-15 text-center text-size-14 display-grid place-items-center border text-color-decent contrast-check contrast-good\" data-contrast=\"11.92\"><div class=\"text-color-decent\"><b>decent</b> text on bg-<b>darkest</b></div><div class=\"\n            contrast-indicator\n            position-absolute left-0 top-50pct translate-x-50pct-y-50pct padding-5\n            rounded-circle display-grid place-items-center text-color-white \n            border border-color-white\n        \"><span class=\"rioglyph rioglyph-ok\"></span><span class=\"rioglyph rioglyph-remove\"></span></div></div><div class=\"bg-darkest position-relative rounded padding-y-20 padding-x-15 text-center text-size-14 display-grid place-items-center border text-color-lightest contrast-check contrast-good\" data-contrast=\"11.47\"><div class=\"text-color-lightest\"><b>lightest</b> text on bg-<b>darkest</b></div><div class=\"\n            contrast-indicator\n            position-absolute left-0 top-50pct translate-x-50pct-y-50pct padding-5\n            rounded-circle display-grid place-items-center text-color-white \n            border border-color-white\n        \"><span class=\"rioglyph rioglyph-ok\"></span><span class=\"rioglyph rioglyph-remove\"></span></div></div><div class=\"bg-darkest position-relative rounded padding-y-20 padding-x-15 text-center text-size-14 display-grid place-items-center border text-color-lighter contrast-check contrast-good\" data-contrast=\"10.16\"><div class=\"text-color-lighter\"><b>lighter</b> text on bg-<b>darkest</b></div><div class=\"\n            contrast-indicator\n            position-absolute left-0 top-50pct translate-x-50pct-y-50pct padding-5\n            rounded-circle display-grid place-items-center text-color-white \n            border border-color-white\n        \"><span class=\"rioglyph rioglyph-ok\"></span><span class=\"rioglyph rioglyph-remove\"></span></div></div><div class=\"bg-darkest position-relative rounded padding-y-20 padding-x-15 text-center text-size-14 display-grid place-items-center border text-color-light contrast-check contrast-good\" data-contrast=\"8.47\"><div class=\"text-color-light\"><b>light</b> text on bg-<b>darkest</b></div><div class=\"\n            contrast-indicator\n            position-absolute left-0 top-50pct translate-x-50pct-y-50pct padding-5\n            rounded-circle display-grid place-items-center text-color-white \n            border border-color-white\n        \"><span class=\"rioglyph rioglyph-ok\"></span><span class=\"rioglyph rioglyph-remove\"></span></div></div><div class=\"bg-darkest position-relative rounded padding-y-20 padding-x-15 text-center text-size-14 display-grid place-items-center border text-color-gray contrast-check contrast-good\" data-contrast=\"5.52\"><div class=\"text-color-gray\"><b>gray</b> text on bg-<b>darkest</b></div><div class=\"\n            contrast-indicator\n            position-absolute left-0 top-50pct translate-x-50pct-y-50pct padding-5\n            rounded-circle display-grid place-items-center text-color-white \n            border border-color-white\n        \"><span class=\"rioglyph rioglyph-ok\"></span><span class=\"rioglyph rioglyph-remove\"></span></div></div><div class=\"bg-darkest position-relative rounded padding-y-20 padding-x-15 text-center text-size-14 display-grid place-items-center border text-color-dark contrast-check contrast-bad\" data-contrast=\"2.77\"><div class=\"text-color-dark\"><b>dark</b> text on bg-<b>darkest</b></div><div class=\"\n            contrast-indicator\n            position-absolute left-0 top-50pct translate-x-50pct-y-50pct padding-5\n            rounded-circle display-grid place-items-center text-color-white \n            border border-color-white\n        \"><span class=\"rioglyph rioglyph-ok\"></span><span class=\"rioglyph rioglyph-remove\"></span></div></div><div class=\"bg-darkest position-relative rounded padding-y-20 padding-x-15 text-center text-size-14 display-grid place-items-center border text-color-darker contrast-check contrast-bad\" data-contrast=\"1.65\"><div class=\"text-color-darker\"><b>darker</b> text on bg-<b>darkest</b></div><div class=\"\n            contrast-indicator\n            position-absolute left-0 top-50pct translate-x-50pct-y-50pct padding-5\n            rounded-circle display-grid place-items-center text-color-white \n            border border-color-white\n        \"><span class=\"rioglyph rioglyph-ok\"></span><span class=\"rioglyph rioglyph-remove\"></span></div></div><div class=\"bg-darkest position-relative rounded padding-y-20 padding-x-15 text-center text-size-14 display-grid place-items-center border text-color-darkest contrast-check contrast-bad\" data-contrast=\"1\"><div class=\"text-color-darkest\"><b>darkest</b> text on bg-<b>darkest</b></div><div class=\"\n            contrast-indicator\n            position-absolute left-0 top-50pct translate-x-50pct-y-50pct padding-5\n            rounded-circle display-grid place-items-center text-color-white \n            border border-color-white\n        \"><span class=\"rioglyph rioglyph-ok\"></span><span class=\"rioglyph rioglyph-remove\"></span></div></div></div></div></div></div>",
+          "tabs": []
+        },
+        {
+          "caption": "Example 7",
+          "rendered_html": "<div class=\"playground-content  bg-white padding-20 padding-bottom-25 rounded-top\" style=\"width: 100%;\"><div class=\"display-grid gap-20\"><div><div class=\"lead \"><div class=\"display-flex justify-content-between\"><div>Status text on highlight backgrounds</div></div><hr class=\"margin-top-10 border-color-light\"></div><div class=\"display-grid column-gap-25 gap-15 line-height-125rel grid-cols-1 grid-cols-4-sm\"><div class=\"bg-highlight-decent position-relative rounded padding-y-20 padding-x-15 text-center text-size-14 display-grid place-items-center border text-color-info contrast-check contrast-good\" data-contrast=\"4.05\"><div class=\"text-color-info\"><b>info</b> text on bg-<b>highlight-decent</b></div><div class=\"\n            contrast-indicator\n            position-absolute left-0 top-50pct translate-x-50pct-y-50pct padding-5\n            rounded-circle display-grid place-items-center text-color-white \n            border border-color-white\n        \"><span class=\"rioglyph rioglyph-ok\"></span><span class=\"rioglyph rioglyph-remove\"></span></div></div><div class=\"bg-highlight-decent position-relative rounded padding-y-20 padding-x-15 text-center text-size-14 display-grid place-items-center border text-color-success contrast-check contrast-good\" data-contrast=\"2.36\"><div class=\"text-color-success\"><b>success</b> text on bg-<b>highlight-decent</b></div><div class=\"\n            contrast-indicator\n            position-absolute left-0 top-50pct translate-x-50pct-y-50pct padding-5\n            rounded-circle display-grid place-items-center text-color-white \n            border border-color-white\n        \"><span class=\"rioglyph rioglyph-ok\"></span><span class=\"rioglyph rioglyph-remove\"></span></div></div><div class=\"bg-highlight-decent position-relative rounded padding-y-20 padding-x-15 text-center text-size-14 display-grid place-items-center border text-color-warning contrast-check contrast-good\" data-contrast=\"2.18\"><div class=\"text-color-warning\"><b>warning</b> text on bg-<b>highlight-decent</b></div><div class=\"\n            contrast-indicator\n            position-absolute left-0 top-50pct translate-x-50pct-y-50pct padding-5\n            rounded-circle display-grid place-items-center text-color-white \n            border border-color-white\n        \"><span class=\"rioglyph rioglyph-ok\"></span><span class=\"rioglyph rioglyph-remove\"></span></div></div><div class=\"bg-highlight-decent position-relative rounded padding-y-20 padding-x-15 text-center text-size-14 display-grid place-items-center border text-color-danger contrast-check contrast-good\" data-contrast=\"4.36\"><div class=\"text-color-danger\"><b>danger</b> text on bg-<b>highlight-decent</b></div><div class=\"\n            contrast-indicator\n            position-absolute left-0 top-50pct translate-x-50pct-y-50pct padding-5\n            rounded-circle display-grid place-items-center text-color-white \n            border border-color-white\n        \"><span class=\"rioglyph rioglyph-ok\"></span><span class=\"rioglyph rioglyph-remove\"></span></div></div><div class=\"bg-highlight-lightest position-relative rounded padding-y-20 padding-x-15 text-center text-size-14 display-grid place-items-center border text-color-info contrast-check contrast-good\" data-contrast=\"3.94\"><div class=\"text-color-info\"><b>info</b> text on bg-<b>highlight-lightest</b></div><div class=\"\n            contrast-indicator\n            position-absolute left-0 top-50pct translate-x-50pct-y-50pct padding-5\n            rounded-circle display-grid place-items-center text-color-white \n            border border-color-white\n        \"><span class=\"rioglyph rioglyph-ok\"></span><span class=\"rioglyph rioglyph-remove\"></span></div></div><div class=\"bg-highlight-lightest position-relative rounded padding-y-20 padding-x-15 text-center text-size-14 display-grid place-items-center border text-color-success contrast-check contrast-good\" data-contrast=\"2.3\"><div class=\"text-color-success\"><b>success</b> text on bg-<b>highlight-lightest</b></div><div class=\"\n            contrast-indicator\n            position-absolute left-0 top-50pct translate-x-50pct-y-50pct padding-5\n            rounded-circle display-grid place-items-center text-color-white \n            border border-color-white\n        \"><span class=\"rioglyph rioglyph-ok\"></span><span class=\"rioglyph rioglyph-remove\"></span></div></div><div class=\"bg-highlight-lightest position-relative rounded padding-y-20 padding-x-15 text-center text-size-14 display-grid place-items-center border text-color-warning contrast-check contrast-good\" data-contrast=\"2.12\"><div class=\"text-color-warning\"><b>warning</b> text on bg-<b>highlight-lightest</b></div><div class=\"\n            contrast-indicator\n            position-absolute left-0 top-50pct translate-x-50pct-y-50pct padding-5\n            rounded-circle display-grid place-items-center text-color-white \n            border border-color-white\n        \"><span class=\"rioglyph rioglyph-ok\"></span><span class=\"rioglyph rioglyph-remove\"></span></div></div><div class=\"bg-highlight-lightest position-relative rounded padding-y-20 padding-x-15 text-center text-size-14 display-grid place-items-center border text-color-danger contrast-check contrast-good\" data-contrast=\"4.24\"><div class=\"text-color-danger\"><b>danger</b> text on bg-<b>highlight-lightest</b></div><div class=\"\n            contrast-indicator\n            position-absolute left-0 top-50pct translate-x-50pct-y-50pct padding-5\n            rounded-circle display-grid place-items-center text-color-white \n            border border-color-white\n        \"><span class=\"rioglyph rioglyph-ok\"></span><span class=\"rioglyph rioglyph-remove\"></span></div></div><div class=\"bg-highlight-lighter position-relative rounded padding-y-20 padding-x-15 text-center text-size-14 display-grid place-items-center border text-color-info contrast-check contrast-bad\" data-contrast=\"3.52\"><div class=\"text-color-info\"><b>info</b> text on bg-<b>highlight-lighter</b></div><div class=\"\n            contrast-indicator\n            position-absolute left-0 top-50pct translate-x-50pct-y-50pct padding-5\n            rounded-circle display-grid place-items-center text-color-white \n            border border-color-white\n        \"><span class=\"rioglyph rioglyph-ok\"></span><span class=\"rioglyph rioglyph-remove\"></span></div></div><div class=\"bg-highlight-lighter position-relative rounded padding-y-20 padding-x-15 text-center text-size-14 display-grid place-items-center border text-color-success contrast-check contrast-bad\" data-contrast=\"2.05\"><div class=\"text-color-success\"><b>success</b> text on bg-<b>highlight-lighter</b></div><div class=\"\n            contrast-indicator\n            position-absolute left-0 top-50pct translate-x-50pct-y-50pct padding-5\n            rounded-circle display-grid place-items-center text-color-white \n            border border-color-white\n        \"><span class=\"rioglyph rioglyph-ok\"></span><span class=\"rioglyph rioglyph-remove\"></span></div></div><div class=\"bg-highlight-lighter position-relative rounded padding-y-20 padding-x-15 text-center text-size-14 display-grid place-items-center border text-color-warning contrast-check contrast-bad\" data-contrast=\"1.89\"><div class=\"text-color-warning\"><b>warning</b> text on bg-<b>highlight-lighter</b></div><div class=\"\n            contrast-indicator\n            position-absolute left-0 top-50pct translate-x-50pct-y-50pct padding-5\n            rounded-circle display-grid place-items-center text-color-white \n            border border-color-white\n        \"><span class=\"rioglyph rioglyph-ok\"></span><span class=\"rioglyph rioglyph-remove\"></span></div></div><div class=\"bg-highlight-lighter position-relative rounded padding-y-20 padding-x-15 text-center text-size-14 display-grid place-items-center border text-color-danger contrast-check contrast-bad\" data-contrast=\"3.79\"><div class=\"text-color-danger\"><b>danger</b> text on bg-<b>highlight-lighter</b></div><div class=\"\n            contrast-indicator\n            position-absolute left-0 top-50pct translate-x-50pct-y-50pct padding-5\n            rounded-circle display-grid place-items-center text-color-white \n            border border-color-white\n        \"><span class=\"rioglyph rioglyph-ok\"></span><span class=\"rioglyph rioglyph-remove\"></span></div></div><div class=\"bg-highlight-light position-relative rounded padding-y-20 padding-x-15 text-center text-size-14 display-grid place-items-center border text-color-info contrast-check contrast-bad\" data-contrast=\"2.71\"><div class=\"text-color-info\"><b>info</b> text on bg-<b>highlight-light</b></div><div class=\"\n            contrast-indicator\n            position-absolute left-0 top-50pct translate-x-50pct-y-50pct padding-5\n            rounded-circle display-grid place-items-center text-color-white \n            border border-color-white\n        \"><span class=\"rioglyph rioglyph-ok\"></span><span class=\"rioglyph rioglyph-remove\"></span></div></div><div class=\"bg-highlight-light position-relative rounded padding-y-20 padding-x-15 text-center text-size-14 display-grid place-items-center border text-color-success contrast-check contrast-bad\" data-contrast=\"1.58\"><div class=\"text-color-success\"><b>success</b> text on bg-<b>highlight-light</b></div><div class=\"\n            contrast-indicator\n            position-absolute left-0 top-50pct translate-x-50pct-y-50pct padding-5\n            rounded-circle display-grid place-items-center text-color-white \n            border border-color-white\n        \"><span class=\"rioglyph rioglyph-ok\"></span><span class=\"rioglyph rioglyph-remove\"></span></div></div><div class=\"bg-highlight-light position-relative rounded padding-y-20 padding-x-15 text-center text-size-14 display-grid place-items-center border text-color-warning contrast-check contrast-bad\" data-contrast=\"1.46\"><div class=\"text-color-warning\"><b>warning</b> text on bg-<b>highlight-light</b></div><div class=\"\n            contrast-indicator\n            position-absolute left-0 top-50pct translate-x-50pct-y-50pct padding-5\n            rounded-circle display-grid place-items-center text-color-white \n            border border-color-white\n        \"><span class=\"rioglyph rioglyph-ok\"></span><span class=\"rioglyph rioglyph-remove\"></span></div></div><div class=\"bg-highlight-light position-relative rounded padding-y-20 padding-x-15 text-center text-size-14 display-grid place-items-center border text-color-danger contrast-check contrast-bad\" data-contrast=\"2.91\"><div class=\"text-color-danger\"><b>danger</b> text on bg-<b>highlight-light</b></div><div class=\"\n            contrast-indicator\n            position-absolute left-0 top-50pct translate-x-50pct-y-50pct padding-5\n            rounded-circle display-grid place-items-center text-color-white \n            border border-color-white\n        \"><span class=\"rioglyph rioglyph-ok\"></span><span class=\"rioglyph rioglyph-remove\"></span></div></div><div class=\"bg-highlight position-relative rounded padding-y-20 padding-x-15 text-center text-size-14 display-grid place-items-center border text-color-info contrast-check contrast-bad\" data-contrast=\"1.7\"><div class=\"text-color-info\"><b>info</b> text on bg-<b>highlight</b></div><div class=\"\n            contrast-indicator\n            position-absolute left-0 top-50pct translate-x-50pct-y-50pct padding-5\n            rounded-circle display-grid place-items-center text-color-white \n            border border-color-white\n        \"><span class=\"rioglyph rioglyph-ok\"></span><span class=\"rioglyph rioglyph-remove\"></span></div></div><div class=\"bg-highlight position-relative rounded padding-y-20 padding-x-15 text-center text-size-14 display-grid place-items-center border text-color-success contrast-check contrast-bad\" data-contrast=\"1.01\"><div class=\"text-color-success\"><b>success</b> text on bg-<b>highlight</b></div><div class=\"\n            contrast-indicator\n            position-absolute left-0 top-50pct translate-x-50pct-y-50pct padding-5\n            rounded-circle display-grid place-items-center text-color-white \n            border border-color-white\n        \"><span class=\"rioglyph rioglyph-ok\"></span><span class=\"rioglyph rioglyph-remove\"></span></div></div><div class=\"bg-highlight position-relative rounded padding-y-20 padding-x-15 text-center text-size-14 display-grid place-items-center border text-color-warning contrast-check contrast-bad\" data-contrast=\"1.09\"><div class=\"text-color-warning\"><b>warning</b> text on bg-<b>highlight</b></div><div class=\"\n            contrast-indicator\n            position-absolute left-0 top-50pct translate-x-50pct-y-50pct padding-5\n            rounded-circle display-grid place-items-center text-color-white \n            border border-color-white\n        \"><span class=\"rioglyph rioglyph-ok\"></span><span class=\"rioglyph rioglyph-remove\"></span></div></div><div class=\"bg-highlight position-relative rounded padding-y-20 padding-x-15 text-center text-size-14 display-grid place-items-center border text-color-danger contrast-check contrast-bad\" data-contrast=\"1.83\"><div class=\"text-color-danger\"><b>danger</b> text on bg-<b>highlight</b></div><div class=\"\n            contrast-indicator\n            position-absolute left-0 top-50pct translate-x-50pct-y-50pct padding-5\n            rounded-circle display-grid place-items-center text-color-white \n            border border-color-white\n        \"><span class=\"rioglyph rioglyph-ok\"></span><span class=\"rioglyph rioglyph-remove\"></span></div></div><div class=\"bg-highlight-dark position-relative rounded padding-y-20 padding-x-15 text-center text-size-14 display-grid place-items-center border text-color-info contrast-check contrast-bad\" data-contrast=\"1.02\"><div class=\"text-color-info\"><b>info</b> text on bg-<b>highlight-dark</b></div><div class=\"\n            contrast-indicator\n            position-absolute left-0 top-50pct translate-x-50pct-y-50pct padding-5\n            rounded-circle display-grid place-items-center text-color-white \n            border border-color-white\n        \"><span class=\"rioglyph rioglyph-ok\"></span><span class=\"rioglyph rioglyph-remove\"></span></div></div><div class=\"bg-highlight-dark position-relative rounded padding-y-20 padding-x-15 text-center text-size-14 display-grid place-items-center border text-color-success contrast-check contrast-bad\" data-contrast=\"1.68\"><div class=\"text-color-success\"><b>success</b> text on bg-<b>highlight-dark</b></div><div class=\"\n            contrast-indicator\n            position-absolute left-0 top-50pct translate-x-50pct-y-50pct padding-5\n            rounded-circle display-grid place-items-center text-color-white \n            border border-color-white\n        \"><span class=\"rioglyph rioglyph-ok\"></span><span class=\"rioglyph rioglyph-remove\"></span></div></div><div class=\"bg-highlight-dark position-relative rounded padding-y-20 padding-x-15 text-center text-size-14 display-grid place-items-center border text-color-warning contrast-check contrast-bad\" data-contrast=\"1.82\"><div class=\"text-color-warning\"><b>warning</b> text on bg-<b>highlight-dark</b></div><div class=\"\n            contrast-indicator\n            position-absolute left-0 top-50pct translate-x-50pct-y-50pct padding-5\n            rounded-circle display-grid place-items-center text-color-white \n            border border-color-white\n        \"><span class=\"rioglyph rioglyph-ok\"></span><span class=\"rioglyph rioglyph-remove\"></span></div></div><div class=\"bg-highlight-dark position-relative rounded padding-y-20 padding-x-15 text-center text-size-14 display-grid place-items-center border text-color-danger contrast-check contrast-bad\" data-contrast=\"1.1\"><div class=\"text-color-danger\"><b>danger</b> text on bg-<b>highlight-dark</b></div><div class=\"\n            contrast-indicator\n            position-absolute left-0 top-50pct translate-x-50pct-y-50pct padding-5\n            rounded-circle display-grid place-items-center text-color-white \n            border border-color-white\n        \"><span class=\"rioglyph rioglyph-ok\"></span><span class=\"rioglyph rioglyph-remove\"></span></div></div><div class=\"bg-highlight-darker position-relative rounded padding-y-20 padding-x-15 text-center text-size-14 display-grid place-items-center border text-color-info contrast-check contrast-bad\" data-contrast=\"1.37\"><div class=\"text-color-info\"><b>info</b> text on bg-<b>highlight-darker</b></div><div class=\"\n            contrast-indicator\n            position-absolute left-0 top-50pct translate-x-50pct-y-50pct padding-5\n            rounded-circle display-grid place-items-center text-color-white \n            border border-color-white\n        \"><span class=\"rioglyph rioglyph-ok\"></span><span class=\"rioglyph rioglyph-remove\"></span></div></div><div class=\"bg-highlight-darker position-relative rounded padding-y-20 padding-x-15 text-center text-size-14 display-grid place-items-center border text-color-success contrast-check contrast-bad\" data-contrast=\"2.36\"><div class=\"text-color-success\"><b>success</b> text on bg-<b>highlight-darker</b></div><div class=\"\n            contrast-indicator\n            position-absolute left-0 top-50pct translate-x-50pct-y-50pct padding-5\n            rounded-circle display-grid place-items-center text-color-white \n            border border-color-white\n        \"><span class=\"rioglyph rioglyph-ok\"></span><span class=\"rioglyph rioglyph-remove\"></span></div></div><div class=\"bg-highlight-darker position-relative rounded padding-y-20 padding-x-15 text-center text-size-14 display-grid place-items-center border text-color-warning contrast-check contrast-bad\" data-contrast=\"2.56\"><div class=\"text-color-warning\"><b>warning</b> text on bg-<b>highlight-darker</b></div><div class=\"\n            contrast-indicator\n            position-absolute left-0 top-50pct translate-x-50pct-y-50pct padding-5\n            rounded-circle display-grid place-items-center text-color-white \n            border border-color-white\n        \"><span class=\"rioglyph rioglyph-ok\"></span><span class=\"rioglyph rioglyph-remove\"></span></div></div><div class=\"bg-highlight-darker position-relative rounded padding-y-20 padding-x-15 text-center text-size-14 display-grid place-items-center border text-color-danger contrast-check contrast-bad\" data-contrast=\"1.28\"><div class=\"text-color-danger\"><b>danger</b> text on bg-<b>highlight-darker</b></div><div class=\"\n            contrast-indicator\n            position-absolute left-0 top-50pct translate-x-50pct-y-50pct padding-5\n            rounded-circle display-grid place-items-center text-color-white \n            border border-color-white\n        \"><span class=\"rioglyph rioglyph-ok\"></span><span class=\"rioglyph rioglyph-remove\"></span></div></div><div class=\"bg-highlight-darkest position-relative rounded padding-y-20 padding-x-15 text-center text-size-14 display-grid place-items-center border text-color-info contrast-check contrast-bad\" data-contrast=\"2.27\"><div class=\"text-color-info\"><b>info</b> text on bg-<b>highlight-darkest</b></div><div class=\"\n            contrast-indicator\n            position-absolute left-0 top-50pct translate-x-50pct-y-50pct padding-5\n            rounded-circle display-grid place-items-center text-color-white \n            border border-color-white\n        \"><span class=\"rioglyph rioglyph-ok\"></span><span class=\"rioglyph rioglyph-remove\"></span></div></div><div class=\"bg-highlight-darkest position-relative rounded padding-y-20 padding-x-15 text-center text-size-14 display-grid place-items-center border text-color-success contrast-check contrast-bad\" data-contrast=\"3.9\"><div class=\"text-color-success\"><b>success</b> text on bg-<b>highlight-darkest</b></div><div class=\"\n            contrast-indicator\n            position-absolute left-0 top-50pct translate-x-50pct-y-50pct padding-5\n            rounded-circle display-grid place-items-center text-color-white \n            border border-color-white\n        \"><span class=\"rioglyph rioglyph-ok\"></span><span class=\"rioglyph rioglyph-remove\"></span></div></div><div class=\"bg-highlight-darkest position-relative rounded padding-y-20 padding-x-15 text-center text-size-14 display-grid place-items-center border text-color-warning contrast-check contrast-good\" data-contrast=\"4.23\"><div class=\"text-color-warning\"><b>warning</b> text on bg-<b>highlight-darkest</b></div><div class=\"\n            contrast-indicator\n            position-absolute left-0 top-50pct translate-x-50pct-y-50pct padding-5\n            rounded-circle display-grid place-items-center text-color-white \n            border border-color-white\n        \"><span class=\"rioglyph rioglyph-ok\"></span><span class=\"rioglyph rioglyph-remove\"></span></div></div><div class=\"bg-highlight-darkest position-relative rounded padding-y-20 padding-x-15 text-center text-size-14 display-grid place-items-center border text-color-danger contrast-check contrast-bad\" data-contrast=\"2.11\"><div class=\"text-color-danger\"><b>danger</b> text on bg-<b>highlight-darkest</b></div><div class=\"\n            contrast-indicator\n            position-absolute left-0 top-50pct translate-x-50pct-y-50pct padding-5\n            rounded-circle display-grid place-items-center text-color-white \n            border border-color-white\n        \"><span class=\"rioglyph rioglyph-ok\"></span><span class=\"rioglyph rioglyph-remove\"></span></div></div></div></div></div></div>",
+          "tabs": []
+        }
+      ]
+    }
+  ],
+  "see_also": []
+}

package/data/pages/Getting-started/start/guidelines/custom-css.json ADDED Viewed

@@ -0,0 +1,27 @@
+{
+  "metadata": {
+    "captured_at": "2025-11-21T12:07:00.366Z",
+    "source": "https://uikit.developers.rio.cloud/#start/guidelines/custom-css",
+    "category": "Getting started",
+    "section": "Guidelines",
+    "slug": "start/guidelines/custom-css",
+    "version": "v1.13.2",
+    "hash_algorithm": "sha256",
+    "hash": "00a2330f1a877a403bd79cab65876c20c9684bb16744cf15e84b19b7ca07a882"
+  },
+  "title": "Avoid writing custom CSS",
+  "lead": "Maintaining CSS will become harder over time due to various reasons like growing amount of styles, old and unknown overwrites, exchange of Team members etc.",
+  "content": [
+    {
+      "heading": "Avoid writing custom CSS",
+      "body": "Getting more familiar with Bootstrap and the UIKIT will speed up your development and keep the maintenance of custom styles low.\n\nTherefore, avoid writing custom CSS where possible and try to achieve the desired results by using",
+      "examples": []
+    },
+    {
+      "heading": "Custom CSS",
+      "body": "If the UIKIT colors do not fit your needs, you have the option to use 5 additional custom color vars.\n\nYou just have to add those css vars to the index.html head and than you can use the following classes. bg-custom-a, text-color-custom-a, fill-custom-a.\n\n```html\n<head>\n    <style>\n        :root {\n            --custom-color-a: #5eff1e;\n            --custom-color-b: #e51eff;\n            --custom-color-c: #1e90ff;\n            --custom-color-d: #ff4b1e;\n            --custom-color-e: #ffcb1e;\n        }\n    </style>\n</head>\n```\n\n```html\n<div class=\"bg-custom-a\">\n    <p class=\"text-color-custom-b\">\n        <svg class=\"fill-custom-c\"></svg>\n    </p>\n</div>\n```",
+      "examples": []
+    }
+  ],
+  "see_also": []
+}

package/data/pages/Getting-started/start/guidelines/custom-rioglyph.json ADDED Viewed

@@ -0,0 +1,22 @@
+{
+  "metadata": {
+    "captured_at": "2025-11-21T12:07:00.391Z",
+    "source": "https://uikit.developers.rio.cloud/#start/guidelines/custom-rioglyph",
+    "category": "Getting started",
+    "section": "Guidelines",
+    "slug": "start/guidelines/custom-rioglyph",
+    "version": "v1.13.2",
+    "hash_algorithm": "sha256",
+    "hash": "f3f93812fe5173603fb488050de7c8f4866d2336ec3422aaac587f55c35da955"
+  },
+  "title": "Custom RIOglyph icon",
+  "lead": "To use a custom Rioglyph icon, there are two different approaches:",
+  "content": [
+    {
+      "heading": "Custom RIOglyph icon",
+      "body": "1. Use an inline style with a CSS variable\n2. Define a CSS class that applies an SVG as a mask-image\n\nBelow is an example of both approaches:\n\nApproach 1: Inline style\n\n```html\n<span class=\"rioglyph\" style=\"--i: url(https://cdn.rio.cloud/images/uikit/react_logo.svg);\"></span>\n```\n\nApproach 2: Custom CSS class\n\n```html\n<style>\n    .rioglyph-custom-xxx {\n        --i: url('https://cdn.rio.cloud/images/uikit/react_logo.svg');\n    }\n</style>\n```\n\n```html\n<span class=\"rioglyph rioglyph-custom\"></span>\n```",
+      "examples": []
+    }
+  ],
+  "see_also": []
+}