@oods/component-styles 0.3.2 → 0.3.3

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 (3) hide show
  1. package/README.md +1 -1
  2. package/dist/components.css +41 -17
  3. package/package.json +3 -3
package/README.md CHANGED
@@ -28,4 +28,4 @@ Use matching versions of the OODS packages. These packages are separate from the
28
28
 
29
29
  ## License
30
30
 
31
- Apache License 2.0. See [LICENSE](https://cdn.jsdelivr.net/npm/@oods/component-styles@0.3.2/LICENSE) and [NOTICE](https://cdn.jsdelivr.net/npm/@oods/component-styles@0.3.2/NOTICE). Generated output belongs to its user; installed package dependencies retain their own licenses.
31
+ Apache License 2.0. See [LICENSE](https://cdn.jsdelivr.net/npm/@oods/component-styles@0.3.3/LICENSE) and [NOTICE](https://cdn.jsdelivr.net/npm/@oods/component-styles@0.3.3/NOTICE). Generated output belongs to its user; installed package dependencies retain their own licenses.
package/dist/components.css CHANGED
@@ -35,7 +35,10 @@
35
35
  text-transform: none;
36
36
  gap: var(--cmp-badge-gap, 0.25rem);
37
37
  }
38
- .oods-badge__label { line-height: inherit; }
38
+ /* s221-m02 (#2482 ruling 2): React and Vue render one Badge markup, an icon slot and a label span, styled here; React's
39
+ * former statusable-badge classes no longer apply. */
40
+ .oods-badge__label { display: inline-flex; align-items: center; line-height: inherit; }
41
+ .oods-badge__icon { display: inline-flex; align-items: center; font-size: 0.85em; }
39
42
 
40
43
  /* Solid reverses the already contrast-checked status surface/text pair. */
41
44
  :where(.oods-badge, [data-oods-component='Badge'])[data-emphasis='solid'] {
@@ -61,10 +64,15 @@
61
64
  color: var(--cmp-banner-text, var(--cmp-text-body, currentColor));
62
65
  }
63
66
 
64
- .oods-banner__title,
65
- .oods-banner-title {
66
- font-weight: var(--ref-typography-weights-bold, 700);
67
- }
67
+ /* s221-m02 (#2482 ruling 2): the one Banner markup React and Vue share. A status icon takes its own column; the content
68
+ * stacks the title, detail, body and actions without paragraph margins. React's former statusable-banner classes, which
69
+ * gave React alone a three-column grid, no longer apply. */
70
+ :where(.oods-banner:has(> .oods-banner__icon)) { grid-template-columns: auto 1fr auto; }
71
+ .oods-banner__icon { display: inline-flex; align-items: center; justify-content: center; font-size: 1.25em; }
72
+ .oods-banner__content { display: grid; align-content: start; gap: var(--sys-control-gap-compact, 0.25rem); min-inline-size: 0; }
73
+ .oods-banner__title { font-weight: var(--ref-typography-weights-bold, 700); }
74
+ :is(.oods-banner__detail, .oods-banner__body) { margin: 0; }
75
+ .oods-banner__actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--cmp-spacing-inline-sm, 0.75rem); margin-block-start: var(--sys-control-gap-compact, 0.25rem); }
68
76
 
69
77
  :where(.oods-button, [data-oods-component='Button']) {
70
78
  --oods-button-min-block-size: var(--cmp-button-height, 2.5rem);
@@ -851,6 +859,9 @@
851
859
  text-align: start;
852
860
  }
853
861
 
862
+ /* A row's action is the browser's own button, which otherwise takes the platform's font. */
863
+ :where(.oods-table-row-action) { font: inherit; }
864
+
854
865
  :where(.oods-tabs, [data-oods-component='Tabs']) {
855
866
  --oods-tabs-font-size: var(--sys-text-size-md, 1rem);
856
867
  --oods-tabs-padding-block: var(--cmp-tabs-padding-block, 0.625rem);
@@ -951,14 +962,16 @@
951
962
  }
952
963
  }
953
964
 
