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

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (46) hide show
  1. package/components/FSBreadcrumbs.vue +16 -14
  2. package/components/FSButton.vue +79 -29
  3. package/components/FSCheckbox.vue +21 -10
  4. package/components/FSCol.vue +17 -17
  5. package/components/FSColor.vue +80 -0
  6. package/components/FSFadeOut.vue +4 -4
  7. package/components/FSIcon.vue +5 -3
  8. package/components/FSNumberField.vue +1 -1
  9. package/components/FSPasswordField.vue +20 -9
  10. package/components/FSRadio.vue +20 -10
  11. package/components/FSRadioGroup.vue +5 -7
  12. package/components/FSRow.vue +17 -17
  13. package/components/FSSearchField.vue +122 -0
  14. package/components/FSSlideGroup.vue +16 -12
  15. package/components/FSSpan.vue +27 -2
  16. package/components/FSSwitch.vue +25 -12
  17. package/components/FSTab.vue +9 -2
  18. package/components/FSTabs.vue +18 -10
  19. package/components/FSTag.vue +31 -17
  20. package/components/FSTagField.vue +152 -0
  21. package/components/FSTagGroup.vue +60 -0
  22. package/components/FSText.vue +78 -0
  23. package/components/FSTextField.vue +74 -18
  24. package/components/FSWrapGroup.vue +15 -12
  25. package/composables/useColors.ts +31 -21
  26. package/{defaults → models}/FSButtons.ts +24 -6
  27. package/models/FSTags.ts +8 -0
  28. package/models/FSTextFields.ts +17 -0
  29. package/package.json +5 -4
  30. package/styles/components/fs_breadcrumbs.scss +10 -5
  31. package/styles/components/fs_button.scss +21 -20
  32. package/styles/components/fs_checkbox.scss +3 -4
  33. package/styles/components/fs_color.scss +5 -0
  34. package/styles/components/fs_password_field.scss +6 -1
  35. package/styles/components/fs_radio.scss +3 -4
  36. package/styles/components/fs_span.scss +7 -2
  37. package/styles/components/fs_switch.scss +4 -4
  38. package/styles/components/fs_tabs.scss +8 -8
  39. package/styles/components/fs_tag.scss +8 -8
  40. package/styles/components/fs_tag_field.scss +10 -0
  41. package/styles/components/fs_text.scss +5 -0
  42. package/styles/components/fs_text_field.scss +25 -14
  43. package/styles/components/index.scss +3 -0
  44. package/styles/globals/overrides.scss +13 -4
  45. package/styles/globals/text_fonts.scss +4 -0
  46. package/themes/default.ts +6 -6
package/styles/components/fs_radio.scss CHANGED
@@ -1,15 +1,14 @@
1
1
  .fs-radio {
2
2
  cursor: var(--fs-radio-cursor) !important;
3
- color: var(--fs-radio-base-color) !important;
3
+ color: var(--fs-radio-radio-color) !important;
4
4
  }
5
5
 
6
6
  .fs-radio-label {
7
7
  cursor: var(--fs-radio-cursor) !important;
8
- color: var(--fs-radio-base-text);
9
- height: 20px !important;
8
+ color: var(--fs-radio-color) !important;
10
9
  user-select: none;
11
10
  }
12
11
 
13
12
  .fs-radio-description {
14
- color: var(--fs-radio-base-text);
13
+ color: var(--fs-radio-color) !important;
15
14
  }
package/styles/components/fs_span.scss CHANGED
@@ -1,8 +1,13 @@
1
1
  .fs-span {
2
2
  padding-inline-end: 2px;
3
- display: flex;
4
- align-items: center;
3
+ }
4
+
5
+ .fs-span-ellipsis {
5
6
  overflow: hidden;
6
7
  white-space: nowrap;
7
8
  text-overflow: ellipsis;
9
+ }
10
+
11
+ .fs-span-pre-wrap {
12
+ white-space: pre-wrap;
8
13
  }
package/styles/components/fs_switch.scss CHANGED
@@ -29,23 +29,23 @@
29
29
 
30
30
  .fs-switch-label {
31
31
  cursor: var(--fs-switch-cursor) !important;
32
- color: var(--fs-switch-base-text);
32
+ color: var(--fs-switch-color) !important;
33
33
  user-select: none;
34
34
  }
35
35
 
36
36
  .fs-switch-description {
37
- color: var(--fs-switch-base-text);
37
+ color: var(--fs-switch-color) !important;
38
38
  }
39
39
 
40
40
  .v-switch__track {
41
41
  width: 40px !important;
42
42
  height: 24px !important;
43
- background-color: var(--fs-switch-base-color) !important;
43
+ background-color: var(--fs-switch-track-color) !important;
44
44
 
45
45
  }
46
46
 
47
47
  .v-switch__thumb {
48
48
  width: 16px !important;
49
49
  height: 16px !important;
50
- background-color: var(--fs-switch-base-background) !important;
50
+ background-color: var(--fs-switch-thumb-color) !important;
51
51
  }
package/styles/components/fs_tabs.scss CHANGED
@@ -13,16 +13,16 @@
13
13
 
