@dative-gpi/foundation-shared-components 0.0.4 → 0.0.6

package/styles/components/fs_col.scss

@@ -1,6 +1,91 @@
 .fs-col {
     display: flex;
     flex-direction: column;
-    align-items: flex-start;
-    gap: var(--fs-col-gap)
+    gap: var(--fs-col-gap);
+
+    &-top-left {
+        justify-content: flex-start;
+        align-items: flex-start;
+    }
+
+    &-top-center {
+        justify-content: flex-start;
+        align-items: center;
+    }
+
+    &-top-right {
+        justify-content: flex-start;
+        align-items: flex-end;
+    }
+
+    &-center-left {
+        justify-content: center;
+        align-items: flex-start;
+    }
+
+    &-center-center {
+        justify-content: center;
+        align-items: center;
+    }
+
+    &-center-right {
+        justify-content: center;
+        align-items: flex-end;
+    }
+
+    &-bottom-left {
+        justify-content: flex-end;
+        align-items: flex-start;
+    }
+
+    &-bottom-center {
+        justify-content: flex-end;
+        align-items: center;
+    }
+
+    &-bottom-right {
+        justify-content: flex-end;
+        align-items: flex-end;
+    }
+}
+
+.fs-col > .fs-col-width {
+    &-fill {
+        align-self: stretch;
+    }
+
+    &-fixed {
+        width: var(--fs-col-width);
+    }
+}
+
+:not(.fs-col) > .fs-col-width {
+    &-fill {
+        flex: 1 0 0;
+    }
+
+    &-fixed {
+        width: var(--fs-col-width);
+    }
+}
+
+.fs-col > .fs-col-height {
+    &-fill {
+        flex: 1 0 0;
+    }
+
+    &-fixed {
+        height: var(--fs-col-height);
+    }
+
+}
+
+:not(.fs-col) > .fs-col-height {
+    &-fill {
+        align-self: stretch;
+    }
+
+    &-fixed {
+        height: var(--fs-col-height);
+    }
 }

package/styles/components/fs_color.scss

@@ -0,0 +1,5 @@
+.fs-color {
+    background-color: var(--fs-color-background-color);
+    color: var(--fs-color-color);
+    border-radius: 4px;
+}

package/styles/components/fs_icon.scss

