@rypen-dev/shared-components 3.0.1 → 3.0.3

package/package.json

@@ -1,7 +1,7 @@
 {
 	"name": "@rypen-dev/shared-components",
 	"description": "Shared styles and Vuejs ui components for Rypen projects.",
-	"version": "3.0.1",
+	"version": "3.0.3",
 	"main": "./dist/index.js",
 	"scripts": {
 		"build": "webpack --config ./webpack.config.js",

package/scss/vendor/_foundation-settings.scss

@@ -70,7 +70,7 @@
 $contrast-warnings: false;
 
 $global-font-size: 100%;
-$global-width: rem-calc(1370);
+$global-width: rem-calc(1430);
 $global-lineheight: 1.5;
 $foundation-palette: (
   "primary": $primary,
@@ -94,7 +94,7 @@ $global-padding: 1rem;
 $global-position: 1rem;
 $global-weight-normal: normal;
 $global-weight-bold: bold;
-$global-radius: $global-border-radius;
+$global-radius: 5px;
 $global-menu-padding: 0.7rem 1rem;
 $global-menu-nested-margin: 1rem;
 $global-text-direction: ltr;
@@ -102,7 +102,7 @@ $global-flexbox: true;
 $global-prototype-breakpoints: false;
 $global-button-cursor: auto;
 $global-color-pick-contrast-tolerance: 0;
-$print-transparent-backgrounds: true;
+$print-transparent-backgrounds: false;
 $print-hrefs: false;
 
 @include add-foundation-colors;
@@ -111,11 +111,11 @@ $print-hrefs: false;
 // --------------
 
 $breakpoints: (
-  "small": 0,
-  "medium": 640px,
-  "large": 1024px,
-  "xlarge": 1200px,
-  "xxlarge": 1440px,
+  "small": $breakpoint-small,
+  "medium": $breakpoint-medium,
+  "large": $breakpoint-large,
+  "xlarge": $breakpoint-xlarge,
+  "xxlarge": $breakpoint-xxlarge,
 );
 $breakpoints-hidpi: (
   "hidpi-1": 1,
@@ -175,10 +175,10 @@ $paragraph-lineheight: 1.6;
 $paragraph-margin-bottom: 1rem;
 $paragraph-text-rendering: optimizeLegibility;
 $enable-code-inline: true;
-$anchor-color: $link-color;
-$anchor-color-hover: $link-hover-color;
-$anchor-text-decoration: $link-decoration;
-$anchor-text-decoration-hover: $link-hover-decoration;
+$anchor-color: $primary-color;
+$anchor-color-hover: scale-color($anchor-color, $lightness: -14%);
+$anchor-text-decoration: none;
+$anchor-text-decoration-hover: none;
 $hr-width: $global-width;
 $hr-border: 1px solid $medium-gray;
 $hr-margin: rem-calc(20) auto;
@@ -297,17 +297,16 @@ $breadcrumbs-item-separator-color: $medium-gray;
 // 11. Button
 // ----------
 
-$button-font-family: inherit;
+$button-font-family: $button-font-family;
 $button-font-weight: null;
 $button-padding: 0.85em 1em;
 $button-margin: 0 0 $global-margin 0;
 $button-fill: solid;
-$button-background: $button-bg-color;
-$button-background-hover: $button-hover-bg-color;
+$button-background: $primary-color;
+$button-background-hover: scale-color($button-background, $lightness: -15%);
 $button-color: $white;
 $button-color-alt: $white;
-$button-radius: $global-radius;
-$button-border: 1px solid transparent;
+$button-radius: $dealer-button-radius;
 $button-hollow-border-width: 1px;
 $button-sizes: (
   "tiny": 0.6rem,
@@ -440,40 +439,40 @@ $fieldset-border: 1px solid $medium-gray;
 $fieldset-padding: rem-calc(20);
 $fieldset-margin: rem-calc(18 0);
 $legend-padding: rem-calc(0 3);
-$form-spacing: $global-form-spacing;
+$form-spacing: rem-calc(16);
 $helptext-color: $black;
 $helptext-font-size: rem-calc(13);
 $helptext-font-style: italic;
-$input-prefix-color: $form-input-prefix-color;
-$input-prefix-background: $form-input-prefix-bg-color;
-$input-prefix-border: 1px solid $form-input-border-color;
-$input-prefix-padding: $form-input-padding;
-$form-label-color: $form-label-color;
-$form-label-font-size: $label-font-size;
+$input-prefix-color: $black;
+$input-prefix-background: $light-gray;
+$input-prefix-border: 1px solid $medium-gray;
+$input-prefix-padding: 1rem;
+$form-label-color: $dealer-form-label-color;
+$form-label-font-size: rem-calc(14);
 $form-label-font-weight: $global-weight-normal;
 $form-label-line-height: 1.8;
-$select-background: $form-input-bg-color;
-$select-triangle-color: $form-input-select-triangle-color;
-$select-radius: $form-input-radius;
-$input-color: $form-input-color;
-$input-placeholder-color: $medium-gray;
+$select-background: $white;
+$select-triangle-color: $dark-gray;
+$select-radius: $global-radius;
+$input-color: $black;
+$input-placeholder-color: $text-gray;
 $input-font-family: inherit;
-$input-font-size: $form-input-font-size;
+$input-font-size: rem-calc(16);
 $input-font-weight: $global-weight-normal;
 $input-line-height: $global-lineheight;
-$input-background: $form-input-bg-color;
-$input-background-focus: $form-input-bg-color;
-$input-background-disabled: $form-input-disabled-bg-color;
-$input-border: 1px solid $form-input-border-color;
-$input-border-focus: 1px solid $form-input-focus-border-color;
-$input-padding: $form-input-padding;
-$input-shadow: $form-input-shadow;
-$input-shadow-focus: $form-input-focus-shadow;
+$input-background: $white;
+$input-background-focus: $white;
+$input-background-disabled: $light-gray;
+$input-border: 1px solid $medium-gray;
+$input-border-focus: 1px solid $dark-gray;
+$input-padding: $form-spacing * 0.5;
+$input-shadow: inset 0 1px 2px rgba($black, 0.1);
+$input-shadow-focus: 0 0 5px $medium-gray;
 $input-cursor-disabled: not-allowed;
 $input-transition: box-shadow 0.5s, border-color 0.25s ease-in-out;
 $input-number-spinners: true;
-$input-radius: $form-input-radius;
-$form-button-radius: $form-input-radius;
+$input-radius: $global-radius;
+$form-button-radius: $global-radius;
 
 // 21. Label
 // ---------
@@ -484,7 +483,7 @@ $label-color-alt: $white;
 $label-palette: $foundation-palette;
 $label-font-size: 0.8rem;
 $label-padding: 0.33333rem 0.5rem;
-$label-radius: $global-radius;
+$label-radius: $dealer-badge-radius;
 
 // 22. Media Object
 // ----------------
@@ -757,14 +756,14 @@ $responsive-embed-ratios: (
 // 47. Reveal
 // ----------
 
-$reveal-background: $modal-bg-color;
+$reveal-background: $white;
 $reveal-width: 600px;
 $reveal-max-width: $global-width;
 $reveal-padding: $global-padding;
-$reveal-border: 1px solid $modal-border-color;
-$reveal-radius: $modal-radius;
+$reveal-border: 1px solid $medium-gray;
+$reveal-radius: $global-radius;
 $reveal-zindex: 1005;
-$reveal-overlay-background: $modal-overlay-color;
+$reveal-overlay-background: rgba($black, 0.45);
 
 // 48. Slider
 // ----------