baseline-foundry 0.1.3 → 0.1.4

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (43) hide show
  1. package/README.md +568 -552
  2. package/config/experiments/ibm-plex-engine-smoke.json +115 -115
  3. package/config/experiments/ubuntu-engine-smoke.json +115 -115
  4. package/config/foundation-theme.json +110 -110
  5. package/config/tiers/app.json +116 -116
  6. package/config/tiers/documentation.json +116 -116
  7. package/config/tiers/editorial.json +116 -116
  8. package/config/tiers/os.json +116 -116
  9. package/dist/baseline-grid-overlay.js +43 -43
  10. package/dist/css-app-tier.js +73 -73
  11. package/dist/css-components/article-pagination.js +140 -140
  12. package/dist/css-components/button-actions.js +161 -161
  13. package/dist/css-components/cards-options.js +176 -176
  14. package/dist/css-components/chip-badge-status.js +158 -158
  15. package/dist/css-components/content-card.js +490 -490
  16. package/dist/css-components/control-row.js +14 -14
  17. package/dist/css-components/cta-figure-aspect.js +120 -120
  18. package/dist/css-components/document-navigation.js +390 -390
  19. package/dist/css-components/editorial-content.js +42 -42
  20. package/dist/css-components/icon.js +72 -72
  21. package/dist/css-components/interactive-feedback.js +217 -217
  22. package/dist/css-components/interactive-tables.js +155 -155
  23. package/dist/css-components/legacy-navigation.d.ts +9 -0
  24. package/dist/css-components/legacy-navigation.js +763 -0
  25. package/dist/css-components/linked-logo-site-layout.js +177 -177
  26. package/dist/css-components/list-tree.js +94 -94
  27. package/dist/css-components/logo-media.js +201 -201
  28. package/dist/css-components/navigation-layout.js +144 -144
  29. package/dist/css-components/panel.js +144 -144
  30. package/dist/css-components/search-box-and-filter.js +263 -263
  31. package/dist/css-components/sites-editorial-ports.js +243 -243
  32. package/dist/css-components/sites-foundation.js +146 -146
  33. package/dist/css-components/sites-rich-lists.js +344 -344
  34. package/dist/css-components/static-content-ports.js +182 -182
  35. package/dist/css-components/tab-section.js +82 -82
  36. package/dist/css-components/table.js +75 -75
  37. package/dist/css-components/tabs-choice-breadcrumbs.js +303 -303
  38. package/dist/css-components/tiered-list-equal-height-row.js +271 -271
  39. package/dist/css-components.js +1791 -2542
  40. package/dist/css-grid.js +172 -172
  41. package/dist/css.js +240 -240
  42. package/docs/publishing.md +30 -13
  43. package/package.json +119 -108
