@mindlogic-ai/logician-ui 5.0.0-alpha.0 → 5.0.0-alpha.2

package/dist/components/Select/Select.types.d.ts

@@ -1,5 +1,10 @@
 import type { ReactNode } from 'react';
 export type SelectSize = 'xs' | 'sm' | 'md' | 'lg';
+/**
+ * `outline` (default) — the bordered trigger shared with Input and Textarea.
+ * `ghost` — no border at rest, shown on hover/focus; for dense settings rows.
+ */
+export type SelectVariant = 'outline' | 'ghost';
 export interface SelectOption<T = string> {
     label: string;
     value: T;
@@ -42,6 +47,11 @@ interface FieldBaseProps<T> {
     width?: string | number;
 }
 export interface SelectFieldProps<T = string> extends FieldBaseProps<T> {
+    /**
+     * Trigger look. `ghost` drops the resting border and sizes the field to its
+     * content (`width` defaults to `auto` instead of `full`).
+     */
+    variant?: SelectVariant;
     /**
      * Deal the options in one after another when the list opens.
      *

package/dist/components/Select/Select.types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Select.types.d.ts","sourceRoot":"","sources":["../../../src/components/Select/Select.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAEvC,MAAM,MAAM,UAAU,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;AAEnD,MAAM,WAAW,YAAY,CAAC,CAAC,GAAG,MAAM;IACtC,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,CAAC,CAAC;IACT,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAED,UAAU,cAAc,CAAC,CAAC;IACxB,wCAAwC;IACxC,OAAO,EAAE,YAAY,CAAC,CAAC,CAAC,EAAE,CAAC;IAC3B,iCAAiC;IACjC,KAAK,CAAC,EAAE,CAAC,GAAG,IAAI,CAAC;IACjB,4CAA4C;IAC5C,YAAY,CAAC,EAAE,CAAC,GAAG,IAAI,CAAC;IACxB,+EAA+E;IAC/E,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,CAAC,GAAG,IAAI,KAAK,IAAI,CAAC;IACrC,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,iDAAiD;IACjD,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB;;;;;;;;;;;;;;OAcG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,IAAI,CAAC,EAAE,UAAU,CAAC;IAClB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;CACzB;AAED,MAAM,WAAW,gBAAgB,CAAC,CAAC,GAAG,MAAM,CAAE,SAAQ,cAAc,CAAC,CAAC,CAAC;IACrE;;;;;;OAMG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB;AAED,MAAM,WAAW,kBAAkB,CAAC,CAAC,GAAG,MAAM,CAAE,SAAQ,cAAc,CAAC,CAAC,CAAC;IACvE,4DAA4D;IAC5D,SAAS,CAAC,EAAE,SAAS,CAAC;CACvB"}
+{"version":3,"file":"Select.types.d.ts","sourceRoot":"","sources":["../../../src/components/Select/Select.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAEvC,MAAM,MAAM,UAAU,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;AAEnD;;;GAGG;AACH,MAAM,MAAM,aAAa,GAAG,SAAS,GAAG,OAAO,CAAC;AAEhD,MAAM,WAAW,YAAY,CAAC,CAAC,GAAG,MAAM;IACtC,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,CAAC,CAAC;IACT,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAED,UAAU,cAAc,CAAC,CAAC;IACxB,wCAAwC;IACxC,OAAO,EAAE,YAAY,CAAC,CAAC,CAAC,EAAE,CAAC;IAC3B,iCAAiC;IACjC,KAAK,CAAC,EAAE,CAAC,GAAG,IAAI,CAAC;IACjB,4CAA4C;IAC5C,YAAY,CAAC,EAAE,CAAC,GAAG,IAAI,CAAC;IACxB,+EAA+E;IAC/E,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,CAAC,GAAG,IAAI,KAAK,IAAI,CAAC;IACrC,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,iDAAiD;IACjD,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB;;;;;;;;;;;;;;OAcG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,IAAI,CAAC,EAAE,UAAU,CAAC;IAClB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;CACzB;AAED,MAAM,WAAW,gBAAgB,CAAC,CAAC,GAAG,MAAM,CAAE,SAAQ,cAAc,CAAC,CAAC,CAAC;IACrE;;;OAGG;IACH,OAAO,CAAC,EAAE,aAAa,CAAC;IACxB;;;;;;OAMG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB;AAED,MAAM,WAAW,kBAAkB,CAAC,CAAC,GAAG,MAAM,CAAE,SAAQ,cAAc,CAAC,CAAC,CAAC;IACvE,4DAA4D;IAC5D,SAAS,CAAC,EAAE,SAAS,CAAC;CACvB"}

package/dist/components/Select/SelectField.d.ts

@@ -7,5 +7,5 @@ import { SelectFieldProps } from './Select.types';
  * For multi-select, grouped options or custom layouts, compose the `Select`
  * primitives directly.
  */
-export declare function SelectField<T = string>({ options, value, defaultValue, onChange, placeholder, label, ariaLabel, size, invalid, disabled, readOnly, required, name, width, stagger, }: SelectFieldProps<T>): import("react/jsx-runtime").JSX.Element;
+export declare function SelectField<T = string>({ options, value, defaultValue, onChange, placeholder, label, ariaLabel, size, invalid, disabled, readOnly, required, name, variant, width, stagger, }: SelectFieldProps<T>): import("react/jsx-runtime").JSX.Element;
 //# sourceMappingURL=SelectField.d.ts.map

package/dist/components/Select/SelectField.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"SelectField.d.ts","sourceRoot":"","sources":["../../../src/components/Select/SelectField.tsx"],"names":[],"mappings":"AAMA,OAAO,EAAE,gBAAgB,EAAE,MAAM,gBAAgB,CAAC;AAElD;;;;;;;GAOG;AACH,wBAAgB,WAAW,CAAC,CAAC,GAAG,MAAM,EAAE,EACtC,OAAO,EACP,KAAK,EACL,YAAY,EACZ,QAAQ,EACR,WAAW,EACX,KAAK,EACL,SAAS,EACT,IAAW,EACX,OAAO,EACP,QAAQ,EACR,QAAQ,EACR,QAAQ,EACR,IAAI,EACJ,KAAc,EACd,OAAe,GAChB,EAAE,gBAAgB,CAAC,CAAC,CAAC,2CA0ErB"}
+{"version":3,"file":"SelectField.d.ts","sourceRoot":"","sources":["../../../src/components/Select/SelectField.tsx"],"names":[],"mappings":"AAOA,OAAO,EAAE,gBAAgB,EAAE,MAAM,gBAAgB,CAAC;AAElD;;;;;;;GAOG;AACH,wBAAgB,WAAW,CAAC,CAAC,GAAG,MAAM,EAAE,EACtC,OAAO,EACP,KAAK,EACL,YAAY,EACZ,QAAQ,EACR,WAAW,EACX,KAAK,EACL,SAAS,EACT,IAAW,EACX,OAAO,EACP,QAAQ,EACR,QAAQ,EACR,QAAQ,EACR,IAAI,EACJ,OAAmB,EACnB,KAA6C,EAC7C,OAAe,GAChB,EAAE,gBAAgB,CAAC,CAAC,CAAC,2CA4ErB"}

package/dist/components/Select/SelectField.js

@@ -6,6 +6,7 @@ var React = require('react');
 var react = require('@chakra-ui/react');
 var staggerProps = require('../../utils/staggerProps.js');
 var Select = require('./Select.js');
+var Select_styles = require('./Select.styles.js');
 
 /**
  * Single-select dropdown with the Logician design-system styling applied.
@@ -15,7 +16,7 @@ var Select = require('./Select.js');
  * For multi-select, grouped options or custom layouts, compose the `Select`
  * primitives directly.
  */
-function SelectField({ options, value, defaultValue, onChange, placeholder, label, ariaLabel, size = 'md', invalid, disabled, readOnly, required, name, width = 'full', stagger = false, }) {
+function SelectField({ options, value, defaultValue, onChange, placeholder, label, ariaLabel, size = 'md', invalid, disabled, readOnly, required, name, variant = 'outline', width = variant === 'ghost' ? 'auto' : 'full', stagger = false, }) {
     const collection = React.useMemo(() => react.createListCollection({
         items: options,
         itemToValue: (item) => String(item.value),
@@ -26,7 +27,7 @@ function SelectField({ options, value, defaultValue, onChange, placeholder, labe
     return (jsxRuntime.jsxs(Select.Select.Root, { collection: collection, size: size, width: width, invalid: invalid, disabled: disabled, readOnly: readOnly, required: required, name: name, value: value === undefined ? undefined : toKeys(value), defaultValue: defaultValue === undefined ? undefined : toKeys(defaultValue), onValueChange: (details) => {
             const selected = details.items[0];
             onChange?.(selected ? selected.value : null);
-        }, children: [jsxRuntime.jsx(Select.Select.HiddenSelect, {}), label != null ? (jsxRuntime.jsx(Select.Select.Label, { children: label })) : ((ariaLabel ?? placeholder) && (jsxRuntime.jsx(Select.Select.Label, { srOnly: true, children: ariaLabel ?? placeholder }))), jsxRuntime.jsxs(Select.Select.Control, { children: [jsxRuntime.jsx(Select.Select.Trigger, { children: jsxRuntime.jsx(Select.Select.ValueText, { placeholder: placeholder }) }), jsxRuntime.jsx(Select.Select.IndicatorGroup, { children: jsxRuntime.jsx(Select.Select.Indicator, {}) })] }), jsxRuntime.jsx(react.Portal, { children: jsxRuntime.jsx(Select.Select.Positioner, { children: jsxRuntime.jsx(Select.Select.Content, { children: options.map((option, index) => (jsxRuntime.jsxs(Select.Select.Item, { item: option, ...(stagger ? staggerProps.staggerProps(index) : {}), children: [jsxRuntime.jsx(Select.Select.ItemText, { children: option.label }), jsxRuntime.jsx(Select.Select.ItemIndicator, {})] }, String(option.value)))) }) }) })] }));
+        }, children: [jsxRuntime.jsx(Select.Select.HiddenSelect, {}), label != null ? (jsxRuntime.jsx(Select.Select.Label, { children: label })) : ((ariaLabel ?? placeholder) && (jsxRuntime.jsx(Select.Select.Label, { srOnly: true, children: ariaLabel ?? placeholder }))), jsxRuntime.jsxs(Select.Select.Control, { children: [jsxRuntime.jsx(Select.Select.Trigger, { variant: variant, children: jsxRuntime.jsx(Select.Select.ValueText, { placeholder: placeholder }) }), jsxRuntime.jsx(Select.Select.IndicatorGroup, { children: jsxRuntime.jsx(Select.Select.Indicator, {}) })] }), jsxRuntime.jsx(react.Portal, { children: jsxRuntime.jsx(Select.Select.Positioner, { children: jsxRuntime.jsx(Select.Select.Content, { css: variant === 'ghost' ? Select_styles.ghostContentStyles : undefined, children: options.map((option, index) => (jsxRuntime.jsxs(Select.Select.Item, { item: option, ...(stagger ? staggerProps.staggerProps(index) : {}), children: [jsxRuntime.jsx(Select.Select.ItemText, { children: option.label }), jsxRuntime.jsx(Select.Select.ItemIndicator, {})] }, String(option.value)))) }) }) })] }));
 }
 
 exports.SelectField = SelectField;

package/dist/components/Select/SelectField.js.map

@@ -1 +1 @@
-{"version":3,"file":"SelectField.js","sources":["../../../src/components/Select/SelectField.tsx"],"sourcesContent":[null],"names":["useMemo","createListCollection","_jsxs","Select","_jsx","Portal","staggerProps"],"mappings":"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"}
+{"version":3,"file":"SelectField.js","sources":["../../../src/components/Select/SelectField.tsx"],"sourcesContent":[null],"names":["useMemo","createListCollection","_jsxs","Select","_jsx","Portal","ghostContentStyles","staggerProps"],"mappings":"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"}

package/dist/components/Select/SelectField.mjs

@@ -4,6 +4,7 @@ import { useMemo } from 'react';
 import { createListCollection, Portal } from '@chakra-ui/react';
 import { staggerProps } from '../../utils/staggerProps.mjs';
 import { Select } from './Select.mjs';
+import { ghostContentStyles } from './Select.styles.mjs';
 
 /**
  * Single-select dropdown with the Logician design-system styling applied.
@@ -13,7 +14,7 @@ import { Select } from './Select.mjs';
  * For multi-select, grouped options or custom layouts, compose the `Select`
  * primitives directly.
  */
-function SelectField({ options, value, defaultValue, onChange, placeholder, label, ariaLabel, size = 'md', invalid, disabled, readOnly, required, name, width = 'full', stagger = false, }) {
+function SelectField({ options, value, defaultValue, onChange, placeholder, label, ariaLabel, size = 'md', invalid, disabled, readOnly, required, name, variant = 'outline', width = variant === 'ghost' ? 'auto' : 'full', stagger = false, }) {
     const collection = useMemo(() => createListCollection({
         items: options,
         itemToValue: (item) => String(item.value),
@@ -24,7 +25,7 @@ function SelectField({ options, value, defaultValue, onChange, placeholder, labe
     return (jsxs(Select.Root, { collection: collection, size: size, width: width, invalid: invalid, disabled: disabled, readOnly: readOnly, required: required, name: name, value: value === undefined ? undefined : toKeys(value), defaultValue: defaultValue === undefined ? undefined : toKeys(defaultValue), onValueChange: (details) => {
             const selected = details.items[0];
             onChange?.(selected ? selected.value : null);
-        }, children: [jsx(Select.HiddenSelect, {}), label != null ? (jsx(Select.Label, { children: label })) : ((ariaLabel ?? placeholder) && (jsx(Select.Label, { srOnly: true, children: ariaLabel ?? placeholder }))), jsxs(Select.Control, { children: [jsx(Select.Trigger, { children: jsx(Select.ValueText, { placeholder: placeholder }) }), jsx(Select.IndicatorGroup, { children: jsx(Select.Indicator, {}) })] }), jsx(Portal, { children: jsx(Select.Positioner, { children: jsx(Select.Content, { children: options.map((option, index) => (jsxs(Select.Item, { item: option, ...(stagger ? staggerProps(index) : {}), children: [jsx(Select.ItemText, { children: option.label }), jsx(Select.ItemIndicator, {})] }, String(option.value)))) }) }) })] }));
+        }, children: [jsx(Select.HiddenSelect, {}), label != null ? (jsx(Select.Label, { children: label })) : ((ariaLabel ?? placeholder) && (jsx(Select.Label, { srOnly: true, children: ariaLabel ?? placeholder }))), jsxs(Select.Control, { children: [jsx(Select.Trigger, { variant: variant, children: jsx(Select.ValueText, { placeholder: placeholder }) }), jsx(Select.IndicatorGroup, { children: jsx(Select.Indicator, {}) })] }), jsx(Portal, { children: jsx(Select.Positioner, { children: jsx(Select.Content, { css: variant === 'ghost' ? ghostContentStyles : undefined, children: options.map((option, index) => (jsxs(Select.Item, { item: option, ...(stagger ? staggerProps(index) : {}), children: [jsx(Select.ItemText, { children: option.label }), jsx(Select.ItemIndicator, {})] }, String(option.value)))) }) }) })] }));
 }
 
 export { SelectField };

package/dist/components/Select/SelectField.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"SelectField.mjs","sources":["../../../src/components/Select/SelectField.tsx"],"sourcesContent":[null],"names":["_jsxs","_jsx"],"mappings":"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"}
+{"version":3,"file":"SelectField.mjs","sources":["../../../src/components/Select/SelectField.tsx"],"sourcesContent":[null],"names":["_jsxs","_jsx"],"mappings":"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"}

package/dist/components/Select/index.d.ts

@@ -1,5 +1,6 @@
 export { Combobox } from './Combobox';
 export { ComboboxField } from './ComboboxField';
+export type { SelectTriggerProps } from './Select';
 export { Select } from './Select';
 export type * from './Select.types';
 export { SelectField } from './SelectField';

package/dist/components/Select/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Select/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAC;AACtC,OAAO,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAC;AAChD,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AAClC,mBAAmB,gBAAgB,CAAC;AACpC,OAAO,EAAE,WAAW,EAAE,MAAM,eAAe,CAAC;AAC5C,OAAO,EACL,oBAAoB,EACpB,SAAS,EACT,iBAAiB,GAClB,MAAM,kBAAkB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Select/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAC;AACtC,OAAO,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAC;AAChD,YAAY,EAAE,kBAAkB,EAAE,MAAM,UAAU,CAAC;AACnD,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AAClC,mBAAmB,gBAAgB,CAAC;AACpC,OAAO,EAAE,WAAW,EAAE,MAAM,eAAe,CAAC;AAC5C,OAAO,EACL,oBAAoB,EACpB,SAAS,EACT,iBAAiB,GAClB,MAAM,kBAAkB,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mindlogic-ai/logician-ui",
-  "version": "5.0.0-alpha.0",
+  "version": "5.0.0-alpha.2",
   "description": "A comprehensive React design system built on Chakra UI",
   "main": "dist/index.js",
   "module": "dist/index.mjs",

package/src/components/Button/Button.legacy.ts

@@ -33,6 +33,7 @@ export type LegacyResolution = {
 const BUTTON_VARIANT_KEYS: Record<ButtonVariant, true> = {
   primary: true,
   action: true,
+  accent: true,
   secondary: true,
   subtle: true,
   ghost: true,

package/src/components/Button/Button.stories.tsx

@@ -35,6 +35,7 @@ export const Basic: Story = {
 const VARIANT_NOTES: Record<ButtonVariant, string> = {
   primary: '화면의 주 행동 — BAZE 블랙',
   action: '실행 버튼 — 블랙 면 + 코랄 아이콘',
+  accent: '색 있는 CTA — 코랄 면 + 검정 글씨, 화면당 하나',
   secondary: '보조 행동 — 테두리 + 표면',
   subtle: '낮은 강조 — 웜 워시 (기본값)',
   ghost: '툴바·인라인 — 면/테두리 없음',
@@ -131,6 +132,29 @@ export const Action: Story = {
   ),
 };
 
+/**
+ * `accent`: the coloured call to action — coral fill (`send.bg`), dark label
+ * (`send.fg`, 6.5:1). One per view: a hero or a marketing section's main CTA.
+ * Keep `primary` (black) for product screens, where coral is reserved for
+ * run/send signals.
+ */
+export const Accent: Story = {
+  render: () => (
+    <HStack gap={4}>
+      <Button variant="accent" size="lg">
+        입장하기
+      </Button>
+      <Button variant="accent">시작하기</Button>
+      <Button variant="accent" size="sm">
+        시작하기
+      </Button>
+      <Button variant="accent" disabled>
+        시작하기
+      </Button>
+    </HStack>
+  ),
+};
+
 /**
  * All available button sizes.
  *

package/src/components/Button/Button.styles.ts

@@ -116,6 +116,23 @@ export const buttonVariantStyles: Record<ButtonVariant, StyleProps> = {
       },
     },
   },
+  /**
+   * Coral fill, dark label — the coloured CTA. Reuses the `send.*` tokens of
+   * the IconButton send button so the brand has one coral surface, and the
+   * contrast audit checks `send.fg` on all three fills as *text* (4.5:1).
+   */
+  accent: {
+    borderColor: 'send.bg',
+    bgColor: 'send.bg',
+    color: 'send.fg',
+    _hover: { borderColor: 'send.bgHover', bgColor: 'send.bgHover' },
+    _active: {
+      borderColor: 'send.bgActive',
+      bgColor: 'send.bgActive',
+      scale: PRESSED,
+    },
+    _disabled: { ...disabledControl },
+  },
   secondary: {
     borderColor: 'border.default',
     bgColor: 'bg.surface',
@@ -189,6 +206,7 @@ export const getButtonStyles = (
 export const buttonVariants: ButtonVariant[] = [
   'primary',
   'action',
+  'accent',
   'secondary',
   'subtle',
   'ghost',

package/src/components/Button/Button.types.ts

@@ -16,6 +16,8 @@ import type { PolymorphicProps } from '../../types/polymorphic';
  *
  * - `primary`: BAZE black fill — the one main action of a screen
  * - `action`: black "run" button whose icon is coral (`action.iconOnSolid`)
+ * - `accent`: coral fill with dark text (`send.*`) — the one coloured call to
+ *   action of a marketing surface or a hero; at most one per view
  * - `secondary`: outlined surface button — cancel, alternative actions
  * - `subtle`: quiet warm-wash fill — low-emphasis actions (the default)
  * - `ghost`: no fill, no border — toolbars, inline actions
@@ -27,6 +29,7 @@ import type { PolymorphicProps } from '../../types/polymorphic';
 export type ButtonVariant =
   | 'primary'
   | 'action'
+  | 'accent'
   | 'secondary'
   | 'subtle'
   | 'ghost'
@@ -83,8 +86,8 @@ export type ButtonOwnProps = Omit<
   /**
    * Danger-coloured text (`danger.fg`) for a destructive action that does not
    * deserve a red fill. Applies to `secondary`, `ghost` and `subtle`; the
-   * border and fill stay the variant's own. Ignored on `primary`, `action` and
-   * `danger` (use `variant="danger"` for a filled destructive button).
+   * border and fill stay the variant's own. Ignored on `primary`, `action`,
+   * `accent` and `danger` (use `variant="danger"` for a filled destructive button).
    * @default false
    */
   isDestructive?: boolean;

package/src/components/Button/Button.variants.test.tsx

@@ -47,6 +47,15 @@ describe('Button variants (5.0)', () => {
     expect(getButtonStyles('danger', true).color).toBe('danger.onSolid');
   });
 
+  it('accent is the coral fill with a dark label (send.* tokens)', () => {
+    const accent = getButtonStyles('accent');
+    expect(accent.bgColor).toBe('send.bg');
+    expect(accent.color).toBe('send.fg');
+    expect(accent._hover).toMatchObject({ bgColor: 'send.bgHover' });
+    expect(accent._active).toMatchObject({ bgColor: 'send.bgActive' });
+    expect(getButtonStyles('accent', true).color).toBe('send.fg');
+  });
+
   it('disabled is a fixed colour pair, not opacity', () => {
     expect(buttonVariantStyles.primary._disabled).toMatchObject({
       bg: 'disabled.bg',

package/src/components/LineGraph/seriesColors.ts

@@ -8,6 +8,8 @@ import { SYSTEM_HUES } from '@/theme/palette.generated';
  * that carry no meaning in the system. Red, yellow and green are the danger,
  * warning and success colours, and blue is info and links, so none of them
  * may colour a series by default — a red "UV" line reads as an error.
+ * (Blue is reserved for data as a whole: a single-measure chart is a blue
+ * monochrome ramp — SemanticTokens.mdx, "Blue means data and links".)
  *
  * Every stroke clears 3:1 against the page in both modes. Cyan, mint and
  * orange are too light at their base value in light mode (≈1.9:1), so they

package/src/components/Select/Comparison.stories.tsx

@@ -54,6 +54,25 @@ export const SideBySide = () => (
       <SelectField options={categoryOptions} placeholder="Select" invalid />
       <Textarea placeholder="Textarea" invalid />
     </Row>
+    <Row label='Select variant="ghost" — default / invalid / disabled'>
+      <SelectField
+        variant="ghost"
+        options={categoryOptions}
+        placeholder="Select"
+      />
+      <SelectField
+        variant="ghost"
+        options={categoryOptions}
+        placeholder="Select"
+        invalid
+      />
+      <SelectField
+        variant="ghost"
+        options={categoryOptions}
+        placeholder="Select"
+        disabled
+      />
+    </Row>
     <Row label="Disabled">
       <Input placeholder="Input" disabled />
       <SelectField options={categoryOptions} placeholder="Select" disabled />

package/src/components/Select/Select.stories.tsx

@@ -2,10 +2,12 @@ import { useState } from 'react';
 import {
   Box,
   createListCollection,
+  Flex,
   HStack,
   Portal,
   Span,
   Stack,
+  Text,
 } from '@chakra-ui/react';
 import { Meta } from '@storybook/react';
 
@@ -78,6 +80,59 @@ export const Disabled = () => (
   </Box>
 );
 
+/**
+ * `variant="ghost"` — no resting border, sized to its content. For dense
+ * settings rows where a column of bordered triggers outweighs the card.
+ * Hover shows the control border.
+ */
+export const Ghost = () => {
+  const rows = [
+    ['크레딧 한도 변경', '관리자가 내 크레딧 한도를 바꾸면 알려드립니다.'],
+    ['크레딧 잔량 부족', '내 크레딧이 얼마 남지 않으면 알려드립니다.'],
+    ['결제 실패', '결제에 실패하거나 자동으로 환불되면 알려드립니다.'],
+  ];
+  const channelOptions = [
+    { label: '앱 알림', value: 'app' },
+    { label: '앱 알림 + 이메일', value: 'app_email' },
+    { label: '끄기', value: 'off' },
+  ];
+  return (
+    <Box
+      maxW="640px"
+      borderWidth="1px"
+      borderColor="border.subtle"
+      borderRadius="12px"
+    >
+      {rows.map(([title, description], index) => (
+        <Flex
+          key={title}
+          align="center"
+          justify="space-between"
+          gap={4}
+          px={4}
+          py={3}
+          borderTopWidth={index === 0 ? 0 : '1px'}
+          borderColor="border.subtle"
+        >
+          <Box>
+            <Text fontWeight="semibold">{title}</Text>
+            <Text color="fg.muted" fontSize="sm">
+              {description}
+            </Text>
+          </Box>
+          <SelectField
+            variant="ghost"
+            size="sm"
+            ariaLabel={title}
+            options={channelOptions}
+            defaultValue="app"
+          />
+        </Flex>
+      ))}
+    </Box>
+  );
+};
+
 export const ManyOptions = () => {
   const manyOptions = Array.from({ length: 100 }, (_, i) => ({
     label: `Option ${i + 1}`,

package/src/components/Select/Select.styles.ts

@@ -8,7 +8,7 @@
  * update these values to match.
  */
 
-import { disabledControl } from '@/utils/disabledControl';
+import { disabledControl, disabledText } from '@/utils/disabledControl';
 
 const focusVars = {
   '--focus-color': 'var(--chakra-colors-primary-main)',
@@ -47,6 +47,31 @@ export const triggerStyles = {
   },
 };
 
+/**
+ * `variant="ghost"` delta on top of `triggerStyles`, for dense rows (settings
+ * lists) where a column of bordered triggers outweighs the card around them.
+ * No border at rest; hover brings back `border.control`, focus/open keep the
+ * normal ring, and an invalid field keeps its red border at rest so an error
+ * is never hidden. The chevron identifies the control (`fg.muted`, well over
+ * the 3:1 non-text floor), which is what lets the resting border go.
+ */
+export const ghostTriggerStyles = {
+  bg: 'transparent',
+  borderColor: 'transparent',
+  // Content-sized: Chakra caps the value at `maxW: 80%` of the trigger and
+  // overlays the chevron, which is circular once the trigger sizes to the
+  // value — it truncates to "앱 …". Lift the cap and reserve the chevron's
+  // room (indicator group = icon + padding on both sides) instead.
+  pe: 'calc(var(--select-trigger-padding-x) * 2 + 1rem)',
+  '& [data-part=value-text]': { maxW: 'none', whiteSpace: 'nowrap' },
+  _hover: { borderColor: 'border.control' },
+  _disabled: {
+    ...disabledText,
+    cursor: 'not-allowed',
+    fontWeight: 'semibold',
+  },
+};
+
 /** Combobox text input — the typeable control. */
 export const inputStyles = {
   ...fieldBase,
@@ -62,6 +87,16 @@ export const contentStyles = {
   padding: '4px',
 };
 
+/**
+ * Dropdown panel for a ghost trigger — at least as wide as the trigger, but
+ * grown to the longest option, since a content-sized trigger is often
+ * narrower than the options it opens.
+ */
+export const ghostContentStyles = {
+  width: 'max-content',
+  minW: 'var(--reference-width)',
+};
+
 /** Individual option for both Select and Combobox. */
 export const itemStyles = {
   borderRadius: '4px',

package/src/components/Select/Select.tsx

@@ -5,18 +5,28 @@ import { mergeCss } from '@/utils/mergeCss';
 
 import {
   contentStyles,
+  ghostTriggerStyles,
   indicatorStyles,
   itemStyles,
   triggerStyles,
 } from './Select.styles';
+import type { SelectVariant } from './Select.types';
 
-const Trigger = forwardRef<HTMLButtonElement, ChakraSelect.TriggerProps>(
-  function SelectTrigger({ css, ...props }, ref) {
+export interface SelectTriggerProps extends ChakraSelect.TriggerProps {
+  variant?: SelectVariant;
+}
+
+const Trigger = forwardRef<HTMLButtonElement, SelectTriggerProps>(
+  function SelectTrigger({ css, variant = 'outline', ...props }, ref) {
     return (
       <ChakraSelect.Trigger
         ref={ref}
         {...props}
-        css={mergeCss(triggerStyles, css)}
+        css={mergeCss(
+          triggerStyles,
+          variant === 'ghost' && ghostTriggerStyles,
+          css
+        )}
       />
     );
   }

package/src/components/Select/Select.types.ts

@@ -2,6 +2,12 @@ import type { ReactNode } from 'react';
 
 export type SelectSize = 'xs' | 'sm' | 'md' | 'lg';
 
+/**
+ * `outline` (default) — the bordered trigger shared with Input and Textarea.
+ * `ghost` — no border at rest, shown on hover/focus; for dense settings rows.
+ */
+export type SelectVariant = 'outline' | 'ghost';
+
 export interface SelectOption<T = string> {
   label: string;
   value: T;
@@ -46,6 +52,11 @@ interface FieldBaseProps<T> {
 }
 
 export interface SelectFieldProps<T = string> extends FieldBaseProps<T> {
+  /**
+   * Trigger look. `ghost` drops the resting border and sizes the field to its
+   * content (`width` defaults to `auto` instead of `full`).
+   */
+  variant?: SelectVariant;
   /**
    * Deal the options in one after another when the list opens.
    *

package/src/components/Select/SelectField.tsx

@@ -4,6 +4,7 @@ import { createListCollection, Portal } from '@chakra-ui/react';
 import { staggerProps } from '@/utils/staggerProps';
 
 import { Select } from './Select';
+import { ghostContentStyles } from './Select.styles';
 import { SelectFieldProps } from './Select.types';
 
 /**
@@ -28,7 +29,8 @@ export function SelectField<T = string>({
   readOnly,
   required,
   name,
-  width = 'full',
+  variant = 'outline',
+  width = variant === 'ghost' ? 'auto' : 'full',
   stagger = false,
 }: SelectFieldProps<T>) {
   const collection = useMemo(
@@ -79,7 +81,7 @@ export function SelectField<T = string>({
         )
       )}
       <Select.Control>
-        <Select.Trigger>
+        <Select.Trigger variant={variant}>
           <Select.ValueText placeholder={placeholder} />
         </Select.Trigger>
         <Select.IndicatorGroup>
@@ -88,7 +90,9 @@ export function SelectField<T = string>({
       </Select.Control>
       <Portal>
         <Select.Positioner>
-          <Select.Content>
+          <Select.Content
+            css={variant === 'ghost' ? ghostContentStyles : undefined}
+          >
             {options.map((option, index) => (
               <Select.Item
                 item={option}

package/src/components/Select/index.ts

@@ -1,5 +1,6 @@
 export { Combobox } from './Combobox';
 export { ComboboxField } from './ComboboxField';
+export type { SelectTriggerProps } from './Select';
 export { Select } from './Select';
 export type * from './Select.types';
 export { SelectField } from './SelectField';

package/src/theme/SemanticTokens.mdx

@@ -40,7 +40,7 @@ createLogicianTheme({ neutral: 'slate' }) // cool gray — app code unchanged
 | Beige accent: text, icons, borders on those (`secondary` identity) | `secondary.fg` / `.fgStrong` / `.border` |
 | Beige tint (tint/accent only — **not a component background**: reads peach as a fill) | `secondary.surface` / `.surfaceStrong` |
 | Run button (black + coral icon) · small coral marks | `action.bg` / `.fg` / `.iconOnSolid` · `action.mark` |
-| Send button | `send.bg` / `.bgHover` / `.bgActive` / `.fg` |
+| Send button, Button `accent` | `send.bg` / `.bgHover` / `.bgActive` / `.fg` |
 | Unread count | `count.bg` / `count.fg` |
 | Disabled (no opacity) | `disabled.bg` / `disabled.fg` |
 | Status | `danger` · `success` · `warning` · `info` → `.bg` `.border` `.fg` `.solid` `.onSolid` |
@@ -50,6 +50,32 @@ Emphasis is weight, not colour: headings use `fg.default`, never `primary.*`.
 Status colours mean status — don't borrow `success`/`warning` for decoration;
 that is what `category.*` is for.
 
+## Blue means data and links
+
+Blue is the one hue BAZE gives a meaning outside status: **data and links**.
+Use it for both, and for nothing decorative.
+
+- **Links** — `fg.link` / `fg.linkHover` (blue ink, #48607A / #AFC7E1), in chat
+  messages, markdown and app copy alike. Never ink-black or coral for a link.
+- **Data visualisation** — usage/share bars, single-measure bar and line charts,
+  maps, heatmaps, progress-by-share: a **blue monochrome ramp**, never a
+  rainbow and never a grey ramp. Steps differ in lightness only (the saturated
+  `blue.base` is left out); the largest value gets the strongest step.
+
+| Step | Light | Dark |
+| --- | --- | --- |
+| 1 (largest) | `#48607A` (`blue.ink`) · white label | `#AFC7E1` (`blue.inkDark`) · ink label |
+| 2 | `#7492B3` · ink label | `#7492B3` · ink label |
+| 3 | `#AFC7E1` · ink label | `#48607A` · white label |
+| 4 | `#DFEBF9` (`blue.surface`) · ink label | `#232F3D` (`blue.surfaceDark`) · white label |
+
+Pick each label by measured contrast (≥ 4.5:1), not by step number.
+A chart that must tell several *categories* apart (multi-series lines) keeps
+`CHART_SERIES_HUES` in `LineGraph/seriesColors.ts`, which leaves blue out so
+no series reads as a link or an info state.
+`info` is also blue; status always comes with an icon and words, so a blue
+chart is never mistaken for an info notice.
+
 ## Modes
 
 Every role flips with the colour mode (`_light` / `_dark`) and has a

package/src/theme/claude.md

@@ -249,6 +249,9 @@ follow the scheme and high contrast. Base font size is 14px.
 4. Beige (`secondary.surface*`) is for small surfaces (bubbles, soft
    badges/tags, the modal header band), never rows or panels.
 5. Disabled = `disabled.*`, not opacity. Focus = `focusRing`.
+6. Blue means data and links: links are `fg.link`; data visualisation
+   (usage bars, single-measure charts, maps) is a blue monochrome ramp, never a
+   rainbow or grey ramp. Values: SemanticTokens.mdx → "Blue means data and links".
 
 ## Extending the Theme
 

package/src/theme/contrast.test.ts

@@ -77,9 +77,10 @@ const PAIRS: [string, string, Kind][] = [
   ['action-iconOnSolid', 'action-bgHover', 'nontext'],
   ['action-fg', 'action-bgActive', 'text'],
   ['action-iconOnSolid', 'action-bgActive', 'nontext'],
-  ['send-fg', 'send-bg', 'nontext'],
-  ['send-fg', 'send-bgHover', 'nontext'],
-  ['send-fg', 'send-bgActive', 'nontext'],
+  // `text`, not `nontext`: Button `accent` puts a label on these fills.
+  ['send-fg', 'send-bg', 'text'],
+  ['send-fg', 'send-bgHover', 'text'],
+  ['send-fg', 'send-bgActive', 'text'],
   ['danger-fg', 'danger-bg', 'text'],
   ['danger-onSolid', 'danger-solid', 'text'],
   ['success-fg', 'success-bg', 'text'],