@vialiq/flux-ui 0.6.2 → 0.8.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.
- package/components/_alert.scss +62 -0
- package/components/_chip.scss +71 -0
- package/components/_index.scss +4 -0
- package/package.json +1 -1
|
@@ -0,0 +1,62 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Alert component base styles.
|
|
3
|
+
*
|
|
4
|
+
* Shared foundation styles for the alert component.
|
|
5
|
+
* Provides flexbox layout, spacing via tokens, and interaction states.
|
|
6
|
+
* Component-specific colors and sizing defined by consuming components.
|
|
7
|
+
*/
|
|
8
|
+
|
|
9
|
+
@use '../styles/variables' as tokens;
|
|
10
|
+
|
|
11
|
+
@layer components {
|
|
12
|
+
.alert-root {
|
|
13
|
+
display: flex;
|
|
14
|
+
align-items: flex-start;
|
|
15
|
+
box-sizing: border-box;
|
|
16
|
+
width: 100%;
|
|
17
|
+
|
|
18
|
+
border-radius: var(--vi-alert-border-radius, 6px);
|
|
19
|
+
padding: var(--vi-alert-padding, 12px 16px);
|
|
20
|
+
gap: var(--vi-alert-gap, 12px);
|
|
21
|
+
border-width: var(--vi-alert-border-width, 1px);
|
|
22
|
+
border-style: solid;
|
|
23
|
+
|
|
24
|
+
font-family: tokens.$font-family-base;
|
|
25
|
+
font-size: tokens.$font-size-sm;
|
|
26
|
+
line-height: tokens.$line-height-normal;
|
|
27
|
+
}
|
|
28
|
+
|
|
29
|
+
.alert-icon {
|
|
30
|
+
display: flex;
|
|
31
|
+
align-items: center;
|
|
32
|
+
justify-content: center;
|
|
33
|
+
flex-shrink: 0;
|
|
34
|
+
|
|
35
|
+
// Slight padding to align nicely with the title text
|
|
36
|
+
padding-top: 2px;
|
|
37
|
+
}
|
|
38
|
+
|
|
39
|
+
.alert-content {
|
|
40
|
+
display: flex;
|
|
41
|
+
flex-direction: column;
|
|
42
|
+
flex-grow: 1;
|
|
43
|
+
min-width: 0;
|
|
44
|
+
}
|
|
45
|
+
|
|
46
|
+
.alert-title {
|
|
47
|
+
font-weight: tokens.$font-weight-semibold;
|
|
48
|
+
margin-bottom: 4px;
|
|
49
|
+
display: block;
|
|
50
|
+
}
|
|
51
|
+
|
|
52
|
+
.alert-body {
|
|
53
|
+
// any general body styles
|
|
54
|
+
}
|
|
55
|
+
|
|
56
|
+
.alert-actions {
|
|
57
|
+
display: flex;
|
|
58
|
+
align-items: center;
|
|
59
|
+
gap: tokens.$spacing-xs;
|
|
60
|
+
margin-top: tokens.$spacing-sm;
|
|
61
|
+
}
|
|
62
|
+
}
|
|
@@ -0,0 +1,71 @@
|
|
|
1
|
+
@use '../styles/variables' as tokens;
|
|
2
|
+
|
|
3
|
+
@layer components {
|
|
4
|
+
.chip {
|
|
5
|
+
display: inline-flex;
|
|
6
|
+
align-items: center;
|
|
7
|
+
box-sizing: border-box;
|
|
8
|
+
cursor: pointer;
|
|
9
|
+
user-select: none;
|
|
10
|
+
vertical-align: middle;
|
|
11
|
+
outline: none; // Handled by focus-visible below
|
|
12
|
+
border-style: solid;
|
|
13
|
+
|
|
14
|
+
// Tokens mapped directly from docs
|
|
15
|
+
height: var(--vi-chip-height, var(--vi-chip-height-md, 32px));
|
|
16
|
+
padding: var(--vi-chip-padding, 0 10px);
|
|
17
|
+
border-radius: var(--vi-chip-border-radius, 999px);
|
|
18
|
+
border-width: var(--vi-chip-border-width, 1px);
|
|
19
|
+
gap: var(--vi-chip-gap, 6px);
|
|
20
|
+
font-size: var(--vi-chip-font-size, var(--vi-font-size-sm));
|
|
21
|
+
font-weight: var(--vi-chip-font-weight, var(--vi-font-weight-medium));
|
|
22
|
+
transition: all var(--vi-chip-transition, 100ms ease);
|
|
23
|
+
|
|
24
|
+
// Color tokens to be overridden by vi-chip variant
|
|
25
|
+
background-color: var(--vi-chip-bg-color, #{tokens.$layer-02});
|
|
26
|
+
border-color: var(--vi-chip-border-color, #{tokens.$border-03});
|
|
27
|
+
color: var(--vi-chip-text-color, #{tokens.$color-foreground});
|
|
28
|
+
}
|
|
29
|
+
|
|
30
|
+
// Focus ring
|
|
31
|
+
.chip:focus-visible {
|
|
32
|
+
outline: #{tokens.$border-width-base} solid var(--vi-chip-focus-ring-color, #{tokens.$focus});
|
|
33
|
+
outline-offset: 0;
|
|
34
|
+
box-shadow: 0 0 0 3px var(--vi-chip-focus-ring-glow, #{tokens.$color-blue-200});
|
|
35
|
+
}
|
|
36
|
+
|
|
37
|
+
// Disabled state structure
|
|
38
|
+
.chip[aria-disabled="true"] {
|
|
39
|
+
cursor: not-allowed;
|
|
40
|
+
// Colors handled by variant mapped tokens
|
|
41
|
+
}
|
|
42
|
+
|
|
43
|
+
.chip-avatar {
|
|
44
|
+
display: flex;
|
|
45
|
+
align-items: center;
|
|
46
|
+
justify-content: center;
|
|
47
|
+
overflow: hidden;
|
|
48
|
+
border-radius: 50%;
|
|
49
|
+
// Scale slightly down to fit in chip
|
|
50
|
+
width: calc(100% - 8px);
|
|
51
|
+
height: calc(100% - 8px);
|
|
52
|
+
margin-inline-start: -4px; // Pull avatar slightly out as per common pill patterns
|
|
53
|
+
}
|
|
54
|
+
|
|
55
|
+
.chip-icon {
|
|
56
|
+
display: inline-flex;
|
|
57
|
+
align-items: center;
|
|
58
|
+
}
|
|
59
|
+
|
|
60
|
+
.chip-label {
|
|
61
|
+
white-space: nowrap;
|
|
62
|
+
overflow: hidden;
|
|
63
|
+
text-overflow: ellipsis;
|
|
64
|
+
}
|
|
65
|
+
|
|
66
|
+
.chip-group {
|
|
67
|
+
display: flex;
|
|
68
|
+
align-items: center;
|
|
69
|
+
// Defaults to gap 8px and wrap as per requirements
|
|
70
|
+
}
|
|
71
|
+
}
|
package/components/_index.scss
CHANGED