@thalassic/themes 0.8.2 → 0.9.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 (6) hide show
  1. package/package.json +1 -1
  2. package/themes/thalassic/components/_menu.scss +133 -0
  3. package/themes/thalassic/components/index.scss +2 -0
  4. package/themes/thalassic/components/textarea/_index.scss +2 -0
  5. package/themes/thalassic/components/textarea/_textarea-size.scss +15 -0
  6. package/themes/thalassic/components/textarea/_textarea.scss +7 -0
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@thalassic/themes",
3
- "version": "0.8.2",
3
+ "version": "0.9.0",
4
4
  "license": "MIT",
5
5
  "peerDependencies": {
6
6
  "@angular/common": "^21.0.0",
package/themes/thalassic/components/_menu.scss ADDED
@@ -0,0 +1,133 @@
1
+ .tls-menu {
2
+ --tls-menu-min-width: 160px;
3
+ --tls-menu-padding-block: var(--spacing-1);
4
+
5
+ --tls-menu-border-radius: var(--radius-md);
6
+ --tls-menu-border-width: 1px;
7
+ --tls-menu-border-color: var(--color-outline-variant);
8
+
9
+ --tls-menu-background: var(--color-surface-container-lowest);
10
+ --tls-menu-shadow: var(--shadow-md);
11
+
12
+ --tls-menu-item-color: var(--color-on-surface);
13
+ --tls-menu-item-background: transparent;
14
+ --tls-menu-item-background-hover: var(--color-surface-container-low);
15
+ --tls-menu-item-padding-block: var(--spacing-2);
16
+ --tls-menu-item-padding-inline: var(--spacing-4);
17
+ --tls-menu-item-icon-size: 14px;
18
+
19
+ --tls-menu-label-color: var(--color-outline);
20
+ --tls-menu-label-padding-block: var(--spacing-2);
21
+ --tls-menu-label-padding-inline: var(--spacing-4);
22
+
23
+ --tls-menu-divider-color: var(--color-outline-variant);
24
+ --tls-menu-divider-margin-block: var(--spacing-1);
25
+
26
+ min-width: var(--tls-menu-min-width);
27
+ padding-block: var(--tls-menu-padding-block);
28
+
29
+ background-color: var(--tls-menu-background);
30
+
31
+ border: var(--tls-menu-border-width) solid var(--tls-menu-border-color);
32
+ border-radius: var(--tls-menu-border-radius);
33
+
34
+ box-shadow: var(--tls-menu-shadow);
35
+
36
+ overflow: hidden;
37
+
38
+ &__item {
39
+ width: 100%;
40
+ padding-block: var(--tls-menu-item-padding-block);
41
+ padding-inline: var(--tls-menu-item-padding-inline);
42
+
43
+ display: flex;
44
+ align-items: center;
45
+ gap: var(--spacing-2);
46
+
47
+ appearance: none;
48
+ border: none;
49
+ text-align: left;
50
+ cursor: pointer;
51
+ white-space: nowrap;
52
+
53
+ color: var(--tls-menu-item-color);
54
+ background-color: var(--tls-menu-item-background);
55
+
56
+ font-size: var(--font-body-medium-size);
57
+ font-weight: var(--font-body-medium-weight);
58
+ line-height: var(--font-body-medium-line-height);
59
+ letter-spacing: var(--font-body-medium-letter-spacing);
60
+
61
+ transition: background-color var(--motion-fast) var(--motion-ease-in-out);
62
+
63
+ &:hover:not(:disabled) {
64
+ background-color: var(--tls-menu-item-background-hover);
65
+ }
66
+
67
+ &:focus-visible {
68
+ outline: none;
69
+ background-color: var(--tls-menu-item-background-hover);
70
+ }
71
+
72
+ &:disabled {
73
+ opacity: 0.4;
74
+ cursor: not-allowed;
75
+ }
76
+ }
77
+
78
+ &__item-icon {
79
+ flex-shrink: 0;
80
+
81
+ // compound selector beats .tls-icon's width/height: auto regardless of cascade order
82
+ &.tls-icon {
83
+ width: var(--tls-menu-item-icon-size);
84
+ height: var(--tls-menu-item-icon-size);
85
+ }
86
+
87
+ svg {
88
+ display: block;
89
+ width: 100%;
90
+ height: 100%;
91
+ }
92
+ }
93
+
94
+ &__item-label {
95
+ flex: 1;
96
+ }
97
+
98
+ &__item-shortcut {
99
+ margin-inline-start: auto;
100
+ color: var(--tls-menu-label-color);
101
+
102
+ font-size: var(--font-label-small-size);
103
+ font-weight: var(--font-label-small-weight);
104
+ line-height: var(--font-label-small-line-height);
105
+ letter-spacing: var(--font-label-small-letter-spacing);
106
+
107
+ font-family: inherit;
108
+ background: none;
109
+ border: none;
110
+ padding: 0;
111
+ }
112
+
113
+ &__label {
114
+ display: block;
115
+ padding-block: var(--tls-menu-label-padding-block);
116
+ padding-inline: var(--tls-menu-label-padding-inline);
117
+
118
+ color: var(--tls-menu-label-color);
119
+
120
+ font-size: var(--font-label-small-size);
121
+ font-weight: var(--font-label-small-weight);
122
+ line-height: var(--font-label-small-line-height);
123
+ letter-spacing: var(--font-label-small-letter-spacing);
124
+
125
+ text-transform: uppercase;
126
+ }
127
+
128
+ &__divider {
129
+ margin-block: var(--tls-menu-divider-margin-block);
130
+ border: none;
131
+ border-top: 1px solid var(--tls-menu-divider-color);
132
+ }
133
+ }
package/themes/thalassic/components/index.scss CHANGED
@@ -10,11 +10,13 @@
10
10
  @forward 'stepper';
11
11
  @forward 'switch';
12
12
  @forward 'tabs';
13
+ @forward 'textarea';
13
14
  @forward 'tooltip';
14
15
 
15
16
  @forward 'checkbox';
16
17
  @forward 'divider';
17
18
  @forward 'icon';
19
+ @forward 'menu';
18
20
  @forward 'password';
19
21
  @forward 'pin-input';
20
22
  @forward 'popover';
package/themes/thalassic/components/textarea/_index.scss ADDED
@@ -0,0 +1,2 @@
1
+ @forward 'textarea';
2
+ @forward 'textarea-size';
package/themes/thalassic/components/textarea/_textarea-size.scss ADDED
@@ -0,0 +1,15 @@
1
+ .tls-textarea {
2
+ .tls-form-control {
3
+ &.tls-form-control--sm {
4
+ --tls-textarea-padding-block: var(--spacing-1);
5
+ }
6
+
7
+ &.tls-form-control--md {
8
+ --tls-textarea-padding-block: var(--spacing-2);
9
+ }
10
+
11
+ &.tls-form-control--lg {
12
+ --tls-textarea-padding-block: var(--spacing-3);
13
+ }
14
+ }
15
+ }
package/themes/thalassic/components/textarea/_textarea.scss ADDED
@@ -0,0 +1,7 @@
1
+ .tls-textarea .tls-form-control {
2
+ height: auto;
3
+
4
+ padding-block: var(--tls-textarea-padding-block);
5
+
6
+ font-family: inherit;
7
+ }