baseline-foundry 0.1.3 → 0.1.5

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 (84) hide show
  1. package/README.md +577 -553
  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/build.js +4 -4
  11. package/dist/code-snippet.js +1 -1
  12. package/dist/css-app-tier.js +78 -73
  13. package/dist/css-components/article-pagination.js +141 -140
  14. package/dist/css-components/button-actions.js +181 -161
  15. package/dist/css-components/cards-options.js +176 -176
  16. package/dist/css-components/chip-badge-status.d.ts +0 -3
  17. package/dist/css-components/chip-badge-status.js +174 -159
  18. package/dist/css-components/content-card.d.ts +7 -7
  19. package/dist/css-components/content-card.js +498 -497
  20. package/dist/css-components/control-row.d.ts +1 -1
  21. package/dist/css-components/control-row.js +15 -15
  22. package/dist/css-components/cta-figure-aspect.js +120 -120
  23. package/dist/css-components/document-navigation.js +427 -390
  24. package/dist/css-components/editorial-content.js +42 -42
  25. package/dist/css-components/icon.js +72 -72
  26. package/dist/css-components/interactive-feedback.js +239 -217
  27. package/dist/css-components/interactive-tables.js +160 -155
  28. package/dist/css-components/legacy-navigation.d.ts +8 -0
  29. package/dist/css-components/legacy-navigation.js +816 -0
  30. package/dist/css-components/linked-logo-site-layout.d.ts +3 -3
  31. package/dist/css-components/linked-logo-site-layout.js +177 -180
  32. package/dist/css-components/list-tree.js +96 -94
  33. package/dist/css-components/list.js +9 -7
  34. package/dist/css-components/logo-media.d.ts +6 -6
  35. package/dist/css-components/logo-media.js +218 -207
  36. package/dist/css-components/navigation-layout.js +144 -144
  37. package/dist/css-components/panel.js +148 -144
  38. package/dist/css-components/search-box-and-filter.d.ts +0 -1
  39. package/dist/css-components/search-box-and-filter.js +263 -264
  40. package/dist/css-components/sites-editorial-ports.d.ts +3 -4
  41. package/dist/css-components/sites-editorial-ports.js +279 -247
  42. package/dist/css-components/sites-foundation.js +142 -146
  43. package/dist/css-components/sites-rich-lists.d.ts +5 -5
  44. package/dist/css-components/sites-rich-lists.js +339 -349
  45. package/dist/css-components/static-content-ports.d.ts +3 -3
  46. package/dist/css-components/static-content-ports.js +200 -186
  47. package/dist/css-components/tab-section.d.ts +3 -3
  48. package/dist/css-components/tab-section.js +93 -85
  49. package/dist/css-components/table.js +76 -75
  50. package/dist/css-components/tabs-choice-breadcrumbs.js +307 -303
  51. package/dist/css-components/tiered-list-equal-height-row.js +271 -271
  52. package/dist/css-components.js +1881 -2554
  53. package/dist/css-grid.d.ts +1 -1
  54. package/dist/css-grid.js +183 -173
  55. package/dist/css.js +317 -241
  56. package/dist/experiments/ibm-plex-engine-smoke/styles.css +894 -538
  57. package/dist/experiments/ibm-plex-engine-smoke/surfaces.json +2 -2
  58. package/dist/experiments/ibm-plex-engine-smoke/tokens.json +1 -1
  59. package/dist/in-page-navigation.js +1 -1
  60. package/dist/presets/app-tier/styles.css +928 -568
  61. package/dist/presets/app-tier/surfaces.json +17 -17
  62. package/dist/presets/app-tier/tokens.json +7 -7
  63. package/dist/presets/prose/styles.css +919 -562
  64. package/dist/presets/prose/surfaces.json +17 -17
  65. package/dist/presets/prose/tokens.json +1 -1
  66. package/dist/resizable-aside.js +12 -4
  67. package/dist/styles.css +919 -562
  68. package/dist/surfaces.json +17 -17
  69. package/dist/tiers/app/styles.css +928 -568
  70. package/dist/tiers/app/surfaces.json +17 -17
  71. package/dist/tiers/app/tokens.json +7 -7
  72. package/dist/tiers/documentation/styles.css +920 -563
  73. package/dist/tiers/documentation/surfaces.json +17 -17
  74. package/dist/tiers/documentation/tokens.json +2 -2
  75. package/dist/tiers/editorial/styles.css +919 -562
  76. package/dist/tiers/editorial/surfaces.json +17 -17
  77. package/dist/tiers/editorial/tokens.json +1 -1
  78. package/dist/tiers/os/styles.css +925 -568
  79. package/dist/tiers/os/surfaces.json +17 -17
  80. package/dist/tiers/os/tokens.json +7 -7
  81. package/dist/tokens.json +1 -1
  82. package/dist/types.d.ts +1 -1
  83. package/docs/publishing.md +31 -14
  84. 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: 0;
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
  }