@thalassic/themes 0.14.2 → 0.15.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 (7) hide show
  1. package/package.json +1 -1
  2. package/themes/thalassic/_colors.scss +2 -2
  3. package/themes/thalassic/_typography.scss +30 -30
  4. package/themes/thalassic/components/_menu.scss +5 -2
  5. package/themes/thalassic/components/multi-select/_multi-select-panel.scss +2 -0
  6. package/themes/thalassic/components/select/_select-panel.scss +2 -0
  7. package/themes/thalassic/components/stepper/_stepper.scss +8 -7
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@thalassic/themes",
3
- "version": "0.14.2",
3
+ "version": "0.15.1",
4
4
  "license": "MIT",
5
5
  "peerDependencies": {
6
6
  "@angular/common": "^21.0.0",
package/themes/thalassic/_colors.scss CHANGED
@@ -60,7 +60,7 @@
60
60
 
61
61
  // Outline
62
62
  --color-outline: #71787e;
63
- --color-outline-variant: #c1c7ce;
63
+ --color-outline-variant: #d0d5db;
64
64
 
65
65
  // Shadow
66
66
  --color-shadow: 0 0 0;
@@ -122,6 +122,6 @@
122
122
 
123
123
  // Outline
124
124
  --color-outline: #8b9198;
125
- --color-outline-variant: #41484d;
125
+ --color-outline-variant: #2a3035;
126
126
  }
127
127
  }
package/themes/thalassic/_typography.scss CHANGED
@@ -23,82 +23,82 @@
23
23
  --letter-spacing-wider: 0.05em;
24
24
 
25
25
  // Display styles (large marketing text)
26
- --font-display-large-size: 3.5rem;
26
+ --font-display-large-size: 4rem;
27
27
  --font-display-large-weight: var(--font-weight-regular);
28
- --font-display-large-line-height: 4rem;
28
+ --font-display-large-line-height: 4.5625rem;
29
29
  --font-display-large-letter-spacing: var(--letter-spacing-tight);
30
30
 
31
- --font-display-medium-size: 2.8125rem;
31
+ --font-display-medium-size: 3.1875rem;
32
32
  --font-display-medium-weight: var(--font-weight-regular);
33
- --font-display-medium-line-height: 3.25rem;
33
+ --font-display-medium-line-height: 3.6875rem;
34
34
  --font-display-medium-letter-spacing: var(--letter-spacing-normal);
35
35
 
36
- --font-display-small-size: 2.25rem;
36
+ --font-display-small-size: 2.5625rem;
37
37
  --font-display-small-weight: var(--font-weight-regular);
38
- --font-display-small-line-height: 2.75rem;
38
+ --font-display-small-line-height: 3.125rem;
39
39
  --font-display-small-letter-spacing: var(--letter-spacing-normal);
40
40
 
41
41
  // Headline styles (page titles)
42
- --font-headline-large-size: 2rem;
42
+ --font-headline-large-size: 2.3125rem;
43
43
  --font-headline-large-weight: var(--font-weight-regular);
44
- --font-headline-large-line-height: 2.5rem;
44
+ --font-headline-large-line-height: 2.875rem;
45
45
  --font-headline-large-letter-spacing: var(--letter-spacing-normal);
46
46
 
47
- --font-headline-medium-size: 1.75rem;
47
+ --font-headline-medium-size: 2rem;
48
48
  --font-headline-medium-weight: var(--font-weight-regular);
49
- --font-headline-medium-line-height: 2.25rem;
49
+ --font-headline-medium-line-height: 2.5625rem;
50
50
  --font-headline-medium-letter-spacing: var(--letter-spacing-normal);
51
51
 
52
- --font-headline-small-size: 1.5rem;
52
+ --font-headline-small-size: 1.6875rem;
53
53
  --font-headline-small-weight: var(--font-weight-regular);
54
- --font-headline-small-line-height: 2rem;
54
+ --font-headline-small-line-height: 2.3125rem;
55
55
  --font-headline-small-letter-spacing: var(--letter-spacing-normal);
