@rypen-dev/shared-components 6.0.5 → 6.1.0

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.0.5",
+	"version": "6.1.0",
 	"main": "./dist/index.js",
 	"scripts": {
 		"build": "webpack --config ./webpack.config.js",

package/scss/_mixins.scss

@@ -1,6 +1,8 @@
 /// <reference path="./variables" />
 /// <reference path="./vendor/foundation-settings" />
 
+@use './variables' as *;
+
 @mixin button-shadow {
     box-shadow: 0 6px 20px 1px $shadow-color;
 }

package/scss/_variables.scss

@@ -1,3 +1,5 @@
+@use "sass:color";
+
 // Breakpoints
 $breakpoint-small: 0 !default;
 $breakpoint-medium: 768px !default;
@@ -22,14 +24,14 @@ $accent-dark-blue: #3D68AD; // new for studio
 
 $secondary-purple: #8d7bcd; // highlight purple
 $tertiary-purple: #b1a0e0; // highlight purple 2
-$shadow-purple: fade-out(#4e2c6b, 0.84); // grape 16
+$shadow-purple: color.adjust(#4e2c6b, $alpha: -84%); // grape 16
 
 $light-gray: #f7f7f7 !default; // light gray
 $medium-gray: #dcd6e8 !default; // pale grey
 $middle-gray: #eaeaea !default;
 $dark-gray: #767676 !default;
-$gray-overlay: fade-out($black, 0.97) !default;
-$gray-underlay: fade-out($medium-gray, 0.5) !default;
+$gray-overlay: color.adjust($black, $alpha: -97%) !default;
+$gray-underlay: color.adjust($medium-gray, $alpha: -50%) !default;
 $text-gray: #c2c1c8 !default;
 $border-gray: #e4e4e4 !default;
 $shadow-color: $shadow-purple !default;
@@ -75,7 +77,7 @@ $navigation-link-highlight: $warning !default;
 $navigation-divider-color: $medium-gray !default;
 
 $call-to-action-color: $alert !default;
-$call-to-action-color-active: darken($alert, 20%) !default;
+$call-to-action-color-active: color.scale($alert, $lightness: -20%) !default;
 $default-button-bg-color: $white !default;
 $default-button-hover-bg-color: $primary !default;
 $button-hover-bg-color: $white !default;

package/scss/checkout.scss

@@ -1,3 +1,6 @@
+@use './variables' as *;
+@use './vendor/foundation-settings' as *;
+
 .order-summary {
     .value {
         font-size: 1.25rem;

package/scss/partials/_badges.scss

@@ -2,6 +2,8 @@
 /// <reference path="../mixins" />
 /// <reference path="../vendor/foundation-settings" />
 
+@use '../variables' as *;
+@use '../vendor/foundation-settings' as *;
 // called "labels" in foundation
 
 .label {

package/scss/partials/_buttons.scss

@@ -2,6 +2,9 @@
 /// <reference path="../mixins" />
 /// <reference path="../vendor/foundation-settings" />
 
+@use '../variables' as *;
+@use '../vendor/foundation-settings' as *;
+
 @use "sass:math";
 
 .cta-link {

package/scss/partials/_content.scss

@@ -2,6 +2,9 @@
 /// <reference path="../mixins" />
 /// <reference path="../vendor/foundation-settings" />
 
+@use '../variables' as *;
+@use '../vendor/foundation-settings' as *;
+
 .photo-collage {
     position: relative;
     width: 250px;

package/scss/partials/_flyovers.scss

@@ -1,6 +1,9 @@
 /// <reference path="../variables" />
 /// <reference path="../vendor/foundation-settings" />
 
+@use '../variables' as *;
+@use '../vendor/foundation-settings' as *;
+
 @media (min-width: map-get($breakpoints, medium)) {
     body.flyover-open {
         overflow: hidden;

package/scss/partials/_forms.scss

@@ -2,6 +2,9 @@
 /// <reference path="../mixins" />
 /// <reference path="../vendor/foundation-settings" />
 
+@use '../variables' as *;
+@use '../vendor/foundation-settings' as *;
+
 input[type=date]::-webkit-datetime-edit-text {
     color: $input-placeholder-color;
 }

package/scss/partials/_layout.scss

@@ -1,3 +1,6 @@
+@use '../variables' as *;
+@use '../vendor/foundation-settings' as *;
+
 @media all and (max-width: map-get($breakpoints, medium) - 1px) {
     body:after {
         content: 'size-small';

package/scss/partials/_loader.scss

@@ -1,6 +1,9 @@
 /// <reference path="../variables" />
 /// <reference path="../vendor/foundation-settings" />
 
+@use '../variables' as *;
+@use '../vendor/foundation-settings' as *;
+
 .loader {
     text-align: center;
     padding: 30px 0;

package/scss/partials/_modals.scss

@@ -2,6 +2,9 @@
 /// <reference path="../mixins" />
 /// <reference path="../vendor/foundation-settings" />
 
+@use '../variables' as *;
+@use '../vendor/foundation-settings' as *;
+
 .modal-mask {
     position: fixed;
     z-index: 1000;

package/scss/partials/_navigation.scss

@@ -2,6 +2,9 @@
 /// <reference path="../mixins" />
 /// <reference path="../vendor/foundation-settings" />
 
+@use '../variables' as *;
+@use '../vendor/foundation-settings' as *;
+
 nav > ul {
     list-style-type: none;
     margin: 0;

package/scss/partials/_notifications.scss

@@ -1,3 +1,6 @@
+@use '../variables' as *;
+@use '../vendor/foundation-settings' as *;
+
 .notification-row {
     .notification-summary {
         display: flex;

package/scss/partials/_pills.scss

@@ -2,6 +2,11 @@
 /// <reference path="../mixins" />
 /// <reference path="../vendor/foundation-settings" />
 
+@use '../variables' as *;
+@use '../vendor/foundation-settings' as *;
+
+@use "sass:color";
+
 .pill {
     width: auto !important;
     display: inline-block;
@@ -29,7 +34,7 @@
     &:hover,
     &:focus,
     &.active {
-        background-color: fade-out($primary, 0.75) !important;
+        background-color: color.adjust($primary, $alpha: -0.75) !important;
         color: $primary !important;
     }
 
@@ -41,7 +46,7 @@
         &:hover,
         &:focus,
         &.active {
-            background-color: fade-out($warning, 0.75) !important;
+            background-color: color.adjust($warning, $alpha: -0.75) !important;
             color: $warning !important;
         }
     }
@@ -54,7 +59,7 @@
         &:hover,
         &:focus,
         &.active {
-            background-color: fade-out($secondary-pill-color, 0.75) !important;
+            background-color: color.adjust($secondary-pill-color, $alpha: -0.75) !important;
             color: $secondary-pill-color !important;
         }
     }
@@ -67,7 +72,7 @@
         &:hover,
         &:focus,
         &.active {
-            background-color: fade-out($secondary-alt, 0.75) !important;
+            background-color: color.adjust($secondary-alt, $alpha: -0.75) !important;
             color: $secondary-alt !important;
         }
     }
@@ -80,7 +85,7 @@
         &:hover,
         &:focus,
         &.active {
-            background-color: fade-out($success-alt, 0.75) !important;
+            background-color: color.adjust($success-alt, $alpha: -0.75) !important;
             color: $success-alt !important;
         }
     }
@@ -93,7 +98,7 @@
         &:hover,
         &:focus,
         &:active {
-            background-color: fade-out($quaternary, 0.75) !important;
+            background-color: color.adjust($quaternary, $alpha: -0.75) !important;
             color: $quaternary !important;
         }
     }
@@ -132,28 +137,28 @@
             &.orange,
             &.warning {
                 &::before {
-                    background-color: fade-out($warning, 0.75);
+                    background-color: color.adjust($warning, $alpha: -0.75);
                 }
             }
 
             &.teal,
             &.secondary {
                 &::before {
-                    background-color: fade-out($secondary-pill-color, 0.75);
+                    background-color: color.adjust($secondary-pill-color, $alpha: -0.75);
                 }
             }
 
             &.turquoise,
             &.success-alt {
                 &::before {
-                    background-color: fade-out($success-alt, 0.75);
+                    background-color: color.adjust($success-alt, $alpha: -0.75);
                 }
             }
 
             &.blue,
             &.quaternary {
                 &::before {
-                    background-color: fade-out($quaternary, 0.75);
+                    background-color: color.adjust($quaternary, $alpha: -0.75);
                 }
             }
         }
@@ -190,7 +195,7 @@
     }
 
     &.floating {
-        box-shadow: 0 6px 17px 1px fade-out($secondary-alt, 0.35) !important;
+        box-shadow: 0 6px 17px 1px color.adjust($secondary-alt, $alpha: -0.35) !important;
     }
 
     &.large {

package/scss/partials/_print.scss

@@ -1,3 +1,6 @@
+@use '../variables' as *;
+@use '../vendor/foundation-settings' as *;
+
 @media print {
     @page {
         size: 8.5in 11in;

package/scss/partials/_progressbar.scss

@@ -1,3 +1,6 @@
+@use '../variables' as *;
+@use '../vendor/foundation-settings' as *;
+
 .progress-bar {
     ol {
         list-style-type: none;

package/scss/partials/_proposalsgallery.scss

@@ -2,6 +2,9 @@
 /// <reference path="../mixins" />
 /// <reference path="../vendor/foundation-settings" />
 
+@use '../variables' as *;
+@use '../vendor/foundation-settings' as *;
+
 .image-selector {
     position: relative;
     margin-bottom: 20px;
@@ -64,7 +67,7 @@
             left: 0;
             width: 100%;
             padding: 0.5rem;
-            background-color: fade-out($white, 0.15);
+            background-color: color.adjust($white, $alpha: -0.15);
             font-size: 0.875rem;
             text-align: center;
             text-transform: uppercase;

package/scss/partials/_proposalsmodals.scss

@@ -1,6 +1,9 @@
 /// <reference path="../variables" />
 /// <reference path="../vendor/foundation-settings" />
 
+@use '../variables' as *;
+@use '../vendor/foundation-settings' as *;
+
 .modal-container {
     .modal-body {
         .form.side-by-side {

package/scss/partials/_specsheet.scss

@@ -2,6 +2,9 @@
 /// <reference path="../mixins" />
 /// <reference path="../vendor/foundation-settings" />
 
+@use '../variables' as *;
+@use '../vendor/foundation-settings' as *;
+
 .specsheet {
     padding: 1rem 0;
     font-weight: $headline-weight-normal;

package/scss/partials/_tables.scss

@@ -1,6 +1,9 @@
 /// <reference path="../variables" />
 /// <reference path="../vendor/foundation-settings" />
 
+@use '../variables' as *;
+@use '../vendor/foundation-settings' as *;
+
 div.table {
     font-size: 0.9375rem;
     color: $table-text-color;

package/scss/partials/_tooltips.scss

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

package/scss/partials/_typography.scss

@@ -1,6 +1,9 @@
 /// <reference path="../variables" />
 /// <reference path="../vendor/foundation-settings" />
 
+@use '../variables' as *;
+@use '../vendor/foundation-settings' as *;
+
 @import url('https://fonts.googleapis.com/css?family=Open+Sans:300,400,600,700|Ubuntu:300,400,500');
 
 // OpenSans: Light = 300, Regular = 400, Semi-Bold = 600, Bold = 700 (Extra-Bold = 800)

package/scss/proposals.scss

@@ -2,6 +2,9 @@
 /// <reference path="./mixins" />
 /// <reference path="./vendor/foundation-settings" />
 
+@use './variables' as *;
+@use './vendor/foundation-settings' as *;
+
 // --> Originally from layout.scss
 .pill.menu {
     &::before,

package/scss/proposalsshared.scss

@@ -2,6 +2,9 @@
 /// <reference path="./mixins" />
 /// <reference path="./vendor/foundation-settings" />
 
+@use './variables' as *;
+@use './vendor/foundation-settings' as *;
+
 .project-footer {
     margin-top: 30px;
 

package/scss/styles.scss

@@ -1,9 +1,9 @@
-@import './mixins';
+@use './variables' as *;
+@use './mixins';
 
 // Vendor
-@import './vendor/foundation-settings';
-@import 'foundation-sites/scss/foundation';
-//@import '../node_modules/@fortawesome/fontawesome-free/scss/fontawesome';
+@use './vendor/foundation-settings' as *;
+@use 'foundation-sites/scss/foundation';
 
 // Individual Foundation Pieces
 @include foundation-global-styles;
@@ -47,20 +47,20 @@
 @include foundation-visibility-classes;
 //@include foundation-float-classes;
 
-@import './partials/layout';
-@import './partials/navigation';
-@import './partials/badges';
-@import './partials/buttons';
-@import './partials/forms';
-@import './partials/loader';
-@import './partials/modals';
-@import './partials/flyovers';
-@import './partials/pills';
-@import './partials/tables';
-@import './partials/tooltips';
-@import './partials/typography';
-@import './partials/content';
-@import './partials/specsheet';
-@import './partials/notifications';
-@import './partials/progressbar';
-@import './partials/print';
+@use './partials/layout';
+@use './partials/navigation';
+@use './partials/badges';
+@use './partials/buttons';
+@use './partials/forms';
+@use './partials/loader';
+@use './partials/modals';
+@use './partials/flyovers';
+@use './partials/pills';
+@use './partials/tables';
+@use './partials/tooltips';
+@use './partials/typography';
+@use './partials/content';
+@use './partials/specsheet';
+@use './partials/notifications';
+@use './partials/progressbar';
+@use './partials/print';

package/scss/vendor/_foundation-settings.scss

@@ -1,5 +1,5 @@
  /// <reference path="../variables" />
- @use '../../variables' as *;
+ @use '../variables' as *;
 
 //  Foundation for Sites Settings
 //  -----------------------------