@seed-design/css 2.8.3 → 3.0.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/README.md +2 -2
- package/all.css +853 -1409
- package/all.layered.css +853 -1409
- package/all.layered.min.css +1 -1
- package/all.min.css +1 -1
- package/base.css +51 -4
- package/base.layered.css +51 -4
- package/base.layered.min.css +1 -1
- package/base.min.css +1 -1
- package/package.json +8 -11
- package/recipes/accordion.css +3 -0
- package/recipes/accordion.layered.css +4 -0
- package/recipes/action-button.css +19 -19
- package/recipes/action-button.layered.css +19 -19
- package/recipes/alert-dialog.css +101 -0
- package/recipes/alert-dialog.d.ts +24 -0
- package/recipes/alert-dialog.layered.css +114 -0
- package/recipes/alert-dialog.layered.mjs +66 -0
- package/recipes/alert-dialog.mjs +66 -0
- package/recipes/app-bar-main.css +2 -1
- package/recipes/app-bar-main.layered.css +2 -1
- package/recipes/app-bar.css +5 -3
- package/recipes/app-bar.layered.css +5 -3
- package/recipes/app-screen.css +5 -1
- package/recipes/app-screen.layered.css +6 -6
- package/recipes/badge.css +83 -27
- package/recipes/badge.d.ts +1 -1
- package/recipes/badge.layered.css +63 -8
- package/recipes/badge.layered.mjs +8 -0
- package/recipes/badge.mjs +8 -0
- package/recipes/checkmark.css +5 -5
- package/recipes/checkmark.layered.css +5 -5
- package/recipes/chip-tabs.css +8 -8
- package/recipes/chip-tabs.layered.css +8 -8
- package/recipes/chip.css +10 -10
- package/recipes/chip.layered.css +10 -10
- package/recipes/contextual-floating-button.css +8 -8
- package/recipes/contextual-floating-button.layered.css +8 -8
- package/recipes/date-picker.css +29 -16
- package/recipes/date-picker.d.ts +1 -1
- package/recipes/date-picker.layered.css +34 -15
- package/recipes/date-picker.layered.mjs +6 -14
- package/recipes/date-picker.mjs +6 -14
- package/recipes/dialog.css +206 -46
- package/recipes/dialog.d.ts +3 -3
- package/recipes/dialog.layered.css +228 -46
- package/recipes/dialog.layered.mjs +12 -7
- package/recipes/dialog.mjs +12 -7
- package/recipes/floating-action-button.css +2 -2
- package/recipes/floating-action-button.layered.css +2 -2
- package/recipes/help-bubble.css +9 -6
- package/recipes/help-bubble.layered.css +10 -6
- package/recipes/menu-item.css +3 -0
- package/recipes/menu-item.layered.css +4 -0
- package/recipes/menu-sheet-item.css +3 -0
- package/recipes/menu-sheet-item.layered.css +4 -0
- package/recipes/notification-badge.css +1 -1
- package/recipes/notification-badge.layered.css +1 -1
- package/recipes/page-banner.css +32 -29
- package/recipes/page-banner.layered.css +23 -19
- package/recipes/pagination-page-item.css +4 -4
- package/recipes/pagination-page-item.layered.css +4 -4
- package/recipes/{content-dialog.css → popover.css} +77 -104
- package/recipes/popover.d.ts +21 -0
- package/recipes/{content-dialog.layered.css → popover.layered.css} +80 -111
- package/recipes/popover.layered.mjs +60 -0
- package/recipes/popover.mjs +60 -0
- package/recipes/radiomark.css +5 -5
- package/recipes/radiomark.layered.css +5 -5
- package/recipes/segmented-control.css +3 -0
- package/recipes/segmented-control.layered.css +4 -0
- package/recipes/select-box.css +4 -0
- package/recipes/select-box.layered.css +5 -0
- package/recipes/select-item.css +3 -0
- package/recipes/select-item.layered.css +4 -0
- package/recipes/select-trigger.css +3 -0
- package/recipes/select-trigger.layered.css +4 -0
- package/recipes/side-panel.css +0 -33
- package/recipes/side-panel.layered.css +0 -33
- package/recipes/slider-tick.css +1 -1
- package/recipes/slider-tick.layered.css +1 -1
- package/recipes/slider.css +4 -4
- package/recipes/slider.layered.css +4 -4
- package/recipes/snackbar.css +2 -2
- package/recipes/snackbar.layered.css +2 -2
- package/recipes/switchmark.css +2 -2
- package/recipes/switchmark.layered.css +2 -2
- package/recipes/time-picker.css +2 -5
- package/recipes/time-picker.d.ts +1 -1
- package/recipes/time-picker.layered.css +2 -3
- package/recipes/time-picker.layered.mjs +0 -12
- package/recipes/time-picker.mjs +0 -12
- package/recipes/toggle-button.css +4 -4
- package/recipes/toggle-button.layered.css +4 -4
- package/recipes/wheel-picker.css +42 -3
- package/recipes/wheel-picker.d.ts +5 -2
- package/recipes/wheel-picker.layered.css +47 -3
- package/recipes/wheel-picker.layered.mjs +13 -2
- package/recipes/wheel-picker.mjs +13 -2
- package/vars/color/bg.d.ts +8 -4
- package/vars/color/bg.mjs +3 -1
- package/vars/color/fg.d.ts +13 -1
- package/vars/color/fg.mjs +6 -0
- package/vars/component/index.d.ts +1 -104
- package/vars/component/index.mjs +1 -104
- package/recipes/action-chip.css +0 -75
- package/recipes/action-chip.d.ts +0 -26
- package/recipes/action-chip.layered.css +0 -84
- package/recipes/action-chip.layered.mjs +0 -51
- package/recipes/action-chip.mjs +0 -51
- package/recipes/action-sheet-item.css +0 -32
- package/recipes/action-sheet-item.d.ts +0 -22
- package/recipes/action-sheet-item.layered.css +0 -38
- package/recipes/action-sheet-item.layered.mjs +0 -29
- package/recipes/action-sheet-item.mjs +0 -29
- package/recipes/action-sheet.css +0 -125
- package/recipes/action-sheet.d.ts +0 -21
- package/recipes/action-sheet.layered.css +0 -134
- package/recipes/action-sheet.layered.mjs +0 -60
- package/recipes/action-sheet.mjs +0 -60
- package/recipes/content-dialog.d.ts +0 -24
- package/recipes/content-dialog.layered.mjs +0 -71
- package/recipes/content-dialog.mjs +0 -71
- package/recipes/control-chip.css +0 -88
- package/recipes/control-chip.d.ts +0 -26
- package/recipes/control-chip.layered.css +0 -99
- package/recipes/control-chip.layered.mjs +0 -51
- package/recipes/control-chip.mjs +0 -51
- package/recipes/extended-action-sheet-item.css +0 -31
- package/recipes/extended-action-sheet-item.d.ts +0 -22
- package/recipes/extended-action-sheet-item.layered.css +0 -38
- package/recipes/extended-action-sheet-item.layered.mjs +0 -29
- package/recipes/extended-action-sheet-item.mjs +0 -29
- package/recipes/extended-action-sheet.css +0 -123
- package/recipes/extended-action-sheet.d.ts +0 -21
- package/recipes/extended-action-sheet.layered.css +0 -132
- package/recipes/extended-action-sheet.layered.mjs +0 -64
- package/recipes/extended-action-sheet.mjs +0 -64
- package/recipes/extended-fab.css +0 -66
- package/recipes/extended-fab.d.ts +0 -26
- package/recipes/extended-fab.layered.css +0 -79
- package/recipes/extended-fab.layered.mjs +0 -34
- package/recipes/extended-fab.mjs +0 -34
- package/recipes/fab.css +0 -31
- package/recipes/fab.d.ts +0 -19
- package/recipes/fab.layered.css +0 -37
- package/recipes/fab.layered.mjs +0 -22
- package/recipes/fab.mjs +0 -22
- package/recipes/inline-banner.css +0 -180
- package/recipes/inline-banner.d.ts +0 -24
- package/recipes/inline-banner.layered.css +0 -161
- package/recipes/inline-banner.layered.mjs +0 -64
- package/recipes/inline-banner.mjs +0 -64
- package/recipes/link-content.css +0 -41
- package/recipes/link-content.d.ts +0 -26
- package/recipes/link-content.layered.css +0 -48
- package/recipes/link-content.layered.mjs +0 -35
- package/recipes/link-content.mjs +0 -35
- package/recipes/wheel-picker-public.css +0 -124
- package/recipes/wheel-picker-public.d.ts +0 -24
- package/recipes/wheel-picker-public.layered.css +0 -144
- package/recipes/wheel-picker-public.layered.mjs +0 -63
- package/recipes/wheel-picker-public.mjs +0 -63
- package/vars/component/accordion-item.d.ts +0 -132
- package/vars/component/accordion-item.mjs +0 -126
- package/vars/component/accordion.d.ts +0 -22
- package/vars/component/accordion.mjs +0 -16
- package/vars/component/action-button.d.ts +0 -660
- package/vars/component/action-button.mjs +0 -541
- package/vars/component/action-chip.d.ts +0 -132
- package/vars/component/action-chip.mjs +0 -132
- package/vars/component/action-sheet-close-button.d.ts +0 -23
- package/vars/component/action-sheet-close-button.mjs +0 -23
- package/vars/component/action-sheet-item.d.ts +0 -36
- package/vars/component/action-sheet-item.mjs +0 -36
- package/vars/component/action-sheet.d.ts +0 -46
- package/vars/component/action-sheet.mjs +0 -46
- package/vars/component/alert-dialog.d.ts +0 -52
- package/vars/component/alert-dialog.mjs +0 -52
- package/vars/component/attachment-input-dropzone.d.ts +0 -32
- package/vars/component/attachment-input-dropzone.mjs +0 -30
- package/vars/component/attachment-input-item-action-button.d.ts +0 -37
- package/vars/component/attachment-input-item-action-button.mjs +0 -37
- package/vars/component/attachment-input-item-remove-button.d.ts +0 -28
- package/vars/component/attachment-input-item-remove-button.mjs +0 -28
- package/vars/component/attachment-input-item.d.ts +0 -103
- package/vars/component/attachment-input-item.mjs +0 -102
- package/vars/component/attachment-input-trigger.d.ts +0 -46
- package/vars/component/attachment-input-trigger.mjs +0 -46
- package/vars/component/attachment-input.d.ts +0 -14
- package/vars/component/attachment-input.mjs +0 -12
- package/vars/component/avatar-stack.d.ts +0 -110
- package/vars/component/avatar-stack.mjs +0 -110
- package/vars/component/avatar.d.ts +0 -204
- package/vars/component/avatar.mjs +0 -162
- package/vars/component/badge.d.ts +0 -316
- package/vars/component/badge.mjs +0 -236
- package/vars/component/bottom-sheet-close-button.d.ts +0 -21
- package/vars/component/bottom-sheet-close-button.mjs +0 -21
- package/vars/component/bottom-sheet-handle.d.ts +0 -24
- package/vars/component/bottom-sheet-handle.mjs +0 -24
- package/vars/component/bottom-sheet.d.ts +0 -86
- package/vars/component/bottom-sheet.mjs +0 -86
- package/vars/component/callout-close-button.d.ts +0 -81
- package/vars/component/callout-close-button.mjs +0 -63
- package/vars/component/callout.d.ts +0 -232
- package/vars/component/callout.mjs +0 -200
- package/vars/component/checkbox-group.d.ts +0 -9
- package/vars/component/checkbox-group.mjs +0 -9
- package/vars/component/checkbox.d.ts +0 -56
- package/vars/component/checkbox.mjs +0 -53
- package/vars/component/checkmark.d.ts +0 -195
- package/vars/component/checkmark.mjs +0 -165
- package/vars/component/chip-tablist.d.ts +0 -24
- package/vars/component/chip-tablist.mjs +0 -24
- package/vars/component/chip.d.ts +0 -321
- package/vars/component/chip.mjs +0 -303
- package/vars/component/content-placeholder.d.ts +0 -28
- package/vars/component/content-placeholder.mjs +0 -27
- package/vars/component/contextual-floating-button.d.ts +0 -144
- package/vars/component/contextual-floating-button.mjs +0 -132
- package/vars/component/control-chip.d.ts +0 -158
- package/vars/component/control-chip.mjs +0 -158
- package/vars/component/date-picker.d.ts +0 -103
- package/vars/component/date-picker.mjs +0 -103
- package/vars/component/dialog-close-button.d.ts +0 -24
- package/vars/component/dialog-close-button.mjs +0 -24
- package/vars/component/dialog.d.ts +0 -91
- package/vars/component/dialog.mjs +0 -83
- package/vars/component/divider.d.ts +0 -9
- package/vars/component/divider.mjs +0 -9
- package/vars/component/extended-action-sheet-close-button.d.ts +0 -24
- package/vars/component/extended-action-sheet-close-button.mjs +0 -24
- package/vars/component/extended-action-sheet-item.d.ts +0 -46
- package/vars/component/extended-action-sheet-item.mjs +0 -46
- package/vars/component/extended-action-sheet.d.ts +0 -55
- package/vars/component/extended-action-sheet.mjs +0 -55
- package/vars/component/extended-fab.d.ts +0 -88
- package/vars/component/extended-fab.mjs +0 -82
- package/vars/component/fab.d.ts +0 -21
- package/vars/component/fab.mjs +0 -21
- package/vars/component/field-label.d.ts +0 -25
- package/vars/component/field-label.mjs +0 -25
- package/vars/component/field.d.ts +0 -78
- package/vars/component/field.mjs +0 -72
- package/vars/component/floating-action-button.d.ts +0 -60
- package/vars/component/floating-action-button.mjs +0 -54
- package/vars/component/help-bubble.d.ts +0 -55
- package/vars/component/help-bubble.mjs +0 -52
- package/vars/component/identity-placeholder.d.ts +0 -12
- package/vars/component/identity-placeholder.mjs +0 -12
- package/vars/component/image-frame-floater.d.ts +0 -10
- package/vars/component/image-frame-floater.mjs +0 -9
- package/vars/component/image-frame-indicator.d.ts +0 -20
- package/vars/component/image-frame-indicator.mjs +0 -18
- package/vars/component/image-frame-reaction-button.d.ts +0 -60
- package/vars/component/image-frame-reaction-button.mjs +0 -51
- package/vars/component/image-frame.d.ts +0 -27
- package/vars/component/image-frame.mjs +0 -18
- package/vars/component/inline-banner.d.ts +0 -191
- package/vars/component/inline-banner.mjs +0 -191
- package/vars/component/input-button.d.ts +0 -162
- package/vars/component/input-button.mjs +0 -155
- package/vars/component/link-content.d.ts +0 -58
- package/vars/component/link-content.mjs +0 -58
- package/vars/component/list-header.d.ts +0 -29
- package/vars/component/list-header.mjs +0 -29
- package/vars/component/list-item.d.ts +0 -85
- package/vars/component/list-item.mjs +0 -84
- package/vars/component/manner-temp-badge.d.ts +0 -117
- package/vars/component/manner-temp-badge.mjs +0 -117
- package/vars/component/manner-temp.d.ts +0 -88
- package/vars/component/manner-temp.mjs +0 -88
- package/vars/component/menu-item.d.ts +0 -129
- package/vars/component/menu-item.mjs +0 -117
- package/vars/component/menu-sheet-close-button.d.ts +0 -24
- package/vars/component/menu-sheet-close-button.mjs +0 -24
- package/vars/component/menu-sheet-item.d.ts +0 -69
- package/vars/component/menu-sheet-item.mjs +0 -57
- package/vars/component/menu-sheet.d.ts +0 -56
- package/vars/component/menu-sheet.mjs +0 -56
- package/vars/component/menu.d.ts +0 -68
- package/vars/component/menu.mjs +0 -60
- package/vars/component/notification-badge.d.ts +0 -48
- package/vars/component/notification-badge.mjs +0 -42
- package/vars/component/page-banner-close-button.d.ts +0 -133
- package/vars/component/page-banner-close-button.mjs +0 -99
- package/vars/component/page-banner.d.ts +0 -385
- package/vars/component/page-banner.mjs +0 -339
- package/vars/component/pagination-button.d.ts +0 -33
- package/vars/component/pagination-button.mjs +0 -33
- package/vars/component/pagination-page-item.d.ts +0 -54
- package/vars/component/pagination-page-item.mjs +0 -54
- package/vars/component/progress-circle.d.ts +0 -88
- package/vars/component/progress-circle.mjs +0 -67
- package/vars/component/quantity-picker-button.d.ts +0 -78
- package/vars/component/quantity-picker-button.mjs +0 -78
- package/vars/component/quantity-picker.d.ts +0 -80
- package/vars/component/quantity-picker.mjs +0 -80
- package/vars/component/radio-group.d.ts +0 -9
- package/vars/component/radio-group.mjs +0 -9
- package/vars/component/radio.d.ts +0 -56
- package/vars/component/radio.mjs +0 -53
- package/vars/component/radiomark.d.ts +0 -117
- package/vars/component/radiomark.mjs +0 -117
- package/vars/component/reaction-button.d.ts +0 -136
- package/vars/component/reaction-button.mjs +0 -136
- package/vars/component/scroll-fog.d.ts +0 -78
- package/vars/component/scroll-fog.mjs +0 -78
- package/vars/component/segmented-control-indicator.d.ts +0 -24
- package/vars/component/segmented-control-indicator.mjs +0 -24
- package/vars/component/segmented-control-item.d.ts +0 -41
- package/vars/component/segmented-control-item.mjs +0 -41
- package/vars/component/segmented-control.d.ts +0 -11
- package/vars/component/segmented-control.mjs +0 -11
- package/vars/component/select-box-checkmark.d.ts +0 -40
- package/vars/component/select-box-checkmark.mjs +0 -40
- package/vars/component/select-box-group.d.ts +0 -10
- package/vars/component/select-box-group.mjs +0 -10
- package/vars/component/select-box.d.ts +0 -107
- package/vars/component/select-box.mjs +0 -102
- package/vars/component/select-item.d.ts +0 -101
- package/vars/component/select-item.mjs +0 -95
- package/vars/component/select-trigger.d.ts +0 -127
- package/vars/component/select-trigger.mjs +0 -120
- package/vars/component/select.d.ts +0 -62
- package/vars/component/select.mjs +0 -54
- package/vars/component/side-panel-close-button.d.ts +0 -24
- package/vars/component/side-panel-close-button.mjs +0 -24
- package/vars/component/side-panel.d.ts +0 -97
- package/vars/component/side-panel.mjs +0 -85
- package/vars/component/skeleton.d.ts +0 -80
- package/vars/component/skeleton.mjs +0 -62
- package/vars/component/slider-thumb.d.ts +0 -25
- package/vars/component/slider-thumb.mjs +0 -25
- package/vars/component/slider-tick.d.ts +0 -23
- package/vars/component/slider-tick.mjs +0 -23
- package/vars/component/slider.d.ts +0 -81
- package/vars/component/slider.mjs +0 -78
- package/vars/component/snackbar.d.ts +0 -65
- package/vars/component/snackbar.mjs +0 -65
- package/vars/component/switch.d.ts +0 -56
- package/vars/component/switch.mjs +0 -53
- package/vars/component/switchmark.d.ts +0 -114
- package/vars/component/switchmark.mjs +0 -112
- package/vars/component/tab.d.ts +0 -47
- package/vars/component/tab.mjs +0 -47
- package/vars/component/tablist.d.ts +0 -51
- package/vars/component/tablist.mjs +0 -51
- package/vars/component/tag-group-item.d.ts +0 -122
- package/vars/component/tag-group-item.mjs +0 -122
- package/vars/component/tag-group.d.ts +0 -34
- package/vars/component/tag-group.mjs +0 -34
- package/vars/component/text-button.d.ts +0 -23
- package/vars/component/text-button.mjs +0 -23
- package/vars/component/text-input.d.ts +0 -292
- package/vars/component/text-input.mjs +0 -263
- package/vars/component/time-picker.d.ts +0 -27
- package/vars/component/time-picker.mjs +0 -27
- package/vars/component/toggle-button.d.ts +0 -213
- package/vars/component/toggle-button.mjs +0 -207
- package/vars/component/top-navigation-icon-button.d.ts +0 -45
- package/vars/component/top-navigation-icon-button.mjs +0 -45
- package/vars/component/top-navigation-text-button.d.ts +0 -61
- package/vars/component/top-navigation-text-button.mjs +0 -60
- package/vars/component/top-navigation.d.ts +0 -121
- package/vars/component/top-navigation.mjs +0 -112
- package/vars/component/wheel-picker.d.ts +0 -72
- package/vars/component/wheel-picker.mjs +0 -72
|
@@ -1,180 +0,0 @@
|
|
|
1
|
-
.seed-inline-banner__root {
|
|
2
|
-
box-sizing: border-box;
|
|
3
|
-
border: none;
|
|
4
|
-
font-family: inherit;
|
|
5
|
-
-webkit-font-smoothing: antialiased;
|
|
6
|
-
-moz-osx-font-smoothing: grayscale;
|
|
7
|
-
display: flex;
|
|
8
|
-
align-items: flex-start;
|
|
9
|
-
text-align: start;
|
|
10
|
-
width: 100%;
|
|
11
|
-
min-height: var(--seed-dimension-x10);
|
|
12
|
-
padding-inline: var(--seed-dimension-x4);
|
|
13
|
-
padding-block: var(--seed-dimension-x2_5);
|
|
14
|
-
--seed-prefix-icon-size: var(--seed-dimension-x4);
|
|
15
|
-
--seed-prefix-icon-margin-right: var(--seed-dimension-x2);
|
|
16
|
-
--seed-prefix-icon-margin-top: calc((var(--seed-dimension-x10) - var(--seed-dimension-x4)) * 0.5 - var(--seed-dimension-x2_5));
|
|
17
|
-
--seed-suffix-icon-size: var(--seed-dimension-x4);
|
|
18
|
-
--seed-suffix-icon-margin-left: var(--seed-dimension-x4);
|
|
19
|
-
--seed-suffix-icon-align-self: center;
|
|
20
|
-
}
|
|
21
|
-
.seed-inline-banner__root:is(button) {
|
|
22
|
-
cursor: pointer;
|
|
23
|
-
}
|
|
24
|
-
.seed-inline-banner__content {
|
|
25
|
-
margin-inline-end: auto;
|
|
26
|
-
}
|
|
27
|
-
.seed-inline-banner__title {
|
|
28
|
-
flex-shrink: 0;
|
|
29
|
-
font-size: var(--seed-font-size-t4);
|
|
30
|
-
line-height: var(--seed-line-height-t4);
|
|
31
|
-
font-weight: var(--seed-font-weight-bold);
|
|
32
|
-
}
|
|
33
|
-
.seed-inline-banner__title::after {
|
|
34
|
-
content: " ";
|
|
35
|
-
white-space: pre;
|
|
36
|
-
}
|
|
37
|
-
.seed-inline-banner__description {
|
|
38
|
-
font-size: var(--seed-font-size-t4);
|
|
39
|
-
line-height: var(--seed-line-height-t4);
|
|
40
|
-
font-weight: var(--seed-font-weight-medium);
|
|
41
|
-
}
|
|
42
|
-
.seed-inline-banner__link {
|
|
43
|
-
flex-shrink: 0;
|
|
44
|
-
flex-grow: 0;
|
|
45
|
-
font-family: inherit;
|
|
46
|
-
border: none;
|
|
47
|
-
background-color: transparent;
|
|
48
|
-
cursor: pointer;
|
|
49
|
-
display: flex;
|
|
50
|
-
align-items: center;
|
|
51
|
-
margin-block: auto;
|
|
52
|
-
margin-left: var(--seed-dimension-x4);
|
|
53
|
-
font-size: var(--seed-font-size-t2);
|
|
54
|
-
line-height: var(--seed-line-height-t2);
|
|
55
|
-
font-weight: var(--seed-font-weight-regular);
|
|
56
|
-
text-decoration: underline;
|
|
57
|
-
text-underline-offset: 2px;
|
|
58
|
-
}
|
|
59
|
-
.seed-inline-banner__closeButton {
|
|
60
|
-
flex-shrink: 0;
|
|
61
|
-
flex-grow: 0;
|
|
62
|
-
display: flex;
|
|
63
|
-
justify-content: center;
|
|
64
|
-
align-items: center;
|
|
65
|
-
width: var(--seed-dimension-x10);
|
|
66
|
-
height: var(--seed-dimension-x10);
|
|
67
|
-
margin: calc((var(--seed-dimension-x10) - var(--seed-dimension-x4)) * -0.5);
|
|
68
|
-
margin-left: calc((var(--seed-dimension-x10) - var(--seed-dimension-x4)) * -0.5 + var(--seed-dimension-x4));
|
|
69
|
-
--seed-suffix-icon-margin-left: initial;
|
|
70
|
-
align-self: center;
|
|
71
|
-
border: none;
|
|
72
|
-
background-color: transparent;
|
|
73
|
-
padding: 0;
|
|
74
|
-
cursor: pointer;
|
|
75
|
-
}
|
|
76
|
-
.seed-inline-banner__root--variant_neutralWeak {
|
|
77
|
-
background-color: var(--seed-color-bg-neutral-weak);
|
|
78
|
-
color: var(--seed-color-fg-neutral);
|
|
79
|
-
--seed-prefix-icon-color: var(--seed-color-fg-neutral);
|
|
80
|
-
--seed-suffix-icon-color: var(--seed-color-fg-neutral);
|
|
81
|
-
}
|
|
82
|
-
.seed-inline-banner__title--variant_neutralWeak {
|
|
83
|
-
color: var(--seed-color-fg-neutral);
|
|
84
|
-
}
|
|
85
|
-
.seed-inline-banner__description--variant_neutralWeak {
|
|
86
|
-
color: var(--seed-color-fg-neutral);
|
|
87
|
-
}
|
|
88
|
-
.seed-inline-banner__link--variant_neutralWeak {
|
|
89
|
-
color: var(--seed-color-fg-neutral);
|
|
90
|
-
}
|
|
91
|
-
.seed-inline-banner__root--variant_positiveWeak {
|
|
92
|
-
background-color: var(--seed-color-bg-positive-weak);
|
|
93
|
-
color: var(--seed-color-fg-positive-contrast);
|
|
94
|
-
--seed-prefix-icon-color: var(--seed-color-fg-positive-contrast);
|
|
95
|
-
--seed-suffix-icon-color: var(--seed-color-fg-positive-contrast);
|
|
96
|
-
}
|
|
97
|
-
.seed-inline-banner__title--variant_positiveWeak {
|
|
98
|
-
color: var(--seed-color-fg-positive-contrast);
|
|
99
|
-
}
|
|
100
|
-
.seed-inline-banner__description--variant_positiveWeak {
|
|
101
|
-
color: var(--seed-color-fg-positive-contrast);
|
|
102
|
-
}
|
|
103
|
-
.seed-inline-banner__link--variant_positiveWeak {
|
|
104
|
-
color: var(--seed-color-fg-positive-contrast);
|
|
105
|
-
}
|
|
106
|
-
.seed-inline-banner__root--variant_informativeWeak {
|
|
107
|
-
background-color: var(--seed-color-bg-informative-weak);
|
|
108
|
-
color: var(--seed-color-fg-informative-contrast);
|
|
109
|
-
--seed-prefix-icon-color: var(--seed-color-fg-informative-contrast);
|
|
110
|
-
--seed-suffix-icon-color: var(--seed-color-fg-informative-contrast);
|
|
111
|
-
}
|
|
112
|
-
.seed-inline-banner__title--variant_informativeWeak {
|
|
113
|
-
color: var(--seed-color-fg-informative-contrast);
|
|
114
|
-
}
|
|
115
|
-
.seed-inline-banner__description--variant_informativeWeak {
|
|
116
|
-
color: var(--seed-color-fg-informative-contrast);
|
|
117
|
-
}
|
|
118
|
-
.seed-inline-banner__link--variant_informativeWeak {
|
|
119
|
-
color: var(--seed-color-fg-informative-contrast);
|
|
120
|
-
}
|
|
121
|
-
.seed-inline-banner__root--variant_warningWeak {
|
|
122
|
-
background-color: var(--seed-color-bg-warning-weak);
|
|
123
|
-
color: var(--seed-color-fg-warning-contrast);
|
|
124
|
-
--seed-prefix-icon-color: var(--seed-color-fg-warning-contrast);
|
|
125
|
-
--seed-suffix-icon-color: var(--seed-color-fg-warning-contrast);
|
|
126
|
-
}
|
|
127
|
-
.seed-inline-banner__title--variant_warningWeak {
|
|
128
|
-
color: var(--seed-color-fg-warning-contrast);
|
|
129
|
-
}
|
|
130
|
-
.seed-inline-banner__description--variant_warningWeak {
|
|
131
|
-
color: var(--seed-color-fg-warning-contrast);
|
|
132
|
-
}
|
|
133
|
-
.seed-inline-banner__link--variant_warningWeak {
|
|
134
|
-
color: var(--seed-color-fg-warning-contrast);
|
|
135
|
-
}
|
|
136
|
-
.seed-inline-banner__root--variant_warningSolid {
|
|
137
|
-
background-color: var(--seed-color-bg-warning-solid);
|
|
138
|
-
color: var(--seed-color-fg-neutral);
|
|
139
|
-
--seed-prefix-icon-color: var(--seed-color-fg-neutral);
|
|
140
|
-
--seed-suffix-icon-color: var(--seed-color-fg-neutral);
|
|
141
|
-
}
|
|
142
|
-
.seed-inline-banner__title--variant_warningSolid {
|
|
143
|
-
color: var(--seed-color-fg-neutral);
|
|
144
|
-
}
|
|
145
|
-
.seed-inline-banner__description--variant_warningSolid {
|
|
146
|
-
color: var(--seed-color-fg-neutral);
|
|
147
|
-
}
|
|
148
|
-
.seed-inline-banner__link--variant_warningSolid {
|
|
149
|
-
color: var(--seed-color-fg-neutral);
|
|
150
|
-
}
|
|
151
|
-
.seed-inline-banner__root--variant_criticalWeak {
|
|
152
|
-
background-color: var(--seed-color-bg-critical-weak);
|
|
153
|
-
color: var(--seed-color-fg-critical-contrast);
|
|
154
|
-
--seed-prefix-icon-color: var(--seed-color-fg-critical-contrast);
|
|
155
|
-
--seed-suffix-icon-color: var(--seed-color-fg-critical-contrast);
|
|
156
|
-
}
|
|
157
|
-
.seed-inline-banner__title--variant_criticalWeak {
|
|
158
|
-
color: var(--seed-color-fg-critical-contrast);
|
|
159
|
-
}
|
|
160
|
-
.seed-inline-banner__description--variant_criticalWeak {
|
|
161
|
-
color: var(--seed-color-fg-critical-contrast);
|
|
162
|
-
}
|
|
163
|
-
.seed-inline-banner__link--variant_criticalWeak {
|
|
164
|
-
color: var(--seed-color-fg-critical-contrast);
|
|
165
|
-
}
|
|
166
|
-
.seed-inline-banner__root--variant_criticalSolid {
|
|
167
|
-
background-color: var(--seed-color-bg-critical-solid);
|
|
168
|
-
color: var(--seed-color-palette-static-white);
|
|
169
|
-
--seed-prefix-icon-color: var(--seed-color-palette-static-white);
|
|
170
|
-
--seed-suffix-icon-color: var(--seed-color-palette-static-white);
|
|
171
|
-
}
|
|
172
|
-
.seed-inline-banner__title--variant_criticalSolid {
|
|
173
|
-
color: var(--seed-color-palette-static-white);
|
|
174
|
-
}
|
|
175
|
-
.seed-inline-banner__description--variant_criticalSolid {
|
|
176
|
-
color: var(--seed-color-palette-static-white);
|
|
177
|
-
}
|
|
178
|
-
.seed-inline-banner__link--variant_criticalSolid {
|
|
179
|
-
color: var(--seed-color-palette-static-white);
|
|
180
|
-
}
|
|
@@ -1,24 +0,0 @@
|
|
|
1
|
-
declare interface InlineBannerVariant {
|
|
2
|
-
/**
|
|
3
|
-
* @default "neutralWeak"
|
|
4
|
-
*/
|
|
5
|
-
variant: "neutralWeak" | "positiveWeak" | "informativeWeak" | "warningWeak" | "warningSolid" | "criticalWeak" | "criticalSolid";
|
|
6
|
-
}
|
|
7
|
-
|
|
8
|
-
declare type InlineBannerVariantMap = {
|
|
9
|
-
[key in keyof InlineBannerVariant]: Array<InlineBannerVariant[key]>;
|
|
10
|
-
};
|
|
11
|
-
|
|
12
|
-
export declare type InlineBannerVariantProps = Partial<InlineBannerVariant>;
|
|
13
|
-
|
|
14
|
-
export declare type InlineBannerSlotName = "root" | "content" | "title" | "description" | "link" | "closeButton";
|
|
15
|
-
|
|
16
|
-
export declare const inlineBannerVariantMap: InlineBannerVariantMap;
|
|
17
|
-
|
|
18
|
-
export declare const inlineBanner: ((
|
|
19
|
-
props?: InlineBannerVariantProps,
|
|
20
|
-
) => Record<InlineBannerSlotName, string>) & {
|
|
21
|
-
splitVariantProps: <T extends InlineBannerVariantProps>(
|
|
22
|
-
props: T,
|
|
23
|
-
) => [InlineBannerVariantProps, Omit<T, keyof InlineBannerVariantProps>];
|
|
24
|
-
}
|
|
@@ -1,161 +0,0 @@
|
|
|
1
|
-
@layer seed-components {
|
|
2
|
-
.seed-inline-banner__root {
|
|
3
|
-
box-sizing: border-box;
|
|
4
|
-
-webkit-font-smoothing: antialiased;
|
|
5
|
-
-moz-osx-font-smoothing: grayscale;
|
|
6
|
-
text-align: start;
|
|
7
|
-
width: 100%;
|
|
8
|
-
min-height: var(--seed-dimension-x10);
|
|
9
|
-
padding-inline: var(--seed-dimension-x4);
|
|
10
|
-
padding-block: var(--seed-dimension-x2_5);
|
|
11
|
-
--seed-prefix-icon-size: var(--seed-dimension-x4);
|
|
12
|
-
--seed-prefix-icon-margin-right: var(--seed-dimension-x2);
|
|
13
|
-
--seed-prefix-icon-margin-top: calc((var(--seed-dimension-x10) - var(--seed-dimension-x4)) * .5 - var(--seed-dimension-x2_5));
|
|
14
|
-
--seed-suffix-icon-size: var(--seed-dimension-x4);
|
|
15
|
-
--seed-suffix-icon-margin-left: var(--seed-dimension-x4);
|
|
16
|
-
--seed-suffix-icon-align-self: center;
|
|
17
|
-
border: none;
|
|
18
|
-
align-items: flex-start;
|
|
19
|
-
font-family: inherit;
|
|
20
|
-
display: flex;
|
|
21
|
-
}
|
|
22
|
-
|
|
23
|
-
.seed-inline-banner__root:is(button) {
|
|
24
|
-
cursor: pointer;
|
|
25
|
-
}
|
|
26
|
-
|
|
27
|
-
.seed-inline-banner__content {
|
|
28
|
-
margin-inline-end: auto;
|
|
29
|
-
}
|
|
30
|
-
|
|
31
|
-
.seed-inline-banner__title {
|
|
32
|
-
font-size: var(--seed-font-size-t4);
|
|
33
|
-
line-height: var(--seed-line-height-t4);
|
|
34
|
-
font-weight: var(--seed-font-weight-bold);
|
|
35
|
-
flex-shrink: 0;
|
|
36
|
-
}
|
|
37
|
-
|
|
38
|
-
.seed-inline-banner__title:after {
|
|
39
|
-
content: " ";
|
|
40
|
-
white-space: pre;
|
|
41
|
-
}
|
|
42
|
-
|
|
43
|
-
.seed-inline-banner__description {
|
|
44
|
-
font-size: var(--seed-font-size-t4);
|
|
45
|
-
line-height: var(--seed-line-height-t4);
|
|
46
|
-
font-weight: var(--seed-font-weight-medium);
|
|
47
|
-
}
|
|
48
|
-
|
|
49
|
-
.seed-inline-banner__link {
|
|
50
|
-
cursor: pointer;
|
|
51
|
-
margin-block: auto;
|
|
52
|
-
margin-left: var(--seed-dimension-x4);
|
|
53
|
-
font-family: inherit;
|
|
54
|
-
font-size: var(--seed-font-size-t2);
|
|
55
|
-
line-height: var(--seed-line-height-t2);
|
|
56
|
-
font-weight: var(--seed-font-weight-regular);
|
|
57
|
-
text-underline-offset: 2px;
|
|
58
|
-
background-color: #0000;
|
|
59
|
-
border: none;
|
|
60
|
-
flex-grow: 0;
|
|
61
|
-
flex-shrink: 0;
|
|
62
|
-
align-items: center;
|
|
63
|
-
text-decoration: underline;
|
|
64
|
-
display: flex;
|
|
65
|
-
}
|
|
66
|
-
|
|
67
|
-
.seed-inline-banner__closeButton {
|
|
68
|
-
width: var(--seed-dimension-x10);
|
|
69
|
-
height: var(--seed-dimension-x10);
|
|
70
|
-
margin: calc((var(--seed-dimension-x10) - var(--seed-dimension-x4)) * -.5);
|
|
71
|
-
margin-left: calc((var(--seed-dimension-x10) - var(--seed-dimension-x4)) * -.5 + var(--seed-dimension-x4));
|
|
72
|
-
--seed-suffix-icon-margin-left: initial;
|
|
73
|
-
cursor: pointer;
|
|
74
|
-
background-color: #0000;
|
|
75
|
-
border: none;
|
|
76
|
-
flex-grow: 0;
|
|
77
|
-
flex-shrink: 0;
|
|
78
|
-
justify-content: center;
|
|
79
|
-
align-self: center;
|
|
80
|
-
align-items: center;
|
|
81
|
-
padding: 0;
|
|
82
|
-
display: flex;
|
|
83
|
-
}
|
|
84
|
-
|
|
85
|
-
.seed-inline-banner__root--variant_neutralWeak {
|
|
86
|
-
background-color: var(--seed-color-bg-neutral-weak);
|
|
87
|
-
color: var(--seed-color-fg-neutral);
|
|
88
|
-
--seed-prefix-icon-color: var(--seed-color-fg-neutral);
|
|
89
|
-
--seed-suffix-icon-color: var(--seed-color-fg-neutral);
|
|
90
|
-
}
|
|
91
|
-
|
|
92
|
-
.seed-inline-banner__title--variant_neutralWeak, .seed-inline-banner__description--variant_neutralWeak, .seed-inline-banner__link--variant_neutralWeak {
|
|
93
|
-
color: var(--seed-color-fg-neutral);
|
|
94
|
-
}
|
|
95
|
-
|
|
96
|
-
.seed-inline-banner__root--variant_positiveWeak {
|
|
97
|
-
background-color: var(--seed-color-bg-positive-weak);
|
|
98
|
-
color: var(--seed-color-fg-positive-contrast);
|
|
99
|
-
--seed-prefix-icon-color: var(--seed-color-fg-positive-contrast);
|
|
100
|
-
--seed-suffix-icon-color: var(--seed-color-fg-positive-contrast);
|
|
101
|
-
}
|
|
102
|
-
|
|
103
|
-
.seed-inline-banner__title--variant_positiveWeak, .seed-inline-banner__description--variant_positiveWeak, .seed-inline-banner__link--variant_positiveWeak {
|
|
104
|
-
color: var(--seed-color-fg-positive-contrast);
|
|
105
|
-
}
|
|
106
|
-
|
|
107
|
-
.seed-inline-banner__root--variant_informativeWeak {
|
|
108
|
-
background-color: var(--seed-color-bg-informative-weak);
|
|
109
|
-
color: var(--seed-color-fg-informative-contrast);
|
|
110
|
-
--seed-prefix-icon-color: var(--seed-color-fg-informative-contrast);
|
|
111
|
-
--seed-suffix-icon-color: var(--seed-color-fg-informative-contrast);
|
|
112
|
-
}
|
|
113
|
-
|
|
114
|
-
.seed-inline-banner__title--variant_informativeWeak, .seed-inline-banner__description--variant_informativeWeak, .seed-inline-banner__link--variant_informativeWeak {
|
|
115
|
-
color: var(--seed-color-fg-informative-contrast);
|
|
116
|
-
}
|
|
117
|
-
|
|
118
|
-
.seed-inline-banner__root--variant_warningWeak {
|
|
119
|
-
background-color: var(--seed-color-bg-warning-weak);
|
|
120
|
-
color: var(--seed-color-fg-warning-contrast);
|
|
121
|
-
--seed-prefix-icon-color: var(--seed-color-fg-warning-contrast);
|
|
122
|
-
--seed-suffix-icon-color: var(--seed-color-fg-warning-contrast);
|
|
123
|
-
}
|
|
124
|
-
|
|
125
|
-
.seed-inline-banner__title--variant_warningWeak, .seed-inline-banner__description--variant_warningWeak, .seed-inline-banner__link--variant_warningWeak {
|
|
126
|
-
color: var(--seed-color-fg-warning-contrast);
|
|
127
|
-
}
|
|
128
|
-
|
|
129
|
-
.seed-inline-banner__root--variant_warningSolid {
|
|
130
|
-
background-color: var(--seed-color-bg-warning-solid);
|
|
131
|
-
color: var(--seed-color-fg-neutral);
|
|
132
|
-
--seed-prefix-icon-color: var(--seed-color-fg-neutral);
|
|
133
|
-
--seed-suffix-icon-color: var(--seed-color-fg-neutral);
|
|
134
|
-
}
|
|
135
|
-
|
|
136
|
-
.seed-inline-banner__title--variant_warningSolid, .seed-inline-banner__description--variant_warningSolid, .seed-inline-banner__link--variant_warningSolid {
|
|
137
|
-
color: var(--seed-color-fg-neutral);
|
|
138
|
-
}
|
|
139
|
-
|
|
140
|
-
.seed-inline-banner__root--variant_criticalWeak {
|
|
141
|
-
background-color: var(--seed-color-bg-critical-weak);
|
|
142
|
-
color: var(--seed-color-fg-critical-contrast);
|
|
143
|
-
--seed-prefix-icon-color: var(--seed-color-fg-critical-contrast);
|
|
144
|
-
--seed-suffix-icon-color: var(--seed-color-fg-critical-contrast);
|
|
145
|
-
}
|
|
146
|
-
|
|
147
|
-
.seed-inline-banner__title--variant_criticalWeak, .seed-inline-banner__description--variant_criticalWeak, .seed-inline-banner__link--variant_criticalWeak {
|
|
148
|
-
color: var(--seed-color-fg-critical-contrast);
|
|
149
|
-
}
|
|
150
|
-
|
|
151
|
-
.seed-inline-banner__root--variant_criticalSolid {
|
|
152
|
-
background-color: var(--seed-color-bg-critical-solid);
|
|
153
|
-
color: var(--seed-color-palette-static-white);
|
|
154
|
-
--seed-prefix-icon-color: var(--seed-color-palette-static-white);
|
|
155
|
-
--seed-suffix-icon-color: var(--seed-color-palette-static-white);
|
|
156
|
-
}
|
|
157
|
-
|
|
158
|
-
.seed-inline-banner__title--variant_criticalSolid, .seed-inline-banner__description--variant_criticalSolid, .seed-inline-banner__link--variant_criticalSolid {
|
|
159
|
-
color: var(--seed-color-palette-static-white);
|
|
160
|
-
}
|
|
161
|
-
}
|
|
@@ -1,64 +0,0 @@
|
|
|
1
|
-
import './inline-banner.layered.css';
|
|
2
|
-
import { createClassName, mergeVariants, splitVariantProps } from "./shared.mjs";
|
|
3
|
-
|
|
4
|
-
const inlineBannerSlotNames = [
|
|
5
|
-
[
|
|
6
|
-
"root",
|
|
7
|
-
"seed-inline-banner__root"
|
|
8
|
-
],
|
|
9
|
-
[
|
|
10
|
-
"content",
|
|
11
|
-
"seed-inline-banner__content"
|
|
12
|
-
],
|
|
13
|
-
[
|
|
14
|
-
"title",
|
|
15
|
-
"seed-inline-banner__title"
|
|
16
|
-
],
|
|
17
|
-
[
|
|
18
|
-
"description",
|
|
19
|
-
"seed-inline-banner__description"
|
|
20
|
-
],
|
|
21
|
-
[
|
|
22
|
-
"link",
|
|
23
|
-
"seed-inline-banner__link"
|
|
24
|
-
],
|
|
25
|
-
[
|
|
26
|
-
"closeButton",
|
|
27
|
-
"seed-inline-banner__closeButton"
|
|
28
|
-
]
|
|
29
|
-
];
|
|
30
|
-
|
|
31
|
-
const defaultVariant = {
|
|
32
|
-
"variant": "neutralWeak"
|
|
33
|
-
};
|
|
34
|
-
|
|
35
|
-
const compoundVariants = [];
|
|
36
|
-
|
|
37
|
-
export const inlineBannerVariantMap = {
|
|
38
|
-
"variant": [
|
|
39
|
-
"neutralWeak",
|
|
40
|
-
"positiveWeak",
|
|
41
|
-
"informativeWeak",
|
|
42
|
-
"warningWeak",
|
|
43
|
-
"warningSolid",
|
|
44
|
-
"criticalWeak",
|
|
45
|
-
"criticalSolid"
|
|
46
|
-
]
|
|
47
|
-
};
|
|
48
|
-
|
|
49
|
-
export const inlineBannerVariantKeys = Object.keys(inlineBannerVariantMap);
|
|
50
|
-
|
|
51
|
-
export function inlineBanner(props) {
|
|
52
|
-
return Object.fromEntries(
|
|
53
|
-
inlineBannerSlotNames.map(([slot, className]) => {
|
|
54
|
-
return [
|
|
55
|
-
slot,
|
|
56
|
-
createClassName(className, mergeVariants(defaultVariant, props), compoundVariants),
|
|
57
|
-
];
|
|
58
|
-
}),
|
|
59
|
-
);
|
|
60
|
-
}
|
|
61
|
-
|
|
62
|
-
Object.assign(inlineBanner, { splitVariantProps: (props) => splitVariantProps(props, inlineBannerVariantMap) });
|
|
63
|
-
|
|
64
|
-
// @recipe(seed): inline-banner
|
|
@@ -1,64 +0,0 @@
|
|
|
1
|
-
import './inline-banner.css';
|
|
2
|
-
import { createClassName, mergeVariants, splitVariantProps } from "./shared.mjs";
|
|
3
|
-
|
|
4
|
-
const inlineBannerSlotNames = [
|
|
5
|
-
[
|
|
6
|
-
"root",
|
|
7
|
-
"seed-inline-banner__root"
|
|
8
|
-
],
|
|
9
|
-
[
|
|
10
|
-
"content",
|
|
11
|
-
"seed-inline-banner__content"
|
|
12
|
-
],
|
|
13
|
-
[
|
|
14
|
-
"title",
|
|
15
|
-
"seed-inline-banner__title"
|
|
16
|
-
],
|
|
17
|
-
[
|
|
18
|
-
"description",
|
|
19
|
-
"seed-inline-banner__description"
|
|
20
|
-
],
|
|
21
|
-
[
|
|
22
|
-
"link",
|
|
23
|
-
"seed-inline-banner__link"
|
|
24
|
-
],
|
|
25
|
-
[
|
|
26
|
-
"closeButton",
|
|
27
|
-
"seed-inline-banner__closeButton"
|
|
28
|
-
]
|
|
29
|
-
];
|
|
30
|
-
|
|
31
|
-
const defaultVariant = {
|
|
32
|
-
"variant": "neutralWeak"
|
|
33
|
-
};
|
|
34
|
-
|
|
35
|
-
const compoundVariants = [];
|
|
36
|
-
|
|
37
|
-
export const inlineBannerVariantMap = {
|
|
38
|
-
"variant": [
|
|
39
|
-
"neutralWeak",
|
|
40
|
-
"positiveWeak",
|
|
41
|
-
"informativeWeak",
|
|
42
|
-
"warningWeak",
|
|
43
|
-
"warningSolid",
|
|
44
|
-
"criticalWeak",
|
|
45
|
-
"criticalSolid"
|
|
46
|
-
]
|
|
47
|
-
};
|
|
48
|
-
|
|
49
|
-
export const inlineBannerVariantKeys = Object.keys(inlineBannerVariantMap);
|
|
50
|
-
|
|
51
|
-
export function inlineBanner(props) {
|
|
52
|
-
return Object.fromEntries(
|
|
53
|
-
inlineBannerSlotNames.map(([slot, className]) => {
|
|
54
|
-
return [
|
|
55
|
-
slot,
|
|
56
|
-
createClassName(className, mergeVariants(defaultVariant, props), compoundVariants),
|
|
57
|
-
];
|
|
58
|
-
}),
|
|
59
|
-
);
|
|
60
|
-
}
|
|
61
|
-
|
|
62
|
-
Object.assign(inlineBanner, { splitVariantProps: (props) => splitVariantProps(props, inlineBannerVariantMap) });
|
|
63
|
-
|
|
64
|
-
// @recipe(seed): inline-banner
|
package/recipes/link-content.css
DELETED
|
@@ -1,41 +0,0 @@
|
|
|
1
|
-
.seed-link-content {
|
|
2
|
-
display: inline-flex;
|
|
3
|
-
align-items: center;
|
|
4
|
-
cursor: pointer;
|
|
5
|
-
background-color: transparent;
|
|
6
|
-
box-sizing: border-box;
|
|
7
|
-
border: none;
|
|
8
|
-
outline: none;
|
|
9
|
-
-webkit-font-smoothing: antialiased;
|
|
10
|
-
-moz-osx-font-smoothing: grayscale;
|
|
11
|
-
font-family: inherit;
|
|
12
|
-
text-align: center;
|
|
13
|
-
padding-inline: 0;
|
|
14
|
-
padding-block: 0;
|
|
15
|
-
color: var(--seed-box-color);
|
|
16
|
-
--seed-suffix-icon-color: var(--seed-box-color)
|
|
17
|
-
}
|
|
18
|
-
.seed-link-content--weight_bold {
|
|
19
|
-
font-weight: var(--seed-font-weight-bold)
|
|
20
|
-
}
|
|
21
|
-
.seed-link-content--weight_regular {
|
|
22
|
-
font-weight: var(--seed-font-weight-regular)
|
|
23
|
-
}
|
|
24
|
-
.seed-link-content--size_t6 {
|
|
25
|
-
font-size: var(--seed-font-size-t6);
|
|
26
|
-
line-height: var(--seed-line-height-t6);
|
|
27
|
-
gap: var(--seed-dimension-x0_5);
|
|
28
|
-
--seed-suffix-icon-size: var(--seed-dimension-x4)
|
|
29
|
-
}
|
|
30
|
-
.seed-link-content--size_t5 {
|
|
31
|
-
font-size: var(--seed-font-size-t5);
|
|
32
|
-
line-height: var(--seed-line-height-t5);
|
|
33
|
-
gap: var(--seed-dimension-x0_5);
|
|
34
|
-
--seed-suffix-icon-size: var(--seed-dimension-x3_5)
|
|
35
|
-
}
|
|
36
|
-
.seed-link-content--size_t4 {
|
|
37
|
-
font-size: var(--seed-font-size-t4);
|
|
38
|
-
line-height: var(--seed-line-height-t4);
|
|
39
|
-
gap: var(--seed-dimension-x0_5);
|
|
40
|
-
--seed-suffix-icon-size: var(--seed-dimension-x3)
|
|
41
|
-
}
|
|
@@ -1,26 +0,0 @@
|
|
|
1
|
-
declare interface LinkContentVariant {
|
|
2
|
-
/**
|
|
3
|
-
* @default "regular"
|
|
4
|
-
*/
|
|
5
|
-
weight: "bold" | "regular";
|
|
6
|
-
/**
|
|
7
|
-
* @default "t4"
|
|
8
|
-
*/
|
|
9
|
-
size: "t6" | "t5" | "t4";
|
|
10
|
-
}
|
|
11
|
-
|
|
12
|
-
declare type LinkContentVariantMap = {
|
|
13
|
-
[key in keyof LinkContentVariant]: Array<LinkContentVariant[key]>;
|
|
14
|
-
};
|
|
15
|
-
|
|
16
|
-
export declare type LinkContentVariantProps = Partial<LinkContentVariant>;
|
|
17
|
-
|
|
18
|
-
export declare const linkContentVariantMap: LinkContentVariantMap;
|
|
19
|
-
|
|
20
|
-
export declare const linkContent: ((
|
|
21
|
-
props?: LinkContentVariantProps,
|
|
22
|
-
) => string) & {
|
|
23
|
-
splitVariantProps: <T extends LinkContentVariantProps>(
|
|
24
|
-
props: T,
|
|
25
|
-
) => [LinkContentVariantProps, Omit<T, keyof LinkContentVariantProps>];
|
|
26
|
-
}
|
|
@@ -1,48 +0,0 @@
|
|
|
1
|
-
@layer seed-components {
|
|
2
|
-
.seed-link-content {
|
|
3
|
-
cursor: pointer;
|
|
4
|
-
box-sizing: border-box;
|
|
5
|
-
-webkit-font-smoothing: antialiased;
|
|
6
|
-
-moz-osx-font-smoothing: grayscale;
|
|
7
|
-
text-align: center;
|
|
8
|
-
color: var(--seed-box-color);
|
|
9
|
-
--seed-suffix-icon-color: var(--seed-box-color);
|
|
10
|
-
background-color: #0000;
|
|
11
|
-
border: none;
|
|
12
|
-
outline: none;
|
|
13
|
-
align-items: center;
|
|
14
|
-
padding-block: 0;
|
|
15
|
-
padding-inline: 0;
|
|
16
|
-
font-family: inherit;
|
|
17
|
-
display: inline-flex;
|
|
18
|
-
}
|
|
19
|
-
|
|
20
|
-
.seed-link-content--weight_bold {
|
|
21
|
-
font-weight: var(--seed-font-weight-bold);
|
|
22
|
-
}
|
|
23
|
-
|
|
24
|
-
.seed-link-content--weight_regular {
|
|
25
|
-
font-weight: var(--seed-font-weight-regular);
|
|
26
|
-
}
|
|
27
|
-
|
|
28
|
-
.seed-link-content--size_t6 {
|
|
29
|
-
font-size: var(--seed-font-size-t6);
|
|
30
|
-
line-height: var(--seed-line-height-t6);
|
|
31
|
-
gap: var(--seed-dimension-x0_5);
|
|
32
|
-
--seed-suffix-icon-size: var(--seed-dimension-x4);
|
|
33
|
-
}
|
|
34
|
-
|
|
35
|
-
.seed-link-content--size_t5 {
|
|
36
|
-
font-size: var(--seed-font-size-t5);
|
|
37
|
-
line-height: var(--seed-line-height-t5);
|
|
38
|
-
gap: var(--seed-dimension-x0_5);
|
|
39
|
-
--seed-suffix-icon-size: var(--seed-dimension-x3_5);
|
|
40
|
-
}
|
|
41
|
-
|
|
42
|
-
.seed-link-content--size_t4 {
|
|
43
|
-
font-size: var(--seed-font-size-t4);
|
|
44
|
-
line-height: var(--seed-line-height-t4);
|
|
45
|
-
gap: var(--seed-dimension-x0_5);
|
|
46
|
-
--seed-suffix-icon-size: var(--seed-dimension-x3);
|
|
47
|
-
}
|
|
48
|
-
}
|
|
@@ -1,35 +0,0 @@
|
|
|
1
|
-
import './link-content.layered.css';
|
|
2
|
-
import { createClassName, mergeVariants, splitVariantProps } from "./shared.mjs";
|
|
3
|
-
|
|
4
|
-
const defaultVariant = {
|
|
5
|
-
"size": "t4",
|
|
6
|
-
"weight": "regular"
|
|
7
|
-
};
|
|
8
|
-
|
|
9
|
-
const compoundVariants = [];
|
|
10
|
-
|
|
11
|
-
export const linkContentVariantMap = {
|
|
12
|
-
"weight": [
|
|
13
|
-
"bold",
|
|
14
|
-
"regular"
|
|
15
|
-
],
|
|
16
|
-
"size": [
|
|
17
|
-
"t6",
|
|
18
|
-
"t5",
|
|
19
|
-
"t4"
|
|
20
|
-
]
|
|
21
|
-
};
|
|
22
|
-
|
|
23
|
-
export const linkContentVariantKeys = Object.keys(linkContentVariantMap);
|
|
24
|
-
|
|
25
|
-
export function linkContent(props) {
|
|
26
|
-
return createClassName(
|
|
27
|
-
"seed-link-content",
|
|
28
|
-
mergeVariants(defaultVariant, props),
|
|
29
|
-
compoundVariants,
|
|
30
|
-
);
|
|
31
|
-
}
|
|
32
|
-
|
|
33
|
-
Object.assign(linkContent, { splitVariantProps: (props) => splitVariantProps(props, linkContentVariantMap) });
|
|
34
|
-
|
|
35
|
-
// @recipe(seed): link-content
|
package/recipes/link-content.mjs
DELETED
|
@@ -1,35 +0,0 @@
|
|
|
1
|
-
import './link-content.css';
|
|
2
|
-
import { createClassName, mergeVariants, splitVariantProps } from "./shared.mjs";
|
|
3
|
-
|
|
4
|
-
const defaultVariant = {
|
|
5
|
-
"size": "t4",
|
|
6
|
-
"weight": "regular"
|
|
7
|
-
};
|
|
8
|
-
|
|
9
|
-
const compoundVariants = [];
|
|
10
|
-
|
|
11
|
-
export const linkContentVariantMap = {
|
|
12
|
-
"weight": [
|
|
13
|
-
"bold",
|
|
14
|
-
"regular"
|
|
15
|
-
],
|
|
16
|
-
"size": [
|
|
17
|
-
"t6",
|
|
18
|
-
"t5",
|
|
19
|
-
"t4"
|
|
20
|
-
]
|
|
21
|
-
};
|
|
22
|
-
|
|
23
|
-
export const linkContentVariantKeys = Object.keys(linkContentVariantMap);
|
|
24
|
-
|
|
25
|
-
export function linkContent(props) {
|
|
26
|
-
return createClassName(
|
|
27
|
-
"seed-link-content",
|
|
28
|
-
mergeVariants(defaultVariant, props),
|
|
29
|
-
compoundVariants,
|
|
30
|
-
);
|
|
31
|
-
}
|
|
32
|
-
|
|
33
|
-
Object.assign(linkContent, { splitVariantProps: (props) => splitVariantProps(props, linkContentVariantMap) });
|
|
34
|
-
|
|
35
|
-
// @recipe(seed): link-content
|