@thalassic/themes 22.0.1 → 22.2.0

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 (10) hide show
  1. package/package.json +1 -1
  2. package/themes/thalassic/components/{_file-uploader.scss → _file-input.scss} +34 -12
  3. package/themes/thalassic/components/_form-item.scss +1 -1
  4. package/themes/thalassic/components/_odometer.scss +2 -1
  5. package/themes/thalassic/components/date-time-picker/_date-time-picker.scss +4 -0
  6. package/themes/thalassic/components/index.scss +1 -1
  7. package/themes/thalassic/components/multi-select/_multi-select.scss +14 -0
  8. package/themes/thalassic/components/select/_select.scss +14 -0
  9. package/themes/thalassic/components/tabs/_tabs.scss +9 -0
  10. package/themes/thalassic/components/toggle-group/_toggle-group.scss +9 -0
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@thalassic/themes",
3
- "version": "22.0.1",
3
+ "version": "22.2.0",
4
4
  "license": "MIT",
5
5
  "peerDependencies": {
6
6
  "@angular/common": "^22.0.0",
package/themes/thalassic/components/{_file-uploader.scss → _file-input.scss} RENAMED
@@ -1,8 +1,10 @@
1
1
  @use '../mixins' as mixins;
2
2
 
3
- .tls-file-uploader {
4
- --tls-file-uploader-border-color: var(--color-outline-variant);
5
- --tls-file-uploader-border-radius: var(--radius-md);
3
+ .tls-file-input {
4
+ --tls-file-input-border-color: var(--color-outline-variant);
5
+ --tls-file-input-border-radius: var(--radius-md);
6
+ --tls-file-input-drop-zone-padding: var(--spacing-6);
7
+ --tls-file-input-label-font-size: var(--font-body-medium-size);
6
8
 
7
9
  display: inline-flex;
8
10
  flex-direction: column;
@@ -14,6 +16,26 @@
14
16
  width: 100%;
15
17
  }
16
18
 
19
+ &--button {
20
+ align-items: flex-start;
21
+
22
+ .tls-file-input__hint {
23
+ margin-top: 0;
24
+
25
+ text-align: start;
26
+ }
27
+ }
28
+
29
+ &--sm {
30
+ --tls-file-input-drop-zone-padding: var(--spacing-4);
31
+ --tls-file-input-label-font-size: var(--font-body-small-size);
32
+ }
33
+
34
+ &--lg {
35
+ --tls-file-input-drop-zone-padding: var(--spacing-8);
36
+ --tls-file-input-label-font-size: var(--font-body-large-size);
37
+ }
38
+
17
39
  &__input {
18
40
  display: none;
19
41
  }
@@ -24,10 +46,10 @@
24
46
  align-items: center;
25
47
  justify-content: center;
26
48
 
27
- padding: var(--spacing-6);
49
+ padding: var(--tls-file-input-drop-zone-padding);
28
50
 
29
- border: 2px dashed var(--tls-file-uploader-border-color);
30
- border-radius: var(--tls-file-uploader-border-radius);
51
+ border: 2px dashed var(--tls-file-input-border-color);
52
+ border-radius: var(--tls-file-input-border-radius);
31
53
  color: var(--color-on-surface-variant);
32
54
 
33
55
  cursor: pointer;
@@ -43,13 +65,13 @@
43
65
 
44
66
  &:hover:not(&--disabled),
45
67
  &--dragging {
46
- --tls-file-uploader-border-color: var(--color-primary);
68
+ --tls-file-input-border-color: var(--color-primary);
47
69
 
48
70
  background-color: color-mix(in srgb, var(--color-primary) 8%, transparent);
49
71
  }
50
72
 
51
73
  &--rejected {
52
- --tls-file-uploader-border-color: var(--color-danger);
74
+ --tls-file-input-border-color: var(--color-danger);
53
75
 
54
76
  color: var(--color-danger);
55
77
  background-color: color-mix(in srgb, var(--color-danger) 8%, transparent);
@@ -64,7 +86,7 @@
64
86
  &__label {
65
87
  pointer-events: none;
66
88
 
67
- font-size: var(--font-body-medium-size);
89
+ font-size: var(--tls-file-input-label-font-size);
68
90
  text-align: center;
69
91
  }
70
92
 
@@ -136,12 +158,12 @@
136
158
  }
137
159
 
138
160
  &--disabled {
139
- .tls-file-uploader__drop-zone {
161
+ .tls-file-input__drop-zone {
140
162
  pointer-events: none;
141
163
  }
142
164
  }
143
165
 
144
- &:not(.tls-file-uploader--disabled).tls-file-uploader--touched.tls-file-uploader--invalid {
145
- --tls-file-uploader-border-color: var(--color-danger);
166
+ &:not(.tls-file-input--disabled).tls-file-input--touched.tls-file-input--invalid {
167
+ --tls-file-input-border-color: var(--color-danger);
146
168
  }
147
169
  }
package/themes/thalassic/components/_form-item.scss CHANGED
@@ -51,7 +51,7 @@
51
51
  }
52
52
  }
53
53
 
54
- &:has(.tls-form-control--fluid, .tls-file-uploader--fluid, .tls-form-control-group--fluid) {
54
+ &:has(.tls-form-control--fluid, .tls-file-input--fluid, .tls-form-control-group--fluid) {
55
55
  width: 100%;
56
56
  }
57
57
 
package/themes/thalassic/components/_odometer.scss CHANGED
@@ -59,7 +59,8 @@
59
59
  // digit swaps instantly.
60
60
  @include mixins.motion(essential) {
61
61
  &--animate {
62
- transition: transform var(--tls-odometer-duration, 600ms) var(--tls-odometer-easing);
62
+ transition: transform var(--tls-odometer-duration, 600ms) var(--tls-odometer-easing)
63
+ var(--tls-odometer-delay, 0ms);
63
64
  }
64
65
  }
65
66
  }
package/themes/thalassic/components/date-time-picker/_date-time-picker.scss CHANGED
@@ -60,4 +60,8 @@
60
60
 
61
61
  cursor: inherit;
62
62
  }