56
56
 
57
57
  // Title styles (section headers)
58
- --font-title-large-size: 1.375rem;
58
+ --font-title-large-size: 1.5625rem;
59
59
  --font-title-large-weight: var(--font-weight-medium);
60
- --font-title-large-line-height: 1.75rem;
60
+ --font-title-large-line-height: 2rem;
61
61
  --font-title-large-letter-spacing: var(--letter-spacing-normal);
62
62
 
63
- --font-title-medium-size: 1rem;
63
+ --font-title-medium-size: 1.125rem;
64
64
  --font-title-medium-weight: var(--font-weight-medium);
65
- --font-title-medium-line-height: 1.5rem;
65
+ --font-title-medium-line-height: 1.6875rem;
66
66
  --font-title-medium-letter-spacing: var(--letter-spacing-wide);
67
67
 
68
- --font-title-small-size: 0.875rem;
68
+ --font-title-small-size: 1rem;
69
69
  --font-title-small-weight: var(--font-weight-medium);
70
- --font-title-small-line-height: 1.25rem;
70
+ --font-title-small-line-height: 1.4375rem;
71
71
  --font-title-small-letter-spacing: var(--letter-spacing-wide);
72
72
 
73
73
  // Body styles (main content)
74
- --font-body-large-size: 1rem;
74
+ --font-body-large-size: 1.125rem;
75
75
  --font-body-large-weight: var(--font-weight-regular);
76
- --font-body-large-line-height: 1.5rem;
76
+ --font-body-large-line-height: 1.6875rem;
77
77
  --font-body-large-letter-spacing: var(--letter-spacing-normal);
78
78
 
79
- --font-body-medium-size: 0.875rem;
79
+ --font-body-medium-size: 1rem;
80
80
  --font-body-medium-weight: var(--font-weight-regular);
81
- --font-body-medium-line-height: 1.25rem;
81
+ --font-body-medium-line-height: 1.4375rem;
82
82
  --font-body-medium-letter-spacing: var(--letter-spacing-normal);
83
83
 
84
- --font-body-small-size: 0.75rem;
84
+ --font-body-small-size: 0.875rem;
85
85
  --font-body-small-weight: var(--font-weight-regular);
86
- --font-body-small-line-height: 1rem;
86
+ --font-body-small-line-height: 1.125rem;
87
87
  --font-body-small-letter-spacing: var(--letter-spacing-normal);
88
88
 
89
89
  // Label styles (buttons, tabs, form labels)
90
- --font-label-large-size: 0.875rem;
90
+ --font-label-large-size: 1rem;
91
91
  --font-label-large-weight: var(--font-weight-medium);
92
- --font-label-large-line-height: 1.25rem;
92
+ --font-label-large-line-height: 1.4375rem;
93
93
  --font-label-large-letter-spacing: var(--letter-spacing-wide);
94
94
 
95
- --font-label-medium-size: 0.75rem;
95
+ --font-label-medium-size: 0.875rem;
96
96
  --font-label-medium-weight: var(--font-weight-medium);
97
- --font-label-medium-line-height: 1rem;
97
+ --font-label-medium-line-height: 1.125rem;
98
98
  --font-label-medium-letter-spacing: var(--letter-spacing-wider);
99
99
 
100
- --font-label-small-size: 0.6875rem;
100
+ --font-label-small-size: 0.8125rem;
101
101
  --font-label-small-weight: var(--font-weight-medium);
102
- --font-label-small-line-height: 1rem;
102
+ --font-label-small-line-height: 1.125rem;
103
103
  --font-label-small-letter-spacing: var(--letter-spacing-wider);
104
104
  }
package/themes/thalassic/components/_menu.scss CHANGED
@@ -47,6 +47,7 @@
47
47
  appearance: none;
48
48
  border: none;
49
49
  text-align: left;
50
+ text-decoration: none;
50
51
  cursor: pointer;
51
52
  white-space: nowrap;
