@rypen-dev/shared-components 6.1.7 → 6.1.9

package/package.json

@@ -1,7 +1,7 @@
 {
 	"name": "@rypen-dev/shared-components",
 	"description": "Shared styles and Vuejs ui components for Rypen projects. Starting with version 6, this package is built with Webpack 5 and Vue 3.",
-	"version": "6.1.7",
+	"version": "6.1.9",
 	"main": "./dist/index.js",
 	"scripts": {
 		"build": "webpack --config ./webpack.config.js",

package/scss/partials/_buttons.scss

@@ -4,6 +4,7 @@
 
 @use '../variables' as *;
 @use '../vendor/foundation-settings' as *;
+@use '../mixins';
 
 @use "sass:math";
 

package/scss/partials/_flyovers.scss

@@ -3,6 +3,7 @@
 
 @use '../variables' as *;
 @use '../vendor/foundation-settings' as *;
+@use '../mixins';
 
 @media (min-width: map-get($breakpoints, medium)) {
     body.flyover-open {

package/scss/partials/_forms.scss

@@ -4,6 +4,7 @@
 
 @use '../variables' as *;
 @use '../vendor/foundation-settings' as *;
+@use '../mixins';
 
 input[type=date]::-webkit-datetime-edit-text {
     color: $input-placeholder-color;

package/scss/partials/_modals.scss

@@ -4,6 +4,7 @@
 
 @use '../variables' as *;
 @use '../vendor/foundation-settings' as *;
+@use '../mixins';
 
 .modal-mask {
     position: fixed;

package/scss/partials/_tooltips.scss

@@ -1,5 +1,6 @@
 @use '../variables' as *;
 @use '../vendor/foundation-settings' as *;
+@use '../mixins';
 
 .tooltip-container {
     position: relative;

package/scss/proposals.scss

@@ -4,6 +4,7 @@
 
 @use './variables' as *;
 @use './vendor/foundation-settings' as *;
+@use '../mixins';
 
 // --> Originally from layout.scss
 .pill.menu {

package/scss/vendor/_foundation-settings.scss

@@ -65,7 +65,7 @@
 //  55. Top Bar
 //  56. Xy Grid
 
-@import 'foundation-sites/scss/util/util';
+@use 'foundation-sites/scss/util/util' as *;
 
 // 1. Global
 // ---------
@@ -808,15 +808,15 @@ $table-color-scale: 5%;
 $table-border: 1px solid smart-scale($table-background, $table-color-scale);
 $table-padding: rem-calc(8 10 10);
 $table-hover-scale: 2%;
-$table-row-hover: darken($table-background, $table-hover-scale);
-$table-row-stripe-hover: darken($table-background, $table-color-scale + $table-hover-scale);
+$table-row-hover: color.adjust($table-background, $lightness: $table-hover-scale);
+$table-row-stripe-hover: color.adjust($table-background, $lightness: $table-color-scale + $table-hover-scale);
 $table-is-striped: true;
 $table-striped-background: smart-scale($table-background, $table-color-scale);
 $table-stripe: even;
 $table-head-background: smart-scale($table-background, $table-color-scale * 0.5);
-$table-head-row-hover: darken($table-head-background, $table-hover-scale);
+$table-head-row-hover: color.adjust($table-head-background, $lightness: $table-hover-scale);
 $table-foot-background: smart-scale($table-background, $table-color-scale);
-$table-foot-row-hover: darken($table-foot-background, $table-hover-scale);
+$table-foot-row-hover: color.adjust($table-foot-background, $lightness: $table-hover-scale);
 $table-head-font-color: $body-font-color;
 $table-foot-font-color: $body-font-color;
 $show-header-for-stacked: false;

package/scss/vendor/_foundation.scss

@@ -1,6 +1,6 @@
 // Vendor
 @use './foundation-settings' as *;
-@use 'foundation-sites/scss/foundation';
+@use 'foundation-sites/scss/foundation' as *;
 
 // Individual Foundation Pieces
 @include foundation-global-styles;