ngx-strata 0.4.3-beta.1 → 0.4.3

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 (9) hide show
  1. package/assets/styles/components/accordion.scss +65 -15
  2. package/assets/styles/components/card.scss +2 -2
  3. package/assets/styles/components/input-field.scss +24 -4
  4. package/dist/strata/strata.css +1 -1
  5. package/fesm2022/ngx-strata.mjs +104 -12
  6. package/fesm2022/ngx-strata.mjs.map +1 -1
  7. package/package.json +1 -1
  8. package/skills/ngx-strata/components/input-field.md +8 -2
  9. package/types/ngx-strata.d.ts +26 -7
package/assets/styles/components/accordion.scss CHANGED
@@ -1,21 +1,25 @@
1
1
  st-accordion-item {
2
2
  --st-accordion-border-radius: var(--st-border-radius-lg);
3
+ --st-accordion-header-height: 48px;
4
+ --st-accordion-border-color: var(--st-color-border-subtle);
5
+ --st-accordion-bg: var(--st-color-bg-raised);
3
6
 
4
7
  display: block;
5
8
  box-sizing: border-box;
6
9
  width: 100%;
7
- border: 1px solid var(--st-border);
10
+ border: 1px solid var(--st-accordion-border-color);
8
11
  border-radius: var(--st-accordion-border-radius);
9
- background-color: var(--st-color-bg-raised);
12
+ background-color: var(--st-accordion-bg);
10
13
  overflow: hidden;
14
+ transition:
15
+ border-color var(--st-transition-fast),
16
+ background-color var(--st-transition-fast);
11
17
 
12
- transition: 0.15s ease-in height;
13
18
  &[open='true'] {
14
- background-color: var(--st-color-bg-default);
15
-
16
19
  height: auto;
20
+
17
21
  svg {
18
- transform: rotateZ(180deg);
22
+ transform: rotate(180deg);
19
23
  }
20
24
 
21
25
  .accordion-header {
@@ -26,13 +30,15 @@ st-accordion-item {
26
30
  .accordion-content {
27
31
  height: fit-content;
28
32
  }
33
+
29
34
  .accordion-content *:first-child {
30
35
  margin-block-start: 0rem;
31
36
  }
32
37
  }
33
38
 
34
39
  &[open='false'] {
35
- height: 54px;
40
+ height: var(--st-accordion-header-height);
41
+
36
42
  .accordion-content {
37
43
  overflow: hidden;
38
44
  visibility: hidden;
@@ -44,7 +50,7 @@ st-accordion-item {
44
50
  .accordion-header {
45
51
  box-sizing: border-box;
46
52
  display: flex;
47
- height: 54px;
53
+ min-height: var(--st-accordion-header-height);
48
54
  width: 100%;
49
55
  margin-right: auto;
50
56
  border: none;
@@ -52,12 +58,12 @@ st-accordion-item {
52
58
  color: var(--st-color-text-primary);
53
59
  font-family: inherit;
54
60
  border-radius: var(--st-accordion-border-radius);
55
- padding-left: 16px;
56
- padding-right: 16px;
61
+ padding-left: var(--st-space-4);
62
+ padding-right: var(--st-space-4);
57
63
  justify-content: space-between;
58
64
  align-items: center;
59
65
  user-select: none;
60
- font-size: 16px;
66
+ font-size: var(--st-font-md);
61
67
  font-weight: 600;
62
68
  text-align: left;
63
69
  outline: none;
@@ -69,7 +75,7 @@ st-accordion-item {
69
75
  }
70
76
 
71
77
  &:hover {
72
- background-color: var(--st-color-bg-default);
78
+ background-color: var(--st-color-control-bg-hover);
73
79
  cursor: pointer;
74
80
  }
75
81
 
@@ -78,14 +84,16 @@ st-accordion-item {
78
84
  max-width: 20px;
79
85
  height: 20px;
80
86
  max-height: 20px;
81
- transition: 0.1s ease transform;
87
+ transition: transform var(--st-transition-fast);
82
88
  }
83
89
  }
84
90
 
85
91
  .accordion-content {
86
- padding: 0px 16px 4px 16px;
92
+ padding: 0px var(--st-space-4) var(--st-space-3) var(--st-space-4);
87
93
  height: auto;
88
94
  margin-block-start: 0rem;
95
+ color: var(--st-color-text-secondary);
96
+ font-size: var(--st-font-md);
89
97
  }
90
98
  }
91
99
 
@@ -93,5 +101,47 @@ st-accordion-group {
93
101
  display: flex;
94
102
  width: 100%;
95
103
  flex-direction: column;
96
- gap: var(--st-size-xxs);
104
+ gap: var(--st-space-2);
105
+
106
+ &.flush {
107
+ gap: 0;
108
+
109
+ st-accordion-item {
110
+ border: none;
111
+ border-radius: 0;
112
+ background-color: transparent;
113
+ border-bottom: 1px solid var(--st-color-border-subtle);
114
+
115
+ &:last-child {
116
+ border-bottom: none;
117
+ }
118
+
119
+ .accordion-header {
120
+ border-radius: 0;
121
+ padding-left: var(--st-space-4);
122
+ padding-right: var(--st-space-4);
123
+ }
124
+
125
+ .accordion-content {
126
+ padding: 0px var(--st-space-4) var(--st-space-4) var(--st-space-4);
127
+ }
128
+ }
129
+ }
130
+ }
131
+
132
+ st-accordion-item.flush {
133
+ border: none;
134
+ border-radius: 0;
135
+ background-color: transparent;
136
+ border-bottom: 1px solid var(--st-color-border-subtle);
137
+
138
+ .accordion-header {
139
+ border-radius: 0;
140
+ padding-left: var(--st-space-4);
141
+ padding-right: var(--st-space-4);
142
+ }
143
+
144
+ .accordion-content {
145
+ padding: 0px var(--st-space-4) var(--st-space-4) var(--st-space-4);
146
+ }
97
147
  }
package/assets/styles/components/card.scss CHANGED
@@ -1,6 +1,6 @@
1
1
  st-card {
2
2
  --st-card-padding: var(--st-size-sm);
3
- --st-card-background-color: var(--st-color-bg-raised);
3
+ --st-card-background-color: var(--st-color-bg-subtle);
4
4
  --st-card-shadow: var(--st-shadow-1);
5
5
  --st-card-border-radius: var(--st-border-radius-xl);
6
6
  --st-card-border-color: transparent;
@@ -17,7 +17,7 @@ st-card {
17
17
  background-color var(--st-transition-normal);
18
18
 
19
19
  &.elevated {
20
- --st-card-background-color: var(--st-color-bg-raised);
20
+ --st-card-background-color: var(--st-color-bg-subtle);
21
21
  --st-current-bg-color: var(--st-color-bg-default);
22
22
  --st-avatar-bg-color: var(--st-color-bg-default);
23
23
  box-shadow: var(--st-card-shadow);
package/assets/styles/components/input-field.scss CHANGED
@@ -3,9 +3,11 @@ st-input-field {
3
3
  --st-input-field-bg-hover-color: var(--st-color-bg-raised);
4
4
  --st-input-field-text-color: var(--st-color-text-primary);
5
5
  --st-input-field-height: var(--st-interactive-element-height-md);
6
- --st-input-field-font-size: 14px;
6
+ --st-input-field-font-size: var(--st-font-md);
7
7
  --st-input-field-padding-x: var(--st-size-xs);
8
8
  --st-input-field-border-radius: var(--st-border-radius-md);
9
+ --st-input-field-counter-font-size: var(--st-font-sm);
10
+ --st-input-field-counter-color: var(--st-color-text-tertiary);
9
11
 
10
12
  display: flex;
11
13
  flex-direction: column;
@@ -13,21 +15,24 @@ st-input-field {
13
15
 
14
16
  &.st-size-sm {
15
17
  --st-input-field-height: var(--st-interactive-element-height-sm);
16
- --st-input-field-font-size: 12px;
18
+ --st-input-field-font-size: var(--st-font-sm);
17
19
  --st-input-field-padding-x: var(--st-size-xxs);
18
20
  --st-input-field-border-radius: var(--st-border-radius-sm);
21
+ --st-input-field-counter-font-size: var(--st-font-xs);
19
22
  }
20
23
 
21
24
  &.st-size-md {
22
25
  --st-input-field-height: var(--st-interactive-element-height-md);
23
- --st-input-field-font-size: 14px;
26
+ --st-input-field-font-size: var(--st-font-md);
24
27
  --st-input-field-padding-x: var(--st-size-xs);
28
+ --st-input-field-counter-font-size: var(--st-font-sm);
25
29
  }
26
30
 
27
31
  &.st-size-lg {
28
32
  --st-input-field-height: var(--st-interactive-element-height-lg);
29
- --st-input-field-font-size: 16px;
33
+ --st-input-field-font-size: var(--st-font-md);
30
34
  --st-input-field-padding-x: var(--st-size-xs);
35
+ --st-input-field-counter-font-size: var(--st-font-sm);
31
36
  }
32
37
 
33
38
  .st-input-wrapper {
@@ -107,5 +112,20 @@ st-input-field {
107
112
  outline: none;
108
113
  }
109
114
  }
115
+
116
+ .st-input-field-footer {
117
+ display: flex;
118
+ justify-content: flex-end;
119
+ align-items: center;
120
+ margin-top: var(--st-space-1);
121
+ line-height: 1.25;
122
+ }
123
+
124
+ .st-input-field-counter {
125
+ font-size: var(--st-input-field-counter-font-size);
126
+ color: var(--st-input-field-counter-color);
127
+ font-variant-numeric: tabular-nums;
128
+ user-select: none;
129
+ }
110
130
  }
111
131