@pantool/components 1.0.0-alpha.1 → 1.0.0-alpha.11
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/dist/atoms/autocomplete/autocomplete.css +1 -0
- package/dist/atoms/autocomplete/autocomplete.d.ts +77 -0
- package/dist/atoms/autocomplete/autocomplete.js +2 -0
- package/dist/atoms/autocomplete/autocomplete.js.map +1 -0
- package/dist/atoms/autocomplete/autocomplete.module.js +3 -0
- package/dist/atoms/autocomplete/autocomplete.module.js.map +1 -0
- package/dist/atoms/autocomplete/index.d.ts +1 -0
- package/dist/atoms/autocomplete/index.js +1 -0
- package/dist/atoms/avatar/avatar.css +1 -0
- package/dist/atoms/avatar/avatar.d.ts +17 -0
- package/dist/atoms/avatar/avatar.js +2 -0
- package/dist/atoms/avatar/avatar.js.map +1 -0
- package/dist/atoms/avatar/avatar.module.js +3 -0
- package/dist/atoms/avatar/avatar.module.js.map +1 -0
- package/dist/atoms/avatar/index.d.ts +1 -0
- package/dist/atoms/avatar/index.js +1 -0
- package/dist/atoms/badge/badge.d.ts +42 -0
- package/dist/atoms/badge/badge.js +2 -0
- package/dist/atoms/badge/badge.js.map +1 -0
- package/dist/atoms/badge/index.d.ts +1 -0
- package/dist/atoms/badge/index.js +1 -0
- package/dist/atoms/badge/styles.css +1 -0
- package/dist/atoms/badge/styles.module.js +3 -0
- package/dist/atoms/badge/styles.module.js.map +1 -0
- package/dist/atoms/button/button.css +1 -18
- package/dist/atoms/button/button.d.ts +5 -5
- package/dist/atoms/button/button.js.map +1 -1
- package/dist/atoms/button/button.module.js +1 -0
- package/dist/atoms/button/button.module.js.map +1 -1
- package/dist/atoms/checkbox/checkbox.css +1 -119
- package/dist/atoms/checkbox/checkbox.d.ts +16 -32
- package/dist/atoms/checkbox/checkbox.js +1 -1
- package/dist/atoms/checkbox/checkbox.js.map +1 -1
- package/dist/atoms/checkbox/checkbox.module.js +2 -1
- package/dist/atoms/checkbox/checkbox.module.js.map +1 -1
- package/dist/atoms/checkbox-group/checkbox-group.css +1 -0
- package/dist/atoms/checkbox-group/checkbox-group.d.ts +47 -0
- package/dist/atoms/checkbox-group/checkbox-group.js +2 -0
- package/dist/atoms/checkbox-group/checkbox-group.js.map +1 -0
- package/dist/atoms/checkbox-group/checkbox-group.module.js +3 -0
- package/dist/atoms/checkbox-group/checkbox-group.module.js.map +1 -0
- package/dist/atoms/checkbox-group/index.d.ts +1 -0
- package/dist/atoms/checkbox-group/index.js +1 -0
- package/dist/atoms/clickable-area/clickable-area.d.ts +15 -0
- package/dist/atoms/clickable-area/clickable-area.js +2 -0
- package/dist/atoms/clickable-area/clickable-area.js.map +1 -0
- package/dist/atoms/clickable-area/index.d.ts +1 -0
- package/dist/atoms/clickable-area/index.js +1 -0
- package/dist/atoms/clickable-area/styles.css +1 -0
- package/dist/atoms/clickable-area/styles.module.js +3 -0
- package/dist/atoms/clickable-area/styles.module.js.map +1 -0
- package/dist/atoms/collapsible/collapsible.css +1 -0
- package/dist/atoms/collapsible/collapsible.d.ts +16 -0
- package/dist/atoms/collapsible/collapsible.js +2 -0
- package/dist/atoms/collapsible/collapsible.js.map +1 -0
- package/dist/atoms/collapsible/collapsible.module.js +3 -0
- package/dist/atoms/collapsible/collapsible.module.js.map +1 -0
- package/dist/atoms/collapsible/index.d.ts +1 -0
- package/dist/atoms/collapsible/index.js +1 -0
- package/dist/atoms/combobox/combobox.css +1 -302
- package/dist/atoms/combobox/combobox.d.ts +14 -13
- package/dist/atoms/combobox/combobox.js +1 -1
- package/dist/atoms/combobox/combobox.js.map +1 -1
- package/dist/atoms/combobox/combobox.module.js +2 -1
- package/dist/atoms/combobox/combobox.module.js.map +1 -1
- package/dist/atoms/combobox/components/item.js +1 -1
- package/dist/atoms/combobox/components/item.js.map +1 -1
- package/dist/atoms/combobox/index.d.ts +1 -0
- package/dist/atoms/context-menu/context-menu.css +1 -75
- package/dist/atoms/context-menu/context-menu.module.js +1 -0
- package/dist/atoms/context-menu/context-menu.module.js.map +1 -1
- package/dist/atoms/icon/icon.d.ts +2 -2
- package/dist/atoms/icon/icon.js.map +1 -1
- package/dist/atoms/icon-button/icon-button.css +1 -12
- package/dist/atoms/icon-button/icon-button.d.ts +4 -4
- package/dist/atoms/icon-button/icon-button.js +1 -1
- package/dist/atoms/icon-button/icon-button.js.map +1 -1
- package/dist/atoms/icon-button/icon-button.module.js +1 -0
- package/dist/atoms/index.d.ts +19 -4
- package/dist/atoms/index.js +1 -1
- package/dist/atoms/input/input.css +1 -29
- package/dist/atoms/input/input.d.ts +13 -14
- package/dist/atoms/input/input.js +1 -1
- package/dist/atoms/input/input.js.map +1 -1
- package/dist/atoms/input/input.module.js +1 -0
- package/dist/atoms/input/input.module.js.map +1 -1
- package/dist/atoms/menu/index.d.ts +1 -0
- package/dist/atoms/menu/index.js +1 -0
- package/dist/atoms/menu/menu.css +1 -0
- package/dist/atoms/menu/menu.d.ts +69 -0
- package/dist/atoms/menu/menu.js +2 -0
- package/dist/atoms/menu/menu.js.map +1 -0
- package/dist/atoms/menu/menu.module.js +3 -0
- package/dist/atoms/menu/menu.module.js.map +1 -0
- package/dist/atoms/menubar/index.d.ts +1 -0
- package/dist/atoms/menubar/index.js +1 -0
- package/dist/atoms/menubar/menubar.css +1 -0
- package/dist/atoms/menubar/menubar.d.ts +12 -0
- package/dist/atoms/menubar/menubar.js +2 -0
- package/dist/atoms/menubar/menubar.js.map +1 -0
- package/dist/atoms/menubar/menubar.module.js +3 -0
- package/dist/atoms/menubar/menubar.module.js.map +1 -0
- package/dist/atoms/notice/index.d.ts +1 -0
- package/dist/atoms/notice/index.js +1 -0
- package/dist/atoms/notice/notice.d.ts +28 -0
- package/dist/atoms/notice/notice.js +2 -0
- package/dist/atoms/notice/notice.js.map +1 -0
- package/dist/atoms/notice/styles.css +1 -0
- package/dist/atoms/notice/styles.module.js +3 -0
- package/dist/atoms/notice/styles.module.js.map +1 -0
- package/dist/atoms/radio/index.d.ts +1 -1
- package/dist/atoms/radio/radio.css +1 -142
- package/dist/atoms/radio/radio.d.ts +14 -17
- package/dist/atoms/radio/radio.js +1 -1
- package/dist/atoms/radio/radio.js.map +1 -1
- package/dist/atoms/radio/radio.module.js +2 -1
- package/dist/atoms/radio/radio.module.js.map +1 -1
- package/dist/atoms/radio-group/index.d.ts +1 -0
- package/dist/atoms/radio-group/index.js +1 -0
- package/dist/atoms/radio-group/radio-group.css +1 -0
- package/dist/atoms/radio-group/radio-group.d.ts +48 -0
- package/dist/atoms/radio-group/radio-group.js +2 -0
- package/dist/atoms/radio-group/radio-group.js.map +1 -0
- package/dist/atoms/radio-group/radio-group.module.js +3 -0
- package/dist/atoms/radio-group/radio-group.module.js.map +1 -0
- package/dist/atoms/select/components/item.d.ts +17 -0
- package/dist/atoms/select/components/item.js +2 -0
- package/dist/atoms/select/components/item.js.map +1 -0
- package/dist/atoms/select/index.d.ts +2 -0
- package/dist/atoms/select/index.js +1 -0
- package/dist/atoms/select/select.css +1 -0
- package/dist/atoms/select/select.d.ts +67 -0
- package/dist/atoms/select/select.js +2 -0
- package/dist/atoms/select/select.js.map +1 -0
- package/dist/atoms/select/select.module.js +3 -0
- package/dist/atoms/select/select.module.js.map +1 -0
- package/dist/atoms/slider/index.d.ts +1 -0
- package/dist/atoms/slider/index.js +1 -0
- package/dist/atoms/slider/slider.css +1 -0
- package/dist/atoms/slider/slider.d.ts +53 -0
- package/dist/atoms/slider/slider.js +2 -0
- package/dist/atoms/slider/slider.js.map +1 -0
- package/dist/atoms/slider/slider.module.js +3 -0
- package/dist/atoms/slider/slider.module.js.map +1 -0
- package/dist/atoms/stepper/index.d.ts +1 -0
- package/dist/atoms/stepper/index.js +1 -0
- package/dist/atoms/stepper/stepper.css +1 -0
- package/dist/atoms/stepper/stepper.d.ts +42 -0
- package/dist/atoms/stepper/stepper.js +2 -0
- package/dist/atoms/stepper/stepper.js.map +1 -0
- package/dist/atoms/stepper/stepper.module.js +3 -0
- package/dist/atoms/stepper/stepper.module.js.map +1 -0
- package/dist/atoms/switch/switch.css +1 -68
- package/dist/atoms/switch/switch.module.js +1 -0
- package/dist/atoms/switch/switch.module.js.map +1 -1
- package/dist/atoms/tabs/tabs.css +1 -92
- package/dist/atoms/tabs/tabs.d.ts +3 -3
- package/dist/atoms/tabs/tabs.module.js +1 -0
- package/dist/atoms/tabs/tabs.module.js.map +1 -1
- package/dist/atoms/text/text.css +1 -273
- package/dist/atoms/text/text.d.ts +3 -3
- package/dist/atoms/text/text.module.js +1 -0
- package/dist/atoms/text/text.module.js.map +1 -1
- package/dist/atoms/toast/toast.css +1 -151
- package/dist/atoms/toast/toast.module.js +1 -0
- package/dist/atoms/toast/toast.module.js.map +1 -1
- package/dist/atoms/tooltip/tooltip.css +1 -92
- package/dist/atoms/tooltip/tooltip.d.ts +3 -3
- package/dist/atoms/tooltip/tooltip.module.js +1 -0
- package/dist/atoms/tooltip/tooltip.module.js.map +1 -1
- package/dist/fields/autocomplete-field/autocomplete-field.d.ts +26 -0
- package/dist/fields/autocomplete-field/autocomplete-field.js +2 -0
- package/dist/fields/autocomplete-field/autocomplete-field.js.map +1 -0
- package/dist/fields/autocomplete-field/index.d.ts +1 -0
- package/dist/fields/autocomplete-field/index.js +1 -0
- package/dist/fields/checkbox-field/checkbox-field.d.ts +23 -0
- package/dist/fields/checkbox-field/checkbox-field.js +2 -0
- package/dist/fields/checkbox-field/checkbox-field.js.map +1 -0
- package/dist/fields/checkbox-field/index.d.ts +1 -0
- package/dist/fields/checkbox-field/index.js +1 -0
- package/dist/fields/checkbox-group-field/checkbox-group-field.d.ts +26 -0
- package/dist/fields/checkbox-group-field/checkbox-group-field.js +2 -0
- package/dist/fields/checkbox-group-field/checkbox-group-field.js.map +1 -0
- package/dist/fields/checkbox-group-field/index.d.ts +1 -0
- package/dist/fields/checkbox-group-field/index.js +1 -0
- package/dist/fields/combobox-field/combobox-field.d.ts +26 -0
- package/dist/fields/combobox-field/combobox-field.js +2 -0
- package/dist/fields/combobox-field/combobox-field.js.map +1 -0
- package/dist/fields/combobox-field/index.d.ts +1 -0
- package/dist/fields/combobox-field/index.js +1 -0
- package/dist/fields/index.d.ts +9 -0
- package/dist/fields/index.js +1 -0
- package/dist/fields/input-field/index.d.ts +1 -0
- package/dist/fields/input-field/index.js +1 -0
- package/dist/fields/input-field/input-field.d.ts +26 -0
- package/dist/fields/input-field/input-field.js +2 -0
- package/dist/fields/input-field/input-field.js.map +1 -0
- package/dist/fields/radio-group-field/index.d.ts +1 -0
- package/dist/fields/radio-group-field/index.js +1 -0
- package/dist/fields/radio-group-field/radio-group-field.d.ts +26 -0
- package/dist/fields/radio-group-field/radio-group-field.js +2 -0
- package/dist/fields/radio-group-field/radio-group-field.js.map +1 -0
- package/dist/fields/select-field/index.d.ts +1 -0
- package/dist/fields/select-field/index.js +1 -0
- package/dist/fields/select-field/select-field.d.ts +26 -0
- package/dist/fields/select-field/select-field.js +2 -0
- package/dist/fields/select-field/select-field.js.map +1 -0
- package/dist/fields/slider-field/index.d.ts +1 -0
- package/dist/fields/slider-field/index.js +1 -0
- package/dist/fields/slider-field/slider-field.d.ts +26 -0
- package/dist/fields/slider-field/slider-field.js +2 -0
- package/dist/fields/slider-field/slider-field.js.map +1 -0
- package/dist/fields/stepper-field/index.d.ts +1 -0
- package/dist/fields/stepper-field/index.js +1 -0
- package/dist/fields/stepper-field/stepper-field.d.ts +26 -0
- package/dist/fields/stepper-field/stepper-field.js +2 -0
- package/dist/fields/stepper-field/stepper-field.js.map +1 -0
- package/dist/helpers/flex/flex.d.ts +45 -0
- package/dist/helpers/flex/flex.js +2 -0
- package/dist/helpers/flex/flex.js.map +1 -0
- package/dist/helpers/flex/index.d.ts +1 -0
- package/dist/helpers/flex/index.js +1 -0
- package/dist/helpers/flex/styles.css +1 -0
- package/dist/helpers/flex/styles.module.js +3 -0
- package/dist/helpers/flex/styles.module.js.map +1 -0
- package/dist/helpers/index.d.ts +4 -0
- package/dist/helpers/index.js +1 -0
- package/dist/helpers/portal/context/portal-config.js.map +1 -1
- package/dist/index.d.ts +30 -5
- package/dist/index.js +1 -1
- package/dist/internals/base-button/base-button.css +1 -262
- package/dist/internals/base-button/base-button.d.ts +2 -2
- package/dist/internals/base-button/base-button.js.map +1 -1
- package/dist/internals/base-button/base-button.module.js +1 -0
- package/dist/internals/base-button/base-button.module.js.map +1 -1
- package/dist/internals/base-dialog/base-dialog.css +1 -74
- package/dist/internals/base-dialog/base-dialog.module.js +1 -0
- package/dist/internals/base-field/base-field.css +1 -115
- package/dist/internals/base-field/base-field.js +1 -1
- package/dist/internals/base-field/base-field.js.map +1 -1
- package/dist/internals/base-field/base-field.module.js +1 -0
- package/dist/internals/base-field/base-field.module.js.map +1 -1
- package/dist/internals/base-field/components/error.js +1 -1
- package/dist/internals/base-field/components/error.js.map +1 -1
- package/dist/internals/base-field/components/label.js.map +1 -1
- package/dist/internals/base-svg/base-svg.css +1 -137
- package/dist/internals/base-svg/base-svg.d.ts +2 -2
- package/dist/internals/base-svg/base-svg.js.map +1 -1
- package/dist/internals/base-svg/base-svg.module.js +1 -0
- package/dist/internals/base-svg/base-svg.module.js.map +1 -1
- package/dist/providers/index.d.ts +0 -3
- package/dist/providers/index.js +1 -1
- package/dist/providers/toast-provider/toast-provider.css +1 -13
- package/dist/providers/toast-provider/toast-provider.module.js +1 -0
- package/dist/providers/toast-provider/toast-provider.module.js.map +1 -1
- package/package.json +16 -30
package/dist/atoms/text/text.css
CHANGED
|
@@ -1,273 +1 @@
|
|
|
1
|
-
.D5_2ra_root {
|
|
2
|
-
--txt-color: currentColor;
|
|
3
|
-
--txt-size: inherit;
|
|
4
|
-
--txt-weight: inherit;
|
|
5
|
-
--txt-line-height: inherit;
|
|
6
|
-
color: var(--txt-color);
|
|
7
|
-
font-size: var(--txt-size);
|
|
8
|
-
font-weight: var(--txt-weight);
|
|
9
|
-
font-family: var(--typography-typeface-ltr);
|
|
10
|
-
margin: 0;
|
|
11
|
-
padding: 0;
|
|
12
|
-
transition: color .2s ease-in-out;
|
|
13
|
-
}
|
|
14
|
-
|
|
15
|
-
.D5_2ra_root[data-display="inline"] {
|
|
16
|
-
display: inline;
|
|
17
|
-
}
|
|
18
|
-
|
|
19
|
-
.D5_2ra_root[data-display="block"] {
|
|
20
|
-
display: block;
|
|
21
|
-
}
|
|
22
|
-
|
|
23
|
-
.D5_2ra_root[data-display="inline-block"] {
|
|
24
|
-
display: inline-block;
|
|
25
|
-
}
|
|
26
|
-
|
|
27
|
-
.D5_2ra_root[data-align="left"] {
|
|
28
|
-
text-align: left;
|
|
29
|
-
}
|
|
30
|
-
|
|
31
|
-
.D5_2ra_root[data-align="right"] {
|
|
32
|
-
text-align: right;
|
|
33
|
-
}
|
|
34
|
-
|
|
35
|
-
.D5_2ra_root[data-align="center"] {
|
|
36
|
-
text-align: center;
|
|
37
|
-
}
|
|
38
|
-
|
|
39
|
-
.D5_2ra_root[data-align="justify"] {
|
|
40
|
-
text-align: justify;
|
|
41
|
-
}
|
|
42
|
-
|
|
43
|
-
.D5_2ra_root[data-align="start"] {
|
|
44
|
-
text-align: start;
|
|
45
|
-
}
|
|
46
|
-
|
|
47
|
-
.D5_2ra_root[data-align="end"] {
|
|
48
|
-
text-align: end;
|
|
49
|
-
}
|
|
50
|
-
|
|
51
|
-
.D5_2ra_root[data-no-wrap] {
|
|
52
|
-
white-space: nowrap;
|
|
53
|
-
overflow: hidden;
|
|
54
|
-
}
|
|
55
|
-
|
|
56
|
-
.D5_2ra_root[data-text-overflow="clip"] {
|
|
57
|
-
text-overflow: clip;
|
|
58
|
-
}
|
|
59
|
-
|
|
60
|
-
.D5_2ra_root[data-text-overflow="ellipsis"] {
|
|
61
|
-
text-overflow: ellipsis;
|
|
62
|
-
}
|
|
63
|
-
|
|
64
|
-
.D5_2ra_root[data-weight="100"] {
|
|
65
|
-
--txt-weight: 100 !important;
|
|
66
|
-
}
|
|
67
|
-
|
|
68
|
-
.D5_2ra_root[data-weight="200"] {
|
|
69
|
-
--txt-weight: 200 !important;
|
|
70
|
-
}
|
|
71
|
-
|
|
72
|
-
.D5_2ra_root[data-weight="300"] {
|
|
73
|
-
--txt-weight: 300 !important;
|
|
74
|
-
}
|
|
75
|
-
|
|
76
|
-
.D5_2ra_root[data-weight="400"] {
|
|
77
|
-
--txt-weight: 400 !important;
|
|
78
|
-
}
|
|
79
|
-
|
|
80
|
-
.D5_2ra_root[data-weight="500"] {
|
|
81
|
-
--txt-weight: 500 !important;
|
|
82
|
-
}
|
|
83
|
-
|
|
84
|
-
.D5_2ra_root[data-weight="600"] {
|
|
85
|
-
--txt-weight: 600 !important;
|
|
86
|
-
}
|
|
87
|
-
|
|
88
|
-
.D5_2ra_root[data-weight="700"] {
|
|
89
|
-
--txt-weight: 700 !important;
|
|
90
|
-
}
|
|
91
|
-
|
|
92
|
-
.D5_2ra_root[data-weight="800"] {
|
|
93
|
-
--txt-weight: 800 !important;
|
|
94
|
-
}
|
|
95
|
-
|
|
96
|
-
.D5_2ra_root[data-weight="900"] {
|
|
97
|
-
--txt-weight: 900 !important;
|
|
98
|
-
}
|
|
99
|
-
|
|
100
|
-
.D5_2ra_root[data-variant="h1"] {
|
|
101
|
-
--txt-size: var(--typography-heading-h1-size);
|
|
102
|
-
--txt-weight: var(--typography-heading-h1-weight);
|
|
103
|
-
}
|
|
104
|
-
|
|
105
|
-
.D5_2ra_root[data-variant="h2"] {
|
|
106
|
-
--txt-size: var(--typography-heading-h2-size);
|
|
107
|
-
--txt-weight: var(--typography-heading-h2-weight);
|
|
108
|
-
}
|
|
109
|
-
|
|
110
|
-
.D5_2ra_root[data-variant="h3"] {
|
|
111
|
-
--txt-size: var(--typography-heading-h3-size);
|
|
112
|
-
--txt-weight: var(--typography-heading-h3-weight);
|
|
113
|
-
}
|
|
114
|
-
|
|
115
|
-
.D5_2ra_root[data-variant="h4"] {
|
|
116
|
-
--txt-size: var(--typography-heading-h4-size);
|
|
117
|
-
--txt-weight: var(--typography-heading-h4-weight);
|
|
118
|
-
}
|
|
119
|
-
|
|
120
|
-
.D5_2ra_root[data-variant="h5"] {
|
|
121
|
-
--txt-size: var(--typography-heading-h5-size);
|
|
122
|
-
--txt-weight: var(--typography-heading-h5-weight);
|
|
123
|
-
}
|
|
124
|
-
|
|
125
|
-
.D5_2ra_root[data-variant="h6"] {
|
|
126
|
-
--txt-size: var(--typography-heading-h6-size);
|
|
127
|
-
--txt-weight: var(--typography-heading-h6-weight);
|
|
128
|
-
}
|
|
129
|
-
|
|
130
|
-
.D5_2ra_root[data-variant="subheading1"] {
|
|
131
|
-
--txt-size: var(--typography-subheading-1-size);
|
|
132
|
-
--txt-weight: var(--typography-subheading-1-weight);
|
|
133
|
-
}
|
|
134
|
-
|
|
135
|
-
.D5_2ra_root[data-variant="subheading2"] {
|
|
136
|
-
--txt-size: var(--typography-subheading-2-size);
|
|
137
|
-
--txt-weight: var(--typography-subheading-2-weight);
|
|
138
|
-
}
|
|
139
|
-
|
|
140
|
-
.D5_2ra_root[data-variant="body1"] {
|
|
141
|
-
--txt-size: var(--typography-body-1-size);
|
|
142
|
-
--txt-weight: var(--typography-body-1-weight);
|
|
143
|
-
}
|
|
144
|
-
|
|
145
|
-
.D5_2ra_root[data-variant="body2"] {
|
|
146
|
-
--txt-size: var(--typography-body-2-size);
|
|
147
|
-
--txt-weight: var(--typography-body-2-weight);
|
|
148
|
-
}
|
|
149
|
-
|
|
150
|
-
.D5_2ra_root[data-variant="caption"] {
|
|
151
|
-
--txt-size: var(--typography-caption-base-size);
|
|
152
|
-
--txt-weight: var(--typography-caption-base-weight);
|
|
153
|
-
}
|
|
154
|
-
|
|
155
|
-
.D5_2ra_root[data-color="normal"] {
|
|
156
|
-
--txt-color: var(--color-content-neutral-base);
|
|
157
|
-
}
|
|
158
|
-
|
|
159
|
-
.D5_2ra_root[data-color="secondary"] {
|
|
160
|
-
--txt-color: var(--color-content-neutral-secondary);
|
|
161
|
-
}
|
|
162
|
-
|
|
163
|
-
.D5_2ra_root[data-color="tertiary"] {
|
|
164
|
-
--txt-color: var(--color-content-neutral-tertiary);
|
|
165
|
-
}
|
|
166
|
-
|
|
167
|
-
.D5_2ra_root[data-color="muted"] {
|
|
168
|
-
--txt-color: var(--color-content-neutral-muted);
|
|
169
|
-
}
|
|
170
|
-
|
|
171
|
-
.D5_2ra_root[data-color="brand"] {
|
|
172
|
-
--txt-color: var(--color-content-brand-base);
|
|
173
|
-
}
|
|
174
|
-
|
|
175
|
-
.D5_2ra_root[data-color="brand-secondary"] {
|
|
176
|
-
--txt-color: var(--color-content-brand-secondary);
|
|
177
|
-
}
|
|
178
|
-
|
|
179
|
-
.D5_2ra_root[data-color="brand-tertiary"] {
|
|
180
|
-
--txt-color: var(--color-content-brand-tertiary);
|
|
181
|
-
}
|
|
182
|
-
|
|
183
|
-
.D5_2ra_root[data-color="brand-muted"] {
|
|
184
|
-
--txt-color: var(--color-content-brand-muted);
|
|
185
|
-
}
|
|
186
|
-
|
|
187
|
-
.D5_2ra_root[data-color="positive"] {
|
|
188
|
-
--txt-color: var(--color-content-positive-base);
|
|
189
|
-
}
|
|
190
|
-
|
|
191
|
-
.D5_2ra_root[data-color="positive-secondary"] {
|
|
192
|
-
--txt-color: var(--color-content-positive-secondary);
|
|
193
|
-
}
|
|
194
|
-
|
|
195
|
-
.D5_2ra_root[data-color="positive-tertiary"] {
|
|
196
|
-
--txt-color: var(--color-content-positive-tertiary);
|
|
197
|
-
}
|
|
198
|
-
|
|
199
|
-
.D5_2ra_root[data-color="positive-muted"] {
|
|
200
|
-
--txt-color: var(--color-content-positive-muted);
|
|
201
|
-
}
|
|
202
|
-
|
|
203
|
-
.D5_2ra_root[data-color="negative"] {
|
|
204
|
-
--txt-color: var(--color-content-negative-base);
|
|
205
|
-
}
|
|
206
|
-
|
|
207
|
-
.D5_2ra_root[data-color="negative-secondary"] {
|
|
208
|
-
--txt-color: var(--color-content-negative-secondary);
|
|
209
|
-
}
|
|
210
|
-
|
|
211
|
-
.D5_2ra_root[data-color="negative-tertiary"] {
|
|
212
|
-
--txt-color: var(--color-content-negative-tertiary);
|
|
213
|
-
}
|
|
214
|
-
|
|
215
|
-
.D5_2ra_root[data-color="negative-muted"] {
|
|
216
|
-
--txt-color: var(--color-content-negative-muted);
|
|
217
|
-
}
|
|
218
|
-
|
|
219
|
-
.D5_2ra_root[data-color="warn"] {
|
|
220
|
-
--txt-color: var(--color-content-warn-base);
|
|
221
|
-
}
|
|
222
|
-
|
|
223
|
-
.D5_2ra_root[data-color="warn-secondary"] {
|
|
224
|
-
--txt-color: var(--color-content-warn-secondary);
|
|
225
|
-
}
|
|
226
|
-
|
|
227
|
-
.D5_2ra_root[data-color="warn-tertiary"] {
|
|
228
|
-
--txt-color: var(--color-content-warn-tertiary);
|
|
229
|
-
}
|
|
230
|
-
|
|
231
|
-
.D5_2ra_root[data-color="warn-muted"] {
|
|
232
|
-
--txt-color: var(--color-content-warn-muted);
|
|
233
|
-
}
|
|
234
|
-
|
|
235
|
-
.D5_2ra_root[data-color="info"] {
|
|
236
|
-
--txt-color: var(--color-content-info-base);
|
|
237
|
-
}
|
|
238
|
-
|
|
239
|
-
.D5_2ra_root[data-color="info-secondary"] {
|
|
240
|
-
--txt-color: var(--color-content-info-secondary);
|
|
241
|
-
}
|
|
242
|
-
|
|
243
|
-
.D5_2ra_root[data-color="info-tertiary"] {
|
|
244
|
-
--txt-color: var(--color-content-info-tertiary);
|
|
245
|
-
}
|
|
246
|
-
|
|
247
|
-
.D5_2ra_root[data-color="info-muted"] {
|
|
248
|
-
--txt-color: var(--color-content-info-muted);
|
|
249
|
-
}
|
|
250
|
-
|
|
251
|
-
.D5_2ra_root[data-color="on-neutral"] {
|
|
252
|
-
--txt-color: var(--color-on-neutral);
|
|
253
|
-
}
|
|
254
|
-
|
|
255
|
-
.D5_2ra_root[data-color="on-brand"] {
|
|
256
|
-
--txt-color: var(--color-on-brand);
|
|
257
|
-
}
|
|
258
|
-
|
|
259
|
-
.D5_2ra_root[data-color="on-positive"] {
|
|
260
|
-
--txt-color: var(--color-on-positive);
|
|
261
|
-
}
|
|
262
|
-
|
|
263
|
-
.D5_2ra_root[data-color="on-negative"] {
|
|
264
|
-
--txt-color: var(--color-on-negative);
|
|
265
|
-
}
|
|
266
|
-
|
|
267
|
-
.D5_2ra_root[data-color="on-warn"] {
|
|
268
|
-
--txt-color: var(--color-on-warn);
|
|
269
|
-
}
|
|
270
|
-
|
|
271
|
-
.D5_2ra_root[data-color="on-info"] {
|
|
272
|
-
--txt-color: var(--color-on-info);
|
|
273
|
-
}
|
|
1
|
+
.D5_2ra_root{--txt-color:currentColor;--txt-size:inherit;--txt-weight:inherit;--txt-line-height:inherit;color:var(--txt-color);font-size:var(--txt-size);font-weight:var(--txt-weight);font-family:var(--typography-typeface-ltr);margin:0;padding:0;transition:color .2s ease-in-out}.D5_2ra_root[data-display=inline]{display:inline}.D5_2ra_root[data-display=block]{display:block}.D5_2ra_root[data-display=inline-block]{display:inline-block}.D5_2ra_root[data-align=left]{text-align:left}.D5_2ra_root[data-align=right]{text-align:right}.D5_2ra_root[data-align=center]{text-align:center}.D5_2ra_root[data-align=justify]{text-align:justify}.D5_2ra_root[data-align=start]{text-align:start}.D5_2ra_root[data-align=end]{text-align:end}.D5_2ra_root[data-no-wrap]{white-space:nowrap;overflow:hidden}.D5_2ra_root[data-text-overflow=clip]{text-overflow:clip}.D5_2ra_root[data-text-overflow=ellipsis]{text-overflow:ellipsis}.D5_2ra_root[data-weight="100"]{--txt-weight:100!important}.D5_2ra_root[data-weight="200"]{--txt-weight:200!important}.D5_2ra_root[data-weight="300"]{--txt-weight:300!important}.D5_2ra_root[data-weight="400"]{--txt-weight:400!important}.D5_2ra_root[data-weight="500"]{--txt-weight:500!important}.D5_2ra_root[data-weight="600"]{--txt-weight:600!important}.D5_2ra_root[data-weight="700"]{--txt-weight:700!important}.D5_2ra_root[data-weight="800"]{--txt-weight:800!important}.D5_2ra_root[data-weight="900"]{--txt-weight:900!important}.D5_2ra_root[data-variant=h1]{--txt-size:var(--typography-heading-h1-size);--txt-weight:var(--typography-heading-h1-weight)}.D5_2ra_root[data-variant=h2]{--txt-size:var(--typography-heading-h2-size);--txt-weight:var(--typography-heading-h2-weight)}.D5_2ra_root[data-variant=h3]{--txt-size:var(--typography-heading-h3-size);--txt-weight:var(--typography-heading-h3-weight)}.D5_2ra_root[data-variant=h4]{--txt-size:var(--typography-heading-h4-size);--txt-weight:var(--typography-heading-h4-weight)}.D5_2ra_root[data-variant=h5]{--txt-size:var(--typography-heading-h5-size);--txt-weight:var(--typography-heading-h5-weight)}.D5_2ra_root[data-variant=h6]{--txt-size:var(--typography-heading-h6-size);--txt-weight:var(--typography-heading-h6-weight)}.D5_2ra_root[data-variant=subheading1]{--txt-size:var(--typography-subheading-1-size);--txt-weight:var(--typography-subheading-1-weight)}.D5_2ra_root[data-variant=subheading2]{--txt-size:var(--typography-subheading-2-size);--txt-weight:var(--typography-subheading-2-weight)}.D5_2ra_root[data-variant=body1]{--txt-size:var(--typography-body-1-size);--txt-weight:var(--typography-body-1-weight)}.D5_2ra_root[data-variant=body2]{--txt-size:var(--typography-body-2-size);--txt-weight:var(--typography-body-2-weight)}.D5_2ra_root[data-variant=caption]{--txt-size:var(--typography-caption-base-size);--txt-weight:var(--typography-caption-base-weight)}.D5_2ra_root[data-color=normal]{--txt-color:var(--color-content-neutral-base)}.D5_2ra_root[data-color=secondary]{--txt-color:var(--color-content-neutral-secondary)}.D5_2ra_root[data-color=tertiary]{--txt-color:var(--color-content-neutral-tertiary)}.D5_2ra_root[data-color=muted]{--txt-color:var(--color-content-neutral-muted)}.D5_2ra_root[data-color=brand]{--txt-color:var(--color-content-brand-base)}.D5_2ra_root[data-color=brand-secondary]{--txt-color:var(--color-content-brand-secondary)}.D5_2ra_root[data-color=brand-tertiary]{--txt-color:var(--color-content-brand-tertiary)}.D5_2ra_root[data-color=brand-muted]{--txt-color:var(--color-content-brand-muted)}.D5_2ra_root[data-color=positive]{--txt-color:var(--color-content-positive-base)}.D5_2ra_root[data-color=positive-secondary]{--txt-color:var(--color-content-positive-secondary)}.D5_2ra_root[data-color=positive-tertiary]{--txt-color:var(--color-content-positive-tertiary)}.D5_2ra_root[data-color=positive-muted]{--txt-color:var(--color-content-positive-muted)}.D5_2ra_root[data-color=negative]{--txt-color:var(--color-content-negative-base)}.D5_2ra_root[data-color=negative-secondary]{--txt-color:var(--color-content-negative-secondary)}.D5_2ra_root[data-color=negative-tertiary]{--txt-color:var(--color-content-negative-tertiary)}.D5_2ra_root[data-color=negative-muted]{--txt-color:var(--color-content-negative-muted)}.D5_2ra_root[data-color=warn]{--txt-color:var(--color-content-warn-base)}.D5_2ra_root[data-color=warn-secondary]{--txt-color:var(--color-content-warn-secondary)}.D5_2ra_root[data-color=warn-tertiary]{--txt-color:var(--color-content-warn-tertiary)}.D5_2ra_root[data-color=warn-muted]{--txt-color:var(--color-content-warn-muted)}.D5_2ra_root[data-color=info]{--txt-color:var(--color-content-info-base)}.D5_2ra_root[data-color=info-secondary]{--txt-color:var(--color-content-info-secondary)}.D5_2ra_root[data-color=info-tertiary]{--txt-color:var(--color-content-info-tertiary)}.D5_2ra_root[data-color=info-muted]{--txt-color:var(--color-content-info-muted)}.D5_2ra_root[data-color=on-neutral]{--txt-color:var(--color-on-neutral)}.D5_2ra_root[data-color=on-brand]{--txt-color:var(--color-on-brand)}.D5_2ra_root[data-color=on-positive]{--txt-color:var(--color-on-positive)}.D5_2ra_root[data-color=on-negative]{--txt-color:var(--color-on-negative)}.D5_2ra_root[data-color=on-warn]{--txt-color:var(--color-on-warn)}.D5_2ra_root[data-color=on-info]{--txt-color:var(--color-on-info)}
|
|
@@ -1,10 +1,10 @@
|
|
|
1
1
|
import { PolymorphicProps, WithBaseProps, WithColorProps } from "../../types.js";
|
|
2
|
-
import * as React from "react";
|
|
2
|
+
import * as React$1 from "react";
|
|
3
3
|
|
|
4
4
|
//#region src/atoms/text/text.d.ts
|
|
5
5
|
type TextVariant = "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "subheading1" | "subheading2" | "body1" | "body2" | "caption";
|
|
6
6
|
type TextColor = "currentcolor" | "normal" | "secondary" | "tertiary" | "muted" | "brand" | "brand-secondary" | "brand-tertiary" | "brand-muted" | "positive" | "positive-secondary" | "positive-tertiary" | "positive-muted" | "negative" | "negative-secondary" | "negative-tertiary" | "negative-muted" | "warn" | "warn-secondary" | "warn-tertiary" | "warn-muted" | "info" | "info-secondary" | "info-tertiary" | "info-muted" | "on-neutral" | "on-brand" | "on-positive" | "on-negative" | "on-warn" | "on-info";
|
|
7
|
-
type TextProps<E extends React.ElementType = "span"> = PolymorphicProps<E, WithBaseProps<WithColorProps<{
|
|
7
|
+
type TextProps<E extends React$1.ElementType = "span"> = PolymorphicProps<E, WithBaseProps<WithColorProps<{
|
|
8
8
|
/** Applies the theme typography styles. */variant: TextVariant; /** Set the text-align on the text. */
|
|
9
9
|
align?: "left" | "center" | "right" | "justify" | "start" | "end"; /** Set the font-weight on the text. Overrides variant default if provided. */
|
|
10
10
|
weight?: 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900; /** Set the display property. */
|
|
@@ -12,7 +12,7 @@ type TextProps<E extends React.ElementType = "span"> = PolymorphicProps<E, WithB
|
|
|
12
12
|
textOverflow?: "clip" | "ellipsis"; /** If true, text will not wrap and will overflow based on `textOverflow`. @default false */
|
|
13
13
|
noWrap?: boolean;
|
|
14
14
|
}>>>;
|
|
15
|
-
declare const Text: <E extends React.ElementType = "span">(props: TextProps<E>) => import("react/jsx-runtime").JSX.Element;
|
|
15
|
+
declare const Text: <E extends React$1.ElementType = "span">(props: TextProps<E>) => import("react/jsx-runtime").JSX.Element;
|
|
16
16
|
//#endregion
|
|
17
17
|
export { Text, TextColor, TextProps, TextVariant };
|
|
18
18
|
//# sourceMappingURL=text.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"text.module.js","names":[],"sources":["../../../src/atoms/text/text.module.css"],"sourcesContent":[".root {\n /* Internal local variables */\n --txt-color: currentColor;\n --txt-size: inherit;\n --txt-weight: inherit;\n --txt-line-height: inherit;\n\n /* Base properties mapped to local variables */\n color: var(--txt-color);\n font-size: var(--txt-size);\n font-weight: var(--txt-weight);\n /* line-height: var(--txt-line-height); */\n\n /* Defaults */\n margin: 0;\n padding: 0;\n font-family: var(--typography-typeface-ltr);\n transition: color 0.2s ease-in-out;\n}\n\n/* --- Layout & Alignment --- */\n.root[data-display=\"inline\"] {\n display: inline;\n}\n.root[data-display=\"block\"] {\n display: block;\n}\n.root[data-display=\"inline-block\"] {\n display: inline-block;\n}\n\n.root[data-align=\"left\"] {\n text-align: left;\n}\n.root[data-align=\"right\"] {\n text-align: right;\n}\n.root[data-align=\"center\"] {\n text-align: center;\n}\n.root[data-align=\"justify\"] {\n text-align: justify;\n}\n.root[data-align=\"start\"] {\n text-align: start;\n}\n.root[data-align=\"end\"] {\n text-align: end;\n}\n\n/* --- Text Overflow --- */\n.root[data-no-wrap] {\n white-space: nowrap;\n overflow: hidden;\n}\n.root[data-text-overflow=\"clip\"] {\n text-overflow: clip;\n}\n.root[data-text-overflow=\"ellipsis\"] {\n text-overflow: ellipsis;\n}\n\n/* --- Custom Weights (Overrides variant defaults) --- */\n.root[data-weight=\"100\"] {\n --txt-weight: 100 !important;\n}\n.root[data-weight=\"200\"] {\n --txt-weight: 200 !important;\n}\n.root[data-weight=\"300\"] {\n --txt-weight: 300 !important;\n}\n.root[data-weight=\"400\"] {\n --txt-weight: 400 !important;\n}\n.root[data-weight=\"500\"] {\n --txt-weight: 500 !important;\n}\n.root[data-weight=\"600\"] {\n --txt-weight: 600 !important;\n}\n.root[data-weight=\"700\"] {\n --txt-weight: 700 !important;\n}\n.root[data-weight=\"800\"] {\n --txt-weight: 800 !important;\n}\n.root[data-weight=\"900\"] {\n --txt-weight: 900 !important;\n}\n\n/* --- Typography Variants --- */\n.root[data-variant=\"h1\"] {\n --txt-size: var(--typography-heading-h1-size);\n --txt-weight: var(--typography-heading-h1-weight);\n /* --txt-line-height: var(--typography-heading-h1-height); */\n}\n.root[data-variant=\"h2\"] {\n --txt-size: var(--typography-heading-h2-size);\n --txt-weight: var(--typography-heading-h2-weight);\n /* --txt-line-height: var(--typography-heading-h2-height); */\n}\n.root[data-variant=\"h3\"] {\n --txt-size: var(--typography-heading-h3-size);\n --txt-weight: var(--typography-heading-h3-weight);\n /* --txt-line-height: var(--typography-heading-h3-height); */\n}\n.root[data-variant=\"h4\"] {\n --txt-size: var(--typography-heading-h4-size);\n --txt-weight: var(--typography-heading-h4-weight);\n /* --txt-line-height: var(--typography-heading-h4-height); */\n}\n.root[data-variant=\"h5\"] {\n --txt-size: var(--typography-heading-h5-size);\n --txt-weight: var(--typography-heading-h5-weight);\n /* --txt-line-height: var(--typography-heading-h5-height); */\n}\n.root[data-variant=\"h6\"] {\n --txt-size: var(--typography-heading-h6-size);\n --txt-weight: var(--typography-heading-h6-weight);\n /* --txt-line-height: var(--typography-heading-h6-height); */\n}\n.root[data-variant=\"subheading1\"] {\n --txt-size: var(--typography-subheading-1-size);\n --txt-weight: var(--typography-subheading-1-weight);\n /* --txt-line-height: var(--typography-subheading-1-height); */\n}\n.root[data-variant=\"subheading2\"] {\n --txt-size: var(--typography-subheading-2-size);\n --txt-weight: var(--typography-subheading-2-weight);\n /* --txt-line-height: var(--typography-subheading-2-height); */\n}\n.root[data-variant=\"body1\"] {\n --txt-size: var(--typography-body-1-size);\n --txt-weight: var(--typography-body-1-weight);\n /* --txt-line-height: var(--typography-body-1-height); */\n}\n.root[data-variant=\"body2\"] {\n --txt-size: var(--typography-body-2-size);\n --txt-weight: var(--typography-body-2-weight);\n /* --txt-line-height: var(--typography-body-2-height); */\n}\n.root[data-variant=\"caption\"] {\n --txt-size: var(--typography-caption-base-size);\n --txt-weight: var(--typography-caption-base-weight);\n /* --txt-line-height: var(--typography-caption-base-height); */\n}\n\n/* --- Color Variants --- */\n.root[data-color=\"normal\"] {\n --txt-color: var(--color-content-neutral-base);\n}\n.root[data-color=\"secondary\"] {\n --txt-color: var(--color-content-neutral-secondary);\n}\n.root[data-color=\"tertiary\"] {\n --txt-color: var(--color-content-neutral-tertiary);\n}\n.root[data-color=\"muted\"] {\n --txt-color: var(--color-content-neutral-muted);\n}\n\n.root[data-color=\"brand\"] {\n --txt-color: var(--color-content-brand-base);\n}\n.root[data-color=\"brand-secondary\"] {\n --txt-color: var(--color-content-brand-secondary);\n}\n.root[data-color=\"brand-tertiary\"] {\n --txt-color: var(--color-content-brand-tertiary);\n}\n.root[data-color=\"brand-muted\"] {\n --txt-color: var(--color-content-brand-muted);\n}\n\n.root[data-color=\"positive\"] {\n --txt-color: var(--color-content-positive-base);\n}\n.root[data-color=\"positive-secondary\"] {\n --txt-color: var(--color-content-positive-secondary);\n}\n.root[data-color=\"positive-tertiary\"] {\n --txt-color: var(--color-content-positive-tertiary);\n}\n.root[data-color=\"positive-muted\"] {\n --txt-color: var(--color-content-positive-muted);\n}\n\n.root[data-color=\"negative\"] {\n --txt-color: var(--color-content-negative-base);\n}\n.root[data-color=\"negative-secondary\"] {\n --txt-color: var(--color-content-negative-secondary);\n}\n.root[data-color=\"negative-tertiary\"] {\n --txt-color: var(--color-content-negative-tertiary);\n}\n.root[data-color=\"negative-muted\"] {\n --txt-color: var(--color-content-negative-muted);\n}\n\n.root[data-color=\"warn\"] {\n --txt-color: var(--color-content-warn-base);\n}\n.root[data-color=\"warn-secondary\"] {\n --txt-color: var(--color-content-warn-secondary);\n}\n.root[data-color=\"warn-tertiary\"] {\n --txt-color: var(--color-content-warn-tertiary);\n}\n.root[data-color=\"warn-muted\"] {\n --txt-color: var(--color-content-warn-muted);\n}\n\n.root[data-color=\"info\"] {\n --txt-color: var(--color-content-info-base);\n}\n.root[data-color=\"info-secondary\"] {\n --txt-color: var(--color-content-info-secondary);\n}\n.root[data-color=\"info-tertiary\"] {\n --txt-color: var(--color-content-info-tertiary);\n}\n.root[data-color=\"info-muted\"] {\n --txt-color: var(--color-content-info-muted);\n}\n\n/* On-Backgrounds */\n.root[data-color=\"on-neutral\"] {\n --txt-color: var(--color-on-neutral);\n}\n.root[data-color=\"on-brand\"] {\n --txt-color: var(--color-on-brand);\n}\n.root[data-color=\"on-positive\"] {\n --txt-color: var(--color-on-positive);\n}\n.root[data-color=\"on-negative\"] {\n --txt-color: var(--color-on-negative);\n}\n.root[data-color=\"on-warn\"] {\n --txt-color: var(--color-on-warn);\n}\n.root[data-color=\"on-info\"] {\n --txt-color: var(--color-on-info);\n}\n"],"mappings":"
|
|
1
|
+
{"version":3,"file":"text.module.js","names":[],"sources":["../../../src/atoms/text/text.module.css"],"sourcesContent":[".root {\n /* Internal local variables */\n --txt-color: currentColor;\n --txt-size: inherit;\n --txt-weight: inherit;\n --txt-line-height: inherit;\n\n /* Base properties mapped to local variables */\n color: var(--txt-color);\n font-size: var(--txt-size);\n font-weight: var(--txt-weight);\n /* line-height: var(--txt-line-height); */\n\n /* Defaults */\n margin: 0;\n padding: 0;\n font-family: var(--typography-typeface-ltr);\n transition: color 0.2s ease-in-out;\n}\n\n/* --- Layout & Alignment --- */\n.root[data-display=\"inline\"] {\n display: inline;\n}\n.root[data-display=\"block\"] {\n display: block;\n}\n.root[data-display=\"inline-block\"] {\n display: inline-block;\n}\n\n.root[data-align=\"left\"] {\n text-align: left;\n}\n.root[data-align=\"right\"] {\n text-align: right;\n}\n.root[data-align=\"center\"] {\n text-align: center;\n}\n.root[data-align=\"justify\"] {\n text-align: justify;\n}\n.root[data-align=\"start\"] {\n text-align: start;\n}\n.root[data-align=\"end\"] {\n text-align: end;\n}\n\n/* --- Text Overflow --- */\n.root[data-no-wrap] {\n white-space: nowrap;\n overflow: hidden;\n}\n.root[data-text-overflow=\"clip\"] {\n text-overflow: clip;\n}\n.root[data-text-overflow=\"ellipsis\"] {\n text-overflow: ellipsis;\n}\n\n/* --- Custom Weights (Overrides variant defaults) --- */\n.root[data-weight=\"100\"] {\n --txt-weight: 100 !important;\n}\n.root[data-weight=\"200\"] {\n --txt-weight: 200 !important;\n}\n.root[data-weight=\"300\"] {\n --txt-weight: 300 !important;\n}\n.root[data-weight=\"400\"] {\n --txt-weight: 400 !important;\n}\n.root[data-weight=\"500\"] {\n --txt-weight: 500 !important;\n}\n.root[data-weight=\"600\"] {\n --txt-weight: 600 !important;\n}\n.root[data-weight=\"700\"] {\n --txt-weight: 700 !important;\n}\n.root[data-weight=\"800\"] {\n --txt-weight: 800 !important;\n}\n.root[data-weight=\"900\"] {\n --txt-weight: 900 !important;\n}\n\n/* --- Typography Variants --- */\n.root[data-variant=\"h1\"] {\n --txt-size: var(--typography-heading-h1-size);\n --txt-weight: var(--typography-heading-h1-weight);\n /* --txt-line-height: var(--typography-heading-h1-height); */\n}\n.root[data-variant=\"h2\"] {\n --txt-size: var(--typography-heading-h2-size);\n --txt-weight: var(--typography-heading-h2-weight);\n /* --txt-line-height: var(--typography-heading-h2-height); */\n}\n.root[data-variant=\"h3\"] {\n --txt-size: var(--typography-heading-h3-size);\n --txt-weight: var(--typography-heading-h3-weight);\n /* --txt-line-height: var(--typography-heading-h3-height); */\n}\n.root[data-variant=\"h4\"] {\n --txt-size: var(--typography-heading-h4-size);\n --txt-weight: var(--typography-heading-h4-weight);\n /* --txt-line-height: var(--typography-heading-h4-height); */\n}\n.root[data-variant=\"h5\"] {\n --txt-size: var(--typography-heading-h5-size);\n --txt-weight: var(--typography-heading-h5-weight);\n /* --txt-line-height: var(--typography-heading-h5-height); */\n}\n.root[data-variant=\"h6\"] {\n --txt-size: var(--typography-heading-h6-size);\n --txt-weight: var(--typography-heading-h6-weight);\n /* --txt-line-height: var(--typography-heading-h6-height); */\n}\n.root[data-variant=\"subheading1\"] {\n --txt-size: var(--typography-subheading-1-size);\n --txt-weight: var(--typography-subheading-1-weight);\n /* --txt-line-height: var(--typography-subheading-1-height); */\n}\n.root[data-variant=\"subheading2\"] {\n --txt-size: var(--typography-subheading-2-size);\n --txt-weight: var(--typography-subheading-2-weight);\n /* --txt-line-height: var(--typography-subheading-2-height); */\n}\n.root[data-variant=\"body1\"] {\n --txt-size: var(--typography-body-1-size);\n --txt-weight: var(--typography-body-1-weight);\n /* --txt-line-height: var(--typography-body-1-height); */\n}\n.root[data-variant=\"body2\"] {\n --txt-size: var(--typography-body-2-size);\n --txt-weight: var(--typography-body-2-weight);\n /* --txt-line-height: var(--typography-body-2-height); */\n}\n.root[data-variant=\"caption\"] {\n --txt-size: var(--typography-caption-base-size);\n --txt-weight: var(--typography-caption-base-weight);\n /* --txt-line-height: var(--typography-caption-base-height); */\n}\n\n/* --- Color Variants --- */\n.root[data-color=\"normal\"] {\n --txt-color: var(--color-content-neutral-base);\n}\n.root[data-color=\"secondary\"] {\n --txt-color: var(--color-content-neutral-secondary);\n}\n.root[data-color=\"tertiary\"] {\n --txt-color: var(--color-content-neutral-tertiary);\n}\n.root[data-color=\"muted\"] {\n --txt-color: var(--color-content-neutral-muted);\n}\n\n.root[data-color=\"brand\"] {\n --txt-color: var(--color-content-brand-base);\n}\n.root[data-color=\"brand-secondary\"] {\n --txt-color: var(--color-content-brand-secondary);\n}\n.root[data-color=\"brand-tertiary\"] {\n --txt-color: var(--color-content-brand-tertiary);\n}\n.root[data-color=\"brand-muted\"] {\n --txt-color: var(--color-content-brand-muted);\n}\n\n.root[data-color=\"positive\"] {\n --txt-color: var(--color-content-positive-base);\n}\n.root[data-color=\"positive-secondary\"] {\n --txt-color: var(--color-content-positive-secondary);\n}\n.root[data-color=\"positive-tertiary\"] {\n --txt-color: var(--color-content-positive-tertiary);\n}\n.root[data-color=\"positive-muted\"] {\n --txt-color: var(--color-content-positive-muted);\n}\n\n.root[data-color=\"negative\"] {\n --txt-color: var(--color-content-negative-base);\n}\n.root[data-color=\"negative-secondary\"] {\n --txt-color: var(--color-content-negative-secondary);\n}\n.root[data-color=\"negative-tertiary\"] {\n --txt-color: var(--color-content-negative-tertiary);\n}\n.root[data-color=\"negative-muted\"] {\n --txt-color: var(--color-content-negative-muted);\n}\n\n.root[data-color=\"warn\"] {\n --txt-color: var(--color-content-warn-base);\n}\n.root[data-color=\"warn-secondary\"] {\n --txt-color: var(--color-content-warn-secondary);\n}\n.root[data-color=\"warn-tertiary\"] {\n --txt-color: var(--color-content-warn-tertiary);\n}\n.root[data-color=\"warn-muted\"] {\n --txt-color: var(--color-content-warn-muted);\n}\n\n.root[data-color=\"info\"] {\n --txt-color: var(--color-content-info-base);\n}\n.root[data-color=\"info-secondary\"] {\n --txt-color: var(--color-content-info-secondary);\n}\n.root[data-color=\"info-tertiary\"] {\n --txt-color: var(--color-content-info-tertiary);\n}\n.root[data-color=\"info-muted\"] {\n --txt-color: var(--color-content-info-muted);\n}\n\n/* On-Backgrounds */\n.root[data-color=\"on-neutral\"] {\n --txt-color: var(--color-on-neutral);\n}\n.root[data-color=\"on-brand\"] {\n --txt-color: var(--color-on-brand);\n}\n.root[data-color=\"on-positive\"] {\n --txt-color: var(--color-on-positive);\n}\n.root[data-color=\"on-negative\"] {\n --txt-color: var(--color-on-negative);\n}\n.root[data-color=\"on-warn\"] {\n --txt-color: var(--color-on-warn);\n}\n.root[data-color=\"on-info\"] {\n --txt-color: var(--color-on-info);\n}\n"],"mappings":""}
|
|
@@ -1,151 +1 @@
|
|
|
1
|
-
.dLl3pG_root {
|
|
2
|
-
--gap: .75rem;
|
|
3
|
-
--peek: .75rem;
|
|
4
|
-
--scale: calc(max(0, 1 - (var(--toast-index) * .1)));
|
|
5
|
-
--shrink: calc(1 - var(--scale));
|
|
6
|
-
--height: var(--toast-frontmost-height, var(--toast-height));
|
|
7
|
-
--offset-y: calc(var(--toast-offset-y) * -1 + (var(--toast-index) * var(--gap) * -1) +
|
|
8
|
-
var(--toast-swipe-movement-y));
|
|
9
|
-
--background: var(--color-surface-secondary);
|
|
10
|
-
--foreground: var(--color-content-neutral-base);
|
|
11
|
-
--border: var(--color-border-primary);
|
|
12
|
-
box-sizing: border-box;
|
|
13
|
-
border: 1px solid var(--border);
|
|
14
|
-
background-color: var(--background);
|
|
15
|
-
width: 100%;
|
|
16
|
-
color: var(--foreground);
|
|
17
|
-
transform-origin: bottom;
|
|
18
|
-
border-radius: var(--spacing-sm);
|
|
19
|
-
-webkit-user-select: none;
|
|
20
|
-
user-select: none;
|
|
21
|
-
cursor: default;
|
|
22
|
-
z-index: calc(1000 - var(--toast-index));
|
|
23
|
-
height: var(--height);
|
|
24
|
-
transform: translateX(var(--toast-swipe-movement-x))
|
|
25
|
-
translateY(calc(var(--toast-swipe-movement-y) - (var(--toast-index) * var(--peek)) -
|
|
26
|
-
(var(--shrink) * var(--height))))
|
|
27
|
-
scale(var(--scale));
|
|
28
|
-
margin: 0 0 0 auto;
|
|
29
|
-
transition: transform .5s cubic-bezier(.22, 1, .36, 1), opacity .5s, height .15s;
|
|
30
|
-
position: absolute;
|
|
31
|
-
bottom: 0;
|
|
32
|
-
left: auto;
|
|
33
|
-
right: 0;
|
|
34
|
-
|
|
35
|
-
&[data-expanded] {
|
|
36
|
-
transform: translateX(var(--toast-swipe-movement-x))
|
|
37
|
-
translateY(var(--offset-y));
|
|
38
|
-
height: var(--toast-height);
|
|
39
|
-
}
|
|
40
|
-
|
|
41
|
-
&[data-starting-style], &[data-ending-style] {
|
|
42
|
-
transform: translateY(150%);
|
|
43
|
-
}
|
|
44
|
-
|
|
45
|
-
&[data-limited] {
|
|
46
|
-
opacity: 0;
|
|
47
|
-
}
|
|
48
|
-
|
|
49
|
-
&[data-ending-style] {
|
|
50
|
-
opacity: 0;
|
|
51
|
-
|
|
52
|
-
&[data-swipe-direction="up"] {
|
|
53
|
-
transform: translateY(calc(var(--toast-swipe-movement-y) - 150%));
|
|
54
|
-
}
|
|
55
|
-
|
|
56
|
-
&[data-swipe-direction="left"] {
|
|
57
|
-
transform: translateX(calc(var(--toast-swipe-movement-x) - 150%))
|
|
58
|
-
translateY(var(--offset-y));
|
|
59
|
-
}
|
|
60
|
-
|
|
61
|
-
&[data-swipe-direction="right"] {
|
|
62
|
-
transform: translateX(calc(var(--toast-swipe-movement-x) + 150%))
|
|
63
|
-
translateY(var(--offset-y));
|
|
64
|
-
}
|
|
65
|
-
|
|
66
|
-
&[data-swipe-direction="down"] {
|
|
67
|
-
transform: translateY(calc(var(--toast-swipe-movement-y) + 150%));
|
|
68
|
-
}
|
|
69
|
-
}
|
|
70
|
-
|
|
71
|
-
&:after {
|
|
72
|
-
content: "";
|
|
73
|
-
width: 100%;
|
|
74
|
-
height: calc(var(--gap) + 1px);
|
|
75
|
-
position: absolute;
|
|
76
|
-
top: 100%;
|
|
77
|
-
left: 0;
|
|
78
|
-
}
|
|
79
|
-
|
|
80
|
-
&:focus-visible {
|
|
81
|
-
outline-style: solid;
|
|
82
|
-
outline-width: var(--stroke-focus-ring);
|
|
83
|
-
outline-color: var(--color-action-info-base);
|
|
84
|
-
outline-offset: var(--spacing-xxs);
|
|
85
|
-
}
|
|
86
|
-
|
|
87
|
-
&[data-color="neutral"] {
|
|
88
|
-
--background: var(--color-action-neutral-base);
|
|
89
|
-
--foreground: var(--color-on-neutral);
|
|
90
|
-
}
|
|
91
|
-
|
|
92
|
-
&[data-color="positive"] {
|
|
93
|
-
--background: var(--color-action-positive-base);
|
|
94
|
-
--foreground: var(--color-on-positive);
|
|
95
|
-
}
|
|
96
|
-
|
|
97
|
-
&[data-color="negative"] {
|
|
98
|
-
--background: var(--color-action-negative-base);
|
|
99
|
-
--foreground: var(--color-on-negative);
|
|
100
|
-
}
|
|
101
|
-
|
|
102
|
-
&[data-color="warn"] {
|
|
103
|
-
--background: var(--color-action-warn-base);
|
|
104
|
-
--foreground: var(--color-on-warn);
|
|
105
|
-
}
|
|
106
|
-
|
|
107
|
-
&[data-color="info"] {
|
|
108
|
-
--background: var(--color-action-info-base);
|
|
109
|
-
--foreground: var(--color-on-info);
|
|
110
|
-
}
|
|
111
|
-
}
|
|
112
|
-
|
|
113
|
-
.dLl3pG_content {
|
|
114
|
-
box-sizing: border-box;
|
|
115
|
-
align-items: center;
|
|
116
|
-
gap: 1rem;
|
|
117
|
-
height: 100%;
|
|
118
|
-
padding: .75rem;
|
|
119
|
-
transition: opacity .25s cubic-bezier(.22, 1, .36, 1);
|
|
120
|
-
display: flex;
|
|
121
|
-
overflow: hidden;
|
|
122
|
-
|
|
123
|
-
&[data-behind] {
|
|
124
|
-
opacity: 0;
|
|
125
|
-
}
|
|
126
|
-
|
|
127
|
-
&[data-expanded] {
|
|
128
|
-
opacity: 1;
|
|
129
|
-
}
|
|
130
|
-
}
|
|
131
|
-
|
|
132
|
-
.dLl3pG_text {
|
|
133
|
-
flex-direction: column;
|
|
134
|
-
flex: 1;
|
|
135
|
-
gap: .25rem;
|
|
136
|
-
min-width: 0;
|
|
137
|
-
display: flex;
|
|
138
|
-
}
|
|
139
|
-
|
|
140
|
-
.dLl3pG_title {
|
|
141
|
-
margin: 0;
|
|
142
|
-
font-size: .875rem;
|
|
143
|
-
font-weight: 700;
|
|
144
|
-
line-height: 1.25rem;
|
|
145
|
-
}
|
|
146
|
-
|
|
147
|
-
.dLl3pG_description {
|
|
148
|
-
margin: 0;
|
|
149
|
-
font-size: .875rem;
|
|
150
|
-
line-height: 1.25rem;
|
|
151
|
-
}
|
|
1
|
+
.dLl3pG_root{--gap:.75rem;--peek:.75rem;--scale:calc(max(0, 1 - (var(--toast-index) * .1)));--shrink:calc(1 - var(--scale));--height:var(--toast-frontmost-height,var(--toast-height));--offset-y:calc(var(--toast-offset-y) * -1 + (var(--toast-index) * var(--gap) * -1) + var(--toast-swipe-movement-y));--background:var(--color-surface-secondary);--foreground:var(--color-content-neutral-base);--border:var(--color-border-primary);box-sizing:border-box;border:1px solid var(--border);background-color:var(--background);width:100%;color:var(--foreground);transform-origin:bottom;border-radius:var(--spacing-sm);-webkit-user-select:none;user-select:none;cursor:default;z-index:calc(1000 - var(--toast-index));height:var(--height);transform:translateX(var(--toast-swipe-movement-x)) translateY(calc(var(--toast-swipe-movement-y) - (var(--toast-index) * var(--peek)) - (var(--shrink) * var(--height)))) scale(var(--scale));margin:0 0 0 auto;transition:transform .5s cubic-bezier(.22,1,.36,1),opacity .5s,height .15s;position:absolute;bottom:0;left:auto;right:0;&[data-expanded]{transform:translateX(var(--toast-swipe-movement-x)) translateY(var(--offset-y));height:var(--toast-height)}&[data-starting-style],&[data-ending-style]{transform:translateY(150%)}&[data-limited]{opacity:0}&[data-ending-style]{opacity:0;&[data-swipe-direction=up]{transform:translateY(calc(var(--toast-swipe-movement-y) - 150%))}&[data-swipe-direction=left]{transform:translateX(calc(var(--toast-swipe-movement-x) - 150%)) translateY(var(--offset-y))}&[data-swipe-direction=right]{transform:translateX(calc(var(--toast-swipe-movement-x) + 150%)) translateY(var(--offset-y))}&[data-swipe-direction=down]{transform:translateY(calc(var(--toast-swipe-movement-y) + 150%))}}&:after{content:"";width:100%;height:calc(var(--gap) + 1px);position:absolute;top:100%;left:0}&:focus-visible{outline-style:solid;outline-width:var(--stroke-focus-ring);outline-color:var(--color-action-info-base);outline-offset:var(--spacing-xxs)}&[data-color=neutral]{--background:var(--color-action-neutral-base);--foreground:var(--color-on-neutral)}&[data-color=positive]{--background:var(--color-action-positive-base);--foreground:var(--color-on-positive)}&[data-color=negative]{--background:var(--color-action-negative-base);--foreground:var(--color-on-negative)}&[data-color=warn]{--background:var(--color-action-warn-base);--foreground:var(--color-on-warn)}&[data-color=info]{--background:var(--color-action-info-base);--foreground:var(--color-on-info)}}.dLl3pG_content{box-sizing:border-box;align-items:center;gap:1rem;height:100%;padding:.75rem;transition:opacity .25s cubic-bezier(.22,1,.36,1);display:flex;overflow:hidden;&[data-behind]{opacity:0}&[data-expanded]{opacity:1}}.dLl3pG_text{flex-direction:column;flex:1;gap:.25rem;min-width:0;display:flex}.dLl3pG_title{margin:0;font-size:.875rem;font-weight:700;line-height:1.25rem}.dLl3pG_description{margin:0;font-size:.875rem;line-height:1.25rem}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"toast.module.js","names":[],"sources":["../../../src/atoms/toast/toast.module.css"],"sourcesContent":[".root {\n --gap: 0.75rem;\n --peek: 0.75rem;\n --scale: calc(max(0, 1 - (var(--toast-index) * 0.1)));\n --shrink: calc(1 - var(--scale));\n --height: var(--toast-frontmost-height, var(--toast-height));\n --offset-y: calc(\n var(--toast-offset-y) * -1 + (var(--toast-index) * var(--gap) * -1) +\n var(--toast-swipe-movement-y)\n );\n --background: var(--color-surface-secondary);\n --foreground: var(--color-content-neutral-base);\n --border: var(--color-border-primary);\n\n position: absolute;\n right: 0;\n margin: 0 auto;\n box-sizing: border-box;\n width: 100%;\n border: 1px solid var(--border);\n background-color: var(--background);\n color: var(--foreground);\n transform-origin: bottom center;\n border-radius: var(--spacing-sm);\n bottom: 0;\n left: auto;\n margin-right: 0;\n -webkit-user-select: none;\n user-select: none;\n transition:\n transform 0.5s cubic-bezier(0.22, 1, 0.36, 1),\n opacity 0.5s,\n height 0.15s;\n cursor: default;\n z-index: calc(1000 - var(--toast-index));\n height: var(--height);\n transform: translateX(var(--toast-swipe-movement-x))\n translateY(\n calc(\n var(--toast-swipe-movement-y) - (var(--toast-index) * var(--peek)) -\n (var(--shrink) * var(--height))\n )\n )\n scale(var(--scale));\n\n &[data-expanded] {\n transform: translateX(var(--toast-swipe-movement-x))\n translateY(var(--offset-y));\n height: var(--toast-height);\n }\n\n &[data-starting-style],\n &[data-ending-style] {\n transform: translateY(150%);\n }\n\n &[data-limited] {\n opacity: 0;\n }\n\n &[data-ending-style] {\n opacity: 0;\n\n &[data-swipe-direction=\"up\"] {\n transform: translateY(calc(var(--toast-swipe-movement-y) - 150%));\n }\n &[data-swipe-direction=\"left\"] {\n transform: translateX(calc(var(--toast-swipe-movement-x) - 150%))\n translateY(var(--offset-y));\n }\n &[data-swipe-direction=\"right\"] {\n transform: translateX(calc(var(--toast-swipe-movement-x) + 150%))\n translateY(var(--offset-y));\n }\n &[data-swipe-direction=\"down\"] {\n transform: translateY(calc(var(--toast-swipe-movement-y) + 150%));\n }\n }\n\n &::after {\n content: \"\";\n position: absolute;\n width: 100%;\n top: 100%;\n left: 0;\n height: calc(var(--gap) + 1px);\n }\n\n &:focus-visible {\n outline-style: solid;\n outline-width: var(--stroke-focus-ring);\n outline-color: var(--color-action-info-base);\n outline-offset: var(--spacing-xxs);\n }\n\n &[data-color=\"neutral\"] {\n --background: var(--color-action-neutral-base);\n --foreground: var(--color-on-neutral);\n }\n &[data-color=\"positive\"] {\n --background: var(--color-action-positive-base);\n --foreground: var(--color-on-positive);\n }\n &[data-color=\"negative\"] {\n --background: var(--color-action-negative-base);\n --foreground: var(--color-on-negative);\n }\n &[data-color=\"warn\"] {\n --background: var(--color-action-warn-base);\n --foreground: var(--color-on-warn);\n }\n &[data-color=\"info\"] {\n --background: var(--color-action-info-base);\n --foreground: var(--color-on-info);\n }\n}\n\n.content {\n box-sizing: border-box;\n display: flex;\n align-items: center;\n gap: 1rem;\n height: 100%;\n padding: 0.75rem;\n overflow: hidden;\n transition: opacity 0.25s cubic-bezier(0.22, 1, 0.36, 1);\n\n &[data-behind] {\n opacity: 0;\n }\n\n &[data-expanded] {\n opacity: 1;\n }\n}\n\n.text {\n display: flex;\n flex-direction: column;\n gap: 0.25rem;\n min-width: 0;\n flex: 1;\n}\n\n.title {\n font-weight: 700;\n font-size: 0.875rem;\n line-height: 1.25rem;\n margin: 0;\n}\n\n.description {\n font-size: 0.875rem;\n line-height: 1.25rem;\n margin: 0;\n}\n"],"mappings":"
|
|
1
|
+
{"version":3,"file":"toast.module.js","names":[],"sources":["../../../src/atoms/toast/toast.module.css"],"sourcesContent":[".root {\n --gap: 0.75rem;\n --peek: 0.75rem;\n --scale: calc(max(0, 1 - (var(--toast-index) * 0.1)));\n --shrink: calc(1 - var(--scale));\n --height: var(--toast-frontmost-height, var(--toast-height));\n --offset-y: calc(\n var(--toast-offset-y) * -1 + (var(--toast-index) * var(--gap) * -1) +\n var(--toast-swipe-movement-y)\n );\n --background: var(--color-surface-secondary);\n --foreground: var(--color-content-neutral-base);\n --border: var(--color-border-primary);\n\n position: absolute;\n right: 0;\n margin: 0 auto;\n box-sizing: border-box;\n width: 100%;\n border: 1px solid var(--border);\n background-color: var(--background);\n color: var(--foreground);\n transform-origin: bottom center;\n border-radius: var(--spacing-sm);\n bottom: 0;\n left: auto;\n margin-right: 0;\n -webkit-user-select: none;\n user-select: none;\n transition:\n transform 0.5s cubic-bezier(0.22, 1, 0.36, 1),\n opacity 0.5s,\n height 0.15s;\n cursor: default;\n z-index: calc(1000 - var(--toast-index));\n height: var(--height);\n transform: translateX(var(--toast-swipe-movement-x))\n translateY(\n calc(\n var(--toast-swipe-movement-y) - (var(--toast-index) * var(--peek)) -\n (var(--shrink) * var(--height))\n )\n )\n scale(var(--scale));\n\n &[data-expanded] {\n transform: translateX(var(--toast-swipe-movement-x))\n translateY(var(--offset-y));\n height: var(--toast-height);\n }\n\n &[data-starting-style],\n &[data-ending-style] {\n transform: translateY(150%);\n }\n\n &[data-limited] {\n opacity: 0;\n }\n\n &[data-ending-style] {\n opacity: 0;\n\n &[data-swipe-direction=\"up\"] {\n transform: translateY(calc(var(--toast-swipe-movement-y) - 150%));\n }\n &[data-swipe-direction=\"left\"] {\n transform: translateX(calc(var(--toast-swipe-movement-x) - 150%))\n translateY(var(--offset-y));\n }\n &[data-swipe-direction=\"right\"] {\n transform: translateX(calc(var(--toast-swipe-movement-x) + 150%))\n translateY(var(--offset-y));\n }\n &[data-swipe-direction=\"down\"] {\n transform: translateY(calc(var(--toast-swipe-movement-y) + 150%));\n }\n }\n\n &::after {\n content: \"\";\n position: absolute;\n width: 100%;\n top: 100%;\n left: 0;\n height: calc(var(--gap) + 1px);\n }\n\n &:focus-visible {\n outline-style: solid;\n outline-width: var(--stroke-focus-ring);\n outline-color: var(--color-action-info-base);\n outline-offset: var(--spacing-xxs);\n }\n\n &[data-color=\"neutral\"] {\n --background: var(--color-action-neutral-base);\n --foreground: var(--color-on-neutral);\n }\n &[data-color=\"positive\"] {\n --background: var(--color-action-positive-base);\n --foreground: var(--color-on-positive);\n }\n &[data-color=\"negative\"] {\n --background: var(--color-action-negative-base);\n --foreground: var(--color-on-negative);\n }\n &[data-color=\"warn\"] {\n --background: var(--color-action-warn-base);\n --foreground: var(--color-on-warn);\n }\n &[data-color=\"info\"] {\n --background: var(--color-action-info-base);\n --foreground: var(--color-on-info);\n }\n}\n\n.content {\n box-sizing: border-box;\n display: flex;\n align-items: center;\n gap: 1rem;\n height: 100%;\n padding: 0.75rem;\n overflow: hidden;\n transition: opacity 0.25s cubic-bezier(0.22, 1, 0.36, 1);\n\n &[data-behind] {\n opacity: 0;\n }\n\n &[data-expanded] {\n opacity: 1;\n }\n}\n\n.text {\n display: flex;\n flex-direction: column;\n gap: 0.25rem;\n min-width: 0;\n flex: 1;\n}\n\n.title {\n font-weight: 700;\n font-size: 0.875rem;\n line-height: 1.25rem;\n margin: 0;\n}\n\n.description {\n font-size: 0.875rem;\n line-height: 1.25rem;\n margin: 0;\n}\n"],"mappings":""}
|
|
@@ -1,92 +1 @@
|
|
|
1
|
-
.o4Okuq_trigger {
|
|
2
|
-
border: 0;
|
|
3
|
-
outline: none;
|
|
4
|
-
margin: 0;
|
|
5
|
-
padding: 0;
|
|
6
|
-
}
|
|
7
|
-
|
|
8
|
-
.o4Okuq_trigger:focus-visible {
|
|
9
|
-
outline-style: solid;
|
|
10
|
-
outline-width: var(--stroke-focus-ring);
|
|
11
|
-
outline-color: var(--color-action-info-base);
|
|
12
|
-
outline-offset: var(--spacing-xxs);
|
|
13
|
-
}
|
|
14
|
-
|
|
15
|
-
.o4Okuq_popup {
|
|
16
|
-
box-sizing: border-box;
|
|
17
|
-
z-index: 1;
|
|
18
|
-
max-width: 20rem;
|
|
19
|
-
padding: var(--spacing-xs) var(--spacing-sm);
|
|
20
|
-
border-style: solid;
|
|
21
|
-
border-width: .0625rem;
|
|
22
|
-
border-color: var(--color-border-primary);
|
|
23
|
-
border-radius: var(--spacing-xs);
|
|
24
|
-
background-color: var(--color-surface-base);
|
|
25
|
-
color: var(--color-content-neutral-base);
|
|
26
|
-
transform-origin: var(--transform-origin);
|
|
27
|
-
flex-direction: column;
|
|
28
|
-
transition: opacity .1s ease-out, scale .1s ease-out;
|
|
29
|
-
display: flex;
|
|
30
|
-
position: relative;
|
|
31
|
-
box-shadow: 0 .25rem .75rem #0000001f;
|
|
32
|
-
}
|
|
33
|
-
|
|
34
|
-
.o4Okuq_popup[data-starting-style], .o4Okuq_popup[data-ending-style] {
|
|
35
|
-
opacity: 0;
|
|
36
|
-
scale: .98;
|
|
37
|
-
}
|
|
38
|
-
|
|
39
|
-
.o4Okuq_popup[data-instant] {
|
|
40
|
-
transition: none;
|
|
41
|
-
}
|
|
42
|
-
|
|
43
|
-
.o4Okuq_viewport {
|
|
44
|
-
font-family: var(--typography-typeface-ltr);
|
|
45
|
-
font-size: var(--typography-caption-base-size);
|
|
46
|
-
color: inherit;
|
|
47
|
-
line-height: 1.4;
|
|
48
|
-
}
|
|
49
|
-
|
|
50
|
-
.o4Okuq_arrow {
|
|
51
|
-
width: .75rem;
|
|
52
|
-
height: .375rem;
|
|
53
|
-
display: block;
|
|
54
|
-
position: relative;
|
|
55
|
-
overflow: clip;
|
|
56
|
-
}
|
|
57
|
-
|
|
58
|
-
.o4Okuq_arrow[data-side="top"] {
|
|
59
|
-
bottom: -.375rem;
|
|
60
|
-
rotate: 180deg;
|
|
61
|
-
}
|
|
62
|
-
|
|
63
|
-
.o4Okuq_arrow[data-side="bottom"] {
|
|
64
|
-
top: -.375rem;
|
|
65
|
-
rotate: 0deg;
|
|
66
|
-
}
|
|
67
|
-
|
|
68
|
-
.o4Okuq_arrow[data-side="left"] {
|
|
69
|
-
right: -.5625rem;
|
|
70
|
-
rotate: 90deg;
|
|
71
|
-
}
|
|
72
|
-
|
|
73
|
-
.o4Okuq_arrow[data-side="right"] {
|
|
74
|
-
left: -.5625rem;
|
|
75
|
-
rotate: -90deg;
|
|
76
|
-
}
|
|
77
|
-
|
|
78
|
-
.o4Okuq_arrow:before {
|
|
79
|
-
content: "";
|
|
80
|
-
box-sizing: border-box;
|
|
81
|
-
border-style: solid;
|
|
82
|
-
border-width: .0625rem;
|
|
83
|
-
border-color: var(--color-border-primary);
|
|
84
|
-
background-color: var(--color-surface-base);
|
|
85
|
-
width: .53033rem;
|
|
86
|
-
height: .53033rem;
|
|
87
|
-
display: block;
|
|
88
|
-
position: absolute;
|
|
89
|
-
bottom: 0;
|
|
90
|
-
left: 50%;
|
|
91
|
-
transform: translate(-50%, 50%) rotate(45deg);
|
|
92
|
-
}
|
|
1
|
+
.o4Okuq_trigger{border:0;outline:none;margin:0;padding:0}.o4Okuq_trigger:focus-visible{outline-style:solid;outline-width:var(--stroke-focus-ring);outline-color:var(--color-action-info-base);outline-offset:var(--spacing-xxs)}.o4Okuq_popup{box-sizing:border-box;z-index:1;max-width:20rem;padding:var(--spacing-xs) var(--spacing-sm);border-style:solid;border-width:.0625rem;border-color:var(--color-border-primary);border-radius:var(--spacing-xs);background-color:var(--color-surface-base);color:var(--color-content-neutral-base);transform-origin:var(--transform-origin);flex-direction:column;transition:opacity .1s ease-out,scale .1s ease-out;display:flex;position:relative;box-shadow:0 .25rem .75rem #0000001f}.o4Okuq_popup[data-starting-style],.o4Okuq_popup[data-ending-style]{opacity:0;scale:.98}.o4Okuq_popup[data-instant]{transition:none}.o4Okuq_viewport{font-family:var(--typography-typeface-ltr);font-size:var(--typography-caption-base-size);color:inherit;line-height:1.4}.o4Okuq_arrow{width:.75rem;height:.375rem;display:block;position:relative;overflow:clip}.o4Okuq_arrow[data-side=top]{bottom:-.375rem;rotate:180deg}.o4Okuq_arrow[data-side=bottom]{top:-.375rem;rotate:0deg}.o4Okuq_arrow[data-side=left]{right:-.5625rem;rotate:90deg}.o4Okuq_arrow[data-side=right]{left:-.5625rem;rotate:-90deg}.o4Okuq_arrow:before{content:"";box-sizing:border-box;border-style:solid;border-width:.0625rem;border-color:var(--color-border-primary);background-color:var(--color-surface-base);width:.53033rem;height:.53033rem;display:block;position:absolute;bottom:0;left:50%;transform:translate(-50%,50%)rotate(45deg)}
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import * as React from "react";
|
|
1
|
+
import * as React$1 from "react";
|
|
2
2
|
import { Tooltip } from "@base-ui/react/tooltip";
|
|
3
3
|
|
|
4
4
|
//#region src/atoms/tooltip/tooltip.d.ts
|
|
@@ -7,11 +7,11 @@ type TooltipProps = Omit<Tooltip.Root.Props, "children"> & {
|
|
|
7
7
|
* The trigger element.
|
|
8
8
|
* Should be a single React element that can accept props/refs (e.g. button).
|
|
9
9
|
*/
|
|
10
|
-
children: React.ReactElement;
|
|
10
|
+
children: React$1.ReactElement;
|
|
11
11
|
/**
|
|
12
12
|
* Tooltip content.
|
|
13
13
|
*/
|
|
14
|
-
content: React.ReactNode;
|
|
14
|
+
content: React$1.ReactNode;
|
|
15
15
|
/**
|
|
16
16
|
* Distance from trigger.
|
|
17
17
|
*/
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"tooltip.module.js","names":[],"sources":["../../../src/atoms/tooltip/tooltip.module.css"],"sourcesContent":[".trigger {\n outline: none;\n margin: 0;\n padding: 0;\n border: 0;\n}\n\n.trigger:focus-visible {\n outline-style: solid;\n outline-width: var(--stroke-focus-ring);\n outline-color: var(--color-action-info-base);\n outline-offset: var(--spacing-xxs);\n}\n\n.popup {\n box-sizing: border-box;\n position: relative;\n z-index: 1;\n display: flex;\n flex-direction: column;\n max-width: 20rem;\n padding: var(--spacing-xs) var(--spacing-sm);\n border-style: solid;\n border-width: 0.0625rem;\n border-color: var(--color-border-primary);\n border-radius: var(--spacing-xs);\n background-color: var(--color-surface-base);\n color: var(--color-content-neutral-base);\n box-shadow: 0 0.25rem 0.75rem rgba(0, 0, 0, 0.12);\n transform-origin: var(--transform-origin);\n transition:\n opacity 100ms ease-out,\n scale 100ms ease-out;\n}\n\n.popup[data-starting-style],\n.popup[data-ending-style] {\n opacity: 0;\n scale: 0.98;\n}\n\n.popup[data-instant] {\n transition: none;\n}\n\n.viewport {\n font-family: var(--typography-typeface-ltr);\n font-size: var(--typography-caption-base-size);\n line-height: 1.4;\n color: inherit;\n}\n\n.arrow {\n position: relative;\n display: block;\n width: 0.75rem;\n height: 0.375rem;\n overflow: clip;\n}\n/* TODO: fix hmr */\n/* TODO: fix arrow positions */\n\n.arrow[data-side=\"top\"] {\n bottom: -0.375rem;\n rotate: 180deg;\n}\n\n.arrow[data-side=\"bottom\"] {\n top: -0.375rem;\n rotate: 0deg;\n}\n\n.arrow[data-side=\"left\"] {\n right: -0.5625rem;\n rotate: 90deg;\n}\n\n.arrow[data-side=\"right\"] {\n left: -0.5625rem;\n rotate: -90deg;\n}\n\n.arrow::before {\n content: \"\";\n position: absolute;\n bottom: 0;\n left: 50%;\n box-sizing: border-box;\n display: block;\n width: calc(0.375rem * sqrt(2));\n height: calc(0.375rem * sqrt(2));\n border-style: solid;\n border-width: 0.0625rem;\n border-color: var(--color-border-primary);\n background-color: var(--color-surface-base);\n transform: translate(-50%, 50%) rotate(45deg);\n}\n"],"mappings":"
|
|
1
|
+
{"version":3,"file":"tooltip.module.js","names":[],"sources":["../../../src/atoms/tooltip/tooltip.module.css"],"sourcesContent":[".trigger {\n outline: none;\n margin: 0;\n padding: 0;\n border: 0;\n}\n\n.trigger:focus-visible {\n outline-style: solid;\n outline-width: var(--stroke-focus-ring);\n outline-color: var(--color-action-info-base);\n outline-offset: var(--spacing-xxs);\n}\n\n.popup {\n box-sizing: border-box;\n position: relative;\n z-index: 1;\n display: flex;\n flex-direction: column;\n max-width: 20rem;\n padding: var(--spacing-xs) var(--spacing-sm);\n border-style: solid;\n border-width: 0.0625rem;\n border-color: var(--color-border-primary);\n border-radius: var(--spacing-xs);\n background-color: var(--color-surface-base);\n color: var(--color-content-neutral-base);\n box-shadow: 0 0.25rem 0.75rem rgba(0, 0, 0, 0.12);\n transform-origin: var(--transform-origin);\n transition:\n opacity 100ms ease-out,\n scale 100ms ease-out;\n}\n\n.popup[data-starting-style],\n.popup[data-ending-style] {\n opacity: 0;\n scale: 0.98;\n}\n\n.popup[data-instant] {\n transition: none;\n}\n\n.viewport {\n font-family: var(--typography-typeface-ltr);\n font-size: var(--typography-caption-base-size);\n line-height: 1.4;\n color: inherit;\n}\n\n.arrow {\n position: relative;\n display: block;\n width: 0.75rem;\n height: 0.375rem;\n overflow: clip;\n}\n/* TODO: fix hmr */\n/* TODO: fix arrow positions */\n\n.arrow[data-side=\"top\"] {\n bottom: -0.375rem;\n rotate: 180deg;\n}\n\n.arrow[data-side=\"bottom\"] {\n top: -0.375rem;\n rotate: 0deg;\n}\n\n.arrow[data-side=\"left\"] {\n right: -0.5625rem;\n rotate: 90deg;\n}\n\n.arrow[data-side=\"right\"] {\n left: -0.5625rem;\n rotate: -90deg;\n}\n\n.arrow::before {\n content: \"\";\n position: absolute;\n bottom: 0;\n left: 50%;\n box-sizing: border-box;\n display: block;\n width: calc(0.375rem * sqrt(2));\n height: calc(0.375rem * sqrt(2));\n border-style: solid;\n border-width: 0.0625rem;\n border-color: var(--color-border-primary);\n background-color: var(--color-surface-base);\n transform: translate(-50%, 50%) rotate(45deg);\n}\n"],"mappings":""}
|