playbook_ui 13.27.0.pre.alpha.powercentrainplaybookpt22905 → 13.27.0.pre.alpha.testingcollapsible2917

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 74d7359c8120c5c70d7f9921d02699ff6f9cf3f0c937af7a1f8b7470413d3ec9
-  data.tar.gz: 109783b9b43e8a3fd37d20394c1c492f1ab048ffc5f7e88dbcf44b85aa0a2cb1
+  metadata.gz: b12c7a464c2f34a42001f703bfb42df3f750da9574ab1163e059a4ce6b906f77
+  data.tar.gz: 8deca1276b0a8ae5c8d6a542e2a7e5362c1c3f7e206c4379b21d2cb48da0cb97
 SHA512:
-  metadata.gz: 2e13c1b3ddf3053fbb089f1aa974501f91cc30217d511ddb8138e83304542b3e8a2e81d4cbbfa88de95d132f2c327f94f6552cf139e5ef3f53fb665d79b37a0b
-  data.tar.gz: 0f12b7619fcff70e4f499b0e05532497abda01537861143f9d3320d0ce51be870009b150f5ddedd304ab0d30993f0cf4ee6de4252f784c821baf6cefa1a18c04
+  metadata.gz: 3d5187d01379e3fdc8aea8d2d0c6bdf717ba10ee4c60f29ca5eb4abb83900ddb5b78fd627522ec54aa1e3bb6957f36252dc9001827efd3b70bc597ee69cb6e10
+  data.tar.gz: 0e33d8a8583c2ad4c58002c04f087dae84ffa6586f8579eae2f1bd479cf4ab6143907a3305503e1679e179f98e4ac75a67069ce9b42056c2a84881de2149cab0

data/app/pb_kits/playbook/pb_button/_button.scss