63
+
64
+ &__spinner {
65
+ margin-inline-start: auto;
66
+ }
63
67
  }
package/themes/thalassic/components/index.scss CHANGED
@@ -22,7 +22,7 @@
22
22
  @forward 'confirm';
23
23
  @forward 'chip-input';
24
24
  @forward 'divider';
25
- @forward 'file-uploader';
25
+ @forward 'file-input';
26
26
  @forward 'form-item';
27
27
  @forward 'icon';
28
28
  @forward 'menu';
package/themes/thalassic/components/multi-select/_multi-select.scss CHANGED
@@ -62,12 +62,26 @@
62
62
  display: flex;
63
63
  align-items: center;
64
64
 
65
+ &--hidden {
66
+ visibility: hidden;
67
+ }
68
+
65
69
  .tls-multi-select__chevron {
66
70
  transition: transform var(--motion-fast) var(--motion-ease-in-out);
67
71
  }
68
72
  }
69
73
  }
70
74
 
75
+ .tls-multi-select__spinner {
76
+ position: absolute;
77
+ inset-block: 0;
78
+ inset-inline-end: var(--tls-form-control-padding-inline);
79
+
80
+ margin-block: auto;
81
+
82
+ pointer-events: none;
83
+ }
84
+
71
85
  .tls-multi-select__clear {
72
86
  position: absolute;
73
87
  top: 50%;
package/themes/thalassic/components/select/_select.scss CHANGED
@@ -62,12 +62,26 @@
62
62
  display: flex;
63
63
  align-items: center;
64
64
 
65
+ &--hidden {
66
+ visibility: hidden;
67
+ }
68
+
65
69
  .tls-select__chevron {
66
70
  transition: transform var(--motion-fast) var(--motion-ease-in-out);
67
71
  }
68
72
  }
69
73
  }
70
74
 
75
+ .tls-select__spinner {
76
+ position: absolute;
77
+ inset-block: 0;
78
+ inset-inline-end: var(--tls-form-control-padding-inline);
79
+
80
+ margin-block: auto;
81
+
82
+ pointer-events: none;
83
+ }
84
+
71
85
  &:has(.tls-select__clear) .tls-select__trigger {
72
86
  gap: calc(
73
87
  var(--tls-select-clear-size) +
package/themes/thalassic/components/tabs/_tabs.scss CHANGED
@@ -6,6 +6,7 @@
6
6
  --tls-tabs-border-width: 1px;
7
7
  --tls-tabs-active-border-color: var(--color-primary);
8
8
  --tls-tabs-active-border-width: 2px;
9
+ --tls-tabs-disabled-opacity: 0.38;
9
10
  --tls-tabs-content-padding: var(--spacing-4);
10
11
 
11
12
  background: var(--tls-tabs-background-color);
@@ -42,6 +43,14 @@
42
43
  border-color: var(--tls-tabs-active-border-color);
43
44
  }
44
45
 
46
+ &.tls-tabs-header__item--disabled {
47
+ opacity: var(--tls-tabs-disabled-opacity);
48
+
49
+ .tls-tabs-header__item-button {
50
+ cursor: not-allowed;
51
+ }
52
+ }
53
+
45
54
  &-button {
46
55
  padding: var(--spacing-3) var(--spacing-6);
47
56
 
package/themes/thalassic/components/toggle-group/_toggle-group.scss CHANGED
@@ -21,6 +21,15 @@
21
21
  }
22
22
  }
23
23
 
24
+ &--fluid {
25
+ display: flex;
26
+ width: 100%;
27
+
28
+ &:not(.tls-toggle-group--vertical) .tls-toggle-group__option {
29
+ flex: 1 1 0;
30
+ }
31
+ }
32
+
24
33
  &__option {
25
34
  position: relative;
26
35
  z-index: 1;