@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.
@@ -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: "calc(token(spacing.control.block) + token(sizes.border.hairline))",
166
- paddingInlineEnd: "calc(token(spacing.control.iconInline) + token(sizes.border.hairline))",
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",
@@ -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, so the padding gives back the extra leading and
247
- // a one-line bubble stays the kit's height.
248
- paddingBlock: "calc(token(spacing.field.block) + token(sizes.border.hairline) - (1lh - 1em) / 2)",
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
- /** The field needs the reader: the row lifts on the selected glass and this button sits at its end. */
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: #3C3C3C;
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\)_\+_token\(sizes\.border\.hairline\)_-_\(1lh_-_1em\)_\/_2\) {
1968
- padding-block: calc(var(--spacing-field\.block) + var(--sizes-border\.hairline) - (1lh - 1em) / 2);
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
- .ps_calc\(token\(spacing\.control\.block\)_\+_token\(sizes\.border\.hairline\)\) {
2750
- padding-inline-start: calc(var(--spacing-control\.block) + var(--sizes-border\.hairline));
2746
+ .ps_control\.block {
2747
+ padding-inline-start: var(--spacing-control\.block);
2751
2748
  }
2752
2749
 
2753
- .pe_calc\(token\(spacing\.control\.iconInline\)_\+_token\(sizes\.border\.hairline\)\) {
2754
- padding-inline-end: calc(var(--spacing-control\.icon-inline) + var(--sizes-border\.hairline));
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
 
@@ -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
- "border.card": { base: dark.cardBorder, _light: alpha(light.cardBorder, 0.66) },
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) },
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@ciridae/ui",
3
- "version": "1.0.4",
3
+ "version": "1.0.5",
4
4
  "type": "module",
5
5
  "repository": {
6
6
  "type": "git",