Lumos V2 Released

v2.0.0

Update page_code_custom.html

New Components & Variables

• Renamed "font-family" variable folder to "font" folder since it contains both families and weights
• Renamed "space" folder to "size" folder. It can now be used for anything that needs an adpative size including font sizes
• Added a new "space" folder with extra-small, small, medium, & large values linked to the "size" folder. The new space folder is used for general spacing between content within a section. --space--large is smaller than the section's --padding-vertical--small
• Renamed p-small & p-large folders to paragraph-small & paragraph-large
• Added some styles in page_code_custom for switching grid item order from data attribute value
• Added an "Example Layouts" page with some default components

Base, Color, & Typography Embeds Update

Base Embed
• Removed --line-height--inherit & --letter-spacing--inherit. Since these properties are set on the body with EM, inheriting the body's line-height or letter-spacing isn't useful. Each element that gets a new font size should have its own line-height and letter-spacing applied so that it multiplies off the font size of that element and not off the body font size.
• Replaced every instance of [data-container] with a div with a class of "container" in effort to make Lumos more beginner friendly.
• Set data-padding-top and data-padding-bottom to values of "none, small, main, large" instead of "0, 1, 2, 3". This is to make Lumos more beginner friendly.

Color Embed
• Replaced data-theme "-1, 0, 1, 2" with "invert, inherit, light, dark". This is to make Lumos more beginner friendly.
• Renamed --button2-- variables to --button-outlined-- variables
• Renamed data-button-style "1, 2" to "solid, outlined"

Typography Embed
• Added p-large and p-small variables with utility classes of fs7.1 and fs7.2

Base, Color, & Responsive Embeds Update

Base Embed
• Renamed all data attributes to start with data-
• Removed default padding from video tag
• Set video tag to default of width: 100% and object-fit: cover;
• Set svg tag to default of display block (removes the bottom margin caused by inline-block)
• Switched container to a div with a "data-container" attribute name instead of a custom element with a tag of "container". Research was inconclusive if creating custom tag names is okay.
• Removed specificity from [data-padding-top] & [data-padding-bottom] attributes so that they're overridable using the style panel

Color Embed
• Renamed all data attributes to start with data-

Responsive Embed
• Removed --padding-horizontal--main: 0.5rem; from portrait. So that the main horizontal padding never gets smaller than 1rem (equal to the main grid gap)

Components
• Added icon components with vector-effect="non-scaling-stroke" applied to the paths
• Renamed components to follow forward slash naming for easy search. Example: searching "Btn /" shows all button components available
• Added a "Starter / Video" component for an easy html video element with all the needed attributes attached

Base & Responsive Embeds Update

Base Embed
• Moved default vertical padding from section to container
• Renamed --page-padding variables to --padding-horizontal
• Renamed --section-vertical variables to --padding-vertical
• Renamed [section-top] & [section-bottom] attributes to [padding-top] & [padding-bottom]

Responsive Embed
• Changed --page-padding--main to --padding-horizontal--main

Base, Color, & Typography Embeds Update

Base Embed
• Set button tag to text-align: inherit; to remove center align default

Color Embed
• Raised the specificity of the [theme] attributes to tag level so that theme attributes can override the default colors on links and button tags

Typography Embed
• Change fw0 utility from the inherit variable to value of inherit directly. No functional difference. Just cleaner code.

Responsive Embed Updated

Spacing variables added

Color Embed Updated

Renamed [invert="true"] attribute to [theme="-1"]

Base Embed Updated

Added css comment before and after grid utility so that the utility doesn't show twice in the Lumos Chrome Extension

Responsive Embed Update

Fixed misnamed variables in the responsive embed to match webflow variables