@ciridae/ui 1.0.4 → 1.0.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.
- package/dist/components/app-navigation.js +6 -1
- package/dist/components/chat-sheet.js +3 -3
- package/dist/components/chat.js +3 -4
- package/dist/components/editable-field.d.ts +7 -2
- package/dist/components/editable-field.js +1 -1
- package/dist/preset.js +2 -0
- package/dist/styled-system/styles.css +16 -19
- package/dist/styled-system/tokens/index.mjs +4 -0
- package/dist/styled-system/tokens/tokens.d.ts +1 -1
- package/dist/theme/tokens.js +2 -1
- package/package.json +1 -1
|
@@ -38,6 +38,11 @@ const foldScroll = css({
|
|
|
38
38
|
maxHeight: "200px",
|
|
39
39
|
overflowY: "auto",
|
|
40
40
|
});
|
|
41
|
+
// The kit draws the collapsed sidebar's expand button as its 32px round button, a step under
|
|
42
|
+
// the rail's other round buttons; the child selector outranks the button's own size.
|
|
43
|
+
const expandButtonRail = css({
|
|
44
|
+
"& > button": { width: "control.roundRail", height: "control.roundRail" },
|
|
45
|
+
});
|
|
41
46
|
/** The tallest row, so an estimate of the folded rows' height never overshoots. */
|
|
42
47
|
const SIDEBAR_ROW_HEIGHT = 32;
|
|
43
48
|
/**
|
|
@@ -110,7 +115,7 @@ export function AppNavigation({ sections, activeId: ownActiveId = null, renderLi
|
|
|
110
115
|
const sectionBlock = (section) => (_jsxs(SidebarSection, { label: section.label, children: [_jsx(SectionItems, { section: section, activeIds: activeIds, renderLink: renderLink, roomy: roomy, labels: labels }), section.footer && _jsx("div", { className: sectionFooter, children: section.footer })] }, section.id));
|
|
111
116
|
return (_jsxs(AppSidebar, { "aria-label": labels.navigation, collapsed: collapsed, ...props, children: [_jsxs(AppSidebarNav, { ref: room.navRef, children: [header, sectionRuns(sections).map((run) => run.panel ? (_jsx(SidebarPanel, { children: run.sections.map(sectionBlock) }, run.sections[0].id)) : (_jsx(Fragment, { children: run.sections.map(sectionBlock) }, run.sections[0].id)))] }), _jsxs(AppSidebarRail, { children: [railHeader, sections
|
|
112
117
|
.filter((section) => section.rail !== false && section.items.length > 0)
|
|
113
|
-
.map((section) => (_jsxs("div", { className: railSection, children: [section.label && _jsx(SidebarRailRule, {}), section.items.map((item) => (_jsx(SidebarItem, { "aria-label": item.label, icon: item.icon, active: activeIds.includes(item.id), href: item.href, render: item.render ?? renderLink?.(item), onClick: item.onSelect }, item.id)))] }, section.id)))] }), _jsxs(AppSidebarFooter, { ref: room.footerRef, children: [collapsed && onExpand && (_jsx(AppSidebarRail, { children: _jsx(IconButton, { "aria-label": locale.labels.common.expand, size: "medium", onClick: onExpand, children: _jsx(CaretLineRightIcon, { className: cx(icon({ size: "small" }), css({ _rtl: { transform: "scaleX(-1)" } })) }) }) })), footer] })] }));
|
|
118
|
+
.map((section) => (_jsxs("div", { className: railSection, children: [section.label && _jsx(SidebarRailRule, {}), section.items.map((item) => (_jsx(SidebarItem, { "aria-label": item.label, icon: item.icon, active: activeIds.includes(item.id), href: item.href, render: item.render ?? renderLink?.(item), onClick: item.onSelect }, item.id)))] }, section.id)))] }), _jsxs(AppSidebarFooter, { ref: room.footerRef, children: [collapsed && onExpand && (_jsx(AppSidebarRail, { className: expandButtonRail, children: _jsx(IconButton, { "aria-label": locale.labels.common.expand, size: "medium", onClick: onExpand, children: _jsx(CaretLineRightIcon, { className: cx(icon({ size: "small" }), css({ _rtl: { transform: "scaleX(-1)" } })) }) }) })), footer] })] }));
|
|
114
119
|
}
|
|
115
120
|
/*
|
|
116
121
|
* A workspace's square mark with its initial: the primary face for the current one, the raised
|
|
@@ -161,9 +161,9 @@ const contextChip = css({
|
|
|
161
161
|
alignItems: "center",
|
|
162
162
|
gap: "control.iconGap",
|
|
163
163
|
height: "control.shortcut",
|
|
164
|
-
// The kit counts the 1px edge into the padding.
|
|
165
|
-
paddingInlineStart: "
|
|
166
|
-
paddingInlineEnd: "
|
|
164
|
+
// The kit counts the 1px edge into the padding; the edge's transparent border is that pixel.
|
|
165
|
+
paddingInlineStart: "control.block",
|
|
166
|
+
paddingInlineEnd: "control.iconInline",
|
|
167
167
|
borderRadius: "field",
|
|
168
168
|
background: "token(gradients.raised)",
|
|
169
169
|
color: "fg.primary",
|
package/dist/components/chat.js
CHANGED
|
@@ -243,10 +243,9 @@ const bubble = cva({
|
|
|
243
243
|
user: {
|
|
244
244
|
alignSelf: "flex-end",
|
|
245
245
|
// Wrapped lines take the body's spacing. The kit sets one line at the type's own height
|
|
246
|
-
// with its 1px stroke in the layout,
|
|
247
|
-
// a one-line bubble stays the kit's
|
|
248
|
-
paddingBlock: "calc(token(spacing.field.block)
|
|
249
|
-
paddingInline: "calc(token(spacing.control.tabInline) + token(sizes.border.hairline))",
|
|
246
|
+
// with its 1px stroke in the layout, which the edge's transparent border already counts,
|
|
247
|
+
// so the padding gives back the extra leading and a one-line bubble stays the kit's 36px.
|
|
248
|
+
paddingBlock: "calc(token(spacing.field.block) - (1lh - 1em) / 2)",
|
|
250
249
|
lineHeight: "body",
|
|
251
250
|
background: "token(gradients.selected)",
|
|
252
251
|
whiteSpace: "pre-wrap",
|
|
@@ -65,7 +65,11 @@ export type EditableFieldProps = Omit<ComponentProps<"div">, "children"> & {
|
|
|
65
65
|
badge?: ReactNode;
|
|
66
66
|
/** Under the value while the row is idle. */
|
|
67
67
|
note?: ReactNode;
|
|
68
|
-
/**
|
|
68
|
+
/**
|
|
69
|
+
* The field needs the reader: the row lifts on the selected glass and this button sits at its
|
|
70
|
+
* end. With `emphasis="highlighted"` the row keeps the yellow band, as the kit's Highlighted field
|
|
71
|
+
* does with its action.
|
|
72
|
+
*/
|
|
69
73
|
action?: {
|
|
70
74
|
label: ReactNode;
|
|
71
75
|
onClick: () => void;
|
|
@@ -75,7 +79,8 @@ export type EditableFieldProps = Omit<ComponentProps<"div">, "children"> & {
|
|
|
75
79
|
divider?: "bottom" | "none";
|
|
76
80
|
/**
|
|
77
81
|
* `selected` washes the row with the selected glass, such as the field a side panel is
|
|
78
|
-
* showing; `inset` sets it into the list between hairlines, such as a field set apart
|
|
82
|
+
* showing; `inset` sets it into the list between hairlines, such as a field set apart;
|
|
83
|
+
* `highlighted` is the yellow band while the agent points at the field.
|
|
79
84
|
*/
|
|
80
85
|
emphasis?: "selected" | "inset" | "highlighted";
|
|
81
86
|
edit?: FieldEdit;
|
|
@@ -388,7 +388,7 @@ export function EditableField({ label, value, provenance, badge, note, action, d
|
|
|
388
388
|
}
|
|
389
389
|
return _jsx("span", {});
|
|
390
390
|
};
|
|
391
|
-
return (_jsx("div", { ...props, className: cx(fieldBox, className), "data-ciridae-ui": "", children: _jsxs("div", { ref: rowRef, className: fieldRow, "data-needs": action && !editing ? "" : undefined, "data-divider": divider, "data-emphasis": emphasis, "data-editable": editable && !editing ? "" : undefined, "data-editing": editing ? "" : undefined, onClick: begin, children: [_jsx("span", { className: fieldLabel, id: labelId, "data-label": "", children: label }), _jsxs("span", { className: css({ minWidth: "0" }), children: [valueLine(), _jsx("span", { role: "status", children: statusLine() }), note !== undefined && status.mode === "idle" && (_jsx("span", { className: fieldNote, children: note }))] }), trailing()] }) }));
|
|
391
|
+
return (_jsx("div", { ...props, className: cx(fieldBox, className), "data-ciridae-ui": "", children: _jsxs("div", { ref: rowRef, className: fieldRow, "data-needs": action && !editing && emphasis !== "highlighted" ? "" : undefined, "data-divider": divider, "data-emphasis": emphasis, "data-editable": editable && !editing ? "" : undefined, "data-editing": editing ? "" : undefined, onClick: begin, children: [_jsx("span", { className: fieldLabel, id: labelId, "data-label": "", children: label }), _jsxs("span", { className: css({ minWidth: "0" }), children: [valueLine(), _jsx("span", { role: "status", children: statusLine() }), note !== undefined && status.mode === "idle" && (_jsx("span", { className: fieldNote, children: note }))] }), trailing()] }) }));
|
|
392
392
|
}
|
|
393
393
|
/*
|
|
394
394
|
* Source conflict: each source's value under a disputed field, then the value in effect. The
|
package/dist/preset.js
CHANGED
|
@@ -271,6 +271,8 @@ export function createCiridaePreset({ appBase = false, ...theme } = {}) {
|
|
|
271
271
|
"control.row": { value: "34px" },
|
|
272
272
|
// A round icon button in the top bar or a pager, and the smaller one that closes a sheet.
|
|
273
273
|
"control.round": { value: "34px" },
|
|
274
|
+
// The collapsed sidebar's expand button, the kit's 32px round button.
|
|
275
|
+
"control.roundRail": { value: "32px" },
|
|
274
276
|
"control.roundSmall": { value: "28px" },
|
|
275
277
|
"control.sidebarSearch": { value: "36px" },
|
|
276
278
|
// The square tile an icon sits on beside a row's title.
|
|
@@ -548,6 +548,7 @@
|
|
|
548
548
|
--sizes-control\.resting-tab: 28px;
|
|
549
549
|
--sizes-control\.row: 34px;
|
|
550
550
|
--sizes-control\.round: 34px;
|
|
551
|
+
--sizes-control\.round-rail: 32px;
|
|
551
552
|
--sizes-control\.round-small: 28px;
|
|
552
553
|
--sizes-control\.sidebar-search: 36px;
|
|
553
554
|
--sizes-list\.number: 20px;
|
|
@@ -774,7 +775,7 @@
|
|
|
774
775
|
--colors-bg\.track: #827F7A;
|
|
775
776
|
--colors-bg\.knob: #FFFFFF;
|
|
776
777
|
--colors-border\.panel: rgba(60,60,60,1);
|
|
777
|
-
--colors-border\.card:
|
|
778
|
+
--colors-border\.card: rgba(60,60,60,.66);
|
|
778
779
|
--colors-border\.glass: rgba(137,136,135,.2);
|
|
779
780
|
--colors-border\.hairline: #3B342B;
|
|
780
781
|
--colors-bg\.surface: #27272B;
|
|
@@ -1964,12 +1965,8 @@
|
|
|
1964
1965
|
padding-block: var(--spacing-field\.block);
|
|
1965
1966
|
}
|
|
1966
1967
|
|
|
1967
|
-
.py_calc\(token\(spacing\.field\.block\)_
|
|
1968
|
-
padding-block: calc(var(--spacing-field\.block)
|
|
1969
|
-
}
|
|
1970
|
-
|
|
1971
|
-
.px_calc\(token\(spacing\.control\.tabInline\)_\+_token\(sizes\.border\.hairline\)\) {
|
|
1972
|
-
padding-inline: calc(var(--spacing-control\.tab-inline) + var(--sizes-border\.hairline));
|
|
1968
|
+
.py_calc\(token\(spacing\.field\.block\)_-_\(1lh_-_1em\)_\/_2\) {
|
|
1969
|
+
padding-block: calc(var(--spacing-field\.block) - (1lh - 1em) / 2);
|
|
1973
1970
|
}
|
|
1974
1971
|
|
|
1975
1972
|
.px_control\.block {
|
|
@@ -2746,12 +2743,12 @@
|
|
|
2746
2743
|
padding-inline-end: var(--spacing-panel\.default);
|
|
2747
2744
|
}
|
|
2748
2745
|
|
|
2749
|
-
.
|
|
2750
|
-
padding-inline-start:
|
|
2746
|
+
.ps_control\.block {
|
|
2747
|
+
padding-inline-start: var(--spacing-control\.block);
|
|
2751
2748
|
}
|
|
2752
2749
|
|
|
2753
|
-
.
|
|
2754
|
-
padding-inline-end:
|
|
2750
|
+
.pe_control\.iconInline {
|
|
2751
|
+
padding-inline-end: var(--spacing-control\.icon-inline);
|
|
2755
2752
|
}
|
|
2756
2753
|
|
|
2757
2754
|
.bx-sh_card {
|
|
@@ -3183,10 +3180,6 @@
|
|
|
3183
3180
|
padding-block-start: var(--spacing-control\.block);
|
|
3184
3181
|
}
|
|
3185
3182
|
|
|
3186
|
-
.pe_control\.iconInline {
|
|
3187
|
-
padding-inline-end: var(--spacing-control\.icon-inline);
|
|
3188
|
-
}
|
|
3189
|
-
|
|
3190
3183
|
.ps_0 {
|
|
3191
3184
|
padding-inline-start: var(--spacing-0);
|
|
3192
3185
|
}
|
|
@@ -3338,10 +3331,6 @@
|
|
|
3338
3331
|
grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
|
|
3339
3332
|
}
|
|
3340
3333
|
|
|
3341
|
-
.ps_control\.block {
|
|
3342
|
-
padding-inline-start: var(--spacing-control\.block);
|
|
3343
|
-
}
|
|
3344
|
-
|
|
3345
3334
|
.ls_normal {
|
|
3346
3335
|
letter-spacing: var(--letter-spacings-normal);
|
|
3347
3336
|
}
|
|
@@ -8470,6 +8459,14 @@
|
|
|
8470
8459
|
height: var(--sizes-control\.compact);
|
|
8471
8460
|
}
|
|
8472
8461
|
|
|
8462
|
+
.\[\&_\>_button\]\:w_control\.roundRail > button {
|
|
8463
|
+
width: var(--sizes-control\.round-rail);
|
|
8464
|
+
}
|
|
8465
|
+
|
|
8466
|
+
.\[\&_\>_button\]\:h_control\.roundRail > button {
|
|
8467
|
+
height: var(--sizes-control\.round-rail);
|
|
8468
|
+
}
|
|
8469
|
+
|
|
8473
8470
|
.\[\&\[data-size\=small\]\]\:w_control\.mark[data-size=small] {
|
|
8474
8471
|
width: var(--sizes-control\.mark);
|
|
8475
8472
|
}
|
|
@@ -1939,6 +1939,10 @@ const tokens = {
|
|
|
1939
1939
|
"value": "34px",
|
|
1940
1940
|
"variable": "var(--sizes-control\\.round)"
|
|
1941
1941
|
},
|
|
1942
|
+
"sizes.control.roundRail": {
|
|
1943
|
+
"value": "32px",
|
|
1944
|
+
"variable": "var(--sizes-control\\.round-rail)"
|
|
1945
|
+
},
|
|
1942
1946
|
"sizes.control.roundSmall": {
|
|
1943
1947
|
"value": "28px",
|
|
1944
1948
|
"variable": "var(--sizes-control\\.round-small)"
|
|
@@ -19,7 +19,7 @@ export type AnimationToken = "spin" | "ping" | "pulse" | "bounce"
|
|
|
19
19
|
|
|
20
20
|
export type SpacingToken = "0" | "1" | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "9" | "10" | "11" | "12" | "14" | "16" | "20" | "24" | "28" | "32" | "36" | "40" | "44" | "48" | "52" | "56" | "60" | "64" | "72" | "80" | "96" | "0.5" | "1.5" | "2.5" | "3.5" | "4.5" | "5.5" | "none" | "control.trackInset" | "focus.ringWidth" | "focus.ringOffset" | "focus.ringReach" | "control.iconGap" | "control.block" | "control.inline" | "control.compactBlock" | "control.compactInline" | "control.largeInline" | "control.iconInline" | "control.launcherInlineEnd" | "search.inline" | "field.block" | "layout.tightGap" | "sidebar.groupGap" | "sidebar.footerGap" | "sidebar.inline" | "sidebar.block" | "control.tabInline" | "layout.controlGap" | "layout.contentGap" | "layout.clusterGap" | "layout.pageGap" | "layout.projectListOffset" | "layout.sectionGap" | "layout.centeredCardGap" | "log.columnGap" | "log.detailIndent" | "log.detailIndentCompact" | "log.rowBlock" | "log.entryBlock" | "log.entryInline" | "log.entryCompactBlock" | "log.entryPanelBlock" | "log.entryPanelInline" | "menu.inset" | "menu.itemInline" | "sidebar.markGap" | "panel.hairline" | "panel.compact" | "panel.default" | "panel.comfortable" | "panel.roomy" | "panel.card" | "tile.block" | "tile.inline" | "skeleton.tileGap" | "emptyState.pageBlock" | "emptyState.compactBlock" | "stage.connectorGap" | "list.numberGap" | "meter.rowGap" | "panel.sidebarBlock" | "page.inline" | "shell.leading" | "table.cell" | "table.rowBlock" | "table.compactRowBlock" | "-1" | "-2" | "-3" | "-4" | "-5" | "-6" | "-7" | "-8" | "-9" | "-10" | "-11" | "-12" | "-14" | "-16" | "-20" | "-24" | "-28" | "-32" | "-36" | "-40" | "-44" | "-48" | "-52" | "-56" | "-60" | "-64" | "-72" | "-80" | "-96" | "-0.5" | "-1.5" | "-2.5" | "-3.5" | "-4.5" | "-5.5" | "-none" | "-control.trackInset" | "-focus.ringWidth" | "-focus.ringOffset" | "-focus.ringReach" | "-control.iconGap" | "-control.block" | "-control.inline" | "-control.compactBlock" | "-control.compactInline" | "-control.largeInline" | "-control.iconInline" | "-control.launcherInlineEnd" | "-search.inline" | "-field.block" | "-layout.tightGap" | "-sidebar.groupGap" | "-sidebar.footerGap" | "-sidebar.inline" | "-sidebar.block" | "-control.tabInline" | "-layout.controlGap" | "-layout.contentGap" | "-layout.clusterGap" | "-layout.pageGap" | "-layout.projectListOffset" | "-layout.sectionGap" | "-layout.centeredCardGap" | "-log.columnGap" | "-log.detailIndent" | "-log.detailIndentCompact" | "-log.rowBlock" | "-log.entryBlock" | "-log.entryInline" | "-log.entryCompactBlock" | "-log.entryPanelBlock" | "-log.entryPanelInline" | "-menu.inset" | "-menu.itemInline" | "-sidebar.markGap" | "-panel.hairline" | "-panel.compact" | "-panel.default" | "-panel.comfortable" | "-panel.roomy" | "-panel.card" | "-tile.block" | "-tile.inline" | "-skeleton.tileGap" | "-emptyState.pageBlock" | "-emptyState.compactBlock" | "-stage.connectorGap" | "-list.numberGap" | "-meter.rowGap" | "-panel.sidebarBlock" | "-page.inline" | "-shell.leading" | "-table.cell" | "-table.rowBlock" | "-table.compactRowBlock"
|
|
21
21
|
|
|
22
|
-
export type SizeToken = "0" | "1" | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "9" | "10" | "11" | "12" | "14" | "16" | "20" | "24" | "28" | "32" | "36" | "40" | "44" | "48" | "52" | "56" | "60" | "64" | "72" | "80" | "96" | "0.5" | "1.5" | "2.5" | "3.5" | "4.5" | "5.5" | "xs" | "sm" | "md" | "lg" | "xl" | "2xl" | "3xl" | "4xl" | "5xl" | "6xl" | "7xl" | "8xl" | "prose" | "full" | "min" | "max" | "fit" | "border.hairline" | "indicator.dot" | "indicator.live" | "indicator.badge" | "indicator.count" | "log.caretColumn" | "log.minimum" | "log.timeColumn" | "log.rawMaximum" | "assistant.orb" | "widget.header" | "avatar.welcome" | "avatar.micro" | "avatar.small" | "avatar.menu" | "avatar.agent" | "avatar.row" | "avatar.owner" | "avatar.large" | "mark.inline" | "progress.track" | "progress.segment" | "indicator.swatch" | "menu.item" | "select.compactItem" | "code.maximum" | "brand.logo" | "indicator.radio" | "skeleton.line" | "skeleton.bar" | "skeleton.badge" | "skeleton.caption" | "skeleton.short" | "skeleton.pill" | "skeleton.textLine" | "tile.minimum" | "skeleton.card" | "skeleton.cardBody" | "skeleton.medium" | "skeleton.long" | "chart.small" | "chart.medium" | "chart.large" | "control.mark" | "file.chipName" | "control.checkbox" | "control.radio" | "control.knob" | "control.toggleTrack" | "control.clear" | "control.chip" | "control.wordKeycap" | "control.send" | "control.small" | "control.restingTab" | "control.row" | "control.round" | "control.roundSmall" | "control.sidebarSearch" | "list.number" | "tile.icon" | "partsRollup.height" | "sparkline.width" | "sparkline.height" | "sparkline.plotWidth" | "sparkline.plotHeight" | "control.shortcut" | "control.compact" | "control.default" | "control.search" | "control.searchField" | "workspace.mark" | "workspace.avatar" | "control.field" | "sidebar.projectAction" | "sidebar.railRule" | "sidebar.shortRow" | "toast.minimum" | "chat.footer" | "shell.header" | "shell.collapsed" | "table.scroll" | "table.headRow" | "field.textarea" | "field.inline" | "chat.input" | "chat.inputMobile" | "chat.composerMinimum" | "overlay.menu" | "overlay.menuList" | "overlay.helpMenu" | "overlay.tray" | "overlay.trayList" | "overlay.tooltip" | "overlay.popoverNarrow" | "overlay.popover" | "overlay.popoverWide" | "search.dropdownPreview" | "emptyState.minimum" | "search.regularPreview" | "search.sidebarPreview" | "shell.sidebar" | "overlay.dialog" | "overlay.palette" | "commandPalette.query" | "commandPalette.row" | "commandPalette.footer" | "overlay.dialogWide" | "overlay.sheet" | "overlay.sheetNarrow" | "overlay.sheetDocked" | "toast.width" | "toast.progressWidth" | "toast.progressHeight" | "chat.thread" | "chat.composer" | "chat.bubble" | "chat.attachment" | "settings.column" | "card.centered" | "scroll.bar" | "card.centeredWide" | "card.centeredForm" | "steps.image" | "checklist.maximum" | "page.maximum" | "breakpoint-sm" | "breakpoint-md" | "breakpoint-lg" | "breakpoint-xl" | "breakpoint-2xl"
|
|
22
|
+
export type SizeToken = "0" | "1" | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "9" | "10" | "11" | "12" | "14" | "16" | "20" | "24" | "28" | "32" | "36" | "40" | "44" | "48" | "52" | "56" | "60" | "64" | "72" | "80" | "96" | "0.5" | "1.5" | "2.5" | "3.5" | "4.5" | "5.5" | "xs" | "sm" | "md" | "lg" | "xl" | "2xl" | "3xl" | "4xl" | "5xl" | "6xl" | "7xl" | "8xl" | "prose" | "full" | "min" | "max" | "fit" | "border.hairline" | "indicator.dot" | "indicator.live" | "indicator.badge" | "indicator.count" | "log.caretColumn" | "log.minimum" | "log.timeColumn" | "log.rawMaximum" | "assistant.orb" | "widget.header" | "avatar.welcome" | "avatar.micro" | "avatar.small" | "avatar.menu" | "avatar.agent" | "avatar.row" | "avatar.owner" | "avatar.large" | "mark.inline" | "progress.track" | "progress.segment" | "indicator.swatch" | "menu.item" | "select.compactItem" | "code.maximum" | "brand.logo" | "indicator.radio" | "skeleton.line" | "skeleton.bar" | "skeleton.badge" | "skeleton.caption" | "skeleton.short" | "skeleton.pill" | "skeleton.textLine" | "tile.minimum" | "skeleton.card" | "skeleton.cardBody" | "skeleton.medium" | "skeleton.long" | "chart.small" | "chart.medium" | "chart.large" | "control.mark" | "file.chipName" | "control.checkbox" | "control.radio" | "control.knob" | "control.toggleTrack" | "control.clear" | "control.chip" | "control.wordKeycap" | "control.send" | "control.small" | "control.restingTab" | "control.row" | "control.round" | "control.roundRail" | "control.roundSmall" | "control.sidebarSearch" | "list.number" | "tile.icon" | "partsRollup.height" | "sparkline.width" | "sparkline.height" | "sparkline.plotWidth" | "sparkline.plotHeight" | "control.shortcut" | "control.compact" | "control.default" | "control.search" | "control.searchField" | "workspace.mark" | "workspace.avatar" | "control.field" | "sidebar.projectAction" | "sidebar.railRule" | "sidebar.shortRow" | "toast.minimum" | "chat.footer" | "shell.header" | "shell.collapsed" | "table.scroll" | "table.headRow" | "field.textarea" | "field.inline" | "chat.input" | "chat.inputMobile" | "chat.composerMinimum" | "overlay.menu" | "overlay.menuList" | "overlay.helpMenu" | "overlay.tray" | "overlay.trayList" | "overlay.tooltip" | "overlay.popoverNarrow" | "overlay.popover" | "overlay.popoverWide" | "search.dropdownPreview" | "emptyState.minimum" | "search.regularPreview" | "search.sidebarPreview" | "shell.sidebar" | "overlay.dialog" | "overlay.palette" | "commandPalette.query" | "commandPalette.row" | "commandPalette.footer" | "overlay.dialogWide" | "overlay.sheet" | "overlay.sheetNarrow" | "overlay.sheetDocked" | "toast.width" | "toast.progressWidth" | "toast.progressHeight" | "chat.thread" | "chat.composer" | "chat.bubble" | "chat.attachment" | "settings.column" | "card.centered" | "scroll.bar" | "card.centeredWide" | "card.centeredForm" | "steps.image" | "checklist.maximum" | "page.maximum" | "breakpoint-sm" | "breakpoint-md" | "breakpoint-lg" | "breakpoint-xl" | "breakpoint-2xl"
|
|
23
23
|
|
|
24
24
|
export type OpacityToken = "disabled" | "locked.step" | "locked.requirement" | "disabledRound" | "checkedHover"
|
|
25
25
|
|
package/dist/theme/tokens.js
CHANGED
|
@@ -115,7 +115,8 @@ export function deriveThemeTokens(theme = {}) {
|
|
|
115
115
|
"border.subtle": { base: dark.line, _light: alpha(light.line, 0.66) },
|
|
116
116
|
"border.control": { base: alpha(dark.border, 0.5), _light: alpha(light.border, 0.66) },
|
|
117
117
|
"border.panel": { base: alpha(dark.border, 1), _light: alpha(light.border, 0.66) },
|
|
118
|
-
|
|
118
|
+
// Card and panel outlines: Stroke/Gray 66 in dark and Light Gray 66 in light.
|
|
119
|
+
"border.card": { base: alpha(dark.cardBorder, 0.66), _light: alpha(light.cardBorder, 0.66) },
|
|
119
120
|
// The edge of what sits on the canvas -- the sidebar search, the active nav pill, the main
|
|
120
121
|
// surface's outline -- darker in light so it holds on the grey.
|
|
121
122
|
"border.canvas": { base: alpha(dark.border, 0.5), _light: alpha(light.mark, 0.33) },
|