Skip to content

Introduction of Open Component Approach

Latest

Choose a tag to compare

@lumosframework lumosframework released this 16 Aug 09:00
cd44314

Components

Renamed
Custom Code > Global Styles
Section / Full > Section Custom
Grid Guide > Global Guides
Global / Btn Group > Button Wrapper
Global / Background Color > Background Color
Global / Clickable > Clickable
Global / Content > Content Wrapper
Global / Div > Layout Div
Global / Eyebrow > Typography Eyebrow
Global / Heading > Typography Heading
Global / Paragraph > Typography Paragraph
Global / Section > Section
Global / Section Space > Spacer

Deleted
Section / Simple
Section / Hero / Placeholder
Form / Main
Global / Visual

Added
Button Text Link
Form
Form Fieldset
Form Input
Form Radio
Form Select
Form Select Option
Form Textarea
Form Recaptcha
Slider
Typography Tag
Media Overlay
Visual Image
Visual Video
Logo
Card Primary
Button Arrow
Stroke Path
Accordion List
Accordion Item
Icon Search
Nav
Nav Banner
Menu
Button Close
Modal
Tab
Tab Link

Classes

Added
u-heading-accent
u-theme-brand
u-background-skeleton
u-threshold-large
u-threshold-medium
u-threshold-small
u-section
u-ignore-trim
u-ratio-5-4
u-ratio-4-5
u-padding-{sitemargin,gutter,text,0-8,small,main,large}
u-padding-block-{sitemargin,gutter,text,0-8,small,main,large}
u-padding-inline-{sitemargin,gutter,text,0-8}
u-padding-top-{sitemargin,gutter,text,0-8,small,main,large}
u-padding-bottom-{sitemargin,gutter,text,0-8,small,main,large}
u-padding-left-{sitemargin,gutter,text,0-8}
u-padding-right-{sitemargin,gutter,text,0-8}
u-line-height-small
u-line-height-medium
u-line-height-large
u-line-height-huge
u-letter-spacing-tight
u-letter-spacing-normal

Renamed
u-btn-group > u-button-group
u-mt-{auto,gutter,text,0-8} > u-margin-top-{auto,gutter,text,0-8}
u-mb-{auto,gutter,text,0-8} > u-margin-bottom-{auto,gutter,text,0-8}

Variables

Renamed
screen-size/max > site/viewport-max
screen-size/min > site/viewport-min
container/small > max-width/small
container/main > max-width/main
container/full > max-width/full
swatch/brand > swatch/brand-500
typography/line-height/1 > typography/line-height/small
typography/line-height/1.1 > typography/line-height/medium
typography/line-height/1.3 > typography/line-height/large
typography/line-height/1.5 > typography/line-height/huge
typography/letter-spacing/-0.03em > typography/letter-spacing/tight
typography/letter-spacing/0em > typography/letter-spacing/normal

Added
Theme / Brand mode
swatch/brand-100
swatch/brand-200
swatch/brand-300
swatch/brand-400
swatch/brand-600
swatch/brand-700
swatch/brand-800
swatch/brand-900
theme/heading-accent
text-link/text
text-link/border
text-link/text-hover
text-link/border-hover
text-style/text-wrap
nav/max-width-outer
nav/max-width-inner
nav/height
nav/banner-height
nav/height-total
nav/spacing-outer-vertical
nav/spacing-outer-horizontal
nav/spacing-inner-horizontal
nav/radius
nav/hamburger-thickness
nav/hamburger-gap
nav/menu-open-duration
nav/menu-close-duration
nav/dropdown-open-duration
nav/dropdown-close-duration
theme/nav/background