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/table.js CHANGED
@@ -1,79 +1,79 @@
1
1
  export function tableCss(options) {
2
2
  const { bodyLineHeight, bodyMediumTypeStyles, bodyTypeStyles } = options;
3
- return `:where(.bf-theme) :where(.bf-table-scroll) {
4
- max-inline-size: 100%;
5
- min-inline-size: 0;
6
- overflow-x: auto;
7
- scrollbar-width: thin;
8
- }
9
-
10
- :where(.bf-theme) :where(.bf-table-scroll) > :where(table, .bf-table) {
11
- min-inline-size: var(--bf-table-scroll-min-inline-size, 48rem);
12
- }
13
-
14
- :where(.bf-theme) :where(table, .bf-table) {
15
- border: 0;
16
- border-collapse: separate;
17
- border-spacing: 0;
18
- caption-side: bottom;
19
- line-height: ${bodyLineHeight};
20
- margin: 0;
21
- table-layout: auto;
22
- width: 100%;
23
- }
24
-
25
- :where(.bf-theme) :where(caption, .bf-table-caption) {
26
- ${bodyTypeStyles} color: var(--bf-color-text-muted);
27
- margin: 0;
28
- padding-bottom: calc(var(--bf-baseline) * 0.5);
29
- padding-top: calc(var(--bf-baseline) * 0.5);
30
- text-align: left;
31
- }
32
-
33
- :where(.bf-theme) :where(th, td) {
34
- border: 0;
35
- border-block-end: var(--bf-table-row-border-size) solid transparent;
36
- color: var(--bf-color-text-default);
37
- line-height: var(--bf-table-row-line-height);
38
- margin: 0;
39
- overflow: hidden;
40
- padding-block: var(--bf-table-row-padding);
41
- padding-inline: calc(var(--bf-baseline) * 0.75);
42
- text-align: left;
43
- text-overflow: ellipsis;
44
- vertical-align: top;
45
- }
46
-
47
- :where(.bf-theme) :where(th.is-icon-placeholder, td.is-icon-placeholder, .bf-table-cell.is-icon-placeholder) {
48
- padding-inline-start: calc((var(--bf-baseline) * 0.75) + var(--bf-leading-icon-size) + var(--bf-leading-icon-gap));
49
- }
50
-
51
- :where(.bf-theme) :where(th.is-icon-placeholder, td.is-icon-placeholder, .bf-table-cell.is-icon-placeholder) > :where(.bf-icon:first-child) {
52
- --bf-icon-size: var(--bf-leading-icon-size);
53
- margin-inline-end: var(--bf-leading-icon-gap);
54
- margin-inline-start: calc((var(--bf-leading-icon-size) + var(--bf-leading-icon-gap)) * -1);
55
- }
56
-
57
- :where(.bf-theme) :where(td) {
58
- font-weight: var(--bf-body-font-weight, 400);
59
- }
60
-
61
- :where(.bf-theme) :where(thead th) {
62
- ${bodyMediumTypeStyles} color: var(--bf-color-text-default);
63
- border-block-end-color: var(--bf-color-border-default);
64
- line-height: var(--bf-table-row-line-height);
65
- }
66
-
67
- :where(.bf-theme) :where(tbody tr:not(:last-child) td, tfoot td) {
68
- border-block-end-color: var(--bf-color-border-low-contrast);
69
- }
70
-
71
- :where(.bf-theme) :where(tbody tr:has(.bf-status-label) > td) {
72
- padding-block: calc((var(--bf-baseline) - var(--bf-table-row-border-size)) / 2);
73
- }
74
-
75
- :where(.bf-theme) :where(tbody tr:hover td) {
76
- background: color-mix(in srgb, var(--bf-color-background-hover) 68%, transparent);
77
- }
3
+ return `:where(.bf-theme) :where(.bf-table-scroll) {
4
+ max-inline-size: 100%;
5
+ min-inline-size: 0;
6
+ overflow-x: auto;
7
+ scrollbar-width: thin;
8
+ }
9
+
10
+ :where(.bf-theme) :where(.bf-table-scroll) > :where(table, .bf-table) {
11
+ min-inline-size: var(--bf-table-scroll-min-inline-size, 48rem);
12
+ }
13
+
14
+ :where(.bf-theme) :where(table, .bf-table) {
15
+ border: 0;
16
+ border-collapse: separate;
17
+ border-spacing: 0;
18
+ caption-side: bottom;
19
+ line-height: ${bodyLineHeight};
20
+ margin: 0;
21
+ table-layout: auto;
22
+ width: 100%;
23
+ }
24
+
25
+ :where(.bf-theme) :where(caption, .bf-table-caption) {
26
+ ${bodyTypeStyles} color: var(--bf-color-text-muted);
27
+ margin: 0;
28
+ padding-bottom: calc(var(--bf-baseline) * 0.5);
29
+ padding-top: calc(var(--bf-baseline) * 0.5);
30
+ text-align: left;
31
+ }
32
+
33
+ :where(.bf-theme) :where(th, td) {
34
+ border: 0;
35
+ border-block-end: var(--bf-table-row-border-size) solid transparent;
36
+ color: var(--bf-color-text-default);
37
+ line-height: var(--bf-table-row-line-height);
38
+ margin: 0;
39
+ overflow: hidden;
40
+ padding-block: var(--bf-table-row-padding);
41
+ padding-inline: calc(var(--bf-baseline) * 0.75);
42
+ text-align: left;
43
+ text-overflow: ellipsis;
44
+ vertical-align: top;
45
+ }
46
+
47
+ :where(.bf-theme) :where(th.is-icon-placeholder, td.is-icon-placeholder, .bf-table-cell.is-icon-placeholder) {
48
+ padding-inline-start: calc((var(--bf-baseline) * 0.75) + var(--bf-leading-icon-size) + var(--bf-leading-icon-gap));
49
+ }
50
+
51
+ :where(.bf-theme) :where(th.is-icon-placeholder, td.is-icon-placeholder, .bf-table-cell.is-icon-placeholder) > :where(.bf-icon:first-child) {
52
+ --bf-icon-size: var(--bf-leading-icon-size);
53
+ margin-inline-end: var(--bf-leading-icon-gap);
54
+ margin-inline-start: calc((var(--bf-leading-icon-size) + var(--bf-leading-icon-gap)) * -1);
55
+ }
56
+
57
+ :where(.bf-theme) :where(td) {
58
+ font-weight: var(--bf-body-font-weight, 400);
59
+ }
60
+
61
+ :where(.bf-theme) :where(thead th) {
62
+ ${bodyMediumTypeStyles} color: var(--bf-color-text-default);
63
+ border-block-end-color: var(--bf-color-border-default);
64
+ line-height: var(--bf-table-row-line-height);
65
+ }
66
+
67
+ :where(.bf-theme) :where(tbody tr:not(:last-child) td, tfoot td) {
68
+ border-block-end-color: var(--bf-color-border-low-contrast);
69
+ }
70
+
71
+ :where(.bf-theme) :where(tbody tr:has(.bf-status-label) > td) {
72
+ padding-block: calc((var(--bf-baseline) - var(--bf-table-row-border-size)) / 2);
73
+ }
74
+
75
+ :where(.bf-theme) :where(tbody tr:hover td) {
76
+ background: color-mix(in srgb, var(--bf-color-background-hover) 68%, transparent);
77
+ }
78
78
  `;
79
79
  }