@titan-design/react-ui 0.13.0 → 0.14.0

package/src/test/no-raw-color.test.ts

@@ -0,0 +1,39 @@
+import { RuleTester } from 'eslint'
+import rule from '../../eslint-rules/no-raw-color'
+
+const ruleTester = new RuleTester({
+  languageOptions: {
+    ecmaVersion: 2022,
+    sourceType: 'module',
+    parserOptions: { ecmaFeatures: { jsx: true } },
+  },
+})
+
+describe('no-raw-color', () => {
+  it('skips false positives while still flagging real raw colour', () => {
+    ruleTester.run('no-raw-color', rule as never, {
+      valid: [
+        // (a) enum-typed prop value: a bare colour word passed as color/variant/tone.
+        { code: '<Spinner color="white" />' },
+        // (a) the same enum's members listed in a Storybook argTypes options array.
+        {
+          code: "const meta = { argTypes: { color: { control: 'select', options: ['primary', 'white'] } } }",
+        },
+        // (b) { value, label } demo data reusing colour words as IDs.
+        { code: "const colorOptions = [{ value: 'red', label: 'Red' }]" },
+        // (c) documentation text in a <Text> element's children.
+        { code: '<Text>{`background-color: #3C3C3C;`}</Text>' },
+      ],
+      invalid: [
+        // Positive control: a real raw hex in a style prop must still be flagged,
+        // including on a <Text> element — only its *children* are exempt.
+        {
+          code: "<Text style={{ backgroundColor: '#123456' }} />",
+          errors: [{ messageId: 'hex' }],
+        },
+        // Positive control: a bare colour word outside any exempt shape is still named.
+        { code: "const bg = 'white'", errors: [{ messageId: 'named' }] },
+      ],
+    })
+  })
+})

package/src/theme/Alpha.stories.tsx

@@ -0,0 +1,103 @@
+import type { Meta, StoryObj } from '@storybook/react-vite'
+import { View, Text } from 'react-native'
+import { alpha } from '../utils/colors'
+import { getSemanticColors } from './tokens/semantic'
+import { primitiveColors } from './tokens/primitives'
+import { SectionIntro, SectionTitle, SWATCH_BORDER } from './color-story-kit'
+
+const t = getSemanticColors('dark')
+
+/**
+ * Foundations/Color/Alpha — deriving a translucent colour from a token instead
+ * of hardcoding an `rgba(...)` triple.
+ *
+ * `alpha(color, opacity)` (`packages/ui/src/utils/colors.ts`) takes a RESOLVED
+ * colour — a hex string or an `rgb()`/`rgba()` string, e.g. a semantic token's
+ * value or a primitive — and returns it as `rgba(r, g, b, opacity)`. It does
+ * NOT take a token name: `alpha('brand-primary', 0.1)` would try to parse the
+ * literal string `'brand-primary'` as a colour and fail. Resolve the token
+ * first (`t['brand-primary']`, `primitiveColors.white`, …), then wrap it.
+ *
+ * The payoff over a hand-picked `rgba(255, 121, 0, 0.1)`: when a ramp gets
+ * re-spaced or a semantic mapping moves, every `alpha()` call built on that
+ * token moves with it. A literal triple silently drifts from the token it was
+ * copied from and stays wrong until someone notices — the failure mode VW-78
+ * was opened to burn down (see `eslint-rules/raw-color-baseline.json`,
+ * enforced by `no-raw-color`'s `functional` rule).
+ */
+const meta: Meta = {
+  title: 'Foundations/Color/Alpha',
+  tags: ['autodocs'],
+}
+
+export default meta
+
+const EXAMPLES = [
+  { name: 'brand-primary @ 0.12', value: alpha(t['brand-primary'], 0.12) },
+  { name: 'status-success @ 0.15', value: alpha(t['status-success'], 0.15) },
+  { name: 'status-warning @ 0.25', value: alpha(t['status-warning'], 0.25) },
+  { name: 'status-error @ 0.3', value: alpha(t['status-error'], 0.3) },
+  { name: 'primitiveColors.white @ 0.08', value: alpha(primitiveColors.white, 0.08) },
+] as const
+
+function AlphaSwatch({ name, value }: { name: string; value: string }) {
+  return (
+    <View style={{ alignItems: 'center', width: 96 }}>
+      <View
+        style={{
+          width: 96,
+          height: 64,
+          borderRadius: 8,
+          backgroundColor: t['surface-elevated'],
+          borderWidth: 1,
+          borderColor: SWATCH_BORDER,
+          overflow: 'hidden',
+        }}
+      >
+        <View style={{ flex: 1, backgroundColor: value }} />
+      </View>
+      <Text className="text-text-secondary text-xs mt-1" style={{ textAlign: 'center' }}>
+        {name}
+      </Text>
+      <Text className="text-text-tertiary" style={{ fontSize: 9, marginTop: 1 }}>
+        {value}
+      </Text>
+    </View>
+  )
+}
+
+export const Default: StoryObj = {
+  render: () => (
+    <View style={{ padding: 24 }}>
+      <Text className="text-2xl font-bold text-text-primary mb-2">Alpha</Text>
+      <SectionIntro>
+        `alpha(color, opacity)` derives a translucent colour from a RESOLVED token or primitive
+        instead of a hand-picked `rgba(...)` triple, so the wash tracks the token it came from. Each
+        swatch below is rendered over the elevated surface plane so the translucency is visible.
+      </SectionIntro>
+
+      <SectionTitle>Usage</SectionTitle>
+      <View
+        style={{
+          backgroundColor: t['surface-raised'],
+          borderRadius: 8,
+          padding: 12,
+          marginBottom: 20,
+        }}
+      >
+        <Text className="text-text-secondary" style={{ fontFamily: 'monospace', fontSize: 12 }}>
+          {"import { alpha } from '@/utils/colors'\n\n"}
+          {"const t = getSemanticColors('dark')\n"}
+          {"const wash = alpha(t['brand-primary'], 0.12)"}
+        </Text>
+      </View>
+
+      <SectionTitle>Examples</SectionTitle>
+      <View style={{ flexDirection: 'row', flexWrap: 'wrap', gap: 16 }}>
+        {EXAMPLES.map((example) => (
+          <AlphaSwatch key={example.name} {...example} />
+        ))}
+      </View>
+    </View>
+  ),
+}

