@ulu/frontend 0.1.0-beta.69 → 0.1.0-beta.70

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ulu/frontend",
-  "version": "0.1.0-beta.69",
+  "version": "0.1.0-beta.70",
   "description": "A versatile SCSS and JavaScript component library offering configurable, accessible components and flexible integration into any project, with SCSS modules suitable for modern JS frameworks.",
   "browser": "js/index.js",
   "main": "index.js",

package/scss/_color.scss

@@ -23,7 +23,7 @@ $palette: (
   "type-tertiary"           : rgb(157, 157, 157),
   "headline"                : inherit,
   "background"              : white,
-  "background-gray"         : #F7F8F7,
+  "background-gray"         : #fafafa,
   "focus"                   : blue,
   "accent"                  : orange,
   "info"                    : #00bde3,
@@ -46,10 +46,10 @@ $palette: (
   "bullet"                  : inherit,
   "control"                 : white,
   "control-hover"           : white,
-  "control-active"           : white,
+  "control-active"          : white,
   "control-border"          : purple,
-  "control-border-hover"       : blue,
-  "control-border-active"       : orange,
+  "control-border-hover"    : blue,
+  "control-border-active"   : orange,
   "control-background"      : purple,
   "control-background-hover": blue,
   "control-background-active": orange,

package/scss/components/_accordion.scss

@@ -41,11 +41,12 @@
 /// @prop {Dimension} summary-type-size  [false] The size of the text in the accordion summary. 
 /// @prop {Dimension} transparent-padding-y  [1em] The upper and lower padding of the transparent summary.
 /// @prop {Dimension} transparent-padding-x  [0] The upper and lower padding of the transparent summary.
+/// @prop {Dimension} borderless-margin-between  [0.5rem] Margin between accordions when using no-border modiifier
 
 $config: (
   "background-color":            "background",
-  "background-color-open":       "background-gray",
-  "border-color":                "rule",
+  "background-color-open":       white,
+  "border-color":                "rule-light",
   "border-radius":               0,
   "border-width":                1px,
   "box-shadow":                  none,
@@ -61,7 +62,7 @@ $config: (
   "icon-font-size":              1.5rem,
   "icon-size":                   auto,
   "icon-stroke-width":           0.15em,
-  "summary-background-color":    "white",
+  "summary-background-color":    #f6f6f6,
   "summary-color":               null,
   "summary-background-color-hover": null,
   "summary-color-hover":         null,
@@ -70,6 +71,7 @@ $config: (
   "summary-type-size":           false,
   "transparent-padding-x":       0,
   "transparent-padding-y":       1em,
+  "borderless-margin-between" :  0.5rem
 ) !default;
 
 /// Change modules $config
@@ -212,8 +214,13 @@ $config: (
       }
     }
   }
-  #{ $prefix }--no-borders {
+  #{ $prefix }--borderless {
     border: none;
+    & + & {
+      $gap: -(get("margin") - get("borderless-margin-between"));
+      margin-top: $gap;
+      margin-top: calc($gap - get("border-width"));
+    }
     &[open],
     &.is-active {
       & > .accordion__summary {

package/scss/components/_tabs.scss

@@ -40,6 +40,8 @@ $-fallbacks: (
 /// @prop {Dimension} tabpanel-padding [(2rem,)] Padding for the tabpanel
 /// @prop {Dimension} indicator-size [0.25em] The size of the tab's active border/indicator
 /// @prop {Color} indicator-color [currentColor] The color of the indicator
+/// @prop {Color} indicator-transition-duration [200ms] The transition duration for indicator
+/// @prop {Color} indicator-scale-start [0] The starting scale for the indicator (set to 1 to disable expanding on click)
 /// @prop {Color} tab-color [link] The type color for the tabs. This uses color.scss, so the value of this options should be a variable from color.scss.
 /// @prop {Color} tab-color-hover [link-hover] The type color for the tabs when hovered or focused. This uses color.scss, so the value of this options should be a variable from color.scss.
 /// @prop {Color} tab-color-selected [selected] The tab type color when selected. This uses color.scss, so the value of this options should be a variable from color.scss.
@@ -62,8 +64,11 @@ $config: (
   "tablist-divider-width" : 1px,
   "indicator-size" : 3px,
   "indicator-color" : currentColor,
+  "indicator-transition-duration" : 200ms,
+  "indicator-transition-timing" : ease-out,
+  "indicator-scale-start" : 0,
   "tab-color" : "type-tertiary",
-  "tab-color-hover" : "link-hover",
+  "tab-color-hover" : "selected",
   "tab-color-selected" : "selected",
   "tab-background-color-selected" : null,
   "tab-font-weight" : true,
@@ -142,17 +147,27 @@ $config: (
         left: 0;
         right: 0;
         height: get("indicator-size");
+        transition-property: opacity, background-color, transform;
+        transition-duration: get("indicator-transition-duration");
+        transition-timing-function: get("indicator-transition-timing");
+        transform: scaleX(get("indicator-scale-start"));
+        transform-origin: center;
       }
       &:hover {
         color: color.get(get("tab-color-hover"));
       }
+      // Add focus so as user clicks item it starts the active state styling
+      &:focus,
       &[aria-selected="true"] {
-        color: color.get(get("tab-color-selected"));
-        background-color: color.get(get("tab-background-color-selected"));
         &::after {
           opacity: 1;
+          transform: scaleX(1);
         }
       }
+      &[aria-selected="true"] {
+        color: color.get(get("tab-color-selected"));
+        background-color: color.get(get("tab-background-color-selected"));
+      }
     }
     [role="tabpanel"] {
       position: relative;