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
@@ -1,120 +1,120 @@
1
- {
2
- "baselineUnit": 0.25,
3
- "fontFiles": [
4
- {
5
- "family": "ubuntu-sans",
6
- "path": "../../assets/fonts/UbuntuSans[wdth,wght].ttf",
7
- "cssFamily": "Ubuntu Sans",
8
- "fontStyle": "normal",
9
- "fontWeight": "100 800",
10
- "fontStretch": "75% 100%",
11
- "fontDisplay": "swap",
12
- "emitFontFace": false
13
- }
14
- ],
15
- "fontStacks": {
16
- "ubuntu-sans": "\"Ubuntu Sans\", \"Segoe UI\", system-ui, sans-serif"
17
- },
18
- "elements": [
19
- {
20
- "identifier": "body",
21
- "fontSize": 0.75,
22
- "lineHeight": 4,
23
- "spaceAfter": 3,
24
- "fontFamily": "ubuntu-sans",
25
- "fontWeight": 400,
26
- "fontStyle": "normal"
27
- },
28
- {
29
- "identifier": "h6",
30
- "fontSize": 0.75,
31
- "lineHeight": 4,
32
- "spaceAfter": 3,
33
- "fontFamily": "ubuntu-sans",
34
- "fontWeight": 550,
35
- "fontStyle": "normal"
36
- },
37
- {
38
- "identifier": "h5",
39
- "fontSize": 0.75,
40
- "lineHeight": 4,
41
- "spaceAfter": 3,
42
- "fontFamily": "ubuntu-sans",
1
+ {
2
+ "baselineUnit": 0.25,
3
+ "fontFiles": [
4
+ {
5
+ "family": "ubuntu-sans",
6
+ "path": "../../assets/fonts/UbuntuSans[wdth,wght].ttf",
7
+ "cssFamily": "Ubuntu Sans",
8
+ "fontStyle": "normal",
9
+ "fontWeight": "100 800",
10
+ "fontStretch": "75% 100%",
11
+ "fontDisplay": "swap",
12
+ "emitFontFace": false
13
+ }
14
+ ],
15
+ "fontStacks": {
16
+ "ubuntu-sans": "\"Ubuntu Sans\", \"Segoe UI\", system-ui, sans-serif"
17
+ },
18
+ "elements": [
19
+ {
20
+ "identifier": "body",
21
+ "fontSize": 0.75,
22
+ "lineHeight": 4,
23
+ "spaceAfter": 3,
24
+ "fontFamily": "ubuntu-sans",
25
+ "fontWeight": 400,
26
+ "fontStyle": "normal"
27
+ },
28
+ {
29
+ "identifier": "h6",
30
+ "fontSize": 0.75,
31
+ "lineHeight": 4,
32
+ "spaceAfter": 3,
33
+ "fontFamily": "ubuntu-sans",
34
+ "fontWeight": 550,
35
+ "fontStyle": "normal"
36
+ },
37
+ {
38
+ "identifier": "h5",
39
+ "fontSize": 0.75,
40
+ "lineHeight": 4,
41
+ "spaceAfter": 3,
42
+ "fontFamily": "ubuntu-sans",
43
43
  "fontWeight": 550,
44
44
  "fontStyle": "normal",
45
45
  "fontVariantCaps": "all-small-caps",
46
46
  "letterSpacing": "0.05em"
47
- },
48
- {
49
- "identifier": "h4",
50
- "fontSize": 1,
51
- "lineHeight": 4,
52
- "spaceAfter": 3,
53
- "fontFamily": "ubuntu-sans",
54
- "fontWeight": 300,
55
- "fontStyle": "normal"
56
- },
57
- {
58
- "identifier": "h3",
59
- "fontSize": 1,
60
- "lineHeight": 4,
61
- "spaceAfter": 3,
62
- "fontFamily": "ubuntu-sans",
63
- "fontWeight": 500,
64
- "fontStyle": "normal"
65
- },
66
- {
67
- "identifier": "h2",
68
- "fontSize": 1.5,
69
- "lineHeight": 6,
70
- "spaceAfter": 3,
71
- "fontFamily": "ubuntu-sans",
72
- "fontWeight": 200,
73
- "fontStyle": "normal"
74
- },
75
- {
76
- "identifier": "h1",
77
- "fontSize": 1.5,
78
- "lineHeight": 6,
79
- "spaceAfter": 3,
80
- "fontFamily": "ubuntu-sans",
81
- "fontWeight": 500,
82
- "fontStyle": "normal"
83
- }
84
- ],
85
- "roles": {
86
- "body": "body",
87
- "h1": "h1",
88
- "h2": "h2",
89
- "h3": "h3",
90
- "h4": "h4",
91
- "h5": "h5",
92
- "h6": "h6"
93
- },
94
- "layout": {
95
- "contentMaxWidthRem": 67.5,
96
- "contentPaddingInlineRem": 0.75,
97
- "measureRem": 30,
98
- "sectionSpaceBaselineUnits": 12,
99
- "sectionSpaceShallowBaselineUnits": 6,
100
- "sectionSpaceDeepBaselineUnits": 24,
101
- "stripSpaceBaselineUnits": 12,
102
- "gridGapInlineBaselineUnits": 4,
103
- "gridGapBlockBaselineUnits": 4,
104
- "pageMarginBaselineUnits": 4
105
- },
106
- "components": {
107
- "borderWidthPx": 1,
108
- "radiusRem": 0,
109
- "controlBlockPaddingRem": 0.375,
110
- "controlCompactBlockPaddingRem": 0.25,
111
- "controlInlinePaddingRem": 0.75,
112
- "controlInlinePaddingActionRem": 0.5,
113
- "controlInlinePaddingFieldRem": 0.25,
114
- "controlVisualSizeRem": 0.75,
115
- "fieldGapBaselineUnits": 1,
116
- "panelPaddingInlineBaselineUnits": 4,
117
- "panelPaddingBlockBaselineUnits": 4,
118
- "accordionIndentBaselineUnits": 3
119
- }
120
- }
47
+ },
48
+ {
49
+ "identifier": "h4",
50
+ "fontSize": 1,
51
+ "lineHeight": 4,
52
+ "spaceAfter": 3,
53
+ "fontFamily": "ubuntu-sans",
54
+ "fontWeight": 300,
55
+ "fontStyle": "normal"
56
+ },
57
+ {
58
+ "identifier": "h3",
59
+ "fontSize": 1,
60
+ "lineHeight": 4,
61
+ "spaceAfter": 3,
62
+ "fontFamily": "ubuntu-sans",
63
+ "fontWeight": 500,
64
+ "fontStyle": "normal"
65
+ },
66
+ {
67
+ "identifier": "h2",
68
+ "fontSize": 1.5,
69
+ "lineHeight": 6,
70
+ "spaceAfter": 3,
71
+ "fontFamily": "ubuntu-sans",
72
+ "fontWeight": 200,
73
+ "fontStyle": "normal"
74
+ },
75
+ {
76
+ "identifier": "h1",
77
+ "fontSize": 1.5,
78
+ "lineHeight": 6,
79
+ "spaceAfter": 3,
80
+ "fontFamily": "ubuntu-sans",
81
+ "fontWeight": 500,
82
+ "fontStyle": "normal"
83
+ }
84
+ ],
85
+ "roles": {
86
+ "body": "body",
87
+ "h1": "h1",
88
+ "h2": "h2",
89
+ "h3": "h3",
90
+ "h4": "h4",
91
+ "h5": "h5",
92
+ "h6": "h6"
93
+ },
94
+ "layout": {
95
+ "contentMaxWidthRem": 67.5,
96
+ "contentPaddingInlineRem": 0.75,
97
+ "measureRem": 30,
98
+ "sectionSpaceBaselineUnits": 12,
99
+ "sectionSpaceShallowBaselineUnits": 6,
100
+ "sectionSpaceDeepBaselineUnits": 24,
101
+ "stripSpaceBaselineUnits": 12,
102
+ "gridGapInlineBaselineUnits": 4,
103
+ "gridGapBlockBaselineUnits": 4,
104
+ "pageMarginBaselineUnits": 4
105
+ },
106
+ "components": {
107
+ "borderWidthPx": 1,
108
+ "radiusRem": 0,
109
+ "controlBlockPaddingRem": 0.375,
110
+ "controlCompactBlockPaddingRem": 0.25,
111
+ "controlInlinePaddingRem": 0.75,
112
+ "controlInlinePaddingActionRem": 0.5,
113
+ "controlInlinePaddingFieldRem": 0.25,
114
+ "controlVisualSizeRem": 0.75,
115
+ "fieldGapBaselineUnits": 1,
116
+ "panelPaddingInlineBaselineUnits": 4,
117
+ "panelPaddingBlockBaselineUnits": 4,
118
+ "accordionIndentBaselineUnits": 3
119
+ }
120
+ }
@@ -1,50 +1,50 @@
1
1
  import { BASELINE_GRID_DARK_THEME_COLOR, BASELINE_GRID_DEFAULT_COLOR, BASELINE_GRID_LIGHT_THEME_COLOR } from "./baseline-grid-theme.js";
