@oods/component-styles 0.3.0

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 (16) hide show
  1. package/LICENSE +202 -0
  2. package/NOTICE +2 -0
  3. package/README.md +31 -0
  4. package/dist/chunk-QTCJ7H3Z.js +120 -0
  5. package/dist/components-ported.css +178 -0
  6. package/dist/components.css +1489 -0
  7. package/dist/index.cjs +125 -0
  8. package/dist/index.d.cts +13 -0
  9. package/dist/index.d.ts +13 -0
  10. package/dist/index.js +1 -0
  11. package/dist/ported.cjs +136 -0
  12. package/dist/ported.d.cts +6 -0
  13. package/dist/ported.d.ts +6 -0
  14. package/dist/ported.js +17 -0
  15. package/dist/statusables.css +264 -0
  16. package/package.json +51 -0
package/dist/index.cjs ADDED
@@ -0,0 +1,125 @@
1
+ 'use strict';
2
+
3
+ var brands = require('@oods/tokens/brands');
4
+
5
+ // src/index.ts
6
+ var COMPONENT_STYLE_VERSION = "1.0.0";
7
+ var COMPONENT_STYLE_IDS = [
8
+ "AddressCollectionPanel",
9
+ "AddressEditor",
10
+ "AddressSummaryBadge",
11
+ "AddressValidationTimeline",
12
+ "ArchivePill",
13
+ "ArchiveSummary",
14
+ "AuditEvent",
15
+ "AuditTimeline",
16
+ "Badge",
17
+ "Banner",
18
+ "ArchivedRowOverlay",
19
+ "BillingSummaryBadge",
20
+ "BillingAmountInput",
21
+ "BillingIntervalSelector",
22
+ "BillingCardMeta",
23
+ "AuditSummaryCard",
24
+ "SortIndicator",
25
+ "TimelineEntryLabel",
26
+ "CycleProgressCard",
27
+ "PaymentTimeline",
28
+ "PaymentEventTimeline",
29
+ "Button",
30
+ "CancellationBadge",
31
+ "CancellationForm",
32
+ "CancellationSummary",
33
+ "Card",
34
+ "CardHeader",
35
+ "Checkbox",
36
+ "ClassificationBadge",
37
+ "ClassificationEditor",
38
+ "ClassificationPanel",
39
+ "ColorSwatch",
40
+ "ColorizedBadge",
41
+ "DatePicker",
42
+ "DetailHeader",
43
+ "FilterPanel",
44
+ "FormLabelGroup",
45
+ "Grid",
46
+ "InlineLabel",
47
+ "Input",
48
+ "LabelCell",
49
+ "MembershipAuditTimeline",
50
+ "MembershipPanel",
51
+ "MessageEventTimeline",
52
+ "MessageStatusBadge",
53
+ "OwnerBadge",
54
+ "OwnershipMeta",
55
+ "OwnershipSummary",
56
+ "PaginationBar",
57
+ "PreferenceEditor",
58
+ "PreferencePanel",
59
+ "PreferenceSummaryBadge",
60
+ "PreferenceTimeline",
61
+ "PriceBadge",
62
+ "PriceCardMeta",
63
+ "PriceSummary",
64
+ "RelativeTimestamp",
65
+ "RoleAssignmentForm",
66
+ "RoleBadgeList",
67
+ "SearchInput",
68
+ "Select",
69
+ "Stack",
70
+ "StatusBadge",
71
+ "StatusSelector",
72
+ "StatusTimeline",
73
+ "Table",
74
+ "Tabs",
75
+ "TagInput",
76
+ "TagManager",
77
+ "TagPills",
78
+ "TagSummary",
79
+ "TemplatePicker",
80
+ "Text",
81
+ "Textarea",
82
+ "VizAreaPreview",
83
+ "ArchiveEvent",
84
+ "CancellationEvent",
85
+ "ColorStatePicker",
86
+ "CommunicationDetailPanel",
87
+ "GeoFieldMappingForm",
88
+ "GeoResolutionBadge",
89
+ "GeocodablePreview",
90
+ "StateTransitionEvent",
91
+ "StatusColorLegend",
92
+ "VizAreaControls",
93
+ "VizAxisControls",
94
+ "VizAxisSummary",
95
+ "VizColorControls",
96
+ "VizColorLegendConfig",
97
+ "VizEncodingBadge",
98
+ "VizGraphPreview",
99
+ "VizHeatmapControls",
100
+ "VizHeatmapPreview",
101
+ "VizLineControls",
102
+ "VizLinePreview",
103
+ "VizMarkControls",
104
+ "VizMarkPreview",
105
+ "VizOpacityControls",
106
+ "VizOpacitySummary",
107
+ "VizPointControls",
108
+ "VizPointPreview",
109
+ "VizRoleBadge",
110
+ "VizScaleControls",
111
+ "VizScaleSummary",
112
+ "VizScatterControls",
113
+ "VizScatterPreview",
114
+ "VizShapeControls",
115
+ "VizShapeLegend",
116
+ "VizSizeControls",
117
+ "VizSizeSummary"
118
+ ];
119
+ var SUPPORTED_COMPONENT_THEME_CELLS = Object.freeze(brands.brands.flatMap((brand) => ["light", "dark", "hc"].map((theme) => Object.freeze({ brand, theme }))));
120
+ var COMPONENT_DATA_ATTRIBUTE = "data-oods-component";
121
+
122
+ exports.COMPONENT_DATA_ATTRIBUTE = COMPONENT_DATA_ATTRIBUTE;
123
+ exports.COMPONENT_STYLE_IDS = COMPONENT_STYLE_IDS;
124
+ exports.COMPONENT_STYLE_VERSION = COMPONENT_STYLE_VERSION;
125
+ exports.SUPPORTED_COMPONENT_THEME_CELLS = SUPPORTED_COMPONENT_THEME_CELLS;
package/dist/index.d.cts ADDED
@@ -0,0 +1,13 @@
1
+ declare const COMPONENT_STYLE_VERSION: "1.0.0";
2
+ declare const COMPONENT_STYLE_IDS: readonly ["AddressCollectionPanel", "AddressEditor", "AddressSummaryBadge", "AddressValidationTimeline", "ArchivePill", "ArchiveSummary", "AuditEvent", "AuditTimeline", "Badge", "Banner", "ArchivedRowOverlay", "BillingSummaryBadge", "BillingAmountInput", "BillingIntervalSelector", "BillingCardMeta", "AuditSummaryCard", "SortIndicator", "TimelineEntryLabel", "CycleProgressCard", "PaymentTimeline", "PaymentEventTimeline", "Button", "CancellationBadge", "CancellationForm", "CancellationSummary", "Card", "CardHeader", "Checkbox", "ClassificationBadge", "ClassificationEditor", "ClassificationPanel", "ColorSwatch", "ColorizedBadge", "DatePicker", "DetailHeader", "FilterPanel", "FormLabelGroup", "Grid", "InlineLabel", "Input", "LabelCell", "MembershipAuditTimeline", "MembershipPanel", "MessageEventTimeline", "MessageStatusBadge", "OwnerBadge", "OwnershipMeta", "OwnershipSummary", "PaginationBar", "PreferenceEditor", "PreferencePanel", "PreferenceSummaryBadge", "PreferenceTimeline", "PriceBadge", "PriceCardMeta", "PriceSummary", "RelativeTimestamp", "RoleAssignmentForm", "RoleBadgeList", "SearchInput", "Select", "Stack", "StatusBadge", "StatusSelector", "StatusTimeline", "Table", "Tabs", "TagInput", "TagManager", "TagPills", "TagSummary", "TemplatePicker", "Text", "Textarea", "VizAreaPreview", "ArchiveEvent", "CancellationEvent", "ColorStatePicker", "CommunicationDetailPanel", "GeoFieldMappingForm", "GeoResolutionBadge", "GeocodablePreview", "StateTransitionEvent", "StatusColorLegend", "VizAreaControls", "VizAxisControls", "VizAxisSummary", "VizColorControls", "VizColorLegendConfig", "VizEncodingBadge", "VizGraphPreview", "VizHeatmapControls", "VizHeatmapPreview", "VizLineControls", "VizLinePreview", "VizMarkControls", "VizMarkPreview", "VizOpacityControls", "VizOpacitySummary", "VizPointControls", "VizPointPreview", "VizRoleBadge", "VizScaleControls", "VizScaleSummary", "VizScatterControls", "VizScatterPreview", "VizShapeControls", "VizShapeLegend", "VizSizeControls", "VizSizeSummary"];
3
+ /**
4
+ * Every brand × theme cell the component styles serve. Components read only brand-independent variables, so each
5
+ * brand the token build carries is a cell in each theme (s213-m04: the list comes from the brand registry).
6
+ */
7
+ declare const SUPPORTED_COMPONENT_THEME_CELLS: ReadonlyArray<{
8
+ readonly brand: string;
9
+ readonly theme: 'light' | 'dark' | 'hc';
10
+ }>;
11
+ declare const COMPONENT_DATA_ATTRIBUTE: "data-oods-component";
12
+
13
+ export { COMPONENT_DATA_ATTRIBUTE, COMPONENT_STYLE_IDS, COMPONENT_STYLE_VERSION, SUPPORTED_COMPONENT_THEME_CELLS };
package/dist/index.d.ts ADDED
@@ -0,0 +1,13 @@
1
+ declare const COMPONENT_STYLE_VERSION: "1.0.0";
2
+ declare const COMPONENT_STYLE_IDS: readonly ["AddressCollectionPanel", "AddressEditor", "AddressSummaryBadge", "AddressValidationTimeline", "ArchivePill", "ArchiveSummary", "AuditEvent", "AuditTimeline", "Badge", "Banner", "ArchivedRowOverlay", "BillingSummaryBadge", "BillingAmountInput", "BillingIntervalSelector", "BillingCardMeta", "AuditSummaryCard", "SortIndicator", "TimelineEntryLabel", "CycleProgressCard", "PaymentTimeline", "PaymentEventTimeline", "Button", "CancellationBadge", "CancellationForm", "CancellationSummary", "Card", "CardHeader", "Checkbox", "ClassificationBadge", "ClassificationEditor", "ClassificationPanel", "ColorSwatch", "ColorizedBadge", "DatePicker", "DetailHeader", "FilterPanel", "FormLabelGroup", "Grid", "InlineLabel", "Input", "LabelCell", "MembershipAuditTimeline", "MembershipPanel", "MessageEventTimeline", "MessageStatusBadge", "OwnerBadge", "OwnershipMeta", "OwnershipSummary", "PaginationBar", "PreferenceEditor", "PreferencePanel", "PreferenceSummaryBadge", "PreferenceTimeline", "PriceBadge", "PriceCardMeta", "PriceSummary", "RelativeTimestamp", "RoleAssignmentForm", "RoleBadgeList", "SearchInput", "Select", "Stack", "StatusBadge", "StatusSelector", "StatusTimeline", "Table", "Tabs", "TagInput", "TagManager", "TagPills", "TagSummary", "TemplatePicker", "Text", "Textarea", "VizAreaPreview", "ArchiveEvent", "CancellationEvent", "ColorStatePicker", "CommunicationDetailPanel", "GeoFieldMappingForm", "GeoResolutionBadge", "GeocodablePreview", "StateTransitionEvent", "StatusColorLegend", "VizAreaControls", "VizAxisControls", "VizAxisSummary", "VizColorControls", "VizColorLegendConfig", "VizEncodingBadge", "VizGraphPreview", "VizHeatmapControls", "VizHeatmapPreview", "VizLineControls", "VizLinePreview", "VizMarkControls", "VizMarkPreview", "VizOpacityControls", "VizOpacitySummary", "VizPointControls", "VizPointPreview", "VizRoleBadge", "VizScaleControls", "VizScaleSummary", "VizScatterControls", "VizScatterPreview", "VizShapeControls", "VizShapeLegend", "VizSizeControls", "VizSizeSummary"];
3
+ /**
4
+ * Every brand × theme cell the component styles serve. Components read only brand-independent variables, so each
5
+ * brand the token build carries is a cell in each theme (s213-m04: the list comes from the brand registry).
6
+ */
7
+ declare const SUPPORTED_COMPONENT_THEME_CELLS: ReadonlyArray<{
8
+ readonly brand: string;
9
+ readonly theme: 'light' | 'dark' | 'hc';
10
+ }>;
11
+ declare const COMPONENT_DATA_ATTRIBUTE: "data-oods-component";
12
+
13
+ export { COMPONENT_DATA_ATTRIBUTE, COMPONENT_STYLE_IDS, COMPONENT_STYLE_VERSION, SUPPORTED_COMPONENT_THEME_CELLS };
package/dist/index.js ADDED
@@ -0,0 +1 @@
1
+ export { COMPONENT_DATA_ATTRIBUTE, COMPONENT_STYLE_IDS, COMPONENT_STYLE_VERSION, SUPPORTED_COMPONENT_THEME_CELLS } from './chunk-QTCJ7H3Z.js';
package/dist/ported.cjs ADDED
@@ -0,0 +1,136 @@
1
+ 'use strict';
2
+
3
+ var brands = require('@oods/tokens/brands');
4
+
5
+ // src/index.ts
6
+ var COMPONENT_STYLE_VERSION = "1.0.0";
7
+ var COMPONENT_STYLE_IDS = [
8
+ "AddressCollectionPanel",
9
+ "AddressEditor",
10
+ "AddressSummaryBadge",
11
+ "AddressValidationTimeline",
12
+ "ArchivePill",
13
+ "ArchiveSummary",
14
+ "AuditEvent",
15
+ "AuditTimeline",
16
+ "Badge",
17
+ "Banner",
18
+ "ArchivedRowOverlay",
19
+ "BillingSummaryBadge",
20
+ "BillingAmountInput",
21
+ "BillingIntervalSelector",
22
+ "BillingCardMeta",
23
+ "AuditSummaryCard",
24
+ "SortIndicator",
25
+ "TimelineEntryLabel",
26
+ "CycleProgressCard",
27
+ "PaymentTimeline",
28
+ "PaymentEventTimeline",
29
+ "Button",
30
+ "CancellationBadge",
31
+ "CancellationForm",
32
+ "CancellationSummary",
33
+ "Card",
34
+ "CardHeader",
35
+ "Checkbox",
36
+ "ClassificationBadge",
37
+ "ClassificationEditor",
38
+ "ClassificationPanel",
39
+ "ColorSwatch",
40
+ "ColorizedBadge",
41
+ "DatePicker",
42
+ "DetailHeader",
43
+ "FilterPanel",
44
+ "FormLabelGroup",
45
+ "Grid",
46
+ "InlineLabel",
47
+ "Input",
48
+ "LabelCell",
49
+ "MembershipAuditTimeline",
50
+ "MembershipPanel",
51
+ "MessageEventTimeline",
52
+ "MessageStatusBadge",
53
+ "OwnerBadge",
54
+ "OwnershipMeta",
55
+ "OwnershipSummary",
56
+ "PaginationBar",
57
+ "PreferenceEditor",
58
+ "PreferencePanel",
59
+ "PreferenceSummaryBadge",
60
+ "PreferenceTimeline",
61
+ "PriceBadge",
62
+ "PriceCardMeta",
63
+ "PriceSummary",
64
+ "RelativeTimestamp",
65
+ "RoleAssignmentForm",
66
+ "RoleBadgeList",
67
+ "SearchInput",
68
+ "Select",
69
+ "Stack",
70
+ "StatusBadge",
71
+ "StatusSelector",
72
+ "StatusTimeline",
73
+ "Table",
74
+ "Tabs",
75
+ "TagInput",
76
+ "TagManager",
77
+ "TagPills",
78
+ "TagSummary",
79
+ "TemplatePicker",
80
+ "Text",
81
+ "Textarea",
82
+ "VizAreaPreview",
83
+ "ArchiveEvent",
84
+ "CancellationEvent",
85
+ "ColorStatePicker",
86
+ "CommunicationDetailPanel",
87
+ "GeoFieldMappingForm",
88
+ "GeoResolutionBadge",
89
+ "GeocodablePreview",
90
+ "StateTransitionEvent",
91
+ "StatusColorLegend",
92
+ "VizAreaControls",
93
+ "VizAxisControls",
94
+ "VizAxisSummary",
95
+ "VizColorControls",
96
+ "VizColorLegendConfig",
97
+ "VizEncodingBadge",
98
+ "VizGraphPreview",
99
+ "VizHeatmapControls",
100
+ "VizHeatmapPreview",
101
+ "VizLineControls",
102
+ "VizLinePreview",
103
+ "VizMarkControls",
104
+ "VizMarkPreview",
105
+ "VizOpacityControls",
106
+ "VizOpacitySummary",
107
+ "VizPointControls",
108
+ "VizPointPreview",
109
+ "VizRoleBadge",
110
+ "VizScaleControls",
111
+ "VizScaleSummary",
112
+ "VizScatterControls",
113
+ "VizScatterPreview",
114
+ "VizShapeControls",
115
+ "VizShapeLegend",
116
+ "VizSizeControls",
117
+ "VizSizeSummary"
118
+ ];
119
+ Object.freeze(brands.brands.flatMap((brand) => ["light", "dark", "hc"].map((theme) => Object.freeze({ brand, theme }))));
120
+
121
+ // src/ported.ts
122
+ var PORTED_COMPONENT_STYLE_VERSION = COMPONENT_STYLE_VERSION;
123
+ var historicalIds = [
124
+ "StatusBadge",
125
+ "PriceBadge",
126
+ "StatusTimeline",
127
+ "AuditTimeline",
128
+ "CancellationSummary",
129
+ "SearchInput",
130
+ "PaginationBar",
131
+ "RelativeTimestamp"
132
+ ];
133
+ var PORTED_COMPONENT_STYLE_IDS = historicalIds.filter((id) => COMPONENT_STYLE_IDS.includes(id));
134
+
135
+ exports.PORTED_COMPONENT_STYLE_IDS = PORTED_COMPONENT_STYLE_IDS;
136
+ exports.PORTED_COMPONENT_STYLE_VERSION = PORTED_COMPONENT_STYLE_VERSION;
package/dist/ported.d.cts ADDED
@@ -0,0 +1,6 @@
1
+ /** @deprecated Compatibility metadata for the former eight root families. */
2
+ declare const PORTED_COMPONENT_STYLE_VERSION: "1.0.0";
3
+ declare const PORTED_COMPONENT_STYLE_IDS: ("StatusBadge" | "PriceBadge" | "StatusTimeline" | "AuditTimeline" | "CancellationSummary" | "SearchInput" | "PaginationBar" | "RelativeTimestamp")[];
4
+ type PortedComponentStyleId = typeof PORTED_COMPONENT_STYLE_IDS[number];
5
+
6
+ export { PORTED_COMPONENT_STYLE_IDS, PORTED_COMPONENT_STYLE_VERSION, type PortedComponentStyleId };
package/dist/ported.d.ts ADDED
@@ -0,0 +1,6 @@
1
+ /** @deprecated Compatibility metadata for the former eight root families. */
2
+ declare const PORTED_COMPONENT_STYLE_VERSION: "1.0.0";
3
+ declare const PORTED_COMPONENT_STYLE_IDS: ("StatusBadge" | "PriceBadge" | "StatusTimeline" | "AuditTimeline" | "CancellationSummary" | "SearchInput" | "PaginationBar" | "RelativeTimestamp")[];
4
+ type PortedComponentStyleId = typeof PORTED_COMPONENT_STYLE_IDS[number];
5
+
6
+ export { PORTED_COMPONENT_STYLE_IDS, PORTED_COMPONENT_STYLE_VERSION, type PortedComponentStyleId };
package/dist/ported.js ADDED
@@ -0,0 +1,17 @@
1
+ import { COMPONENT_STYLE_IDS, COMPONENT_STYLE_VERSION } from './chunk-QTCJ7H3Z.js';
2
+
3
+ // src/ported.ts
4
+ var PORTED_COMPONENT_STYLE_VERSION = COMPONENT_STYLE_VERSION;
5
+ var historicalIds = [
6
+ "StatusBadge",
7
+ "PriceBadge",
8
+ "StatusTimeline",
9
+ "AuditTimeline",
10
+ "CancellationSummary",
11
+ "SearchInput",
12
+ "PaginationBar",
13
+ "RelativeTimestamp"
14
+ ];
15
+ var PORTED_COMPONENT_STYLE_IDS = historicalIds.filter((id) => COMPONENT_STYLE_IDS.includes(id));
16
+
17
+ export { PORTED_COMPONENT_STYLE_IDS, PORTED_COMPONENT_STYLE_VERSION };
package/dist/statusables.css ADDED
@@ -0,0 +1,264 @@
1
+ .statusable-badge {
2
+ --statusable-badge-background: transparent;
3
+ --statusable-badge-border: transparent;
4
+ --statusable-badge-foreground: currentColor;
5
+ --statusable-badge-icon-color: currentColor;
6
+ display: inline-flex;
7
+ align-items: center;
8
+ gap: 0.35rem;
9
+ border-radius: 9999px;
10
+ border: 1px solid var(--statusable-badge-border);
11
+ background-color: var(--statusable-badge-background);
12
+ color: var(--statusable-badge-foreground);
13
+ font-size: 0.75rem;
14
+ font-weight: 600;
15
+ letter-spacing: 0.08em;
16
+ text-transform: uppercase;
17
+ padding: 0.125rem 0.5rem;
18
+ line-height: 1.25;
19
+ min-height: 1.5rem;
20
+ transition:
21
+ background-color 120ms ease,
22
+ color 120ms ease,
23
+ border-color 120ms ease,
24
+ box-shadow 120ms ease;
25
+ outline: none;
26
+ }
27
+
28
+ .statusable-badge__icon {
29
+ display: inline-flex;
30
+ align-items: center;
31
+ color: var(--statusable-badge-icon-color);
32
+ font-size: 0.85em;
33
+ }
34
+
35
+ .statusable-badge__label {
36
+ display: inline-flex;
37
+ align-items: center;
38
+ line-height: 1;
39
+ }
40
+
41
+ .statusable-badge:focus-visible {
42
+ outline: var(--cmp-chip-focus-width, 2px) solid var(--cmp-chip-focus-outer, currentColor);
43
+ outline-offset: 2px;
44
+ box-shadow: 0 0 0 calc(var(--cmp-chip-focus-width, 2px) + 2px) var(--cmp-chip-focus-inner, transparent);
45
+ }
46
+
47
+ @media (forced-colors: active) {
48
+ .statusable-badge {
49
+ forced-color-adjust: none;
50
+ background-color: Canvas;
51
+ color: CanvasText;
52
+ border-color: CanvasText;
53
+ }
54
+
55
+ .statusable-badge__icon {
56
+ color: CanvasText;
57
+ }
58
+ }
59
+
60
+ .statusable-banner {
61
+ --statusable-banner-background: var(--cmp-banner-background, transparent);
62
+ --statusable-banner-border: var(--cmp-banner-border, transparent);
63
+ --statusable-banner-foreground: var(--cmp-banner-text, currentColor);
64
+ --statusable-banner-icon-color: var(--cmp-banner-icon, currentColor);
65
+ display: grid;
66
+ grid-template-columns: auto 1fr auto;
67
+ align-items: flex-start;
68
+ gap: var(--cmp-spacing-inline-sm, 0.75rem);
69
+ padding: var(--cmp-spacing-inset-compact, 0.75rem) var(--cmp-spacing-inset-default, 1rem);
70
+ background-color: var(--statusable-banner-background);
71
+ border: 1px solid var(--statusable-banner-border);
72
+ border-radius: 0.75rem;
73
+ color: var(--statusable-banner-foreground);
74
+ line-height: 1.4;
75
+ }
76
+
77
+ .statusable-banner__icon {
78
+ display: inline-flex;
79
+ align-items: center;
80
+ justify-content: center;
81
+ color: var(--statusable-banner-icon-color);
82
+ font-size: 1.25rem;
83
+ margin-top: 0.1rem;
84
+ }
85
+
86
+ .statusable-banner__content {
87
+ display: flex;
88
+ flex-direction: column;
89
+ gap: 0.25rem;
90
+ min-width: 0;
91
+ }
92
+
93
+ .statusable-banner__title {
94
+ font-weight: 600;
95
+ margin: 0;
96
+ }
97
+
98
+ .statusable-banner__description {
99
+ margin: 0;
100
+ font-size: 0.95rem;
101
+ }
102
+
103
+ .statusable-banner__actions {
104
+ display: flex;
105
+ gap: var(--cmp-spacing-inline-sm, 0.75rem);
106
+ align-items: center;
107
+ flex-wrap: wrap;
108
+ }
109
+
110
+ .statusable-banner__dismiss {
111
+ appearance: none;
112
+ border: none;
113
+ background: none;
114
+ color: inherit;
115
+ padding: 0;
116
+ cursor: pointer;
117
+ font: inherit;
118
+ display: inline-flex;
119
+ align-items: center;
120
+ justify-content: center;
121
+ width: 1.75rem;
122
+ height: 1.75rem;
123
+ border-radius: 999px;
124
+ transition: background-color 120ms ease;
125
+ }
126
+
127
+ .statusable-banner__dismiss:hover {
128
+ background-color: color-mix(in srgb, var(--statusable-banner-foreground) 12%, transparent);
129
+ }
130
+
131
+ .statusable-banner__dismiss:focus-visible {
132
+ outline: var(--cmp-focus-width, 2px) solid var(--cmp-focus-outer, currentColor);
133
+ outline-offset: 2px;
134
+ }
135
+
136
+ .statusable-banner:focus-visible {
137
+ outline: var(--cmp-focus-width, 2px) solid var(--cmp-focus-outer, currentColor);
138
+ outline-offset: 2px;
139
+ }
140
+
141
+ @media (forced-colors: active) {
142
+ .statusable-banner {
143
+ forced-color-adjust: none;
144
+ background-color: Canvas;
145
+ border-color: CanvasText;
146
+ color: CanvasText;
147
+ }
148
+
149
+ .statusable-banner__icon {
150
+ color: CanvasText;
151
+ }
152
+ }
153
+
154
+ .statusable-toast {
155
+ --statusable-toast-background: var(--cmp-status-neutral-surface);
156
+ --statusable-toast-border: var(--cmp-status-neutral-border);
157
+ --statusable-toast-foreground: var(--cmp-status-neutral-text);
158
+ --statusable-toast-icon-color: var(--cmp-status-neutral-icon);
159
+ position: relative;
160
+ display: grid;
161
+ grid-template-columns: auto 1fr auto;
162
+ gap: var(--cmp-spacing-inline-sm, 0.75rem);
163
+ padding: var(--cmp-spacing-inset-compact, 0.75rem) var(--cmp-spacing-inset-default, 1rem);
164
+ border-radius: 0.75rem;
165
+ background-color: var(--statusable-toast-background);
166
+ border: 1px solid var(--statusable-toast-border);
167
+ color: var(--statusable-toast-foreground);
168
+ box-shadow: var(
169
+ --sys-shadow-elevation-overlay,
170
+ 0 18px 28px -16px color-mix(in srgb, var(--cmp-text-body, CanvasText) 24%, transparent)
171
+ );
172
+ opacity: 0;
173
+ transform: translateY(8px);
174
+ transition: opacity 180ms ease, transform 180ms ease;
175
+ outline: none;
176
+ }
177
+
178
+ .statusable-toast[data-state='open'] {
179
+ opacity: 1;
180
+ transform: translateY(0);
181
+ }
182
+
183
+ .statusable-toast[data-state='closed'] {
184
+ pointer-events: none;
185
+ }
186
+
187
+ .statusable-toast__icon {
188
+ display: inline-flex;
189
+ align-items: center;
190
+ justify-content: center;
191
+ color: var(--statusable-toast-icon-color);
192
+ font-size: 1.1rem;
193
+ margin-top: 0.1rem;
194
+ }
195
+
196
+ .statusable-toast__content {
197
+ display: flex;
198
+ flex-direction: column;
199
+ gap: 0.25rem;
200
+ min-width: 0;
201
+ }
202
+
203
+ .statusable-toast__title {
204
+ font-weight: 600;
205
+ margin: 0;
206
+ }
207
+
208
+ .statusable-toast__description {
209
+ margin: 0;
210
+ font-size: 0.95rem;
211
+ }
212
+
213
+ .statusable-toast__dismiss {
214
+ appearance: none;
215
+ border: none;
216
+ background: none;
217
+ color: inherit;
218
+ padding: 0;
219
+ cursor: pointer;
220
+ font: inherit;
221
+ display: inline-flex;
222
+ align-items: center;
223
+ justify-content: center;
224
+ width: 1.75rem;
225
+ height: 1.75rem;
226
+ border-radius: 999px;
227
+ transition: background-color 120ms ease;
228
+ }
229
+
230
+ .statusable-toast__dismiss:hover {
231
+ background-color: color-mix(in srgb, var(--statusable-toast-foreground) 12%, transparent);
232
+ }
233
+
234
+ .statusable-toast__dismiss:focus-visible,
235
+ .statusable-toast:focus-visible {
236
+ outline: var(--cmp-focus-width, 2px) solid var(--cmp-focus-outer, currentColor);
237
+ outline-offset: 2px;
238
+ }
239
+
240
+ @media (prefers-reduced-motion: reduce) {
241
+ .statusable-toast {
242
+ transition: none;
243
+ }
244
+ }
245
+
246
+ @media (forced-colors: active) {
247
+ .statusable-toast {
248
+ forced-color-adjust: none;
249
+ background-color: Canvas;
250
+ border-color: CanvasText;
251
+ color: CanvasText;
252
+ box-shadow: none;
253
+ }
254
+
255
+ .statusable-toast__icon {
256
+ color: CanvasText;
257
+ }
258
+ }
259
+
260
+ /* HC token themes use Canvas for badges. The icon must follow that same text
261
+ * pair even when the operating system has not enabled forced colors. */
262
+ [data-theme='hc'] .statusable-badge__icon {
263
+ color: CanvasText;
264
+ }
package/package.json ADDED
@@ -0,0 +1,51 @@
1
+ {
2
+ "name": "@oods/component-styles",
3
+ "version": "0.3.0",
4
+ "description": "Token-driven shared CSS contract for OODS React and Vue components.",
5
+ "type": "module",
6
+ "license": "Apache-2.0",
7
+ "engines": {
8
+ "node": ">=20.11.1"
9
+ },
10
+ "files": [
11
+ "dist",
12
+ "LICENSE",
13
+ "NOTICE",
14
+ "README.md"
15
+ ],
16
+ "scripts": {
17
+ "build": "rimraf dist && tsup --config tsup.config.ts && node scripts/copy-css.mjs",
18
+ "clean": "rimraf dist",
19
+ "typecheck": "tsc --noEmit --pretty false -p tsconfig.json",
20
+ "test": "vitest run --config vitest.config.ts",
21
+ "prepack": "pnpm run build"
22
+ },
23
+ "exports": {
24
+ ".": {
25
+ "types": "./dist/index.d.ts",
26
+ "import": "./dist/index.js",
27
+ "require": "./dist/index.cjs"
28
+ },
29
+ "./css": {
30
+ "default": "./dist/components.css"
31
+ },
32
+ "./package.json": "./package.json"
33
+ },
34
+ "main": "./dist/index.cjs",
35
+ "module": "./dist/index.js",
36
+ "types": "./dist/index.d.ts",
37
+ "sideEffects": [
38
+ "**/*.css"
39
+ ],
40
+ "dependencies": {
41
+ "@oods/tokens": "0.3.0"
42
+ },
43
+ "devDependencies": {
44
+ "@oods/component-contracts": "0.3.0",
45
+ "playwright": "^1.56.1"
46
+ },
47
+ "packageManager": "pnpm@9.12.2",
48
+ "publishConfig": {
49
+ "access": "public"
50
+ }
51
+ }