@@ -3,12 +3,12 @@
 }
 
 .fs-icon-m {
-    @include mobile {
-        font-size: 18px !important;
+    @include web {
+        font-size: 20px !important;
     }
 
-    @include web {
-        font-size: 24px !important;
+    @include mobile {
+        font-size: 16px !important;
     }
 }
 

package/styles/components/fs_password_field.scss

@@ -0,0 +1,10 @@
+.fs-password-field-icon {
+    opacity: 1 !important;
+    cursor: var(--fs-password-field-cursor) !important;
+    color: var(--fs-password-field-base-text) !important;
+    transition: color 0.28s cubic-bezier(0.4, 0, 0.2, 1);
+
+    &:hover {
+        color: var(--fs-password-field-dark-text) !important;
+    }
+}

package/styles/components/fs_radio.scss

@@ -1,15 +1,14 @@
 .fs-radio {
     cursor: var(--fs-radio-cursor) !important;
-    color: var(--fs-radio-base-color) !important;
+    color: var(--fs-radio-radio-color) !important;
 }
 
 .fs-radio-label {
     cursor: var(--fs-radio-cursor) !important;
-    color: var(--fs-radio-base-text);
-    height: 20px !important;
+    color: var(--fs-radio-color) !important;
     user-select: none;
 }
 
 .fs-radio-description {
-    color: var(--fs-radio-base-text);
+    color: var(--fs-radio-color) !important;
 }

package/styles/components/fs_row.scss

@@ -1,6 +1,91 @@
 .fs-row {
     display: flex;
-    align-items: flex-start;
     flex-wrap: var(--fs-row-flex-wrap);
     gap: var(--fs-row-gap);
+
+    &-top-left {
+        align-items: flex-start;
+        justify-content: flex-start;
+    }
+
+    &-top-center {
+        align-items: flex-start;
+        justify-content: center;
+    }
+
+    &-top-right {
+        align-items: flex-start;
+        justify-content: flex-end;
+    }
+
+    &-center-left {
+        align-items: center;
+        justify-content: flex-start;
+    }
+
+    &-center-center {
+        align-items: center;
+        justify-content: center;
+    }
+
+    &-center-right {
+        align-items: center;
+        justify-content: flex-end;
+    }
+
+    &-bottom-left {
+        align-items: flex-end;
+        justify-content: flex-start;
+    }
+
+    &-bottom-center {
+        align-items: flex-end;
+        justify-content: center;
+    }
+
+    &-bottom-right {
+        align-items: flex-end;
+        justify-content: flex-end;
+    }
+}
+
+:not(.fs-col) > .fs-row-width {
+    &-fill {
+        flex: 1 0 0;
+    }
+
+    &-fixed {
+        width: var(--fs-row-width);
+    }
+}
+
+.fs-col > .fs-row-width {
+    &-fill {
+        align-self: stretch;
+    }
+
+    &-fixed {
+        width: var(--fs-row-width);
+    }
+}
+
+:not(.fs-col) > .fs-row-height  {
+    &-fill {
+        align-self: stretch;
+    }
+
+    &-fixed {
+        height: var(--fs-row-height);
+    }
+
+}
+
+.fs-col > .fs-row-height {
+    &-fill {
+        flex: 1 0 0;
+    }
+
+    &-fixed {
+        width: var(--fs-row-height);
+    }
 }

package/styles/components/fs_span.scss

@@ -1,8 +1,13 @@
 .fs-span {
-    height: 100%;
-    display: flex;
-    align-items: center;
+    padding-inline-end: 2px;
+}
+
+.fs-span-ellipsis {
     overflow: hidden;
     white-space: nowrap;
     text-overflow: ellipsis;
+}
+
+.fs-span-pre-wrap {
+    white-space: pre-wrap;
 }

package/styles/components/fs_switch.scss

@@ -29,23 +29,23 @@
 
 .fs-switch-label {
     cursor: var(--fs-switch-cursor) !important;
-    color: var(--fs-switch-base-text);
+    color: var(--fs-switch-color) !important;
     user-select: none;
 }
 
 .fs-switch-description {
-    color: var(--fs-switch-base-text);
+    color: var(--fs-switch-color) !important;
 }
 
 .v-switch__track {
     width: 40px !important;
     height: 24px !important;
-    background-color: var(--fs-switch-base-color) !important;
+    background-color: var(--fs-switch-track-color) !important;
 
 }
 
 .v-switch__thumb {
     width: 16px !important;
     height: 16px !important;
-    background-color: var(--fs-switch-base-background) !important;
+    background-color: var(--fs-switch-thumb-color) !important;
 }

package/styles/components/fs_tabs.scss

@@ -12,18 +12,17 @@
 }
 
 .fs-tab {
-    display: flex;
     padding: 0 16px;
-    border-bottom: 1px solid var(--fs-group-light-text) !important;
-    color: var(--fs-group-light-text) !important;
+    border-bottom: 1px solid var(--fs-group-color) !important;
+    color: var(--fs-group-color) !important;
 
     & .fs-tab-label {
         @extend .text-button;
     }
 
     &:hover {
-        border-bottom: 1px solid var(--fs-group-dark-text) !important;
-        color: var(--fs-group-dark-text) !important;
+        border-bottom: 1px solid var(--fs-group-hover-color) !important;
+        color: var(--fs-group-hover-color) !important;
     }
 
     @include web {
@@ -36,8 +35,8 @@
 }
 
 .fs-tab-active {
-    background-color: var(--fs-group-light-color) !important;
-    color: var(--fs-group-dark-text) !important;
+    background-color: var(--fs-group-hover-background-color) !important;
+    color: var(--fs-group-hover-color) !important;
     border-bottom: 0 !important;
 
     &:hover {
@@ -48,8 +47,8 @@
 .fs-tab-tag {
     padding: 0 8px;
     border-radius: 4px;
-    background-color: var(--fs-group-base-color);
-    color: var(--fs-group-light-color);
+    background-color: var(--fs-tab-tag-background-color);
+    color: var(--fs-tab-tag-color);
 
     @include web {
         min-width: 28px;

package/styles/components/fs_tag.scss

@@ -1,8 +1,8 @@
 .fs-tag {
     padding: 0 8px !important;
     border-radius: 2px !important;
-    background-color: var(--fs-tag-light-color) !important;
-    color: var(--fs-tag-light-text) !important;
+    background-color: var(--fs-tag-background-color) !important;
+    color: var(--fs-tag-color) !important;
 
     @include web {
         height: 28px !important;
@@ -18,17 +18,17 @@
     margin: 4px 0 !important;
     border-radius: 2px !important;
     box-shadow: none !important;
-    background-color: var(--fs-tag-light-color) !important;
-    color: var(--fs-tag-light-text) !important;
+    background-color: var(--fs-tag-background-color) !important;
+    color: var(--fs-tag-color) !important;
 
     &:hover {
-        background-color: var(--fs-tag-base-color) !important;
-        color: var(--fs-tag-base-text) !important;
+        background-color: var(--fs-tag-hover-background-color) !important;
+        color: var(--fs-tag-hover-color) !important;
     }
 
     &:active {
-        background-color: var(--fs-tag-dark-color) !important;
-        color: var(--fs-tag-dark-text) !important;
+        background-color: var(--fs-tag-active-background-color) !important;
+        color: var(--fs-tag-active-color) !important;
     }
 
     @include web {

package/styles/components/fs_tag_field.scss

@@ -0,0 +1,10 @@
+.fs-tag-field-icon {
+    opacity: 1 !important;
+    cursor: var(--fs-tag-field-cursor) !important;
+    color: var(--fs-tag-field-base-text) !important;
+    transition: color 0.28s cubic-bezier(0.4, 0, 0.2, 1);
+
+    &:hover {
+        color: var(--fs-tag-field-dark-text) !important;
+    }
+}

package/styles/components/fs_text.scss

@@ -0,0 +1,5 @@
+.fs-text {
+    color: var(--fs-text-color);
+
+    @extend .fs-span;
+}

package/styles/components/fs_text_field.scss

@@ -1,24 +1,53 @@
-.fs-text-field > .v-input__control > .v-field {
-    border: 1.3px solid #000000 !important;
-    border-radius: 4px !important;
+.fs-text-field {
+    padding: 0px !important;
+    width: 100%;
 
-    & > .v-field__outline {
-        display: none;
-    }
-}
+    & > .v-input__control > .v-field {
+        border: 1px solid var(--fs-text-field-border-color) !important;
+        border-radius: 4px !important;
+        padding: 0 16px !important;
 
-.fs-text-field > .v-input__control > .v-field > .v-field__field > input {
-    @extend .text-body;
+        &--error {
+            border-color: var(--fs-text-field-error-border-color) !important;
+        }
 
-    padding: 12px 16px !important;
+        &:not(.v-field--error):focus-within {
+            border-color: var(--fs-text-field-active-border-color) !important;
+        }
 
-    @include web {
-        min-height: 44px !important;
-        height: 44px !important;
-    }
+        & > .v-field__outline {
+            display: none;
+        }
 
-    @include mobile {
-        min-height: 40px !important;
-        height: 40px !important;
+        & > .v-field__field > input {
+            @extend .text-body;
+        
+            padding-inline: 0 !important;
+            cursor: var(--fs-text-field-cursor) !important;
+            color: var(--fs-text-field-color);
+        
+            @include web {
+                min-height: 46px !important;
+                height: 46px !important;
+            }
+        
+            @include mobile {
+                min-height: 34px !important;
+                height: 34px !important;
+            }
+        }
     }
+}
+
+.fs-text-field-label {
+    color: var(--fs-text-field-color);
+}
+
+.fs-text-field-messages {
+    align-self: stretch;
+    color: var(--fs-text-field-error-color);
+}
+
+.fs-text-field-description {
+    color: var(--fs-text-field-color);
 }

package/styles/components/index.scss

@@ -1,14 +1,18 @@
-@import 'fs_breadcrumbs.scss';
-@import 'fs_button.scss';
-@import 'fs_checkbox.scss';
-@import 'fs_col.scss';
-@import 'fs_fade_out.scss';
-@import 'fs_icon.scss';
-@import 'fs_radio.scss';
-@import 'fs_row.scss';
-@import 'fs_span.scss';
-@import 'fs_switch.scss';
-@import 'fs_tag.scss';
-@import 'fs_tabs.scss';
-@import 'fs_text_field.scss';
-@import 'fs_wrap_group.scss';
+@import "fs_breadcrumbs.scss";
+@import "fs_button.scss";
+@import "fs_checkbox.scss";
+@import "fs_col.scss";
+@import "fs_color.scss";
+@import "fs_fade_out.scss";
+@import "fs_icon.scss";
+@import "fs_password_field.scss";
+@import "fs_radio.scss";
+@import "fs_row.scss";
+@import "fs_span.scss";
+@import "fs_switch.scss";
+@import "fs_tag.scss";
+@import "fs_tabs.scss";
+@import "fs_tag_field.scss";
+@import "fs_text_field.scss";
+@import "fs_text.scss";
+@import "fs_wrap_group.scss";

package/styles/globals/fixes.scss

@@ -0,0 +1,5 @@
+.fs-tab > .v-btn__content > .fs-row > .text-button {
+    @include web {
+        padding-top: 2px !important;
+    }
+}

package/styles/globals/index.scss

@@ -3,4 +3,7 @@
 @import 'text_fonts.scss';
 @import 'touchscreen.scss';
 @import 'scrollbars.scss';
-@import 'overrides.scss';
+@import 'overrides.scss';
+
+// Find a better way to fix this
+@import 'fixes.scss';

package/styles/globals/overrides.scss

@@ -8,6 +8,28 @@
     display: none;
 }
 
+// Margin with prepend / append downgraded to default gap
+.v-input > .v-input__prepend {
+    margin-inline-end: 8px !important;
+}
+
+.v-input > .v-input__append {
+    margin-inline-start: 8px !important;
+}
+
+// No up / down buttons in input field of type number
+input[type=number] { 
+    -moz-appearance: textfield;
+    appearance: textfield;
+    margin: 0; 
+}
+
+input[type=number]::-webkit-inner-spin-button,
+input[type=number]::-webkit-outer-spin-button { 
+    -webkit-appearance: none; 
+    margin: 0; 
+}
+
 /***** Applies to all slide groups (FSTabs, FSSlideGroup, FSWrapGroup) *****/
 
 // On touchscreen, hide arrows
@@ -18,7 +40,7 @@
     min-width: 24px !important;
     width: 24px !important;
     flex: 1 1 0 !important;
-    color: var(--fs-group-base-text);
+    color: var(--fs-group-color);
 
     @include touchscreen {
         display: none !important;
@@ -28,14 +50,14 @@
 // Light background color & dark text color on arrows when hovered
 .v-slide-group__prev:hover,
 .v-slide-group__next:hover {
-    background-color: var(--fs-group-light-color);
-    color: var(--fs-group-dark-text);
+    background-color: var(--fs-group-hover-background-color);
+    color: var(--fs-group-hover-color);
 }
 
 // Light text color on arrows when disabled
 .v-slide-group__prev--disabled,
 .v-slide-group__next--disabled {
-    color: var(--fs-group-light-text) !important;
+    color: var(--fs-group-disabled-color) !important;
 }
 
 /***************************************************************************/

package/styles/globals/text_fonts.scss

@@ -1,54 +1,58 @@
+@import "@fontsource/montserrat/500.css";
+@import "@fontsource/montserrat/600.css";
+@import "@fontsource/montserrat/700.css";
+
 .text-h1 {
     font-family: 'Montserrat', sans-serif !important;
-    font-style: normal;
-    font-weight: 700;
+    font-style: normal !important;
+    font-weight: 700 !important;
 
     @include web {
-        font-size: 36px;
-        line-height: 40px;
-        letter-spacing: -0.72px;
+        font-size: 36px !important;
+        line-height: 40px !important;
+        letter-spacing: -0.72px !important;
     }
 
     @include mobile {
-        font-size: 29px;
-        line-height: 32px;
-        letter-spacing: -1.45px;
+        font-size: 29px !important;
+        line-height: 32px !important;
+        letter-spacing: -1.45px !important;
     }
 }
 
 .text-h2 {
     font-family: 'Montserrat', sans-serif !important;
-    font-style: normal;
-    font-weight: 600;
+    font-style: normal !important;
+    font-weight: 600 !important;
 
     @include web {
-        font-size: 27px;
-        line-height: 32px;
-        letter-spacing: -0.81px;
+        font-size: 27px !important;
+        line-height: 32px !important;
+        letter-spacing: -0.81px !important;
     }
 
     @include mobile {
-        font-size: 22px;
-        line-height: 24px;
-        letter-spacing: -0.88px;
+        font-size: 22px !important;
+        line-height: 24px !important;
+        letter-spacing: -0.88px !important;
     }
 }
 
 .text-h3 {
     font-family: 'Montserrat', sans-serif !important;
-    font-style: normal;
-    font-weight: 600;
+    font-style: normal !important;
+    font-weight: 600 !important;
 
     @include web {
-        font-size: 21px;
-        line-height: 24px;
-        letter-spacing: -0.63px;
+        font-size: 21px !important;
+        line-height: 24px !important;
+        letter-spacing: -0.63px !important;
     }
 
     @include mobile {
-        font-size: 17px;
-        line-height: 20px;
-        letter-spacing: -0.51px;
+        font-size: 17px !important;
+        line-height: 20px !important;
+        letter-spacing: -0.51px !important;
     }
 }
 
@@ -91,6 +95,26 @@
 }
 
 .text-overline {
+    font-family: 'Montserrat', sans-serif !important;
+    font-style: normal !important;
+    text-transform: none !important;
+
+    @include web {
+        font-weight: 600 !important;
+        font-size: 12px !important;
+        line-height: 16px !important;
+        letter-spacing: 0.08px !important;
+    }
+
+    @include mobile {
+        font-weight: 500 !important;
+        font-size: 10px !important;
+        line-height: 16px !important;
+        letter-spacing: 0.19px !important;
+    }
+}
+
+.text-underline {
     font-family: 'Montserrat', sans-serif !important;
     font-style: normal !important;
     font-weight: 500 !important;