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/editorial-content.js CHANGED
@@ -1,48 +1,48 @@
1
1
  /** Content-level editorial roles kept separate from layout composition. */
2
2
  export function editorialContentCss(options) {
3
3
  const { noticeTitleTypeStyles } = options;
4
- return `/* ------------------------------------------------------------------ */
5
- /* Editorial content roles */
6
- /* ------------------------------------------------------------------ */
7
-
8
- :where(.bf-theme) :where(.bf-notice, .bf-notice.is-information, .bf-notice.is-positive, .bf-notice.is-caution, .bf-notice.is-negative) {
9
- --bf-notice-background: var(--bf-color-background-neutral-default);
10
- --bf-notice-border: var(--bf-color-border-neutral);
11
- background: var(--bf-notice-background);
12
- border-inline-start: var(--bf-bar-thickness) solid var(--bf-notice-border);
13
- color: var(--bf-color-text-default);
14
- display: flow-root;
15
- margin-block: 0 var(--bf-section-space-shallow);
16
- max-inline-size: 100%;
17
- padding-block: var(--bf-space-2);
18
- padding-inline: var(--bf-space-2);
19
- }
20
-
21
- :where(.bf-theme) :where(.bf-notice.is-information) {
22
- --bf-notice-background: var(--bf-color-background-information-default);
23
- --bf-notice-border: var(--bf-color-border-information);
24
- }
25
-
26
- :where(.bf-theme) :where(.bf-notice.is-positive) {
27
- --bf-notice-background: var(--bf-color-background-positive-default);
28
- --bf-notice-border: var(--bf-color-border-positive);
29
- }
30
-
31
- :where(.bf-theme) :where(.bf-notice.is-caution) {
32
- --bf-notice-background: var(--bf-color-background-caution-default);
33
- --bf-notice-border: var(--bf-color-border-caution);
34
- }
35
-
36
- :where(.bf-theme) :where(.bf-notice.is-negative) {
37
- --bf-notice-background: var(--bf-color-background-negative-default);
38
- --bf-notice-border: var(--bf-color-border-negative);
39
- }
40
-
41
- :where(.bf-theme) :where(.bf-notice-title, .bf-notice-content) {
42
- max-inline-size: 100%;
43
- overflow-wrap: anywhere;
44
- }
45
-
4
+ return `/* ------------------------------------------------------------------ */
5
+ /* Editorial content roles */
6
+ /* ------------------------------------------------------------------ */
7
+
8
+ :where(.bf-theme) :where(.bf-notice, .bf-notice.is-information, .bf-notice.is-positive, .bf-notice.is-caution, .bf-notice.is-negative) {
9
+ --bf-notice-background: var(--bf-color-background-neutral-default);
10
+ --bf-notice-border: var(--bf-color-border-neutral);
11
+ background: var(--bf-notice-background);
12
+ border-inline-start: var(--bf-bar-thickness) solid var(--bf-notice-border);
13
+ color: var(--bf-color-text-default);
14
+ display: flow-root;
15
+ margin-block: 0 var(--bf-section-space-shallow);
16
+ max-inline-size: 100%;
17
+ padding-block: var(--bf-space-2);
18
+ padding-inline: var(--bf-space-2);
19
+ }
20
+
21
+ :where(.bf-theme) :where(.bf-notice.is-information) {
22
+ --bf-notice-background: var(--bf-color-background-information-default);
23
+ --bf-notice-border: var(--bf-color-border-information);
24
+ }
25
+
26
+ :where(.bf-theme) :where(.bf-notice.is-positive) {
27
+ --bf-notice-background: var(--bf-color-background-positive-default);
28
+ --bf-notice-border: var(--bf-color-border-positive);
29
+ }
30
+
31
+ :where(.bf-theme) :where(.bf-notice.is-caution) {
32
+ --bf-notice-background: var(--bf-color-background-caution-default);
33
+ --bf-notice-border: var(--bf-color-border-caution);
34
+ }
35
+
36
+ :where(.bf-theme) :where(.bf-notice.is-negative) {
37
+ --bf-notice-background: var(--bf-color-background-negative-default);
38
+ --bf-notice-border: var(--bf-color-border-negative);
39
+ }
40
+
41
+ :where(.bf-theme) :where(.bf-notice-title, .bf-notice-content) {
42
+ max-inline-size: 100%;
43
+ overflow-wrap: anywhere;
44
+ }
45
+
46
46
  :where(.bf-theme) :where(.bf-notice-title) {
47
47
  ${noticeTitleTypeStyles} margin-block: 0 var(--bf-h4-margin-bottom);
48
48
  padding-block-end: 0;
package/dist/css-components/icon.js CHANGED
@@ -1,75 +1,75 @@
1
1
  export function iconCss() {
2
- return `:where(.bf-theme) :where(.bf-icon) {
3
- --bf-icon-image: none;
4
- --bf-icon-size: var(--bf-icon-size-default);
5
- --bf-icon-transform: none;
6
- background-image: var(--bf-icon-image);
7
- background-position: center;
8
- background-repeat: no-repeat;
9
- background-size: contain;
10
- block-size: var(--bf-icon-size);
11
- display: inline-block;
12
- flex: 0 0 auto;
13
- inline-size: var(--bf-icon-size);
14
- margin: 0;
15
- overflow: hidden;
16
- padding: 0;
17
- text-indent: 110vw;
18
- transform: var(--bf-icon-transform);
19
- transform-origin: center;
20
- vertical-align: bottom;
21
- white-space: nowrap;
22
- }
23
-
24
- :where(.bf-theme) :where(.bf-icon.is-medium) {
25
- --bf-icon-size: var(--bf-icon-size-medium);
26
- }
27
-
28
- :where(.bf-theme) :where(.bf-icon.is-large) {
29
- --bf-icon-size: var(--bf-icon-size-large);
30
- }
31
-
32
- :where(.bf-theme) :where(.bf-icon.is-x-large) {
33
- --bf-icon-size: var(--bf-icon-size-x-large);
34
- }
35
-
36
- :where(.bf-theme) :where(.bf-icon.is-xx-large) {
37
- --bf-icon-size: var(--bf-icon-size-xx-large);
38
- }
39
-
40
- :where(.bf-theme) :where(.bf-icon.is-search) {
41
- --bf-icon-image: var(--bf-ui-icon-search);
42
- }
43
-
44
- :where(.bf-theme) :where(.bf-icon.is-close) {
45
- --bf-icon-image: var(--bf-ui-icon-close);
46
- }
47
-
48
- :where(.bf-theme) :where(.bf-icon.is-error-grey) {
49
- --bf-icon-image: var(--bf-ui-icon-error-grey);
50
- }
51
-
52
- :where(.bf-theme) :where(.bf-icon.is-chevron-down) {
53
- --bf-icon-image: var(--bf-ui-icon-chevron-down);
54
- }
55
-
56
- :where(.bf-theme) :where(.bf-icon.is-chevron-up) {
57
- --bf-icon-image: var(--bf-ui-icon-chevron-down);
58
- --bf-icon-transform: rotate(180deg);
59
- }
60
-
61
- :where(.bf-theme) :where(.bf-icon.is-chevron-right) {
62
- --bf-icon-image: var(--bf-ui-icon-chevron-down);
63
- --bf-icon-transform: rotate(-90deg);
64
- }
65
-
66
- :where(.bf-theme) :where(.bf-icon.is-chevron-left) {
67
- --bf-icon-image: var(--bf-ui-icon-chevron-down);
68
- --bf-icon-transform: rotate(90deg);
69
- }
70
-
71
- :where(.bf-theme) :where(.bf-icon.is-success-grey) {
72
- --bf-icon-image: var(--bf-ui-icon-success-grey);
73
- }
2
+ return `:where(.bf-theme) :where(.bf-icon) {
3
+ --bf-icon-image: none;
4
+ --bf-icon-size: var(--bf-icon-size-default);
5
+ --bf-icon-transform: none;
6
+ background-image: var(--bf-icon-image);
7
+ background-position: center;
8
+ background-repeat: no-repeat;
9
+ background-size: contain;
10
+ block-size: var(--bf-icon-size);
11
+ display: inline-block;
12
+ flex: 0 0 auto;
13
+ inline-size: var(--bf-icon-size);
14
+ margin: 0;
15
+ overflow: hidden;
16
+ padding: 0;
17
+ text-indent: 110vw;
18
+ transform: var(--bf-icon-transform);
19
+ transform-origin: center;
20
+ vertical-align: bottom;
21
+ white-space: nowrap;
22
+ }
23
+
24
+ :where(.bf-theme) :where(.bf-icon.is-medium) {
25
+ --bf-icon-size: var(--bf-icon-size-medium);
26
+ }
27
+
28
+ :where(.bf-theme) :where(.bf-icon.is-large) {
29
+ --bf-icon-size: var(--bf-icon-size-large);
30
+ }
31
+
32
+ :where(.bf-theme) :where(.bf-icon.is-x-large) {
33
+ --bf-icon-size: var(--bf-icon-size-x-large);
34
+ }
35
+
36
+ :where(.bf-theme) :where(.bf-icon.is-xx-large) {
37
+ --bf-icon-size: var(--bf-icon-size-xx-large);
38
+ }
39
+
40
+ :where(.bf-theme) :where(.bf-icon.is-search) {
41
+ --bf-icon-image: var(--bf-ui-icon-search);
42
+ }
43
+
44
+ :where(.bf-theme) :where(.bf-icon.is-close) {
45
+ --bf-icon-image: var(--bf-ui-icon-close);
46
+ }
47
+
48
+ :where(.bf-theme) :where(.bf-icon.is-error-grey) {
49
+ --bf-icon-image: var(--bf-ui-icon-error-grey);
50
+ }
51
+
52
+ :where(.bf-theme) :where(.bf-icon.is-chevron-down) {
53
+ --bf-icon-image: var(--bf-ui-icon-chevron-down);
54
+ }
55
+
56
+ :where(.bf-theme) :where(.bf-icon.is-chevron-up) {
57
+ --bf-icon-image: var(--bf-ui-icon-chevron-down);
58
+ --bf-icon-transform: rotate(180deg);
59
+ }
60
+
61
+ :where(.bf-theme) :where(.bf-icon.is-chevron-right) {
62
+ --bf-icon-image: var(--bf-ui-icon-chevron-down);
63
+ --bf-icon-transform: rotate(-90deg);
64
+ }
65
+
66
+ :where(.bf-theme) :where(.bf-icon.is-chevron-left) {
67
+ --bf-icon-image: var(--bf-ui-icon-chevron-down);
68
+ --bf-icon-transform: rotate(90deg);
69
+ }
70
+
71
+ :where(.bf-theme) :where(.bf-icon.is-success-grey) {
72
+ --bf-icon-image: var(--bf-ui-icon-success-grey);
73
+ }
74
74
  `;
75
75
  }