@mindlogic-ai/logician-ui 5.0.0-alpha.26 → 5.0.0-alpha.28

package/src/foundations/BrandColour.stories.tsx

@@ -1,13 +1,19 @@
-import { Flex, Stack } from '@chakra-ui/react';
+import { Box, Flex, Stack } from '@chakra-ui/react';
 import { Meta, StoryObj } from '@storybook/react';
 
 import { Badge } from '../components/Badge';
 import { Button } from '../components/Button';
 import { Card } from '../components/Card';
 import { CountBadge } from '../components/CountBadge';
-import { SendIcon, Sparkles } from '../components/Icon';
+import {
+  SendIcon,
+  Sparkles,
+  StarFilledIcon,
+  StarIcon,
+} from '../components/Icon';
 import { IconButton } from '../components/IconButton';
 import { Tag } from '../components/Tag';
+import { Switch } from '../components/Switch';
 import { Link, Text } from '../components/Typography';
 import { T } from '../guidelines/_components/Lang';
 import { TokenTable } from '../guidelines/_components/TokenTable';
@@ -267,6 +273,124 @@ const STATUS = [
   { s: 'info', en: 'This group only', ko: '이 그룹만' },
 ] as const;
 
+/**
+ * A favourite toggle as it sits on a thumbnail: a bg.surface circle over the
+ * image, the star inside it. `fill` is the colour of the filled (marked) star;
+ * the unmarked outline is always `fg.icon`.
+ */
+const StarPair = ({ fill }: { fill: string }) => (
+  <Flex gap={3}>
+    {[true, false].map((marked) => (
+      <Box
+        key={String(marked)}
+        position="relative"
+        w="96px"
+        h="64px"
+        borderRadius="md"
+        bg="bg.muted"
+        borderWidth="1px"
+        borderColor="border.subtle"
+      >
+        <Flex
+          position="absolute"
+          top={1.5}
+          right={1.5}
+          w="28px"
+          h="28px"
+          borderRadius="full"
+          bg="bg.surface"
+          align="center"
+          justify="center"
+          aria-label={marked ? '즐겨찾기됨' : '즐겨찾기 안 됨'}
+          role="img"
+        >
+          {marked ? (
+            <StarFilledIcon boxSize="sm" color={fill} />
+          ) : (
+            <StarIcon boxSize="sm" color="fg.icon" />
+          )}
+        </Flex>
+      </Box>
+    ))}
+  </Flex>
+);
+
+/**
+ * State is neither status nor brand: `control.on` for a control that is on,
+ * `mark.starred` for something the user marked to keep. The "Don't" row is
+ * the `primary.main` star this replaces: the same ink as the outline beside it.
+ */
+export const State: Story = {
+  render: () => (
+    <Stack gap={5}>
+      <Flex gap={8} wrap="wrap" align="flex-start">
+        <Stack gap={2}>
+          <Text textStyle="subtext" color="fg.muted">
+            <T en="Switch: off · on" ko="Switch: 꺼짐 · 켜짐" />
+          </Text>
+          <Flex gap={4} align="center">
+            <Switch aria-label="꺼진 스위치">
+              <Switch.Control />
+            </Switch>
+            <Switch defaultChecked aria-label="켜진 스위치">
+              <Switch.Control />
+            </Switch>
+          </Flex>
+        </Stack>
+        <Stack gap={2}>
+          <Text textStyle="subtext" color="fg.muted">
+            <T
+              en="Do: mark.starred · fg.icon outline"
+              ko="이렇게: mark.starred · fg.icon 외곽선"
+            />
+          </Text>
+          <StarPair fill="mark.starred" />
+        </Stack>
+        <Stack gap={2}>
+          <Text textStyle="subtext" color="fg.muted">
+            <T
+              en="Don't: primary.main · same ink as the outline"
+              ko="이렇게 하지 않기: primary.main · 외곽선과 같은 잉크"
+            />
+          </Text>
+          <StarPair fill="primary.main" />
+        </Stack>
+      </Flex>
+      <TokenTable
+        rows={[
+          {
+            token: 'control.on',
+            use: (
+              <T
+                en="On state: Switch track, selected toggle chip"
+                ko="켜짐 상태: Switch 트랙, 선택된 토글 칩"
+              />
+            ),
+          },
+          {
+            token: 'control.onFg',
+            use: (
+              <T
+                en="Thumb or label on control.on"
+                ko="control.on 위 손잡이·글자"
+              />
+            ),
+          },
+          {
+            token: 'mark.starred',
+            use: (
+              <T
+                en="Marked to keep: favourite, saved template, bookmark"
+                ko="사용자가 표시한 항목: 즐겨찾기, 저장한 템플릿, 북마크"
+              />
+            ),
+          },
+        ]}
+      />
+    </Stack>
+  ),
+};
+
 export const Status: Story = {
   render: () => (
     <Stack gap={5}>

package/src/theme/SemanticTokens.mdx

@@ -15,7 +15,7 @@ Values and contrast for every token: **Setup/Theme/BAZE Palette**.
 | --- | --- | --- |
 | Raw scale (colour names) | `ink.1–12`, `inkDark.1–12`, `sand.*`, `slate.*`, `coral.*`, `red.base` … | never in components |
 | Semantic step (role names) | `neutral.1–12`, `secondary.1–12` | a specific neutral step no role names |
-| Semantic role | `bg.*`, `layer.*`, `fg.*`, `border.*`, `primary.*`, `secondary.*`, `action.*`, `send.*`, `count.*`, `disabled.*`, `focus.ring`, status, `tooltip.*`, `category.*`, `data.*`, `diverging.*` | everything else |
+| Semantic role | `bg.*`, `layer.*`, `fg.*`, `border.*`, `primary.*`, `secondary.*`, `action.*`, `send.*`, `count.*`, `control.*`, `mark.starred`, `disabled.*`, `focus.ring`, status, `tooltip.*`, `category.*`, `data.*`, `diverging.*` | everything else |
 
 ```ts
 createLogicianTheme()                    // BAZE: { neutral: 'ink', secondary: 'sand' }
@@ -42,6 +42,8 @@ createLogicianTheme({ neutral: 'slate' }) // cool gray — app code unchanged
 | Run button (black + coral icon) · small coral marks | `action.bg` / `.fg` / `.iconOnSolid` · `action.mark` |
 | Send button, Button `accent` | `send.bg` / `.bgHover` / `.bgActive` / `.fg` |
 | Unread count | `count.bg` / `count.fg` |
+| On/off state: Switch on, selected toggle chip · thumb or label on it | `control.on` · `control.onFg` |
+| User-marked item: favourite star, saved template, bookmark (filled) | `mark.starred` (the unmarked outline stays `fg.icon`) |
 | Disabled (no opacity) | `disabled.bg` / `disabled.fg` · fill-less ghost button: `disabled.fgGhost` |
 | Status | `danger` · `success` · `warning` · `info` → `.bg` `.border` `.fg` `.solid` `.onSolid` |
 | Decorative category (tiles, avatars, tags, charts) | `category.{hue}.surface` / `.fg` |
@@ -52,6 +54,38 @@ 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.
 
+## State: on and starred
+
+**Binary on/off state uses `control.on`; user-marked items (star/bookmark) use
+`mark.starred`; never `primary`/black/white or a status colour for state.**
+
+- **`control.on`** fills a control that is on: the Switch track, a selected
+  toggle chip, any on/off control. Whatever is drawn on it (the thumb, the
+  chip label) is `control.onFg`. It is green today (#30862D light / #8FC46E
+  dark), the value Switch read from `success.solid` before, but it is not a
+  status: "on" does not mean "succeeded", and the two may move apart.
+- **`mark.starred`** fills something the user marked to keep: a favourite, a
+  saved template, a starred item, a bookmark. The filled icon takes
+  `mark.starred`; the unmarked outline stays `fg.icon`, so selected and
+  unselected differ in colour as well as in shape.
+- **Why not `primary`.** `primary.main` is the same ink (#252525 light, the
+  pale sand in dark) as the outline icon next to it, so a filled star and an
+  empty one could only be told apart by shape. A status colour would say
+  something about the item that is not true.
+- **Not coral, blue or teal/mint.** Coral is send, run, AI-working and the
+  count badge; blue is data and links; teal and mint are not product UI.
+- Checkbox stays `primary.main` when checked.
+
+| Token | Light | Dark | High contrast (light / dark) |
+| --- | --- | --- | --- |
+| `control.on` | `#30862D` (4.59:1 on white) | `#8FC46E` (7.22:1 on `bg.surface`) | `#036805` / `#8FC46E` |
+| `control.onFg` | `#FFFFFF` | `#1B1B1B` | same |
+| `mark.starred` | `#B78100` (3.41:1 on white, 3.01:1 on `layer.1`) | `#E4AC44` (`yellow.base`, 7.22:1 on `bg.surface`) | `#976300` (4.51:1 on `layer.1`) / `#E4AC44` |
+
+`mark.starred` is the yellow hue (BAZE's gold). `yellow.base` is only 2.04:1
+on white, so light mode darkens it in OKLCH (same hue) until it clears 3:1 on
+every light layer; dark mode uses `yellow.base` itself.
+
 ## Blue means data and links
 
 Blue is the one hue BAZE gives a meaning outside status: **data and links**.

package/src/theme/claude.md

@@ -143,11 +143,11 @@ is the maintainer's view.
 
 ### Layers and files
 
-| Layer                                                                                                                                                                                              | Where                                            | Rule                                                                          |
-| -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------ | ----------------------------------------------------------------------------- |
-| Raw scales `ink`/`inkDark`, `sand`/`sandDark`, `slate`/`slateDark` (1–12), `coral`, 12 system hues `{base, baseDark, hc, hcDark, surface, ink, surfaceDark, inkDark}`, `dataviz`                   | `palette.generated.ts` → `colors` in `colors.ts` | Components and recipes **never** read them                                    |
-| Semantic steps `neutral.1–12`, `secondary.1–12`                                                                                                                                                    | `createSemanticColors()`                         | Filled by the theme option (`neutral: 'ink' \| 'slate'`, `secondary: 'sand'`) |
-| Roles (`bg.*`, `layer.*`, `fg.*`, `border.*`, `primary.*`, `secondary.*`, `action.*`, `send.*`, `count.*`, `disabled.*`, `focus.ring`, status, `tooltip.*`, `category.*`, `data.*`, `diverging.*`) | `ROLE_TOKEN_PATHS` + `createSemanticColors()`    | The only colours a component reads                                            |
+| Layer                                                                                                                                                                                                                           | Where                                            | Rule                                                                          |
+| ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------ | ----------------------------------------------------------------------------- |
+| Raw scales `ink`/`inkDark`, `sand`/`sandDark`, `slate`/`slateDark` (1–12), `coral`, 12 system hues `{base, baseDark, hc, hcDark, surface, ink, surfaceDark, inkDark}`, `dataviz`                                                | `palette.generated.ts` → `colors` in `colors.ts` | Components and recipes **never** read them                                    |
+| Semantic steps `neutral.1–12`, `secondary.1–12`                                                                                                                                                                                 | `createSemanticColors()`                         | Filled by the theme option (`neutral: 'ink' \| 'slate'`, `secondary: 'sand'`) |
+| Roles (`bg.*`, `layer.*`, `fg.*`, `border.*`, `primary.*`, `secondary.*`, `action.*`, `send.*`, `count.*`, `control.*`, `mark.starred`, `disabled.*`, `focus.ring`, status, `tooltip.*`, `category.*`, `data.*`, `diverging.*`) | `ROLE_TOKEN_PATHS` + `createSemanticColors()`    | The only colours a component reads                                            |
 
 - **Values come from the generator.** `scripts/palette/generate.mjs` ports the
   designer prototype (OKLCH, contrast-targeted steps) and `--check`s it against
@@ -255,6 +255,9 @@ follow the scheme and high contrast. Base font size is 14px.
 1. Read only role tokens; reach for `neutral.N` only when no role names the job.
 2. Emphasis is weight, not colour — never `primary.*` for text.
 3. Status colours carry status meaning; decoration uses `category.*`.
+   State is neither: binary on/off state uses `control.on` (+ `control.onFg`
+   for the thumb or label on it); user-marked items (star/bookmark) use
+   `mark.starred`; never `primary`/black/white or a status colour for state.
 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`.

package/src/theme/colors.ts

@@ -16,7 +16,8 @@
  *    `createLogicianTheme({ neutral, secondary })` decides which raw scale fills
  *    them (default `ink` / `sand`).
  * 3. **Semantic roles** — `bg.*`, `layer.*`, `fg.*`, `border.*`, `primary.*`,
- *    `secondary.*`, `action.*`, `send.*`, `count.*`, `disabled.*`, `focus.ring`,
+ *    `secondary.*`, `action.*`, `send.*`, `count.*`, `control.*` (on/off
+ *    state), `mark.starred` (user-marked items), `disabled.*`, `focus.ring`,
  *    the four status families, `tooltip.*`, `category.{hue}.*` (plus the
  *    nameless `category.neutral.*`), the `bg.logo` / `fg.onLogo` tile, and the
  *    data-visualisation fills `data.1–4` and `diverging.{pos,neg}.1–3` /
@@ -208,6 +209,13 @@ const PATHS: Record<FlatKey, string> = {
   'send-fg': 'send.fg',
   'count-bg': 'count.bg',
   'count-fg': 'count.fg',
+  // State, not status: a binary control that is on (Switch, selected toggle
+  // chip) and the thing on it (thumb, chip label); something the user marked
+  // to keep (favourite star, bookmark). Never primary/black/white or a status
+  // colour for either.
+  'control-on': 'control.on',
+  'control-onFg': 'control.onFg',
+  'mark-starred': 'mark.starred',
   'disabled-bg': 'disabled.bg',
   'disabled-fg': 'disabled.fg',
   'disabled-fgGhost': 'disabled.fgGhost',
@@ -465,6 +473,8 @@ export type SemanticColorToken =
   | `action.${'mark' | 'iconOnSolid' | 'bg' | 'bgHover' | 'bgActive' | 'fg' | 'border'}`
   | `send.${'bg' | 'bgHover' | 'bgActive' | 'fg'}`
   | `count.${'bg' | 'fg'}`
+  | `control.${'on' | 'onFg'}`
+  | 'mark.starred'
   | `disabled.${'bg' | 'fg' | 'fgGhost'}`
   | 'focus.ring'
   | `${StatusFamily}.${'bg' | 'border' | 'fg' | 'solid' | 'onSolid'}`

package/src/theme/contrast.test.ts

@@ -47,6 +47,10 @@ const PAIRS: [string, string, Kind][] = [
         ['action-mark', bg, 'nontext'],
         ['primary-main', bg, 'nontext'],
         ['danger-fg', bg, 'nontext'],
+        // An on Switch track / selected chip against the ground it sits on,
+        // and a starred mark (a filled icon) on every layer (WCAG 1.4.11).
+        ['control-on', bg, 'nontext'],
+        ['mark-starred', bg, 'nontext'],
       ] as [string, string, Kind][]
   ),
   ['fg-placeholder', 'bg-surface', 'text'],
@@ -65,6 +69,10 @@ const PAIRS: [string, string, Kind][] = [
   ['fg-muted', 'bg-subtle', 'text'],
   ['fg-icon', 'bg-muted', 'nontext'],
   ['fg-icon', 'bg-subtle', 'nontext'],
+  // The favourite star sits on a bg.surface circle over thumbnails, and on
+  // bg.muted cards.
+  ['mark-starred', 'bg-surface', 'nontext'],
+  ['mark-starred', 'bg-muted', 'nontext'],
   ['fg-default', 'secondary-surface', 'text'],
   ['secondary-fgStrong', 'secondary-surface', 'text'],
   ['secondary-fgStrong', 'secondary-surfaceStrong', 'text'],
@@ -86,6 +94,8 @@ const PAIRS: [string, string, Kind][] = [
   ['danger-onSolid', 'danger-solid', 'text'],
   ['success-fg', 'success-bg', 'text'],
   ['success-onSolid', 'success-solid', 'text'],
+  // `text`: a selected toggle chip puts its label on control.on.
+  ['control-onFg', 'control-on', 'text'],
   ['warning-fg', 'warning-bg', 'text'],
   ['warning-onSolid', 'warning-solid', 'text'],
   ['info-fg', 'info-bg', 'text'],

package/src/theme/palette.generated.ts

@@ -316,6 +316,9 @@ export const SCHEMES = {
       "send-fg": "#252525",
       "count-bg": "#D44239",
       "count-fg": "#FFFFFF",
+      "control-on": "#30862D",
+      "control-onFg": "#FFFFFF",
+      "mark-starred": "#B78100",
       "disabled-bg": "#EDEDED",
       "disabled-fg": "#8A8A8A",
       "disabled-fgGhost": "#C2C2C2",
@@ -407,6 +410,9 @@ export const SCHEMES = {
       "send-fg": "#252525",
       "count-bg": "#D44239",
       "count-fg": "#FFFFFF",
+      "control-on": "#8FC46E",
+      "control-onFg": "#1B1B1B",
+      "mark-starred": "#E4AC44",
       "disabled-bg": "#2C2C2C",
       "disabled-fg": "#737373",
       "disabled-fgGhost": "#4A4A4A",
@@ -498,6 +504,9 @@ export const SCHEMES = {
       "send-fg": "#252525",
       "count-bg": "#B01919",
       "count-fg": "#FFFFFF",
+      "control-on": "#036805",
+      "control-onFg": "#FFFFFF",
+      "mark-starred": "#976300",
       "disabled-bg": "#EDEDED",
       "disabled-fg": "#8A8A8A",
       "disabled-fgGhost": "#C2C2C2",
@@ -589,6 +598,9 @@ export const SCHEMES = {
       "send-fg": "#252525",
       "count-bg": "#B01919",
       "count-fg": "#FFFFFF",
+      "control-on": "#8FC46E",
+      "control-onFg": "#1B1B1B",
+      "mark-starred": "#E4AC44",
       "disabled-bg": "#2C2C2C",
       "disabled-fg": "#737373",
       "disabled-fgGhost": "#4A4A4A",
@@ -682,6 +694,9 @@ export const SCHEMES = {
       "send-fg": "#252525",
       "count-bg": "#D44239",
       "count-fg": "#FFFFFF",
+      "control-on": "#30862D",
+      "control-onFg": "#FFFFFF",
+      "mark-starred": "#B78100",
       "disabled-bg": "#EDEDED",
       "disabled-fg": "#8A8A8A",
       "disabled-fgGhost": "#C2C2C2",
@@ -773,6 +788,9 @@ export const SCHEMES = {
       "send-fg": "#252525",
       "count-bg": "#D44239",
       "count-fg": "#FFFFFF",
+      "control-on": "#8FC46E",
+      "control-onFg": "#1B1B1B",
+      "mark-starred": "#E4AC44",
       "disabled-bg": "#2C2C2C",
       "disabled-fg": "#737373",
       "disabled-fgGhost": "#4A4A4A",
@@ -864,6 +882,9 @@ export const SCHEMES = {
       "send-fg": "#252525",
       "count-bg": "#B01919",
       "count-fg": "#FFFFFF",
+      "control-on": "#036805",
+      "control-onFg": "#FFFFFF",
+      "mark-starred": "#976300",
       "disabled-bg": "#EDEDED",
       "disabled-fg": "#8A8A8A",
       "disabled-fgGhost": "#C2C2C2",
@@ -955,6 +976,9 @@ export const SCHEMES = {
       "send-fg": "#252525",
       "count-bg": "#B01919",
       "count-fg": "#FFFFFF",
+      "control-on": "#8FC46E",
+      "control-onFg": "#1B1B1B",
+      "mark-starred": "#E4AC44",
       "disabled-bg": "#2C2C2C",
       "disabled-fg": "#737373",
       "disabled-fgGhost": "#4A4A4A",