beercss 2.0.0

v2.0.0

on Node.js NPM

CHANGELOG 2.0.0

• Updating to Material Design 3 #23
• Adding wrap and no-wrap helpers to a element
• Adding no-shadow, small-shadow, medium-shadow and large-shadow helpers
• Adding --shadow3 as a css variable
• Adding extend helper to button element
• Adding header and footer elements
• Adding progress element
• Adding dynamic colors (from Material Design 3)
• Adding disable state on button element #28
• Adding a theme builder on page (from Material Design 3)
• Fixing scroll helper, scrollbar was over the elements
• Preventing the page element to be clickable after to hide the container

BREAKING CHANGES

• Updating default chips (from Material Design 3)

• Updating default tabs (now, default tabs are the first example)

• Updating all color css variables (from Material Design 3)

--primary: #6750A4;
--on-primary: #FFFFFF;
--primary-container: #EADDFF;
--on-primary-container: #21005E;
--secondary: #625B71;
--on-secondary: #FFFFFF;
--secondary-container: #E8DEF8;
--on-secondary-container: #1E192B;
--tertiary: #7D5260;
--on-tertiary: #FFFFFF;
--tertiary-container: #FFD8E4;
--on-tertiary-container: #370B1E;
--error: #B3261E;
--on-error: #FFFFFF;
--error-container: #F9DEDC;
--on-error-container: #370B1E;
--background: #FFFBFE;
--on-background: #1C1B1F;
--surface: #FFFBFE;
--on-surface: #1C1B1F;
--outline: #79747E;
--surface-variant: #E7E0EC;
--on-surface-variant: #49454E;
--inverse-surface: #313033;
--inverse-on-surface: #F4EFF4;
--overlay: rgba(0,0,0,.5);
--active: rgba(0,0,0,.1);

• Updating all color names

// from > to
color-light-5 > color1
color-light-4 > color2
color-light-3 > color3
color-light-2 > color4
color-light-1 > color5
color > color6 (or color)
color-dark-1 > color7
color-dark-2 > color8
color-dark-3 > color9
color-dark-4 > color10