Orbitarium Design

Changelog

Every release of Orbitarium Design, newest first.

1.1.0
Latest

Raised buttons, a full color palette, a dozen new components, a proper mobile layout and a new license.

Added
  • Raised solid buttons: light gradient, top rim, inner bottom edge and a shadow tinted with the button's color. Hover adds a glow.
  • Button variants orb-btn-solid, -soft, -outline, -link, -success, -warning and -info.
  • Button sizes orb-btn-xs and orb-btn-xl, plus -pill, -glow, -flat, is-loading and orb-btn-group.
  • 38 color tones with orb-tone-*. They recolor buttons, pills, badges, alerts, avatars, progress bars, checkboxes and switches, on the element or on a parent.
  • 32 accent presets with <html data-orb-accent="violet">, saved between visits.
  • Alerts, tabs (with keyboard navigation), progress bars, spinners, avatars, tooltips, toasts and keycaps.
  • Styles for the dropdown menu. Before this, the dropdown only had JavaScript.
  • Radio buttons, range slider, input groups with addons, invalid state and orb-form-error.
  • orb-card-footer, orb-card-accent, solid and outline badges, and a live pulse for pills.
  • Mobile menu for the site header with data-orb-menu-toggle.
  • Modals open as bottom sheets on phones.
  • Orbitarium.toast(), Orbitarium.accent and Orbitarium.tabs in the JavaScript API.
  • CDN: cdn.orbitariumdesign.eu/style.css and cdn.orbitariumdesign.eu/script.js.
Changed
  • New license: Orbitarium Design License. Free for personal and commercial use, no attribution required. Read it.
  • orb-btn-danger is now a solid red button instead of an outline.
  • orb-btn-secondary, checkboxes, switches, tabs and the brand mark now use the raised look.
  • Semantic colors adjusted for better contrast: success #0f9f6e, danger #e5484d, info #0284c7.
  • Pill and badge text is mixed with the text color so it stays readable in light mode.
  • orb-btn-icon is a fixed square: 40px, or 28, 34 and 48px with the size classes.
  • The reset now has zero specificity, so component classes always win over it.
  • Modals return focus to the button that opened them.
Fixed
  • Buttons lost their font weight and text color because the reset overrode them.
  • Grids and code blocks pushed the page wider than the screen on phones.
  • iOS zoomed in when focusing inputs. Inputs are now 16px on small screens.
  • Chrome on Android enlarged some text blocks on its own.
  • The sidebar demo jumped to the bottom of the viewport on mobile. Use orb-shell-contained to keep the bottom bar inside its box.
  • Stacked table rows are aligned and no longer overflow.
Removed
  • The npm package. Use the CDN or download the two files.
Upgrading from 1.0
  • Outline delete buttons: replace orb-btn-danger with orb-btn-outline orb-tone-danger to keep the old look.
  • Flat buttons: add orb-btn-flat to any button that should stay flat.
  • Brand icon: orb-brand-icon is for an image logo. orb-brand-mark still works for an SVG.
1.0.0
First release

The design system behind WebOrbiton's own products, as a single stylesheet and script.

Added
  • Design tokens for color, spacing, radius, shadows and motion. Every tint derives from --orb-primary through color-mix().
  • Light and dark mode with orb-dark, saved between visits.
  • Primary, secondary, ghost and danger buttons in three sizes.
  • Inputs, select, textarea, checkbox and switch.
  • Cards, panels, feature cards, pills and badges.
  • Sidebar shell that turns into a bottom tab bar under 768px.
  • Modal, table with a stacked mobile mode, and the optional orb-depth layer.
  • Layout helpers: container, sections, hero, site header and footer, plus flex, grid and spacing utilities.
  • JavaScript for theme, modals, mobile nav sheet, scroll reveal and dropdowns.