@thalassic/themes 22.5.0 → 22.5.1

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 (5) hide show
  1. package/package.json +1 -1
  2. package/themes/thalassic/components/tabs/_tabs-header-position.scss +16 -8
  3. package/themes/thalassic/components/tabs/_tabs-orientation.scss +8 -4
  4. package/themes/thalassic/components/tabs/_tabs-variant.scss +19 -7
  5. package/themes/thalassic/components/tabs/_tabs.scss +8 -8
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@thalassic/themes",
3
- "version": "22.5.0",
3
+ "version": "22.5.1",
4
4
  "license": "MIT",
5
5
  "peerDependencies": {
6
6
  "@angular/common": "^22.0.0",
package/themes/thalassic/components/tabs/_tabs-header-position.scss CHANGED
@@ -21,10 +21,14 @@
21
21
  margin-bottom: 0;
22
22
  margin-top: -1px;
23
23
 
24
- &.tls-tabs-header__item--active {
25
- border-bottom-width: 0;
26
- border-top-width: var(--tls-tabs-active-border-width);
27
- border-top-style: solid;
24
+ border-bottom-width: 0;
25
+ border-top-width: var(--tls-tabs-active-border-width);
26
+ border-top-style: solid;
27
+
28
+ // See the flat variant's own hover rule for why this is needed:
29
+ // it keeps the divider line visible under the hover fill.
30
+ &:hover:not(.tls-tabs-header__item--active) {
31
+ border-top-color: var(--tls-tabs-border-color);
28
32
  }
29
33
  }
30
34
  }
@@ -53,10 +57,14 @@
53
57
  margin-inline-end: 0;
54
58
  margin-inline-start: -1px;
55
59
 
56
- &.tls-tabs-header__item--active {
57
- border-inline-end-width: 0;
58
- border-inline-start-width: var(--tls-tabs-active-border-width);
59
- border-inline-start-style: solid;
60
+ border-inline-end-width: 0;
61
+ border-inline-start-width: var(--tls-tabs-active-border-width);
62
+ border-inline-start-style: solid;
63
+
64
+ // See the flat variant's own hover rule for why this is needed:
65
+ // it keeps the divider line visible under the hover fill.
66
+ &:hover:not(.tls-tabs-header__item--active) {
67
+ border-inline-start-color: var(--tls-tabs-border-color);
60
68
  }
61
69
  }
62
70
  }
package/themes/thalassic/components/tabs/_tabs-orientation.scss CHANGED
@@ -25,10 +25,14 @@
25
25
  margin-bottom: 0;
26
26
  margin-inline-end: -1px;
27
27
 
28
- &.tls-tabs-header__item--active {
29
- border-bottom-width: 0;
30
- border-inline-end-width: var(--tls-tabs-active-border-width);
31
- border-inline-end-style: solid;
28
+ border-bottom-width: 0;
29
+ border-inline-end-width: var(--tls-tabs-active-border-width);
30
+ border-inline-end-style: solid;
31
+
32
+ // See the flat variant's own hover rule for why this is needed:
33
+ // it keeps the divider line visible under the hover fill.
34
+ &:hover:not(.tls-tabs-header__item--active) {
35
+ border-inline-end-color: var(--tls-tabs-border-color);
32
36
  }
33
37
  }
34
38
  }
package/themes/thalassic/components/tabs/_tabs-variant.scss CHANGED
@@ -8,15 +8,27 @@
8
8
  &__item {
9
9
  margin-bottom: -1px;
10
10
 
11
+ // Border is always reserved at the active width and toggles only
12
+ // border-color (transparent to active) so switching tabs never
13
+ // changes the item's box height and shifts the label.
14
+ border-bottom-width: var(--tls-tabs-active-border-width);
15
+ border-bottom-style: solid;
16
+
17
+ // Hover fill sits on the item, not the button, so it paints under
18
+ // the item's border and reaches the divider line instead of
19
+ // stopping short and leaving a gap.
11
20
  &:hover {
12
- .tls-tabs-header__item-button {
13
- background-color: var(--color-surface-container);
14
- }
15
- }
21
+ background-color: var(--color-surface-container);
16
22
 
17
- &.tls-tabs-header__item--active {
18
- border-bottom-width: var(--tls-tabs-active-border-width);
19
- border-bottom-style: solid;
23
+ // The item's border overlaps the header's divider line by
24
+ // `--tls-tabs-border-width` (see `margin-bottom: -1px` above).
25
+ // Made opaque only while hovering, it paints over the hover
26
+ // fill and keeps that shared pixel visible instead of the
27
+ // fill covering it. The active item already has an opaque
28
+ // border, so it's excluded here.
29
+ &:not(.tls-tabs-header__item--active) {
30
+ border-bottom-color: var(--tls-tabs-border-color);
31
+ }
20
32
  }
21
33
  }
22
34
  }
package/themes/thalassic/components/tabs/_tabs.scss CHANGED
@@ -14,9 +14,8 @@
14
14
  display: flex;
15
15
  flex-direction: column;
16
16
 
17
- transition:
18
- border-color var(--motion-theme),
19
- background-color var(--motion-theme);
17
+ transition: border-color var(--motion-theme),
18
+ background-color var(--motion-theme);
20
19
 
21
20
  overflow: clip;
22
21
 
@@ -26,14 +25,15 @@
26
25
  border-color: var(--tls-tabs-border-color);
27
26
 
28
27
  &__item {
28
+ display: flex;
29
+
29
30
  color: var(--tls-tabs-label-color);
30
31
 
31
32
  border-color: transparent;
32
33
 
33
- transition:
34
- color var(--motion-fast),
35
- border-color var(--motion-fast),
36
- background-color var(--motion-theme);
34
+ transition: color var(--motion-fast),
35
+ border-color var(--motion-fast),
36
+ background-color var(--motion-theme);
37
37
 
38
38
  &:has(&-link:hover, &-link:focus) {
39
39
  background-color: var(--color-grey-95);
@@ -58,7 +58,7 @@
58
58
  // TODO: use mixin
59
59
  font-size: var(--font-label-large-size);
60
60
  font-weight: var(--font-label-large-weight);
61
- line-height: var(--font-label-large-border-height);
61
+ line-height: var(--font-label-large-line-height);
62
62
  letter-spacing: var(--font-label-large-letter-spacing);
63
63
 
64
64
  cursor: pointer;