@@ -6,9 +6,9 @@
 @import "../tokens/typography";
 
 $pb_button_sizes: (
-  "sm":   $font_smaller,
-  "md":   $font_small,
-  "lg":   ($font_large - 2px),
+  "sm":   0.75rem,
+  "md":   0.875rem,
+  "lg":   1.125rem,
 );
 
 [class*=pb_button_kit]{

data/app/pb_kits/playbook/pb_button/_button_mixins.scss

@@ -9,7 +9,7 @@
 
 $pb_button_size: 40px;
 $pb_button_v_padding: 7px;
-$pb_button_h_padding: 28px;
+$pb_button_h_padding: 34px;
 $pb_button_hover_darken: 4%;
 $pb_button_border_width: 0px;
 
@@ -27,13 +27,12 @@ $pb_button_border_width: 0px;
   text-rendering: optimizeLegibility;
   font-size: $font_small;
   font-weight: $bold;
-  letter-spacing: $lspace_loose;
   text-align: center;
   vertical-align: middle;
   text-transform: none;
   border-width: $pb_button_border_width;
   border-style: solid;
-  border-radius: $border_rad_heavy;
+  border-radius: $border_rad_light;
   min-height: $pb_button_size;
   line-height: 1.5;
   padding: $pb_button_v_padding $pb_button_h_padding;

data/app/pb_kits/playbook/pb_caption/_caption_mixin.scss

@@ -24,7 +24,7 @@ $pb_dark_caption_colors: (
   color: $text_lt_light;
   text-transform: uppercase;
   font-size: $font_size;
-  letter-spacing: $lspace_loosest;
+  letter-spacing: $lspace_looser;
 }
 
 @mixin caption_color($color: $text_lt_light) {

data/app/pb_kits/playbook/pb_collapsible/_collapsible.tsx

@@ -9,6 +9,7 @@ import CollapsibleContent from './child_kits/CollapsibleContent'
 import CollapsibleMain from './child_kits/CollapsibleMain'
 import CollapsibleContext from './context'
 import { IconSizes } from "../pb_icon/_icon"
+import CollapsibleIcon from './child_kits/CollapsibleIcon'
 
 
 type CollapsibleProps = {
@@ -52,12 +53,15 @@ const Collapsible = ({
   if (CollapsibleParent.length !== 2) {
     throw new Error('Collapsible requires <CollapsibleMain> and <CollapsibleContent> to function properly.')
   }
+  const FirstChild = CollapsibleParent[0]
+  const SecondChild = CollapsibleParent[1]
 
-  const Main = CollapsibleParent[0]
-  const Content = CollapsibleParent[1]
+  const Main = FirstChild.type === CollapsibleMain ? FirstChild : null
+  const Content = SecondChild.type === CollapsibleContent ? SecondChild : null
 
-  const { children: mainChildren, ...mainProps } = Main.props
-  const { children: contentChildren, ...contentProps } = Content.props
+
+  const { children: mainChildren = null, ...mainProps } = Main ? Main.props : {}
+  const { children: contentChildren = null, ...contentProps } = Content ? Content.props : {}
   const ariaProps = buildAriaProps(aria)
   const dataProps = buildDataProps(data)
   const htmlProps = buildHtmlProps(htmlOptions)
@@ -75,13 +79,19 @@ const Collapsible = ({
           className={classes}
           id={id}
       >
-        <CollapsibleMain {...mainProps}>
-          {mainChildren}
-        </CollapsibleMain>
+        {Main ? (
+          <CollapsibleMain {...mainProps}>
+            {mainChildren}
+          </CollapsibleMain>
+        ) : (
+          FirstChild
+        )}
 
-        <CollapsibleContent {...contentProps}>
-          {contentChildren}
-        </CollapsibleContent>
+        {Content && (
+          <CollapsibleContent {...contentProps}>
+            {contentChildren}
+          </CollapsibleContent>
+        )}
       </div>
     </CollapsibleContext.Provider>
   )
@@ -89,5 +99,6 @@ const Collapsible = ({
 
 Collapsible.Main = CollapsibleMain
 Collapsible.Content = CollapsibleContent
+Collapsible.Icon = CollapsibleIcon
 
 export default Collapsible

data/app/pb_kits/playbook/pb_collapsible/child_kits/CollapsibleIcon.tsx

@@ -0,0 +1,92 @@
+import React from "react";
+import Icon, { IconSizes } from "../../pb_icon/_icon";
+
+type IconColors =
+  | "default"
+  | "light"
+  | "lighter"
+  | "link"
+  | "error"
+  | "success";
+
+type IconProps = {
+  collapsed: boolean | (() => void);
+  icon?: string[] | string;
+  iconColor?: IconColors;
+  iconSize?: IconSizes;
+  onIconClick?: () => void;
+};
+
+type colorMap = {
+  default: string;
+  light: string;
+  lighter: string;
+  link: string;
+  error: string;
+  success: string;
+};
+
+const colorMap = {
+  default: "#242B42",
+  light: "#687887",
+  lighter: "#C1CDD6",
+  link: "#0056CF",
+  error: "#FF2229",
+  success: "#00CA74",
+};
+
+const CollapsibleIcon = ({
+  collapsed,
+  icon,
+  iconSize,
+  iconColor,
+  onIconClick,
+}: IconProps) => {
+  const color = colorMap[iconColor];
+
+  const showIcon = (icon: string | string[]) => {
+    if (typeof icon === "string") {
+      return [icon, icon];
+    }
+    return icon;
+  };
+
+  const handleIconClick = (e: React.MouseEvent<HTMLElement>) => {
+    if (onIconClick) {
+      e.stopPropagation();
+      onIconClick();
+    }
+  };
+
+  return (
+    <>
+      {collapsed ? (
+        <div
+            className="icon_wrapper"
+            key={icon ? showIcon(icon)[0] : "chevron-down"}
+            onClick={(e) => handleIconClick(e)}
+            style={{ verticalAlign: "middle", color: color }}
+        >
+          <Icon
+              icon={icon ? showIcon(icon)[0] : "chevron-down"}
+              size={iconSize}
+          />
+        </div>
+      ) : (
+        <div
+            className="icon_wrapper"
+            key={icon ? showIcon(icon)[1] : "chevron-up"}
+            onClick={(e) => handleIconClick(e)}
+            style={{ verticalAlign: "middle", color: color }}
+        >
+          <Icon
+              icon={icon ? showIcon(icon)[1] : "chevron-up"}
+              size={iconSize}
+          />
+        </div>
+      )}
+    </>
+  );
+};
+
+export default CollapsibleIcon;

data/app/pb_kits/playbook/pb_collapsible/child_kits/CollapsibleMain.tsx

@@ -7,27 +7,9 @@ import { globalProps } from '../../utilities/globalProps'
 
 import Flex from '../../pb_flex/_flex'
 import FlexItem from '../../pb_flex/_flex_item'
-import Icon, { IconSizes } from "../../pb_icon/_icon"
+import { IconSizes } from "../../pb_icon/_icon"
 import CollapsibleContext from '../context'
-
-
-type colorMap = {
-  default: string,
-  light: string,
-  lighter: string,
-  link: string,
-  error: string,
-  success: string
-}
-
-const colorMap = {
-  default: "#242B42",
-  light: "#687887",
-  lighter: "#C1CDD6",
-  link: "#0056CF",
-  error: "#FF2229",
-  success: "#00CA74",
-}
+import CollapsibleIcon from './CollapsibleIcon'
 
 type CollapsibleMainProps = {
   children: React.ReactNode[] | React.ReactNode,
@@ -38,60 +20,6 @@ type CollapsibleMainProps = {
 }
 type IconColors =  "default" | "light" | "lighter" | "link" | "error" | "success"
 
-type IconProps = {
-  collapsed: boolean | (()=> void)
-  icon?: string[] | string
-  iconColor?: IconColors
-  iconSize?: IconSizes
-  onIconClick?: ()=> void
-}
-
-const ToggleIcon = ({ collapsed, icon, iconSize, iconColor, onIconClick }: IconProps) => {
-  const color = colorMap[iconColor]
-
-  const showIcon = (icon: string |string[]) => {
-    if (typeof icon === "string") {
-      return [icon, icon]
-    }
-    return icon
-  }
-
-  const handleIconClick = (e: React.MouseEvent<HTMLElement>) => {
-    if (onIconClick) {
-    e.stopPropagation();
-    onIconClick()
-    }
-  }
-
-  return (
-    <>
-      {collapsed ? (
-        <div
-            className="icon_wrapper"
-            key={icon ? showIcon(icon)[0] : "chevron-down"}
-            onClick={(e)=> handleIconClick(e)}
-            style={{ verticalAlign: "middle", color: color }}
-        >
-          <Icon icon={icon ? showIcon(icon)[0] : "chevron-down"}
-              size={iconSize}
-          />
-        </div>
-      ) : (
-        <div
-            className="icon_wrapper"
-            key={icon ? showIcon(icon)[1] : "chevron-up"}
-            onClick={(e)=> handleIconClick(e)}
-            style={{ verticalAlign: "middle", color: color }}
-        >
-          <Icon icon={icon ? showIcon(icon)[1] : "chevron-up"}
-              size={iconSize}
-          />
-        </div>
-      )}
-    </>
-  );
-}
-
 const CollapsibleMain = ({
   children,
   className,
@@ -120,7 +48,7 @@ const CollapsibleMain = ({
         >
           <FlexItem>{children}</FlexItem>
           <FlexItem>
-            <ToggleIcon
+            <CollapsibleIcon
                 collapsed={collapsed as () => void}
                 icon={icon as string[] | string}
                 iconColor={iconColor as IconColors}

data/app/pb_kits/playbook/pb_collapsible/collapsible_icon.html.erb

@@ -0,0 +1,15 @@
+<%= content_tag(:div,
+    id: object.id,
+    data: object.data,
+    class: object.classname,
+    aria: object.aria,
+    style: "color: #{object.icon_color};",
+    **combined_html_options) do %>
+        <% if object.icon.present? %>
+          <%= pb_rails("icon", props: { icon: object.show_icon(object.icon)[0], id:"collapsible_open_icon", size: object.size }) %>
+          <%= pb_rails("icon", props: { icon: object.show_icon(object.icon)[1], id:"collapsible_close_icon", size: object.size }) %>
+        <% else %>
+          <%= pb_rails("icon", props: { icon: "chevron-down", id:"collapsible_open_icon", size: object.size }) %>
+          <%= pb_rails("icon", props: { icon: "chevron-up", id:"collapsible_close_icon", size: object.size }) %>
+        <% end %>
+<% end %>

data/app/pb_kits/playbook/pb_collapsible/collapsible_icon.rb

@@ -0,0 +1,37 @@
+# frozen_string_literal: true
+
+module Playbook
+  module PbCollapsible
+    class CollapsibleIcon < Playbook::KitBase
+      prop :collapsed, type: Playbook::Props::Boolean,
+                       default: true
+      prop :color, type: Playbook::Props::Enum,
+                   values: %w[default light lighter link success error],
+                   default: "default"
+      prop :icon
+      prop :size, type: Playbook::Props::Enum,
+                  values: ["lg", "xs", "sm", "1x", "2x", "3x", "4x", "5x", "6x", "7x", "8x", "9x", "10x", nil],
+                  default: nil
+
+      def classname
+        generate_classname("pb_collapsible_icon_kit", separator: " ")
+      end
+
+      def show_icon(icon)
+        case icon
+        when ::String
+          [icon, icon]
+        when ::Array
+          icon
+        end
+      end
+
+      def icon_color
+        return "" if color.nil?
+
+        color_object = { light: "#687887", lighter: "#C1CDD6", link: "#0056CF", success: "#00CA74", error: "#FF2229", default: "#242B42" }
+        color_object[color.to_sym]
+      end
+    end
+  end
+end

data/app/pb_kits/playbook/pb_collapsible/docs/_collapsible_custom_main.jsx

@@ -0,0 +1,73 @@
+import React from 'react'
+import { Collapsible, useCollapsible, Background, Flex, Title, List, ListItem } from '../..'
+
+const CollapsibleCustomMain = () => {
+  const [isCollapsed, setIsCollapsed] = useCollapsible(true)
+
+  return (
+  <>
+    <Collapsible
+        collapsed={isCollapsed}
+    >
+          <Background 
+              backgroundColor="white" 
+              cursor="pointer"
+              htmlOptions={{onClick:() => setIsCollapsed(!isCollapsed)}}
+              position="sticky" 
+              top="0" 
+          >
+              <Flex 
+                  align="center" 
+                  gap="sm"
+                  justify="between" 
+              >
+                <Title 
+                    size={4} 
+                    text="Custom Main Section" 
+                />
+                <Collapsible.Icon collapsed={isCollapsed}/>
+              </Flex>
+          </Background>
+      <Collapsible.Content padding="none">
+          <div>
+          <List>
+              <ListItem 
+                  align="stretch"
+                  flexDirection="column" 
+              >
+                Checklist item
+              </ListItem>
+              <ListItem 
+                  align="stretch"
+                  flexDirection="column" 
+              >
+                Checklist item
+              </ListItem>
+              <ListItem 
+                  align="stretch"
+                  flexDirection="column" 
+              >
+                Checklist item
+              </ListItem>
+              <ListItem 
+                  align="stretch"
+                  flexDirection="column" 
+              >
+                Checklist item
+              </ListItem>
+              <ListItem 
+                  align="stretch"
+                  flexDirection="column" 
+              >
+                Checklist item
+              </ListItem>
+            </List>
+          </div>
+      </Collapsible.Content>
+    </Collapsible>
+   
+  </>
+  )
+}
+
+export default CollapsibleCustomMain

data/app/pb_kits/playbook/pb_collapsible/docs/_collapsible_custom_main.md

@@ -0,0 +1,5 @@
+A custom Main section can also be used in place of the provided `Collapsible.Main`. This gives devs full control over that subcomponent. For example, here we are using global props to make that custom Main 'sticky' on scroll.
+
+If a custom component is used in place of the default, devs must handle collapsible toggling themselves via the useCollapsible hook as seen in this example.
+
+The default Collapsible icon can also be used as part of the custom Main as shown, you will need to pass the Collapsible state to the `collapsed` prop on the optional `Collapsible.Icon`.

data/app/pb_kits/playbook/pb_collapsible/docs/_collapsible_custom_main_rails.html.erb

@@ -0,0 +1,20 @@
+<%= pb_rails("collapsible", props: { name: "default-example" }) do %>
+    <%= pb_rails("background", props: { background_color: "white", position: "sticky", top: "0", cursor:"pointer", data: {"collapsible-main": "true"} }) do %>
+      <%= pb_rails("flex", props: {align:"center", gap:"sm", justify:"between"}) do %>
+        <%= pb_rails("title", props: { text: "Custom Main Section", tag: "h4", size: 4 }) %>
+    <%= pb_rails("collapsible/collapsible_icon") %>
+     <% end %>
+      <% end %>
+     <%= pb_rails("flex", props: { align: "center", justify: "between" }) do %>
+    <% end %>
+      <%= pb_rails("collapsible/collapsible_content", props: { padding: "none"  }) do %>
+        <%= pb_rails("list", props: {ordered: false, dark: false, borderless: false}) do %>
+            <%= pb_rails("list/item") do %> Checklist Item <% end %>
+            <%= pb_rails("list/item") do %> Checklist Item <% end %>
+            <%= pb_rails("list/item") do %> Checklist Item <% end %>
+            <%= pb_rails("list/item") do %> Checklist Item <% end %>
+            <%= pb_rails("list/item") do %> Checklist Item <% end %>
+            <% end %>
+      <% end %>
+    <% end %>
+    

data/app/pb_kits/playbook/pb_collapsible/docs/_collapsible_custom_main_rails.md

@@ -0,0 +1,5 @@
+A custom Main section can also be used in place of the provided `collapsible/collapsible_main`. This gives devs full control over that subcomponent. For example, here we are using global props to make that custom Main 'sticky' on scroll.
+
+If a custom component is used in place of the default, devs must add `data: {"collapsible-main": "true"}` to the custom Main for toggling of the collapsible to work correctly.
+
+The default Collapsible icon can also be used as part of the custom Main as shown with the optional  `collapsible/collapsible_icon`. This optional subcomponent accepts all icon related props `color`, `icon` and `size`.

data/app/pb_kits/playbook/pb_collapsible/docs/example.yml

@@ -7,6 +7,7 @@ examples:
   - collapsible_icons: Custom Icons
   - collapsible_external_controls: Toggle Collapsible With External Controls
   - collapsible_external_controls_multiple: Toggle All Collapsibles With One Control
+  - collapsible_custom_main_rails: Custom Main Section
 
   react:
   - collapsible_default: Default
@@ -14,6 +15,8 @@ examples:
   - collapsible_color: Icon Color
   - collapsible_icons: Custom Icons
   - collapsible_state: useCollapsible Hook
+  - collapsible_custom_main: Custom Main Section
+
 
   swift:
   - collapsible_default_swift: Default

data/app/pb_kits/playbook/pb_collapsible/docs/index.js

@@ -2,4 +2,5 @@ export { default as CollapsibleDefault } from './_collapsible_default.jsx'
 export { default as CollapsibleSize } from './_collapsible_size.jsx'
 export { default as CollapsibleColor } from './_collapsible_color.jsx'
 export { default as CollapsibleIcons } from './_collapsible_icons.jsx'
-export {default as CollapsibleState } from './_collapsible_state.jsx'
+export { default as CollapsibleState } from './_collapsible_state.jsx'
+export { default as CollapsibleCustomMain } from './_collapsible_custom_main.jsx'

data/app/pb_kits/playbook/pb_collapsible/index.js

@@ -75,13 +75,23 @@ export default class PbCollapsible extends PbEnhancedElement {
     this.displayUpArrow()
   }
 
+  toggleArrows(showDownArrow) {
+    const downArrow = this.element.querySelector(DOWN_ARROW_SELECTOR);
+    const upArrow = this.element.querySelector(UP_ARROW_SELECTOR);
+  
+    if (downArrow) {
+      downArrow.style.display = showDownArrow ? 'inline-block' : 'none';
+    }
+    if (upArrow) {
+      upArrow.style.display = showDownArrow ? 'none' : 'inline-block';
+    }
+  }
+  
   displayDownArrow() {
-    this.element.querySelector(DOWN_ARROW_SELECTOR).style.display = 'inline-block'
-    this.element.querySelector(UP_ARROW_SELECTOR).style.display = 'none'
+    this.toggleArrows(true);
   }
-
+  
   displayUpArrow() {
-    this.element.querySelector(UP_ARROW_SELECTOR).style.display = 'inline-block'
-    this.element.querySelector(DOWN_ARROW_SELECTOR).style.display = 'none'
-   }
+    this.toggleArrows(false);
+  }
 }

data/app/pb_kits/playbook/pb_dashboard/commonSettings.js

@@ -53,7 +53,7 @@ const adjustAxisStyle = (axis) => {
   /* Change axis label styles */
   axis.labels.style.fontFamily = typography.font_family_base
   axis.labels.style.color = colors.charcoal
-  axis.labels.style.fontWeight = typography.regular
+  axis.labels.style.fontWeight = typography.light
   axis.labels.style.fontSize = typography.font_small
 }
 

data/app/pb_kits/playbook/pb_dashboard/pbChartsDarkTheme.ts

@@ -27,7 +27,7 @@ const highchartsDarkTheme: ThemeProps = {
     style: {
       color: colors.text_dk_default,
       fontFamily: typography.font_family_base,
-      fontWeight: typography.bold,
+      fontWeight: typography.regular,
       fontSize: typography.heading_3,
     },
   },

data/app/pb_kits/playbook/pb_dashboard/pbChartsLightTheme.ts

@@ -27,7 +27,7 @@ const highchartsTheme: ThemeProps = {
     style: {
       color: colors.text_lt_default,
       fontFamily: typography.font_family_base,
-      fontWeight: typography.bold,
+      fontWeight: typography.regular,
       fontSize: typography.heading_3,
     },
   },

data/app/pb_kits/playbook/pb_form_pill/_form_pill.scss

@@ -55,7 +55,7 @@ $form_pill_colors: (
     height: fit-content;
     height: -moz-fit-content;
     .pb_form_pill_text, .pb_form_pill_close, .pb_form_pill_tag {
-      font-size: $font_base;
+      font-size: 16px;
       font-weight: $regular;
     }
     .pb_form_pill_text, .pb_form_pill_tag {

data/app/pb_kits/playbook/tokens/_titles.scss

@@ -5,11 +5,10 @@
 @mixin pb_title(
     $fontSize: $heading_1,
     $fontWeight: $lighter,
-    $lineHeight: $lh_tighter,
-    $letterSpacing: $lspace_tight
+    $lineHeight: $lh_tighter
 ){
   font-size: $fontSize;
-  letter-spacing: $letterSpacing;
+  letter-spacing: $lspace_tight;
   font-weight: $fontWeight;
   color: $text_lt_default;
   margin: 0;
@@ -30,7 +29,8 @@
 }
 
 @mixin pb_title_4 {
-  @include pb_title($heading_4, $bolder, $letterSpacing: $lspace_normal);
+  @include pb_title($heading_4, $bolder);
+  letter-spacing: -0.03em;
 }
 
 @mixin pb_title_dark {

data/app/pb_kits/playbook/tokens/_typography.scss

@@ -1,11 +1,11 @@
-$font_family_base: "Power Centra", "Helvetica Neue", Helvetica, Arial, sans_serif !default;
+$font_family_base: "Proxima Nova", "Helvetica Neue", Helvetica, Arial, sans_serif !default;
 
 /* CLEAN UP AND REMOVE */
 $font_jumbo:        36px !default;
 $font_largest:      32px !default;
-$font_larger:       27px !default;
+$font_larger:       28px !default;
 $font_large:        20px !default;
-$font_base:         15.5px !default;
+$font_base:         16px !default;
 $font_default:      $font_base !default;
 $font_normal:       $font_base !default;
 $font_medium:       $font_base !default;
@@ -26,8 +26,8 @@ $text_smaller:      $font_smaller !default;
 $text_smallest:     $font_smallest !default;
 
 /* Headings */
-$heading_1: 44px !default;
-$heading_2: 32px !default;
+$heading_1: 46px !default;
+$heading_2: 34px !default;
 $heading_3: $font_larger !default;
 $heading_4: $font_base !default;
 
@@ -35,19 +35,19 @@ $heading_4: $font_base !default;
 $lspace_tightest:         -.1em !default;
 $lspace_tighter:          -.07em !default;
 $lspace_tight:            -.01em !default;
-$lspace_normal:           .003em !default;
+$lspace_normal:           0 !default;
 $lspace_loose:            .03em !default;
 $lspace_looser:           .07em !default;
 $lspace_loosest:          .1em !default;
 $lspace_super_loosest:    .2em !default;
 
 /* Standard Font Weights */
-$bold:          700 !default;
+$bold:          600 !default;
 $regular:       400 !default;
 
 /* Non_Standard Font Weights */
-$extrabold:     700 !default;
-$boldest:       700 !default;
+$extrabold:     900 !default;
+$boldest:       800 !default;
 $bolder:        700 !default;
 $light:         300 !default;
-$lighter:       300 !default;
+$lighter:       100 !default;