package/dist/css-components/chip-badge-status.js CHANGED
@@ -1,162 +1,162 @@
1
1
  export function chipBadgeStatusCss(options) {
2
2
  const { bodyCaseTypeStyles, bodyLineHeight, bodySelectedStartNudge, h5SelectedEndNudge, h5SelectedStartNudge, bodyTypeStyles, } = options;
3
- return `:where(.bf-theme) :where(.bf-chip, .bf-chip.is-positive, .bf-chip.is-caution, .bf-chip.is-negative, .bf-chip.is-information) {
4
- --bf-ui-chip-border: var(--bf-color-border-neutral);
5
- --bf-ui-chip-border-hover: var(--bf-color-border-neutral);
6
- --bf-ui-chip-border-active: var(--bf-color-border-neutral);
7
- --bf-ui-chip-background: var(--bf-color-background-neutral-default);
8
- --bf-ui-chip-background-hover: var(--bf-color-background-neutral-hover);
9
- --bf-ui-chip-background-active: var(--bf-color-background-neutral-active);
10
- ${bodyTypeStyles} align-items: baseline;
11
- background-color: var(--bf-ui-chip-background);
12
- border: var(--bf-border-width) solid var(--bf-ui-chip-border);
13
- border-radius: 1rem;
14
- color: var(--bf-color-text-default);
15
- display: inline-flex;
16
- gap: 0;
17
- inline-size: fit-content;
18
- justify-self: start;
19
- margin: 0 var(--bf-ui-chip-padding-inline) var(--bf-field-gap) 0;
20
- max-inline-size: 100%;
21
- min-block-size: var(--bf-ui-chip-block-size);
22
- padding-block: var(--bf-ui-chip-padding-block);
23
- padding-inline: var(--bf-ui-chip-padding-inline);
24
- position: relative;
25
- text-decoration: none;
26
- user-select: none;
27
- vertical-align: calc(var(--bf-border-width) - ${bodySelectedStartNudge});
28
- white-space: nowrap;
29
- }
30
-
31
- :where(.bf-theme) :where(.bf-chip.is-positive) {
32
- --bf-ui-chip-border: var(--bf-color-border-positive);
33
- --bf-ui-chip-border-hover: var(--bf-color-border-positive);
34
- --bf-ui-chip-border-active: var(--bf-color-border-positive);
35
- --bf-ui-chip-background: var(--bf-color-background-positive-default);
36
- --bf-ui-chip-background-hover: var(--bf-color-background-positive-hover);
37
- --bf-ui-chip-background-active: var(--bf-color-background-positive-active);
38
- }
39
-
40
- :where(.bf-theme) :where(.bf-chip.is-caution) {
41
- --bf-ui-chip-border: var(--bf-color-border-caution);
42
- --bf-ui-chip-border-hover: var(--bf-color-border-caution);
43
- --bf-ui-chip-border-active: var(--bf-color-border-caution);
44
- --bf-ui-chip-background: var(--bf-color-background-caution-default);
45
- --bf-ui-chip-background-hover: var(--bf-color-background-caution-hover);
46
- --bf-ui-chip-background-active: var(--bf-color-background-caution-active);
47
- }
48
-
49
- :where(.bf-theme) :where(.bf-chip.is-negative) {
50
- --bf-ui-chip-border: var(--bf-color-border-negative);
51
- --bf-ui-chip-border-hover: var(--bf-color-border-negative);
52
- --bf-ui-chip-border-active: var(--bf-color-border-negative);
53
- --bf-ui-chip-background: var(--bf-color-background-negative-default);
54
- --bf-ui-chip-background-hover: var(--bf-color-background-negative-hover);
55
- --bf-ui-chip-background-active: var(--bf-color-background-negative-active);
56
- }
57
-
58
- :where(.bf-theme) :where(.bf-chip.is-information) {
59
- --bf-ui-chip-border: var(--bf-color-border-information);
60
- --bf-ui-chip-border-hover: var(--bf-color-border-information);
61
- --bf-ui-chip-border-active: var(--bf-color-border-information);
62
- --bf-ui-chip-background: var(--bf-color-background-information-default);
63
- --bf-ui-chip-background-hover: var(--bf-color-background-information-hover);
64
- --bf-ui-chip-background-active: var(--bf-color-background-information-active);
65
- }
66
-
67
- :where(.bf-theme) :where(.bf-chip, .bf-chip.is-positive, .bf-chip.is-caution, .bf-chip.is-negative, .bf-chip.is-information):hover {
68
- background-color: var(--bf-ui-chip-background-hover);
69
- border-color: var(--bf-ui-chip-border-hover);
70
- text-decoration: none;
71
- }
72
-
73
- :where(.bf-theme) :where(.bf-chip, .bf-chip.is-positive, .bf-chip.is-caution, .bf-chip.is-negative, .bf-chip.is-information):is(:active, [aria-pressed='true'], .is-selected) {
74
- background-color: var(--bf-ui-chip-background-active);
75
- border-color: var(--bf-ui-chip-border-active);
76
- }
77
-
78
- :where(.bf-theme) :where(.bf-chip-lead, .bf-chip-value) {
79
- ${bodyTypeStyles} color: var(--bf-color-text-default);
80
- display: inline;
81
- margin: 0;
82
- min-inline-size: 0;
83
- overflow: hidden;
84
- padding: 0;
85
- text-overflow: ellipsis;
86
- vertical-align: baseline;
87
- }
88
-
89
- :where(.bf-theme) :where(.bf-chip-lead) {
90
- ${bodyCaseTypeStyles} color: var(--bf-color-text-muted);
91
- }
92
-
93
- :where(.bf-theme) :where(.bf-chip-lead + .bf-chip-value)::before {
94
- ${bodyTypeStyles} color: var(--bf-color-text-muted);
95
- color: var(--bf-color-text-muted);
96
- content: ": ";
97
- }
98
-
99
- :where(.bf-theme) :where(.bf-badge, .bf-badge.is-negative) {
100
- ${bodyTypeStyles} align-items: center;
101
- background-color: var(--bf-color-text-default);
102
- border-radius: 1rem;
103
- box-sizing: content-box;
104
- color: var(--bf-color-background-default);
105
- display: inline-block;
106
- margin: 0;
107
- max-inline-size: 4ch;
108
- min-width: calc(${bodyLineHeight} - (var(--bf-ui-badge-padding-inline) * 2));
109
- overflow: hidden;
110
- padding-block: 0;
111
- padding-inline: var(--bf-ui-badge-padding-inline);
112
- text-align: center;
113
- text-indent: 0;
114
- }
115
-
116
- :where(.bf-theme) :where(.bf-badge.is-negative) {
117
- background-color: var(--bf-color-button-negative-default);
118
- color: var(--bf-color-button-negative-text);
119
- }
120
-
121
- :where(.bf-theme) :where(.bf-chip, .bf-chip.is-positive, .bf-chip.is-caution, .bf-chip.is-negative, .bf-chip.is-information) :where(.bf-badge, .bf-badge.is-negative) {
122
- align-self: center;
123
- margin-inline-end: var(--bf-ui-badge-overhang);
124
- margin-inline-start: var(--bf-ui-chip-padding-inline);
125
- }
126
-
127
- :where(.bf-theme) :where(.bf-status-label, .bf-status-label.is-positive, .bf-status-label.is-caution, .bf-status-label.is-information, .bf-status-label.is-negative) {
128
- --bf-ui-status-background: color-mix(in srgb, var(--bf-color-background-alt) 70%, black);
129
- --bf-ui-status-color: var(--bf-color-button-positive-text);
130
- background-color: var(--bf-ui-status-background);
131
- color: var(--bf-ui-status-color);
132
- display: inline-block;
133
- ${bodyTypeStyles} margin: 0;
134
- padding-block-end: ${h5SelectedEndNudge};
135
- padding-block-start: ${h5SelectedStartNudge};
136
- padding-inline: var(--bf-ui-chip-padding-inline);
137
- text-align: center;
138
- text-decoration: none;
139
- white-space: nowrap;
140
- }
141
-
142
- :where(.bf-theme) :where(.bf-status-label.is-positive) {
143
- --bf-ui-status-background: var(--bf-color-border-positive);
144
- --bf-ui-status-color: var(--bf-color-button-positive-text);
145
- }
146
-
147
- :where(.bf-theme) :where(.bf-status-label.is-caution) {
148
- --bf-ui-status-background: var(--bf-color-border-caution);
149
- --bf-ui-status-color: #111111;
150
- }
151
-
152
- :where(.bf-theme) :where(.bf-status-label.is-information) {
153
- --bf-ui-status-background: var(--bf-color-border-information);
154
- --bf-ui-status-color: var(--bf-color-button-positive-text);
155
- }
156
-
157
- :where(.bf-theme) :where(.bf-status-label.is-negative) {
158
- --bf-ui-status-background: var(--bf-color-border-negative);
159
- --bf-ui-status-color: var(--bf-color-button-negative-text);
160
- }
3
+ return `:where(.bf-theme) :where(.bf-chip, .bf-chip.is-positive, .bf-chip.is-caution, .bf-chip.is-negative, .bf-chip.is-information) {
4
+ --bf-ui-chip-border: var(--bf-color-border-neutral);
5
+ --bf-ui-chip-border-hover: var(--bf-color-border-neutral);
6
+ --bf-ui-chip-border-active: var(--bf-color-border-neutral);
7
+ --bf-ui-chip-background: var(--bf-color-background-neutral-default);
8
+ --bf-ui-chip-background-hover: var(--bf-color-background-neutral-hover);
9
+ --bf-ui-chip-background-active: var(--bf-color-background-neutral-active);
10
+ ${bodyTypeStyles} align-items: baseline;
11
+ background-color: var(--bf-ui-chip-background);
12
+ border: var(--bf-border-width) solid var(--bf-ui-chip-border);
13
+ border-radius: 1rem;
14
+ color: var(--bf-color-text-default);
15
+ display: inline-flex;
16
+ gap: 0;
17
+ inline-size: fit-content;
18
+ justify-self: start;
19
+ margin: 0 var(--bf-ui-chip-padding-inline) var(--bf-field-gap) 0;
20
+ max-inline-size: 100%;
21
+ min-block-size: var(--bf-ui-chip-block-size);
22
+ padding-block: var(--bf-ui-chip-padding-block);
23
+ padding-inline: var(--bf-ui-chip-padding-inline);
24
+ position: relative;
25
+ text-decoration: none;
26
+ user-select: none;
27
+ vertical-align: calc(var(--bf-border-width) - ${bodySelectedStartNudge});
28
+ white-space: nowrap;
29
+ }
30
+
31
+ :where(.bf-theme) :where(.bf-chip.is-positive) {
32
+ --bf-ui-chip-border: var(--bf-color-border-positive);
33
+ --bf-ui-chip-border-hover: var(--bf-color-border-positive);
34
+ --bf-ui-chip-border-active: var(--bf-color-border-positive);
35
+ --bf-ui-chip-background: var(--bf-color-background-positive-default);
36
+ --bf-ui-chip-background-hover: var(--bf-color-background-positive-hover);
37
+ --bf-ui-chip-background-active: var(--bf-color-background-positive-active);
38
+ }
39
+
40
+ :where(.bf-theme) :where(.bf-chip.is-caution) {
41
+ --bf-ui-chip-border: var(--bf-color-border-caution);
42
+ --bf-ui-chip-border-hover: var(--bf-color-border-caution);
43
+ --bf-ui-chip-border-active: var(--bf-color-border-caution);
44
+ --bf-ui-chip-background: var(--bf-color-background-caution-default);
45
+ --bf-ui-chip-background-hover: var(--bf-color-background-caution-hover);
46
+ --bf-ui-chip-background-active: var(--bf-color-background-caution-active);
47
+ }
48
+
49
+ :where(.bf-theme) :where(.bf-chip.is-negative) {
50
+ --bf-ui-chip-border: var(--bf-color-border-negative);
51
+ --bf-ui-chip-border-hover: var(--bf-color-border-negative);
52
+ --bf-ui-chip-border-active: var(--bf-color-border-negative);
53
+ --bf-ui-chip-background: var(--bf-color-background-negative-default);
54
+ --bf-ui-chip-background-hover: var(--bf-color-background-negative-hover);
55
+ --bf-ui-chip-background-active: var(--bf-color-background-negative-active);
56
+ }
57
+
58
+ :where(.bf-theme) :where(.bf-chip.is-information) {
59
+ --bf-ui-chip-border: var(--bf-color-border-information);
60
+ --bf-ui-chip-border-hover: var(--bf-color-border-information);
61
+ --bf-ui-chip-border-active: var(--bf-color-border-information);
62
+ --bf-ui-chip-background: var(--bf-color-background-information-default);
63
+ --bf-ui-chip-background-hover: var(--bf-color-background-information-hover);
64
+ --bf-ui-chip-background-active: var(--bf-color-background-information-active);
65
+ }
66
+
67
+ :where(.bf-theme) :where(.bf-chip, .bf-chip.is-positive, .bf-chip.is-caution, .bf-chip.is-negative, .bf-chip.is-information):hover {
68
+ background-color: var(--bf-ui-chip-background-hover);
69
+ border-color: var(--bf-ui-chip-border-hover);
70
+ text-decoration: none;
71
+ }
72
+
73
+ :where(.bf-theme) :where(.bf-chip, .bf-chip.is-positive, .bf-chip.is-caution, .bf-chip.is-negative, .bf-chip.is-information):is(:active, [aria-pressed='true'], .is-selected) {
74
+ background-color: var(--bf-ui-chip-background-active);
75
+ border-color: var(--bf-ui-chip-border-active);
76
+ }
77
+
78
+ :where(.bf-theme) :where(.bf-chip-lead, .bf-chip-value) {
79
+ ${bodyTypeStyles} color: var(--bf-color-text-default);
80
+ display: inline;
81
+ margin: 0;
82
+ min-inline-size: 0;
83
+ overflow: hidden;
84
+ padding: 0;
85
+ text-overflow: ellipsis;
86
+ vertical-align: baseline;
87
+ }
88
+
89
+ :where(.bf-theme) :where(.bf-chip-lead) {
90
+ ${bodyCaseTypeStyles} color: var(--bf-color-text-muted);
91
+ }
92
+
93
+ :where(.bf-theme) :where(.bf-chip-lead + .bf-chip-value)::before {
94
+ ${bodyTypeStyles} color: var(--bf-color-text-muted);
95
+ color: var(--bf-color-text-muted);
96
+ content: ": ";
97
+ }
98
+
99
+ :where(.bf-theme) :where(.bf-badge, .bf-badge.is-negative) {
100
+ ${bodyTypeStyles} align-items: center;
101
+ background-color: var(--bf-color-text-default);
102
+ border-radius: 1rem;
103
+ box-sizing: content-box;
104
+ color: var(--bf-color-background-default);
105
+ display: inline-block;
106
+ margin: 0;
107
+ max-inline-size: 4ch;
108
+ min-width: calc(${bodyLineHeight} - (var(--bf-ui-badge-padding-inline) * 2));
109
+ overflow: hidden;
110
+ padding-block: 0;
111
+ padding-inline: var(--bf-ui-badge-padding-inline);
112
+ text-align: center;
113
+ text-indent: 0;
114
+ }
115
+
116
+ :where(.bf-theme) :where(.bf-badge.is-negative) {
117
+ background-color: var(--bf-color-button-negative-default);
118
+ color: var(--bf-color-button-negative-text);
119
+ }
120
+
121
+ :where(.bf-theme) :where(.bf-chip, .bf-chip.is-positive, .bf-chip.is-caution, .bf-chip.is-negative, .bf-chip.is-information) :where(.bf-badge, .bf-badge.is-negative) {
122
+ align-self: center;
123
+ margin-inline-end: var(--bf-ui-badge-overhang);
124
+ margin-inline-start: var(--bf-ui-chip-padding-inline);
125
+ }
126
+
127
+ :where(.bf-theme) :where(.bf-status-label, .bf-status-label.is-positive, .bf-status-label.is-caution, .bf-status-label.is-information, .bf-status-label.is-negative) {
128
+ --bf-ui-status-background: color-mix(in srgb, var(--bf-color-background-alt) 70%, black);
129
+ --bf-ui-status-color: var(--bf-color-button-positive-text);
130
+ background-color: var(--bf-ui-status-background);
131
+ color: var(--bf-ui-status-color);
132
+ display: inline-block;
133
+ ${bodyTypeStyles} margin: 0;
134
+ padding-block-end: ${h5SelectedEndNudge};
135
+ padding-block-start: ${h5SelectedStartNudge};
136
+ padding-inline: var(--bf-ui-chip-padding-inline);
137
+ text-align: center;
138
+ text-decoration: none;
139
+ white-space: nowrap;
140
+ }
141
+
142
+ :where(.bf-theme) :where(.bf-status-label.is-positive) {
143
+ --bf-ui-status-background: var(--bf-color-border-positive);
144
+ --bf-ui-status-color: var(--bf-color-button-positive-text);
145
+ }
146
+
147
+ :where(.bf-theme) :where(.bf-status-label.is-caution) {
148
+ --bf-ui-status-background: var(--bf-color-border-caution);
149
+ --bf-ui-status-color: #111111;
150
+ }
151
+
152
+ :where(.bf-theme) :where(.bf-status-label.is-information) {
153
+ --bf-ui-status-background: var(--bf-color-border-information);
154
+ --bf-ui-status-color: var(--bf-color-button-positive-text);
155
+ }
156
+
157
+ :where(.bf-theme) :where(.bf-status-label.is-negative) {
158
+ --bf-ui-status-background: var(--bf-color-border-negative);
159
+ --bf-ui-status-color: var(--bf-color-button-negative-text);
160
+ }
161
161
  `;
162
162
  }