954
- [data-theme='hc'] :where([data-oods-component='ColorSwatch'], [data-oods-component='ColorizedBadge'], [data-oods-component='ArchivePill'], [data-oods-component='CancellationBadge'], [data-oods-component='OwnerBadge'], [data-oods-component='ClassificationBadge'], [data-oods-component='AddressSummaryBadge'], [data-oods-component='MessageStatusBadge'], [data-oods-component='PreferenceSummaryBadge'], [data-oods-component='RoleBadgeList'], [data-oods-component='TagPills']) {
965
+ /* s221-m02 (#2482 ruling 4): a theme works in any element, so an hc rule reaches only what hc themes most closely:
966
+ * never the inside of a panel that sets another theme within an hc page. The :where() adds no specificity. */
967
+ [data-theme='hc'] :where([data-oods-component='ColorSwatch'], [data-oods-component='ColorizedBadge'], [data-oods-component='ArchivePill'], [data-oods-component='CancellationBadge'], [data-oods-component='OwnerBadge'], [data-oods-component='ClassificationBadge'], [data-oods-component='AddressSummaryBadge'], [data-oods-component='MessageStatusBadge'], [data-oods-component='PreferenceSummaryBadge'], [data-oods-component='RoleBadgeList'], [data-oods-component='TagPills']):not(:where([data-theme='hc'] [data-theme]:not([data-theme='hc']) *)) {
955
968
  border-color: CanvasText;
956
969
  background: Canvas;
957
970
  color: CanvasText;
958
971
  }
959
972
 
960
- [data-theme='hc'] :where([data-oods-component='ColorSwatch']) > [data-oods-swatch-chip],
961
- [data-theme='hc'] :where([data-oods-component='ColorizedBadge']) [data-oods-badge-marker] {
973
+ [data-theme='hc'] :where([data-oods-component='ColorSwatch']) > [data-oods-swatch-chip]:not(:where([data-theme='hc'] [data-theme]:not([data-theme='hc']) *)),
974
+ [data-theme='hc'] :where([data-oods-component='ColorizedBadge']) [data-oods-badge-marker]:not(:where([data-theme='hc'] [data-theme]:not([data-theme='hc']) *)) {
962
975
  border-color: CanvasText;
963
976
  background: CanvasText;
964
977
  }
@@ -973,23 +986,23 @@
973
986
  [data-oods-component='Badge'],
974
987
  .oods-banner,
975
988
  [data-oods-component='Banner']
976
- ) {
989
+ ):not(:where([data-theme='hc'] [data-theme]:not([data-theme='hc']) *)) {
977
990
  border-color: Highlight;
978
991
  background: Canvas;
979
992
  color: CanvasText;
980
993
  }
981
994
 
982
- [data-theme='hc'] .oods-field-error {
995
+ [data-theme='hc'] .oods-field-error:not(:where([data-theme='hc'] [data-theme]:not([data-theme='hc']) *)) {
983
996
  color: CanvasText;
984
997
  }
985
998
 
986
- [data-theme='hc'] :where(.oods-button, [data-oods-component='Button']):not(:disabled) {
999
+ [data-theme='hc'] :where(.oods-button, [data-oods-component='Button']):not(:disabled):not(:where([data-theme='hc'] [data-theme]:not([data-theme='hc']) *)) {
987
1000
  border-color: Highlight;
988
1001
  background: Highlight;
989
1002
  color: HighlightText;
990
1003
  }
991
1004
 
992
- [data-theme='hc'] :where(.oods-button, [data-oods-component='Button']):disabled {
1005
+ [data-theme='hc'] :where(.oods-button, [data-oods-component='Button']):disabled:not(:where([data-theme='hc'] [data-theme]:not([data-theme='hc']) *)) {
993
1006
  border-color: GrayText;
994
1007
  background: Canvas;
995
1008
  color: GrayText;
@@ -1004,7 +1017,7 @@
1004
1017
  }
1005
1018
  }
1006
1019
 
1007
- [data-theme='hc'] :where([data-oods-component='AddressCollectionPanel'], [data-oods-component='ClassificationPanel'], [data-oods-component='MembershipPanel'], [data-oods-component='PreferencePanel'], [data-oods-component='FilterPanel'], [data-oods-component='ArchiveSummary'], [data-oods-component='OwnershipSummary'], [data-oods-component='TagSummary'], [data-oods-component='PriceSummary'], [data-oods-component='TagManager'], [data-oods-component='AddressValidationTimeline'], [data-oods-component='MembershipAuditTimeline'], [data-oods-component='MessageEventTimeline'], [data-oods-component='PreferenceTimeline'], [data-oods-component='AuditEvent'], [data-oods-component='AddressEditor'], [data-oods-component='CancellationForm'], [data-oods-component='ClassificationEditor'], [data-oods-component='PreferenceEditor'], [data-oods-component='RoleAssignmentForm'], [data-oods-component='StatusSelector'], [data-oods-component='TagInput'], [data-oods-component='TemplatePicker']) {
1020
+ [data-theme='hc'] :where([data-oods-component='AddressCollectionPanel'], [data-oods-component='ClassificationPanel'], [data-oods-component='MembershipPanel'], [data-oods-component='PreferencePanel'], [data-oods-component='FilterPanel'], [data-oods-component='ArchiveSummary'], [data-oods-component='OwnershipSummary'], [data-oods-component='TagSummary'], [data-oods-component='PriceSummary'], [data-oods-component='TagManager'], [data-oods-component='AddressValidationTimeline'], [data-oods-component='MembershipAuditTimeline'], [data-oods-component='MessageEventTimeline'], [data-oods-component='PreferenceTimeline'], [data-oods-component='AuditEvent'], [data-oods-component='AddressEditor'], [data-oods-component='CancellationForm'], [data-oods-component='ClassificationEditor'], [data-oods-component='PreferenceEditor'], [data-oods-component='RoleAssignmentForm'], [data-oods-component='StatusSelector'], [data-oods-component='TagInput'], [data-oods-component='TemplatePicker']):not(:where([data-theme='hc'] [data-theme]:not([data-theme='hc']) *)) {
1008
1021
  border-color: CanvasText;
1009
1022
  background: Canvas;
1010
1023
  color: CanvasText;
@@ -1364,7 +1377,7 @@
1364
1377
  [data-oods-collection-toolbar] select { width: 100%; box-sizing: border-box; }
1365
1378
  [data-oods-component='Stack']:has(> [data-oods-collection-toolbar]) { font-family: var(--ref-typography-families-sans, system-ui, sans-serif); }
1366
1379
  .oods-collection-row { --oods-button-background: var(--sys-surface-raised); --oods-button-background-hover: var(--sys-surface-subtle); --oods-button-border: var(--sys-border-subtle); --oods-button-text: var(--sys-text-primary); width: 100%; display: flex; flex-wrap: wrap; align-items: center; gap: var(--cmp-spacing-inline-sm, 0.75rem); text-align: left; padding: var(--cmp-spacing-inset-default, 1rem); }
1367
- [data-theme='hc'] .oods-collection-row:not(:disabled) { background: var(--sys-surface-raised); color: var(--sys-text-primary); }
1380
+ [data-theme='hc'] .oods-collection-row:not(:disabled):not(:where([data-theme='hc'] [data-theme]:not([data-theme='hc']) *)) { background: var(--sys-surface-raised); color: var(--sys-text-primary); }
1368
1381
  .oods-collection-row > :first-child { min-width: 0; flex: 1 1 140px; font-weight: var(--ref-typography-weights-semibold, 600); }
1369
1382
  .oods-collection-row .oods-badge { max-width: 100%; width: fit-content; flex: 0 0 auto; text-transform: none; letter-spacing: normal; }
1370
1383
  [data-oods-collection="events"] time { display: block; margin-top: var(--cmp-spacing-stack-xs, 0.5rem); font-size: var(--sys-text-size-sm, 0.875rem); }
@@ -1376,7 +1389,7 @@
1376
1389
  .oods-audit-summary dl { display: grid; grid-template-columns: auto 1fr; gap: var(--cmp-spacing-inline-sm); }
1377
1390
  .oods-audit-summary dd { margin: 0; }
1378
1391
  :where(.oods-sort-indicator, [data-oods-component='SortIndicator']) { border-collapse: collapse; color: var(--cmp-text-body); }
1379
- .oods-sort-indicator button { padding: var(--cmp-spacing-inline-sm); background: var(--cmp-surface-panel); color: var(--cmp-text-body); border: 1px solid var(--cmp-border-default); border-radius: var(--cmp-input-radius); cursor: pointer; }
1392
+ .oods-sort-indicator button { padding: var(--cmp-spacing-inline-sm); background: var(--cmp-surface-panel); color: var(--cmp-text-body); border: 1px solid var(--cmp-border-default); border-radius: var(--cmp-input-radius); font: inherit; cursor: pointer; }
1380
1393
  [data-oods-component='TimelineEntryLabel'] { color: var(--cmp-text-body); }
1381
1394
 
1382
1395
  .oods-trait-recipe, :where([data-oods-component='ArchiveEvent'], [data-oods-component='CancellationEvent'], [data-oods-component='ColorStatePicker'], [data-oods-component='CommunicationDetailPanel'], [data-oods-component='GeoFieldMappingForm'], [data-oods-component='GeocodablePreview'], [data-oods-component='StateTransitionEvent'], [data-oods-component='StatusColorLegend'], [data-oods-component='VizAreaControls'], [data-oods-component='VizAxisControls'], [data-oods-component='VizAxisSummary'], [data-oods-component='VizColorControls'], [data-oods-component='VizColorLegendConfig'], [data-oods-component='VizHeatmapControls'], [data-oods-component='VizLineControls'], [data-oods-component='VizMarkControls'], [data-oods-component='VizOpacityControls'], [data-oods-component='VizOpacitySummary'], [data-oods-component='VizPointControls'], [data-oods-component='VizScaleControls'], [data-oods-component='VizScaleSummary'], [data-oods-component='VizScatterControls'], [data-oods-component='VizShapeControls'], [data-oods-component='VizShapeLegend'], [data-oods-component='VizSizeControls'], [data-oods-component='VizSizeSummary']) { min-width: 0; margin: 0; padding: var(--cmp-spacing-inset-default); border: 1px solid var(--cmp-border-default); border-radius: var(--cmp-input-radius); background: var(--cmp-surface-panel); color: var(--cmp-text-body); overflow-wrap: anywhere; }
@@ -1397,6 +1410,17 @@
1397
1410
  /* s213-m03: a declared major-unit amount reads through PriceBadge in a detail row; its pill hugs the amount instead of
1398
1411
  stretching across the row. */
1399
1412
  [data-oods-component='Stack'][id$='-read-field'] > [data-oods-component='PriceBadge'] { align-self: flex-start; }
1413
+ /* s221-m02 (#2482 ruling 7; the website's Warehouse, message dfc707d1): at desktop width a panel of read-only rows uses
1414
+ * the room, in two columns. The panel's stack layout is inline in the generated source, so display is overridden here
1415
+ * and the generated source does not move. */
1416
+ @media (min-width: 48rem) {
1417
+ [data-oods-component='Stack']:has(> [data-oods-component='Stack'][id$='-read-field']):not([id$='-read-fields']) {
1418
+ display: grid !important;
1419
+ grid-template-columns: repeat(2, minmax(0, 1fr));
1420
+ align-items: start;
1421
+ }
1422
+ [data-oods-component='Stack']:has(> [data-oods-component='Stack'][id$='-read-field']):not([id$='-read-fields']) > :not([id$='-read-field']) { grid-column: 1 / -1; }
1423
+ }
1400
1424
  [data-oods-component='StatusBadge'] { text-transform: none; letter-spacing: normal; width: fit-content; }
1401
1425
 
1402
1426
  /* Keep the frozen ported block intact; current recipe roles follow semantic fallbacks. */
@@ -1479,11 +1503,11 @@ input[data-oods-component='Checkbox'], .oods-field input[type='checkbox'] { marg
1479
1503
 
1480
1504
  /* A destructive action remains distinguishable when every action uses the
1481
1505
  * user's HC system colors: shape and a warning glyph carry the distinction. */
1482
- [data-theme='hc'] :where(.oods-button, [data-oods-component='Button'])[data-intent='danger']:not(:disabled) {
1506
+ [data-theme='hc'] :where(.oods-button, [data-oods-component='Button'])[data-intent='danger']:not(:disabled):not(:where([data-theme='hc'] [data-theme]:not([data-theme='hc']) *)) {
1483
1507
  border: 3px double CanvasText;
1484
1508
  background: Canvas;
1485
1509
  color: CanvasText;
1486
1510
  }
1487
- [data-theme='hc'] :where(.oods-button, [data-oods-component='Button'])[data-intent='danger']::before {
1511
+ [data-theme='hc'] :where(.oods-button, [data-oods-component='Button'])[data-intent='danger']:not(:where([data-theme='hc'] [data-theme]:not([data-theme='hc']) *))::before {
1488
1512
  content: "⚠" / "";
1489
1513
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@oods/component-styles",
3
- "version": "0.3.2",
3
+ "version": "0.3.3",
4
4
  "description": "Shared CSS for the OODS Foundry React and Vue components, driven by its design tokens.",
5
5
  "homepage": "https://oods-foundry.com/",
6
6
  "bugs": {
@@ -49,10 +49,10 @@
49
49
  "**/*.css"
50
50
  ],
51
51
  "dependencies": {
52
- "@oods/tokens": "0.3.2"
52
+ "@oods/tokens": "0.3.3"
53
53
  },
54
54
  "devDependencies": {
55
- "@oods/component-contracts": "0.3.2",
55
+ "@oods/component-contracts": "0.3.3",
56
56
  "playwright": "^1.56.1"
57
57
  },
58
58
  "packageManager": "pnpm@9.12.2",