package/src/theme/ProposedTokensVW82.stories.tsx

@@ -0,0 +1,414 @@
+import type { Meta, StoryObj } from '@storybook/react-vite'
+import { View, Text } from 'react-native'
+import { alpha } from '../utils/colors'
+import { getSemanticColors } from './tokens/semantic'
+import { greyRamp, primitiveColors, primitiveRamps } from './tokens/primitives'
+import { SectionIntro, SectionTitle, SWATCH_BORDER } from './color-story-kit'
+import { ToolbarButton } from '../components/ui/toolbar-button'
+import { Treemap } from '../components/custom/Treemap'
+
+const t = getSemanticColors('dark')
+
+/**
+ * Foundations/Color/Proposed VW-82 tokens — a DECISION story, not documentation.
+ *
+ * VW-82 (#200) migrated component source off raw colours. Every literal that had
+ * an exact token was swapped; the ones with no token were deliberately left raw
+ * and proposed rather than invented, because adding a token is a design call.
+ * This story renders those candidates in the context they would actually ship
+ * in, so the proposal can be accepted or rejected by eye instead of by hex.
+ *
+ * WHY THE SCRIMS ARE TOKENS AND NOT `bg-black/50`: Tailwind v3 cannot apply an
+ * opacity modifier to a `var()` colour — it fails to parse the value and emits
+ * NO rule at all. So a translucent role has to ship as its own rgba token, which
+ * is exactly what `hairline-*` already does (`rgba(255, 255, 255, 0.15)`, not
+ * `white/15`). The four scrims below are rendered through
+ * `alpha(primitiveColors.black, …)`, which is the value each token would carry.
+ *
+ * The two candidates that have NO token and no primitive — `on-control-idle`
+ * (#D1D1D1) and `on-data-strong` (#0B0B0B) — cannot be written as literals here:
+ * `no-raw-color` allots this file zero, and funding a new allowance to document
+ * a proposal would push the ratchet the wrong way. They are instead shown by
+ * rendering the REAL components that carry them today, side by side with the
+ * existing tokens that might replace them. That is stronger evidence anyway.
+ */
+const meta: Meta<ProposedTokensArgs> = {
+  title: 'Foundations/Color/Proposed VW-82 tokens',
+  tags: ['autodocs'],
+  argTypes: {
+    showScrims: {
+      control: 'boolean',
+      description: 'Lift all four scrims off the backdrop, to judge their impact.',
+    },
+    backdrop: {
+      control: 'radio',
+      options: ['pattern', 'gradient', 'surface'],
+      description:
+        'What the scrims sit on. `pattern` is the honest worst case — a scrim over a flat dark surface always looks fine.',
+    },
+  },
+  args: { showScrims: true, backdrop: 'pattern' },
+}
+
+export default meta
+
+interface ProposedTokensArgs {
+  showScrims: boolean
+  backdrop: 'pattern' | 'gradient' | 'surface'
+}
+
+// ---------------------------------------------------------------------------
+// 1 — scrims
+// ---------------------------------------------------------------------------
+
+/**
+ * The four candidates, as the value each token would carry. Derived through
+ * `alpha()` from the black primitive rather than written as rgba triples, so
+ * they track the primitive the way the real token would.
+ */
+const SCRIMS = [
+  {
+    name: 'scrim-press',
+    opacity: 0.1,
+    usedBy: 'Alert close button — web:hover',
+  },
+  {
+    name: 'scrim-press-strong',
+    opacity: 0.2,
+    usedBy: 'Alert close button — active',
+  },
+  {
+    name: 'scrim-subtle',
+    opacity: 0.3,
+    usedBy: 'Modal backdrop (blurred), Select filled fill',
+  },
+  {
+    name: 'scrim-default',
+    opacity: 0.5,
+    usedBy: 'Modal backdrop, Drawer overlay',
+  },
+] as const
+
+const CHECKER_LIGHT = greyRamp[50]
+const CHECKER_DARK = greyRamp[950]
+const CHECKER_STEP = 20
+const PANEL_W = 196
+const PANEL_H = 140
+
+/**
+ * A deliberately hostile backdrop. A scrim over a flat dark plane reads as
+ * "fine" no matter what its opacity is; the only way to judge one is to put
+ * something with real tonal range under it.
+ */
+function Checkerboard({ rows, columns }: { rows: number; columns: number }) {
+  return (
+    <View style={{ position: 'absolute', top: 0, right: 0, bottom: 0, left: 0 }}>
+      {Array.from({ length: rows }, (_, row) => (
+        <View key={row} style={{ flexDirection: 'row' }}>
+          {Array.from({ length: columns }, (_, column) => (
+            <View
+              key={column}
+              style={{
+                width: CHECKER_STEP,
+                height: CHECKER_STEP,
+                backgroundColor: (row + column) % 2 === 0 ? CHECKER_LIGHT : CHECKER_DARK,
+              }}
+            />
+          ))}
+        </View>
+      ))}
+    </View>
+  )
+}
+
+/** Stand-in for the photographic mid-tones a real app backdrop has. */
+function GradientWash() {
+  return (
+    <View
+      style={{
+        position: 'absolute',
+        top: 0,
+        right: 0,
+        bottom: 0,
+        left: 0,
+        // react-native-web renders backgroundImage at runtime (see DeviationBar).
+        backgroundImage: `linear-gradient(135deg, ${primitiveRamps.blue[300]} 0%, ${primitiveRamps.magenta[300]} 38%, ${primitiveRamps.amber[200]} 72%, ${greyRamp[950]} 100%)`,
+      }}
+    />
+  )
+}
+
+/** Cards + copy on top of the backdrop, so the scrim has content to obscure. */
+function BackdropContent() {
+  return (
+    <View style={{ flexDirection: 'row', gap: 6, padding: 10 }}>
+      {[primitiveRamps.orange[400], primitiveRamps.green[300], primitiveRamps.blue[300]].map(
+        (fill) => (
+          <View
+            key={fill}
+            style={{
+              width: 56,
+              height: 48,
+              borderRadius: 6,
+              backgroundColor: fill,
+              padding: 5,
+            }}
+          >
+            <Text style={{ color: greyRamp[975], fontSize: 10, fontWeight: '700' }}>Card</Text>
+          </View>
+        )
+      )}
+    </View>
+  )
+}
+
+function ScrimPanel({ showScrims, backdrop }: ProposedTokensArgs) {
+  return (
+    <View style={{ flexDirection: 'row', flexWrap: 'wrap', gap: 14 }}>
+      {SCRIMS.map((scrim) => (
+        <View key={scrim.name} style={{ width: PANEL_W }}>
+          <View
+            style={{
+              height: PANEL_H,
+              borderRadius: 8,
+              overflow: 'hidden',
+              borderWidth: 1,
+              borderColor: SWATCH_BORDER,
+              backgroundColor: t['surface-base'],
+            }}
+          >
+            {backdrop === 'pattern' && (
+              <Checkerboard
+                rows={Math.ceil(PANEL_H / CHECKER_STEP)}
+                columns={Math.ceil(PANEL_W / CHECKER_STEP)}
+              />
+            )}
+            {backdrop === 'gradient' && <GradientWash />}
+            <BackdropContent />
+            {showScrims && (
+              <View
+                style={{
+                  position: 'absolute',
+                  top: 0,
+                  right: 0,
+                  bottom: 0,
+                  left: 0,
+                  backgroundColor: alpha(primitiveColors.black, scrim.opacity),
+                  alignItems: 'center',
+                  justifyContent: 'center',
+                }}
+              >
+                <Text style={{ color: primitiveColors.white, fontSize: 12, fontWeight: '700' }}>
+                  {scrim.name}
+                </Text>
+              </View>
+            )}
+          </View>
+          <Text className="text-text-primary text-xs font-semibold mt-2">{scrim.name}</Text>
+          <Text className="text-text-tertiary" style={{ fontSize: 10 }}>
+            {alpha(primitiveColors.black, scrim.opacity)}
+          </Text>
+          <Text className="text-text-secondary" style={{ fontSize: 10, marginTop: 2 }}>
+            {scrim.usedBy}
+          </Text>
+        </View>
+      ))}
+    </View>
+  )
+}
+
+// ---------------------------------------------------------------------------
+// 2 — on-control
+// ---------------------------------------------------------------------------
+
+const TOOLBAR_FACE = greyRamp[800]
+
+/**
+ * A toolbar-button face rendered with a chosen label colour, matching the real
+ * `ToolbarButton` geometry so the comparison beside it is like-for-like.
+ */
+function LabelChip({ label, color, caption }: { label: string; color: string; caption: string }) {
+  return (
+    <View style={{ alignItems: 'center', width: 116 }}>
+      <View
+        style={{
+          backgroundColor: TOOLBAR_FACE,
+          borderRadius: 4,
+          paddingHorizontal: 10,
+          paddingVertical: 4,
+          minHeight: 30,
+          justifyContent: 'center',
+        }}
+      >
+        <Text style={{ color, fontSize: 14, fontWeight: '700' }}>{label}</Text>
+      </View>
+      <Text className="text-text-secondary" style={{ fontSize: 10, marginTop: 4 }}>
+        {caption}
+      </Text>
+      <Text className="text-text-tertiary" style={{ fontSize: 9 }}>
+        {color.toUpperCase()}
+      </Text>
+    </View>
+  )
+}
+
+function OnControlPanel() {
+  return (
+    <View className="bg-surface-elevated" style={{ borderRadius: 8, padding: 16 }}>
+      <Text className="text-text-secondary text-xs mb-3">
+        Left pair: the LIVE ToolbarButton, which is what the proposal is about. Right: the existing
+        tokens, drawn on the same face at the same size — does one of them already do the job?
+      </Text>
+      <View style={{ flexDirection: 'row', flexWrap: 'wrap', gap: 14, alignItems: 'flex-start' }}>
+        <View style={{ alignItems: 'center', width: 116 }}>
+          <ToolbarButton label="Idle" isActive={false} variant="raised" />
+          <Text className="text-text-secondary" style={{ fontSize: 10, marginTop: 4 }}>
+            live · on-control-idle
+          </Text>
+          <Text className="text-text-tertiary" style={{ fontSize: 9 }}>
+            #D1D1D1
+          </Text>
+        </View>
+        <View style={{ alignItems: 'center', width: 116 }}>
+          <ToolbarButton label="Active" isActive variant="raised" />
+          <Text className="text-text-secondary" style={{ fontSize: 10, marginTop: 4 }}>
+            live · on-control-active
+          </Text>
+          <Text className="text-text-tertiary" style={{ fontSize: 9 }}>
+            #FFFFFF
+          </Text>
+        </View>
+        <LabelChip label="Idle" color={greyRamp[200]} caption="greyRamp[200]" />
+        <LabelChip label="Idle" color={t['text-secondary']} caption="text-secondary" />
+        <LabelChip label="Idle" color={t['text-primary']} caption="text-primary" />
+        <LabelChip label="Active" color={primitiveColors.white} caption="primitiveColors.white" />
+      </View>
+      <Text className="text-text-tertiary text-xs mt-3">
+        `on-control-active` is exactly `primitiveColors.white`, so the only real question is whether
+        it deserves a NAME — the toolbar face is a grey plane, not a brand fill, so borrowing
+        `on-brand-primary` for it would be the wrong role at the right value.
+      </Text>
+    </View>
+  )
+}
+
+// ---------------------------------------------------------------------------
+// 3 — on-data-strong
+// ---------------------------------------------------------------------------
+
+const LIGHT_TILES = [
+  { id: 'chest', value: 34, color: primitiveRamps.amber[200], label: 'Chest' },
+  { id: 'back', value: 28, color: primitiveRamps.green[200], label: 'Back' },
+  { id: 'quads', value: 21, color: primitiveRamps.blue[200], label: 'Quads' },
+  { id: 'delts', value: 14, color: primitiveRamps.orange[200], label: 'Delts' },
+  { id: 'arms', value: 9, color: primitiveRamps.magenta[200], label: 'Arms' },
+]
+
+function TileRow({ color, caption }: { color: string; caption: string }) {
+  return (
+    <View>
+      <View style={{ flexDirection: 'row', gap: 2 }}>
+        {LIGHT_TILES.map((tile) => (
+          <View
+            key={tile.id}
+            style={{
+              width: 62,
+              height: 44,
+              borderRadius: 3,
+              backgroundColor: tile.color,
+              opacity: 0.9,
+              padding: 4,
+            }}
+          >
+            <Text style={{ color, fontSize: 10, fontWeight: '600' }}>{tile.label}</Text>
+          </View>
+        ))}
+      </View>
+      <Text className="text-text-secondary" style={{ fontSize: 10, marginTop: 4 }}>
+        {caption} · {color.toUpperCase()}
+      </Text>
+    </View>
+  )
+}
+
+function OnDataPanel() {
+  return (
+    <View className="bg-surface-elevated" style={{ borderRadius: 8, padding: 16 }}>
+      <Text className="text-text-secondary text-xs mb-3">
+        Top: the LIVE Treemap, whose label is the proposed `on-data-strong`. Below: the same tiles
+        with the nearest existing dark tokens, so the difference (or lack of one) is visible at
+        label size rather than as a swatch.
+      </Text>
+      <View style={{ gap: 12 }}>
+        <View>
+          <Treemap data={LIGHT_TILES} width={320} height={92} maxTiles={5} />
+          <Text className="text-text-secondary" style={{ fontSize: 10, marginTop: 4 }}>
+            live Treemap · on-data-strong · #0B0B0B
+          </Text>
+        </View>
+        <TileRow color={t['background-frame']} caption="background-frame" />
+        <TileRow color={greyRamp[950]} caption="greyRamp[950]" />
+        <TileRow color={primitiveColors.black} caption="primitiveColors.black" />
+      </View>
+    </View>
+  )
+}
+
+// ---------------------------------------------------------------------------
+
+function ApprovedSnaps() {
+  return (
+    <View
+      style={{
+        backgroundColor: t['surface-raised'],
+        borderRadius: 8,
+        padding: 12,
+        marginBottom: 20,
+      }}
+    >
+      <Text className="text-text-primary text-sm font-semibold mb-1">
+        Already approved — the six grey snaps (follow-up, NOT in #200)
+      </Text>
+      <Text className="text-text-secondary text-xs">
+        These need no new token: they are drifted Tailwind and ad-hoc neutrals that snap onto the
+        existing warm ramp. Approved for the follow-up PR because each one moves pixels.
+        {'\n\n'}
+        #6B7280 (Tailwind gray-500) → result-neutral, at IntensityBar, TempoDisplay, setHeadingKit,
+        Spinner · #9CA3AF (Tailwind gray-400) → text-secondary, at TempoDisplay ×4 · #333333 →
+        surface-raised · #2C2C2C → surface-elevated · #3A3A3A → surface-overlay · #0A0A0A →
+        background-frame
+      </Text>
+    </View>
+  )
+}
+
+type Story = StoryObj<ProposedTokensArgs>
+
+export const Default: Story = {
+  render: (args) => (
+    <View style={{ padding: 24, maxWidth: 900 }}>
+      <Text className="text-2xl font-bold text-text-primary mb-2">Proposed VW-82 tokens</Text>
+      <SectionIntro>
+        Seven candidates from #200, rendered where they would ship. Nothing here is in the token
+        layer — `semantic.ts`, `primitives.ts`, `global.css` and `tailwind.config.js` are untouched
+        until these are approved.
+      </SectionIntro>
+
+      <ApprovedSnaps />
+
+      <SectionTitle>1 · Scrims (4 candidates)</SectionTitle>
+      <Text className="text-text-secondary text-xs mb-3">
+        Toggle `showScrims` off to see what each one is hiding, and switch `backdrop` between the
+        checkerboard, a photographic gradient, and a plain surface. The plain surface is the case
+        that flatters every opacity equally — judge on the other two.
+      </Text>
+      <ScrimPanel {...args} />
+
+      <SectionTitle>2 · on-control (2 candidates)</SectionTitle>
+      <OnControlPanel />
+
+      <SectionTitle>3 · on-data-strong (1 candidate)</SectionTitle>
+      <OnDataPanel />
+    </View>
+  ),
+}

package/src/theme/config.ts

@@ -54,6 +54,8 @@ export const lightThemeCSSVars = {
 
   '--color-on-brand-primary': semanticColorsLight['on-brand-primary'],
   '--color-on-brand-secondary': semanticColorsLight['on-brand-secondary'],
+  '--color-on-brand-primary-subtle': semanticColorsLight['on-brand-primary-subtle'],
+  '--color-on-brand-secondary-subtle': semanticColorsLight['on-brand-secondary-subtle'],
 
   '--color-status-success': semanticColorsLight['status-success'],
   '--color-status-success-subtle': semanticColorsLight['status-success-subtle'],
@@ -126,6 +128,10 @@ export const lightThemeCSSVars = {
   '--color-on-status-error': semanticColorsLight['on-status-error'],
   '--color-on-status-warning': semanticColorsLight['on-status-warning'],
   '--color-on-status-info': semanticColorsLight['on-status-info'],
+  '--color-on-status-success-subtle': semanticColorsLight['on-status-success-subtle'],
+  '--color-on-status-error-subtle': semanticColorsLight['on-status-error-subtle'],
+  '--color-on-status-warning-subtle': semanticColorsLight['on-status-warning-subtle'],
+  '--color-on-status-info-subtle': semanticColorsLight['on-status-info-subtle'],
 
   '--color-result-improve': semanticColorsLight['result-improve'],
   '--color-result-improve-light': semanticColorsLight['result-improve-light'],
@@ -191,6 +197,8 @@ export const darkThemeCSSVars = {
 
   '--color-on-brand-primary': semanticColorsDark['on-brand-primary'],
   '--color-on-brand-secondary': semanticColorsDark['on-brand-secondary'],
+  '--color-on-brand-primary-subtle': semanticColorsDark['on-brand-primary-subtle'],
+  '--color-on-brand-secondary-subtle': semanticColorsDark['on-brand-secondary-subtle'],
 
   '--color-status-success': semanticColorsDark['status-success'],
   '--color-status-success-subtle': semanticColorsDark['status-success-subtle'],
@@ -263,6 +271,10 @@ export const darkThemeCSSVars = {
   '--color-on-status-error': semanticColorsDark['on-status-error'],
   '--color-on-status-warning': semanticColorsDark['on-status-warning'],
   '--color-on-status-info': semanticColorsDark['on-status-info'],
+  '--color-on-status-success-subtle': semanticColorsDark['on-status-success-subtle'],
+  '--color-on-status-error-subtle': semanticColorsDark['on-status-error-subtle'],
+  '--color-on-status-warning-subtle': semanticColorsDark['on-status-warning-subtle'],
+  '--color-on-status-info-subtle': semanticColorsDark['on-status-info-subtle'],
 
   '--color-result-improve': semanticColorsDark['result-improve'],
   '--color-result-improve-light': semanticColorsDark['result-improve-light'],

package/src/theme/global.css

@@ -24,7 +24,7 @@
     --color-brand-secondary: #307B9B;
     --color-brand-secondary-light: #2697B7;
     --color-brand-secondary-dark: #2A617F;
-    --color-brand-secondary-subtle: rgba(48, 123, 155, 0.12);
+    --color-brand-secondary-subtle: rgba(34, 211, 238, 0.12);
     --color-brand-secondary-muted: rgba(48, 123, 155, 0.30);
     --color-brand-secondary-strong: rgba(48, 123, 155, 0.50);
     --color-brand-primary-hover: #FFA063;
@@ -34,6 +34,8 @@
 
     --color-on-brand-primary: #FFFFFF;
     --color-on-brand-secondary: #FFFFFF;
+    --color-on-brand-primary-subtle: #FF7900;
+    --color-on-brand-secondary-subtle: #22D3EE;
 
     --color-status-success: #2ED573;
     --color-status-success-light: #58F69E;
@@ -46,7 +48,7 @@
     --color-status-error: #D14343;
     --color-status-error-light: #E05254;
     --color-status-error-dark: #A4221C;
-    --color-status-error-subtle: rgba(209, 67, 67, 0.12);
+    --color-status-error-subtle: rgba(247, 113, 117, 0.08);
     --color-status-error-muted: rgba(209, 67, 67, 0.30);
     --color-status-error-strong: rgba(209, 67, 67, 0.50);
     --color-status-error-vivid: #FF4757;
@@ -66,7 +68,7 @@
     --color-status-info: #2196F3;
     --color-status-info-light: #78C2FF;
     --color-status-info-dark: #1072CB;
-    --color-status-info-subtle: rgba(33, 150, 243, 0.12);
+    --color-status-info-subtle: rgba(120, 194, 255, 0.12);
     --color-status-info-muted: rgba(33, 150, 243, 0.30);
     --color-status-info-strong: rgba(33, 150, 243, 0.50);
 
@@ -74,6 +76,10 @@
     --color-on-status-error: #FFFFFF;
     --color-on-status-warning: #FFFFFF;
     --color-on-status-info: #FFFFFF;
+    --color-on-status-success-subtle: #2ED573;
+    --color-on-status-error-subtle: #F77175;
+    --color-on-status-warning-subtle: #F9B415;
+    --color-on-status-info-subtle: #78C2FF;
 
     --color-result-improve: #4caf50;
     --color-result-improve-light: rgba(76, 175, 80, 0.16);
@@ -200,6 +206,8 @@
 
     --color-on-brand-primary: #FFFFFF;
     --color-on-brand-secondary: #FFFFFF;
+    --color-on-brand-primary-subtle: #FF7900;
+    --color-on-brand-secondary-subtle: #307B9B;
 
     --color-status-success: #2ED573;
     --color-status-success-light: #58F69E;
@@ -240,6 +248,10 @@
     --color-on-status-error: #FFFFFF;
     --color-on-status-warning: #FFFFFF;
     --color-on-status-info: #FFFFFF;
+    --color-on-status-success-subtle: #2ED573;
+    --color-on-status-error-subtle: #D14343;
+    --color-on-status-warning-subtle: #F9B415;
+    --color-on-status-info-subtle: #2196F3;
 
     --color-result-improve: #4caf50;
     --color-result-improve-light: rgba(76, 175, 80, 0.12);