52
53
 
@@ -60,7 +61,7 @@
60
61
 
61
62
  transition: background-color var(--motion-fast) var(--motion-ease-in-out);
62
63
 
63
- &:hover:not(:disabled) {
64
+ &:hover:not(:disabled):not(&--disabled) {
64
65
  background-color: var(--tls-menu-item-background-hover);
65
66
  }
66
67
 
@@ -69,9 +70,11 @@
69
70
  background-color: var(--tls-menu-item-background-hover);
70
71
  }
71
72
 
72
- &:disabled {
73
+ &:disabled,
74
+ &--disabled {
73
75
  opacity: 0.4;
74
76
  cursor: not-allowed;
77
+ pointer-events: none;
75
78
  }
76
79
  }
77
80
 
package/themes/thalassic/components/multi-select/_multi-select-panel.scss CHANGED
@@ -3,6 +3,7 @@
3
3
  --tls-multi-select-panel-padding-block: var(--spacing-1);
4
4
  --tls-multi-select-panel-background: var(--color-surface-container-lowest);
5
5
  --tls-multi-select-panel-border-radius: var(--radius-md);
6
+ --tls-multi-select-panel-border: 1px solid var(--color-outline-variant);
6
7
  --tls-multi-select-panel-shadow: var(--shadow-sm);
7
8
 
8
9
  width: 100%;
@@ -12,6 +13,7 @@
12
13
  padding: var(--tls-multi-select-panel-padding-block) 0;
13
14
 
14
15
  background-color: var(--tls-multi-select-panel-background);
16
+ border: var(--tls-multi-select-panel-border);
15
17
  border-radius: var(--tls-multi-select-panel-border-radius);
16
18
  box-shadow: var(--tls-multi-select-panel-shadow);
17
19
 
package/themes/thalassic/components/select/_select-panel.scss CHANGED
@@ -3,6 +3,7 @@
3
3
  --tls-select-panel-padding-block: var(--spacing-1);
4
4
  --tls-select-panel-background: var(--color-surface-container-lowest);
5
5
  --tls-select-panel-border-radius: var(--radius-md);
6
+ --tls-select-panel-border: 1px solid var(--color-outline-variant);
6
7
  --tls-select-panel-shadow: var(--shadow-sm);
7
8
 
8
9
  width: 100%;
@@ -12,6 +13,7 @@
12
13
  padding: var(--tls-select-panel-padding-block) 0;
13
14
 
14
15
  background-color: var(--tls-select-panel-background);
16
+ border: var(--tls-select-panel-border);
15
17
  border-radius: var(--tls-select-panel-border-radius);
16
18
  box-shadow: var(--tls-select-panel-shadow);
17
19
 
package/themes/thalassic/components/stepper/_stepper.scss CHANGED
@@ -19,11 +19,11 @@
19
19
 
20
20
  background: var(--tls-stepper-background-color);
21
21
 
22
- display: block;
22
+ display: flex;
23
+ flex-direction: column;
23
24
 
24
- transition:
25
- border-color var(--motion-theme),
26
- background-color var(--motion-theme);
25
+ transition: border-color var(--motion-theme),
26
+ background-color var(--motion-theme);
27
27
 
28
28
  &.tls-stepper--completed {
29
29
  .tls-stepper-content {
@@ -74,9 +74,8 @@
74
74
 
75
75
  color: var(--tls-stepper-label-color);
76
76
 
77
- transition:
78
- color var(--motion-fast),
79
- background-color var(--motion-fast);
77
+ transition: color var(--motion-fast),
78
+ background-color var(--motion-fast);
80
79
 
81
80
  &__index {
82
81
  width: var(--tls-stepper-index-size);
@@ -130,6 +129,8 @@
130
129
  .tls-stepper-content {
131
130
  padding: var(--tls-stepper-content-padding);
132
131
 
132
+ flex-grow: 1;
133
+
133
134
  // Step
134
135
  .tls-step {
135
136
  height: 100%;