2
2
  export function generateBaselineGridOverlayCss(options) {
3
- return `.u-baseline-grid {
4
- --bf-baseline-grid-color: ${BASELINE_GRID_DEFAULT_COLOR};
5
- --bf-baseline-grid-page-color: transparent;
6
- --bf-baseline-grid-offset: 0rem;
7
- --bf-baseline-grid-size: var(--bf-baseline, ${options.baselineUnit});
8
- position: relative;
9
- }
10
-
11
- .u-baseline-grid::after {
12
- background-image: linear-gradient(
13
- to top,
14
- var(--bf-baseline-grid-color),
15
- var(--bf-baseline-grid-color) 1px,
16
- transparent 1px,
17
- transparent
18
- );
19
- background-size: 100% var(--bf-baseline-grid-size);
20
- bottom: 0;
21
- content: "";
22
- display: block;
23
- left: 0;
24
- pointer-events: none;
25
- position: absolute;
26
- right: 0;
27
- top: var(--bf-baseline-grid-offset);
28
- z-index: 200;
29
- }
30
-
31
- html.u-baseline-grid {
32
- background-color: var(--bf-baseline-grid-page-color);
33
- position: static;
34
- }
35
-
36
- html.u-baseline-grid::after {
37
- z-index: -1;
3
+ return `.u-baseline-grid {
4
+ --bf-baseline-grid-color: ${BASELINE_GRID_DEFAULT_COLOR};
5
+ --bf-baseline-grid-page-color: transparent;
6
+ --bf-baseline-grid-offset: 0rem;
7
+ --bf-baseline-grid-size: var(--bf-baseline, ${options.baselineUnit});
8
+ position: relative;
9
+ }
10
+
11
+ .u-baseline-grid::after {
12
+ background-image: linear-gradient(
13
+ to top,
14
+ var(--bf-baseline-grid-color),
15
+ var(--bf-baseline-grid-color) 1px,
16
+ transparent 1px,
17
+ transparent
18
+ );
19
+ background-size: 100% var(--bf-baseline-grid-size);
20
+ bottom: 0;
21
+ content: "";
22
+ display: block;
23
+ left: 0;
24
+ pointer-events: none;
25
+ position: absolute;
26
+ right: 0;
27
+ top: var(--bf-baseline-grid-offset);
28
+ z-index: 200;
29
+ }
30
+
31
+ html.u-baseline-grid {
32
+ background-color: var(--bf-baseline-grid-page-color);
33
+ position: static;
34
+ }
35
+
36
+ html.u-baseline-grid::after {
37
+ z-index: -1;
38
38
  }`;
39
39
  }
40
40
  export function generateBaselineGridThemeOverrideCss() {
41
- return `:where(.bf-theme).u-baseline-grid,
42
- :where(.bf-theme) .u-baseline-grid {
43
- --bf-baseline-grid-color: ${BASELINE_GRID_LIGHT_THEME_COLOR};
44
- }
45
-
46
- :where(.bf-theme.is-dark).u-baseline-grid,
47
- :where(.bf-theme.is-dark) .u-baseline-grid {
48
- --bf-baseline-grid-color: ${BASELINE_GRID_DARK_THEME_COLOR};
41
+ return `:where(.bf-theme).u-baseline-grid,
42
+ :where(.bf-theme) .u-baseline-grid {
43
+ --bf-baseline-grid-color: ${BASELINE_GRID_LIGHT_THEME_COLOR};
44
+ }
45
+
46
+ :where(.bf-theme.is-dark).u-baseline-grid,
47
+ :where(.bf-theme.is-dark) .u-baseline-grid {
48
+ --bf-baseline-grid-color: ${BASELINE_GRID_DARK_THEME_COLOR};
49
49
  }`;
50
50
  }
@@ -1,77 +1,77 @@
1
1
  export function appTierPresetCss(scopes) {
2
2
  const scoped = (suffix = "") => scopes.map(scope => `${scope}${suffix}`).join(",\n");
3
- return `/* Canonical app-tier preset: light application chrome, Ubuntu Sans, and app-surface control overrides. */
4
- ${scoped()} {
5
- --bf-app-demo-page-bg: var(--vf-color-background-alt, #f7f7f7);
6
- --bf-radius: 0;
7
- color-scheme: light;
8
- }
9
-
10
- ${scoped(" :where(.bf-form-label, .bf-form-help, .bf-button, .bf-button.is-base, .bf-status-label, .bf-chip, .bf-checkbox-label, .bf-radio-label, .bf-tabs-link, .bf-accordion-tab, .bf-validation-message)")} {
11
- font-family: inherit;
12
- font-size: 0.875rem;
13
- font-style: normal;
14
- font-weight: 400;
15
- line-height: 1.25rem;
16
- }
17
-
18
- ${scoped(" :where(.bf-input, .bf-button, .bf-button.is-base)")} {
19
- font-family: inherit;
20
- font-size: 0.875rem;
21
- font-style: normal;
22
- font-weight: 400;
23
- line-height: 1.25rem;
24
- }
25
-
26
- ${scoped(" :where(.bf-application)")} {
27
- background: var(--bf-app-demo-page-bg);
28
- }
29
-
30
- ${scoped(" :where(.bf-navigation-drawer)")},
31
- ${scoped(" :where(.bf-navigation:not(.is-collapsed)) > :where(.bf-navigation-drawer)")},
32
- ${scoped(" :where(.bf-aside.is-overlay, .bf-aside.is-drawer)")} {
33
- box-shadow: 0 10px 20px rgba(0, 0, 0, 0.12), 0 0 3px rgba(0, 0, 0, 0.12);
34
- }
35
-
36
- ${scoped(" :where(.bf-panel-header)")} {
37
- align-items: start;
38
- gap: calc(var(--bf-baseline) * 1.5);
39
- padding-block-end: var(--bf-panel-padding-block);
40
- padding-block-start: var(--bf-panel-padding-block);
41
- }
42
-
43
- ${scoped(" :where(.bf-panel-header.is-navigation-brand)")} {
44
- gap: 0;
45
- padding-block: 0;
46
- }
47
-
48
- ${scoped(" :where(.bf-navigation-bar) :where(.bf-panel-header)")} {
49
- padding-block-end: calc(var(--bf-panel-padding-block) - var(--bf-border-width));
50
- }
51
-
52
- ${scoped(" :where(.bf-panel-controls)")} {
53
- gap: calc(var(--bf-baseline) * 1.5);
54
- }
55
-
56
- ${scoped(" :where(.bf-navigation-bar, .bf-navigation-drawer, .bf-aside) :where(.bf-panel-title)")} {
57
- font-family: inherit;
58
- font-size: 1rem;
59
- font-style: normal;
60
- font-weight: 400;
61
- line-height: 1.5rem;
62
- }
63
-
64
- ${scoped(" :where(.bf-side-navigation-link.is-active, .bf-side-navigation-link[aria-current='page'], .bf-side-navigation-link[aria-current='true'])")} {
65
- background: transparent;
66
- box-shadow: inset var(--bf-bar-thickness) 0 0 var(--vf-color-link-default, #0066cc);
67
- }
68
-
69
- ${scoped(" :where(.bf-navigation-bar)")},
70
- ${scoped(" :where(.bf-navigation-drawer)")},
71
- ${scoped(" :where(.bf-aside)")},
72
- ${scoped(" :where(.bf-panel)")} {
73
- background: var(--vf-color-background-default, #ffffff);
74
- }
75
-
3
+ return `/* Canonical app-tier preset: light application chrome, Ubuntu Sans, and app-surface control overrides. */
4
+ ${scoped()} {
5
+ --bf-app-demo-page-bg: var(--vf-color-background-alt, #f7f7f7);
6
+ --bf-radius: 0;
7
+ color-scheme: light;
8
+ }
9
+
10
+ ${scoped(" :where(.bf-form-label, .bf-form-help, .bf-button, .bf-button.is-base, .bf-status-label, .bf-chip, .bf-checkbox-label, .bf-radio-label, .bf-tabs-link, .bf-accordion-tab, .bf-validation-message)")} {
11
+ font-family: inherit;
12
+ font-size: 0.875rem;
13
+ font-style: normal;
14
+ font-weight: 400;
15
+ line-height: 1.25rem;
16
+ }
17
+
18
+ ${scoped(" :where(.bf-input, .bf-button, .bf-button.is-base)")} {
19
+ font-family: inherit;
20
+ font-size: 0.875rem;
21
+ font-style: normal;
22
+ font-weight: 400;
23
+ line-height: 1.25rem;
24
+ }
25
+
26
+ ${scoped(" :where(.bf-application)")} {
27
+ background: var(--bf-app-demo-page-bg);
28
+ }
29
+
30
+ ${scoped(" :where(.bf-navigation-drawer)")},
31
+ ${scoped(" :where(.bf-navigation:not(.is-collapsed)) > :where(.bf-navigation-drawer)")},
32
+ ${scoped(" :where(.bf-aside.is-overlay, .bf-aside.is-drawer)")} {
33
+ box-shadow: 0 10px 20px rgba(0, 0, 0, 0.12), 0 0 3px rgba(0, 0, 0, 0.12);
34
+ }
35
+
36
+ ${scoped(" :where(.bf-panel-header)")} {
37
+ align-items: start;
38
+ gap: calc(var(--bf-baseline) * 1.5);
39
+ padding-block-end: var(--bf-panel-padding-block);
40
+ padding-block-start: var(--bf-panel-padding-block);
41
+ }
42
+
43
+ ${scoped(" :where(.bf-panel-header.is-navigation-brand)")} {
44
+ gap: 0;
45
+ padding-block: 0;
46
+ }
47
+
48
+ ${scoped(" :where(.bf-navigation-bar) :where(.bf-panel-header)")} {
49
+ padding-block-end: calc(var(--bf-panel-padding-block) - var(--bf-border-width));
50
+ }
51
+
52
+ ${scoped(" :where(.bf-panel-controls)")} {
53
+ gap: calc(var(--bf-baseline) * 1.5);
54
+ }
55
+
56
+ ${scoped(" :where(.bf-navigation-bar, .bf-navigation-drawer, .bf-aside) :where(.bf-panel-title)")} {
57
+ font-family: inherit;
58
+ font-size: 1rem;
59
+ font-style: normal;
60
+ font-weight: 400;
61
+ line-height: 1.5rem;
62
+ }
63
+
64
+ ${scoped(" :where(.bf-side-navigation-link.is-active, .bf-side-navigation-link[aria-current='page'], .bf-side-navigation-link[aria-current='true'])")} {
65
+ background: transparent;
66
+ box-shadow: inset var(--bf-bar-thickness) 0 0 var(--vf-color-link-default, #0066cc);
67
+ }
68
+
69
+ ${scoped(" :where(.bf-navigation-bar)")},
70
+ ${scoped(" :where(.bf-navigation-drawer)")},
71
+ ${scoped(" :where(.bf-aside)")},
72
+ ${scoped(" :where(.bf-panel)")} {
73
+ background: var(--vf-color-background-default, #ffffff);
74
+ }
75
+
76
76
  `;
77
77
  }