vanilla-framework 3.0.0-beta.1 → 3.0.1

package/scss/_patterns_table-expanding.scss

@@ -20,10 +20,6 @@
         flow: row;
         wrap: wrap;
       }
-
-      + tr {
-        margin: 0;
-      }
     }
 
     th,

package/scss/_patterns_table-mobile-card.scss

@@ -56,10 +56,10 @@
             overflow: visible;
           }
 
-          &[aria-label]::before {
-            content: attr(aria-label);
+          &[data-heading]::before {
+            content: attr(data-heading);
             display: block;
-            margin-bottom: map-get($sp-after, x-small) - map-get($nudges, nudge--x-small) - $sp-unit;
+            margin-bottom: map-get($sp-after, x-small) - map-get($nudges, x-small) - $sp-unit;
             overflow: hidden;
             padding-left: 0;
             padding-right: 0;

package/scss/_settings_colors.scss

@@ -39,7 +39,8 @@ $color-focus-negative: #3b0006 !default;
 
 // Button background color changes
 $hover-background-opacity-amount: 0.05;
-$active-background-opacity-amount: 0.08;
+$active-background-opacity-amount: 0.1;
+
 $muted-text-opacity-amount: 0.6;
 $inactive-text-opacity-amount: 0.75;
 
@@ -92,6 +93,42 @@ $colors--light-theme--border-default: rgba($color-x-dark, 0.15) !default;
 $colors--light-theme--border-high-contrast: rgba($color-x-dark, 0.56) !default;
 $colors--light-theme--border-low-contrast: rgba($color-x-dark, 0.1) !default;
 
+$colors-light-theme--tinted-backgrounds: (
+  neutral: (
+    default: #f2f2f2,
+    hover: adjust-color(#f2f2f2, $lightness: -100% * $hover-background-opacity-amount, $saturation: -100% * 2 * $hover-background-opacity-amount),
+    active: adjust-color(#f2f2f2, $lightness: -100% * $active-background-opacity-amount, $saturation: -100% * 2 * $active-background-opacity-amount),
+  ),
+  positive: (
+    default: hsl(129deg 90% 39% / 10%),
+    hover: hsl(129deg 100% 39% / #{10% + $hover-background-opacity-amount * 100%}),
+    active: hsl(129deg 100% 39% / #{10% + $active-background-opacity-amount * 100%}),
+  ),
+  caution: (
+    default: hsl(27deg 100% 39% / 10%),
+    hover: hsl(27deg 100% 39% / #{10% + $hover-background-opacity-amount * 100%}),
+    active: hsl(27deg 100% 39% / #{10% + $active-background-opacity-amount * 100%}),
+  ),
+  negative: (
+    default: hsl(354deg 100% 39% / 10%),
+    hover: hsl(354deg 100% 39% / #{10% + $hover-background-opacity-amount * 100%}),
+    active: hsl(354deg 100% 39% / #{10% + $active-background-opacity-amount * 100%}),
+  ),
+  information: (
+    default: hsl(210deg 100% 39% / 10%),
+    hover: hsl(210deg 100% 39% / #{10% + $hover-background-opacity-amount * 100%}),
+    active: hsl(210deg 100% 39% / #{10% + $active-background-opacity-amount * 100%}),
+  ),
+);
+
+$colors-light-theme--tinted-borders: (
+  neutral: $colors--light-theme--border-high-contrast,
+  positive: $color-positive,
+  caution: hsl(27deg 100% 39%),
+  negative: $color-negative,
+  information: $color-information,
+);
+
 // Dark theme
 $colors--dark-theme--text-default: hsl(0, 0%, 100%) !default;
 $colors--dark-theme--text-hover: hsl(0, 0%, 76%) !default; // minimum contrast on primary that satisfies contrast checker AA
@@ -105,9 +142,45 @@ $colors--dark-theme--background-hover: rgba($colors--dark-theme--text-default, $
 $colors--dark-theme--background-overlay: transparentize($color-dark, 0.15) !default;
 
 $colors--dark-theme--border-default: rgba($colors--dark-theme--text-default, 0.2) !default;
-$colors--dark-theme--border-high-contrast: rgba($colors--dark-theme--text-default, 0.4) !default;
+$colors--dark-theme--border-high-contrast: hsl(0deg 0% 60%) !default;
 $colors--dark-theme--border-low-contrast: rgba($colors--dark-theme--text-default, 0.1) !default;
 
+$colors-dark-theme--tinted-backgrounds: (
+  neutral: (
+    default: rgba(255, 255, 255, 0.15),
+    hover: rgba(255, 255, 255, 0.2),
+    active: rgba(255, 255, 255, 0.25),
+  ),
+  positive: (
+    default: hsl(129deg 90% 39% / 20%),
+    hover: hsl(129deg 100% 39% / #{20% + 2 * $hover-background-opacity-amount * 100%}),
+    active: hsl(129deg 100% 39% / #{20% + 2 * $active-background-opacity-amount * 100%}),
+  ),
+  caution: (
+    default: hsl(27deg 100% 50% / 20%),
+    hover: hsl(27deg 100% 60% / #{20% + 2 * $hover-background-opacity-amount * 100%}),
+    active: hsl(27deg 100% 50% / #{20% + 2 * $active-background-opacity-amount * 100%}),
+  ),
+  negative: (
+    default: hsl(353deg 100% 70% / 20%),
+    hover: hsl(353deg 100% 70% / #{20% + 2 * $hover-background-opacity-amount * 100%}),
+    active: hsl(353deg 100% 70% / #{20% + 2 * $active-background-opacity-amount * 100%}),
+  ),
+  information: (
+    default: hsl(210deg 100% 50% / 20%),
+    hover: hsl(210deg 100% 50% / #{20% + 2 * $hover-background-opacity-amount * 100%}),
+    active: hsl(210deg 100% 50% / #{20% + 2 * $active-background-opacity-amount * 100%}),
+  ),
+);
+
+$colors-dark-theme--tinted-borders: (
+  neutral: hsl(0deg 0% 65%),
+  positive: hsl(129deg 60% 65%),
+  caution: hsl(27deg 80% 65%),
+  negative: hsl(353deg 80% 70%),
+  information: hsl(210deg 80% 65%),
+);
+
 // Branding colors
 $color-brand: #333 !default;
 $color-brand-dark: $color-brand !default;

package/scss/_settings_grid.scss

@@ -16,14 +16,12 @@ $grid-large-col-prefix: #{$grid-column-prefix} !default;
 
 $grid-gutter-widths: (
   small: $sp-unit * 3,
-  medium: $sp-unit * 4,
-  large: $sp-unit * 4,
+  default: $sp-unit * 4,
 ) !default;
 
 $grid-margin-widths: (
   small: $sp-unit * 2,
-  medium: $sp-unit * 3,
-  large: $sp-unit * 3,
+  default: $sp-unit * 3,
 ) !default;
 
 // Grid breakout template

package/scss/_settings_spacing.scss

@@ -8,27 +8,26 @@ $sp-unit-ratio: 0.5 !default;
 $sp-unit: 1rem * $sp-unit-ratio !default;
 
 $font-sizes: (
-  x-small: pow($ms-ratio, -2),
-  small: pow($ms-ratio, -1),
-  root: 1,
-  h4-mobile: 1.22176,
-  h4: pow($ms-ratio, 2),
-  h3-mobile: pow($ms-ratio, 3),
-  h3: pow($ms-ratio, 4),
-  h2-mobile: 1.83274,
-  h2: pow($ms-ratio, 6),
-  h1-mobile: pow($ms-ratio, 6),
   h1: pow($ms-ratio, 8),
+  h1-mobile: pow($ms-ratio, 6),
+  h2: pow($ms-ratio, 6),
+  h2-mobile: 1.83274,
+  h3: pow($ms-ratio, 4),
+  h3-mobile: pow($ms-ratio, 3),
+  h4: pow($ms-ratio, 2),
+  h4-mobile: 1.22176,
+  small: pow($ms-ratio, -1),
+  x-small: pow($ms-ratio, -2),
 );
 
 $line-heights: (
   h1: 7 * $sp-unit,
-  h2: 6 * $sp-unit,
-  h3: 5 * $sp-unit,
-  h4: 4 * $sp-unit,
   h1-mobile: 6 * $sp-unit,
+  h2: 6 * $sp-unit,
   h2-mobile: 5 * $sp-unit,
+  h3: 5 * $sp-unit,
   h3-mobile: 4 * $sp-unit,
+  h4: 4 * $sp-unit,
   h4-mobile: 3 * $sp-unit,
   default-text: 3 * $sp-unit,
   small: 2.5 * $sp-unit,
@@ -37,36 +36,36 @@ $line-heights: (
 
 // baseline nudges for type scale ratio of (16/14)^2
 $nudges: (
-  nudge--h1-large: 0.15rem,
-  nudge--h4-large: 0,
-  nudge--h1: 0.2rem,
-  nudge--h2: 0.2rem,
-  nudge--h3: 0.1rem,
-  nudge--h4: 0.05rem,
-  nudge--h6: 0.338rem,
-  nudge--h6-large: 0.345rem,
-  nudge--h1-mobile: 0.165rem,
-  nudge--h2-mobile: 0.1rem,
-  nudge--h3-mobile: 0.5rem,
-  nudge--h4-mobile: 0.3rem,
-  nudge--p: 0.4rem,
-  nudge--p-ubuntumono: 0.45rem,
-  nudge--small: 0.05rem,
-  nudge--x-small: 0.25rem,
+  h1-large: 0.15rem,
+  h1-mobile: 0.165rem,
+  h1: 0.2rem,
+  h2: 0.2rem,
+  h2-mobile: 0.1rem,
+  h3: 0.1rem,
+  h3-mobile: 0.5rem,
+  h4-large: 0,
+  h4: 0.05rem,
+  h4-mobile: 0.3rem,
+  h6: 0.338rem,
+  h6-large: 0.345rem,
+  p: 0.4rem,
+  p-ubuntumono: 0.45rem,
+  small: 0.05rem,
+  x-small: 0.25rem,
 ) !default;
 
 // Correct baseline drift due to browser rounding. (Visible in text > 1000 lines)
 // It is applied only to padding-top.
 $browser-rounding-compensations: (
-  small: 0.0005rem,
-  small-largescreen: 0.0006rem,
-  p: 0.0005rem,
-  h6: 0,
-  h5: 0.001rem,
-  h4: 0.001rem,
-  h3: 0.001rem,
-  h2: 0.001rem,
   h1: 0.001rem,
+  h2: 0.001rem,
+  h3: 0.001rem,
+  h4: 0.001rem,
+  h5: 0.001rem,
+  h6: 0,
+  p: 0.0005rem,
+  small-largescreen: 0.0006rem,
+  small: 0.0005rem,
 ) !default;
 
 // Main spacing variables. spv stands spacing-vertical; sph stands for spacing-horizontal.
@@ -79,6 +78,7 @@ $spv--x-large: $sp-unit * 3 !default;
 $spv--strip-regular: $sp-unit * 8 !default;
 $spv--strip-deep: $sp-unit * 12 !default;
 
+$sph--x-small: $sp-unit * 0.5 !default; // to be used in place of an inline space between characters/words
 $sph--small: $sp-unit !default;
 $sph--large: $sp-unit * 2 !default;
 $sph--x-large: $sp-unit * 3 !default;
@@ -86,23 +86,23 @@ $sph--x-large: $sp-unit * 3 !default;
 // Space after text elements
 $sp-after: (
   h1: $spv--large,
+  h1-mobile: $spv--large,
   h2: $spv--large,
+  h2-mobile: $spv--large,
   h3: $spv--large,
+  h3-mobile: $spv--large,
   h4: $spv--large,
+  h4-mobile: $spv--large,
   p: $spv--x-large,
   p-dense: $spv--large,
-  h1-mobile: $spv--large,
-  h2-mobile: $spv--large,
-  h3-mobile: $spv--large,
-  h4-mobile: $spv--large,
+  default-text: $sp-unit,
   small: $spv--large,
   small--dense: $spv--large,
   x-small: $spv--large,
-  default-text: $sp-unit,
 ) !default;
 
 // commonly occuring calculations available as variables
-$spv-nudge: map-get($nudges, nudge--p) !default; // top: nudge; bottom: unit - nudge; result: height = exact multiple of base unit
+$spv-nudge: map-get($nudges, p) !default; // top: nudge; bottom: unit - nudge; result: height = exact multiple of base unit
 $spv-nudge-compensation: $sp-unit - $spv-nudge !default;
 $input-margin-bottom: $sp-unit * 4 - $spv-nudge * 2;
 $input-vertical-padding: calc(#{$spv-nudge} - 1px);
@@ -115,10 +115,10 @@ $form-tick-box-nudge: 0.15rem; // to nudge the tick box a bit below baseline (to
 $form-radio-inner-circle-diameter: 0.375rem;
 $form-radio-circle-offset: 0.5 * ($form-tick-box-size - $form-radio-inner-circle-diameter);
 
-$max-width--default: 40em !default;
+$text-max-width: 40em !default;
 
 $icon-sizes: (
-  accordion: $sp-unit * 1.5,
+  small: $sp-unit * 1.5,
   default: $sp-unit * 2,
   heading-icon--x-small: $sp-unit * 3,
   heading-icon--small: $sp-unit * 4,

package/scss/_settings_themes.scss

@@ -7,3 +7,4 @@ $theme-default-p-divider: 'light' !default;
 $theme-default-p-contextual-menu: 'light' !default;
 $theme-default-p-inline-list--middot: 'light' !default;
 $theme-default-p-button: 'light' !default;
+$theme-default-p-chip: 'light' !default;

package/scss/_utilities_content-align.scss

@@ -60,10 +60,10 @@
   }
 
   .u-align-text--small-to-default {
-    padding-top: map-get($nudges, nudge--small) + $sp-unit;
+    padding-top: map-get($nudges, small) + $sp-unit;
   }
 
   .u-align-text--x-small-to-default {
-    padding-top: map-get($nudges, nudge--x-small) + $sp-unit;
+    padding-top: map-get($nudges, x-small) + $sp-unit;
   }
 }