14
14
  .fs-tab {
15
15
  padding: 0 16px;
16
- border-bottom: 1px solid var(--fs-group-light-text) !important;
17
- color: var(--fs-group-light-text) !important;
16
+ border-bottom: 1px solid var(--fs-group-color) !important;
17
+ color: var(--fs-group-color) !important;
18
18
 
19
19
  & .fs-tab-label {
20
20
  @extend .text-button;
21
21
  }
22
22
 
23
23
  &:hover {
24
- border-bottom: 1px solid var(--fs-group-dark-text) !important;
25
- color: var(--fs-group-dark-text) !important;
24
+ border-bottom: 1px solid var(--fs-group-hover-color) !important;
25
+ color: var(--fs-group-hover-color) !important;
26
26
  }
27
27
 
28
28
  @include web {
@@ -35,8 +35,8 @@
35
35
  }
36
36
 
37
37
  .fs-tab-active {
38
- background-color: var(--fs-group-light-color) !important;
39
- color: var(--fs-group-dark-text) !important;
38
+ background-color: var(--fs-group-hover-background-color) !important;
39
+ color: var(--fs-group-hover-color) !important;
40
40
  border-bottom: 0 !important;
41
41
 
42
42
  &:hover {
@@ -47,8 +47,8 @@
47
47
  .fs-tab-tag {
48
48
  padding: 0 8px;
49
49
  border-radius: 4px;
50
- background-color: var(--fs-group-base-color);
51
- color: var(--fs-group-light-color);
50
+ background-color: var(--fs-tab-tag-background-color);
51
+ color: var(--fs-tab-tag-color);
52
52
 
53
53
  @include web {
54
54
  min-width: 28px;
package/styles/components/fs_tag.scss CHANGED
@@ -1,8 +1,8 @@
1
1
  .fs-tag {
2
2
  padding: 0 8px !important;
3
3
  border-radius: 2px !important;
4
- background-color: var(--fs-tag-light-color) !important;
5
- color: var(--fs-tag-light-text) !important;
4
+ background-color: var(--fs-tag-background-color) !important;
5
+ color: var(--fs-tag-color) !important;
6
6
 
7
7
  @include web {
8
8
  height: 28px !important;
@@ -18,17 +18,17 @@
18
18
  margin: 4px 0 !important;
19
19
  border-radius: 2px !important;
20
20
  box-shadow: none !important;
21
- background-color: var(--fs-tag-light-color) !important;
22
- color: var(--fs-tag-light-text) !important;
21
+ background-color: var(--fs-tag-background-color) !important;
22
+ color: var(--fs-tag-color) !important;
23
23
 
24
24
  &:hover {
25
- background-color: var(--fs-tag-base-color) !important;
26
- color: var(--fs-tag-base-text) !important;
25
+ background-color: var(--fs-tag-hover-background-color) !important;
26
+ color: var(--fs-tag-hover-color) !important;
27
27
  }
28
28
 
29
29
  &:active {
30
- background-color: var(--fs-tag-dark-color) !important;
31
- color: var(--fs-tag-dark-text) !important;
30
+ background-color: var(--fs-tag-active-background-color) !important;
31
+ color: var(--fs-tag-active-color) !important;
32
32
  }
33
33
 
34
34
  @include web {
package/styles/components/fs_tag_field.scss ADDED
@@ -0,0 +1,10 @@
1
+ .fs-tag-field-icon {
2
+ opacity: 1 !important;
3
+ cursor: var(--fs-tag-field-cursor) !important;
4
+ color: var(--fs-tag-field-base-text) !important;
5
+ transition: color 0.28s cubic-bezier(0.4, 0, 0.2, 1);
6
+
7
+ &:hover {
8
+ color: var(--fs-tag-field-dark-text) !important;
9
+ }
10
+ }
package/styles/components/fs_text.scss ADDED
@@ -0,0 +1,5 @@
1
+ .fs-text {
2
+ color: var(--fs-text-color);
3
+
4
+ @extend .fs-span;
5
+ }
package/styles/components/fs_text_field.scss CHANGED
@@ -1,14 +1,20 @@
1
1
  .fs-text-field {
2
- border: 1px solid var(--fs-text-field-base-color) !important;
3
- border-radius: 4px !important;
4
- padding: 0 16px !important;
2
+ padding: 0px !important;
5
3
  width: 100%;
6
4
 
7
- &:focus-within {
8
- border-color: var(--fs-text-field-dark-color) !important;
9
- }
10
-
11
5
  & > .v-input__control > .v-field {
6
+ border: 1px solid var(--fs-text-field-border-color) !important;
7
+ border-radius: 4px !important;
8
+ padding: 0 16px !important;
9
+
10
+ &--error {
11
+ border-color: var(--fs-text-field-error-border-color) !important;
12
+ }
13
+
14
+ &:not(.v-field--error):focus-within {
15
+ border-color: var(--fs-text-field-active-border-color) !important;
16
+ }
17
+
12
18
  & > .v-field__outline {
13
19
  display: none;
14
20
  }
@@ -18,25 +24,30 @@
18
24
 
19
25
  padding-inline: 0 !important;
20
26
  cursor: var(--fs-text-field-cursor) !important;
21
- color: var(--fs-text-field-base-text);
27
+ color: var(--fs-text-field-color);
22
28
 
23
29
  @include web {
24
- min-height: 48px !important;
25
- height: 48px !important;
30
+ min-height: 46px !important;
31
+ height: 46px !important;
26
32
  }
27
33
 
28
34
  @include mobile {
29
- min-height: 36px !important;
30
- height: 36px !important;
35
+ min-height: 34px !important;
36
+ height: 34px !important;
31
37
  }
32
38
  }
33
39
  }
34
40
  }
35
41
 
36
42
  .fs-text-field-label {
37
- color: var(--fs-text-field-base-text);
43
+ color: var(--fs-text-field-color);
44
+ }
45
+
46
+ .fs-text-field-messages {
47
+ align-self: stretch;
48
+ color: var(--fs-text-field-error-color);
38
49
  }
39
50
 
40
51
  .fs-text-field-description {
41
- color: var(--fs-text-field-base-text);
52
+ color: var(--fs-text-field-color);
42
53
  }
package/styles/components/index.scss CHANGED
@@ -2,6 +2,7 @@
2
2
  @import "fs_button.scss";
3
3
  @import "fs_checkbox.scss";
4
4
  @import "fs_col.scss";
5
+ @import "fs_color.scss";
5
6
  @import "fs_fade_out.scss";
6
7
  @import "fs_icon.scss";
7
8
  @import "fs_password_field.scss";
@@ -11,5 +12,7 @@
11
12
  @import "fs_switch.scss";
12
13
  @import "fs_tag.scss";
13
14
  @import "fs_tabs.scss";
15
+ @import "fs_tag_field.scss";
14
16
  @import "fs_text_field.scss";
17
+ @import "fs_text.scss";
15
18
  @import "fs_wrap_group.scss";
package/styles/globals/overrides.scss CHANGED
@@ -8,6 +8,15 @@
8
8
  display: none;
9
9
  }
10
10
 
11
+ // Margin with prepend / append downgraded to default gap
12
+ .v-input > .v-input__prepend {
13
+ margin-inline-end: 8px !important;
14
+ }
15
+
16
+ .v-input > .v-input__append {
17
+ margin-inline-start: 8px !important;
18
+ }
19
+
11
20
  // No up / down buttons in input field of type number
12
21
  input[type=number] {
13
22
  -moz-appearance: textfield;
@@ -31,7 +40,7 @@ input[type=number]::-webkit-outer-spin-button {
31
40
  min-width: 24px !important;
32
41
  width: 24px !important;
33
42
  flex: 1 1 0 !important;
34
- color: var(--fs-group-base-text);
43
+ color: var(--fs-group-color);
35
44
 
36
45
  @include touchscreen {
37
46
  display: none !important;
@@ -41,14 +50,14 @@ input[type=number]::-webkit-outer-spin-button {
41
50
  // Light background color & dark text color on arrows when hovered
42
51
  .v-slide-group__prev:hover,
43
52
  .v-slide-group__next:hover {
44
- background-color: var(--fs-group-light-color);
45
- color: var(--fs-group-dark-text);
53
+ background-color: var(--fs-group-hover-background-color);
54
+ color: var(--fs-group-hover-color);
46
55
  }
47
56
 
48
57
  // Light text color on arrows when disabled
49
58
  .v-slide-group__prev--disabled,
50
59
  .v-slide-group__next--disabled {
51
- color: var(--fs-group-light-text) !important;
60
+ color: var(--fs-group-disabled-color) !important;
52
61
  }
53
62
 
54
63
  /***************************************************************************/
package/styles/globals/text_fonts.scss CHANGED
@@ -1,3 +1,7 @@
1
+ @import "@fontsource/montserrat/500.css";
2
+ @import "@fontsource/montserrat/600.css";
3
+ @import "@fontsource/montserrat/700.css";
4
+
1
5
  .text-h1 {
2
6
  font-family: 'Montserrat', sans-serif !important;
3
7
  font-style: normal !important;
package/themes/default.ts CHANGED
@@ -14,11 +14,11 @@ export const DefaultTheme: ThemeDefinition = {
14
14
  dark: false,
15
15
  colors: {
16
16
  "background": "#F9F9F9",
17
- "light" : "#DEE0E3",
18
- "dark" : "#4D4D4D",
19
- "primary" : "#0059E5",
20
- "success" : "#56CC1F",
21
- "warning" : "#FFB833",
22
- "error" : "#EB1313"
17
+ "light" : "#E1E2E3", // hsv(216, 1, 89)
18
+ "dark" : "#3F4040", // hsv(211, 1, 25)
19
+ "primary" : "#0058E6", // hsv(217, 100, 90)
20
+ "success" : "#6DE038", // hsv(101, 75, 88)
21
+ "warning" : "#E6A52E", // hsv(39, 80, 90)
22
+ "error" : "#E01212" // hsv(0, 92, 88)
23
23
  }
24
24
  }