@mindlogic-ai/logician-ui 3.1.0-alpha.5 → 3.1.0-alpha.6
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/components/Card/Card.d.ts.map +1 -1
- package/dist/components/Card/Card.js +6 -1
- package/dist/components/Card/Card.js.map +1 -1
- package/dist/components/Card/Card.mjs +6 -1
- package/dist/components/Card/Card.mjs.map +1 -1
- package/dist/theme/colors.d.ts +1 -1
- package/dist/theme/colors.js +5 -5
- package/dist/theme/colors.mjs +5 -5
- package/package.json +1 -1
- package/src/components/Card/Card.tsx +5 -1
- package/src/components/Textarea/Textarea.stories.tsx +1 -1
- package/src/theme/Palette.stories.tsx +1 -1
- package/src/theme/claude.md +4 -4
- package/src/theme/colors.ts +5 -5
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Card.d.ts","sourceRoot":"","sources":["../../../src/components/Card/Card.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,IAAI,IAAI,UAAU,EAAE,MAAM,kBAAkB,CAAC;AAKtD,eAAO,MAAM,IAAI;;;
|
|
1
|
+
{"version":3,"file":"Card.d.ts","sourceRoot":"","sources":["../../../src/components/Card/Card.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,IAAI,IAAI,UAAU,EAAE,MAAM,kBAAkB,CAAC;AAKtD,eAAO,MAAM,IAAI;;;kDA+BhB,CAAC"}
|
|
@@ -10,7 +10,12 @@ const Card = React.forwardRef(({ clickable, variant = 'default', _hover, ...rest
|
|
|
10
10
|
const mergedHover = clickable
|
|
11
11
|
? { ...Card_styles.clickableStyles._hover, ..._hover }
|
|
12
12
|
: _hover;
|
|
13
|
-
return (jsxRuntime.jsx(react.Card.Root, { ref: ref, position: "relative", bg: "bg.surface", color: "fg.default", boxShadow: "none", border: "1px solid",
|
|
13
|
+
return (jsxRuntime.jsx(react.Card.Root, { ref: ref, position: "relative", bg: "bg.surface", color: "fg.default", boxShadow: "none", border: "1px solid",
|
|
14
|
+
// border.default (gray.300 / gray.1100 _dark) instead of border.subtle:
|
|
15
|
+
// subtle's _dark (gray.1300 #1E2433) is ~invisible on bg.surface in dark,
|
|
16
|
+
// so cards blended into the canvas. default gives the card a discernible
|
|
17
|
+
// edge in both modes. The `gradient` variant keeps its primary.light border.
|
|
18
|
+
borderColor: "border.default", borderRadius: "lg", transitionProperty: "common", transitionDuration: "normal", transitionTimingFunction: "ease", p: 8, ...(clickable ? { cursor: Card_styles.clickableStyles.cursor } : {}), ...Card_styles.variantStyles[variant], ...rest, _hover: mergedHover }));
|
|
14
19
|
});
|
|
15
20
|
Card.displayName = 'Card';
|
|
16
21
|
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Card.js","sources":["../../../src/components/Card/Card.tsx"],"sourcesContent":[null],"names":["forwardRef","clickableStyles","_jsx","ChakraCard","variantStyles"],"mappings":";;;;;;;;MAMa,IAAI,GAAGA,gBAAU,CAC5B,CAAC,EAAE,SAAS,EAAE,OAAO,GAAG,SAAS,EAAE,MAAM,EAAE,GAAG,IAAI,EAAE,EAAE,GAAG,KAAI;IAC3D,MAAM,WAAW,GAAG;UAChB,EAAE,GAAGC,2BAAe,CAAC,MAAM,EAAE,GAAG,MAAM;UACtC,MAAM;AAEV,IAAA,QACEC,cAAA,CAACC,UAAU,CAAC,IAAI,EAAA,EACd,GAAG,EAAE,GAAG,EACR,QAAQ,EAAC,UAAU,EACnB,EAAE,EAAC,YAAY,EACf,KAAK,EAAC,YAAY,EAClB,SAAS,EAAC,MAAM,EAChB,MAAM,EAAC,WAAW,
|
|
1
|
+
{"version":3,"file":"Card.js","sources":["../../../src/components/Card/Card.tsx"],"sourcesContent":[null],"names":["forwardRef","clickableStyles","_jsx","ChakraCard","variantStyles"],"mappings":";;;;;;;;MAMa,IAAI,GAAGA,gBAAU,CAC5B,CAAC,EAAE,SAAS,EAAE,OAAO,GAAG,SAAS,EAAE,MAAM,EAAE,GAAG,IAAI,EAAE,EAAE,GAAG,KAAI;IAC3D,MAAM,WAAW,GAAG;UAChB,EAAE,GAAGC,2BAAe,CAAC,MAAM,EAAE,GAAG,MAAM;UACtC,MAAM;AAEV,IAAA,QACEC,cAAA,CAACC,UAAU,CAAC,IAAI,EAAA,EACd,GAAG,EAAE,GAAG,EACR,QAAQ,EAAC,UAAU,EACnB,EAAE,EAAC,YAAY,EACf,KAAK,EAAC,YAAY,EAClB,SAAS,EAAC,MAAM,EAChB,MAAM,EAAC,WAAW;;;;;QAKlB,WAAW,EAAC,gBAAgB,EAC5B,YAAY,EAAC,IAAI,EACjB,kBAAkB,EAAC,QAAQ,EAC3B,kBAAkB,EAAC,QAAQ,EAC3B,wBAAwB,EAAC,MAAM,EAC/B,CAAC,EAAE,CAAC,EAAA,IACC,SAAS,GAAG,EAAE,MAAM,EAAEF,2BAAe,CAAC,MAAM,EAAE,GAAG,EAAE,CAAC,KACrDG,yBAAa,CAAC,OAAO,CAAC,EAAA,GACtB,IAAI,EACR,MAAM,EAAE,WAAW,EAAA,CACnB;AAEN,CAAC;AAGH,IAAI,CAAC,WAAW,GAAG,MAAM;;;;"}
|
|
@@ -8,7 +8,12 @@ const Card = forwardRef(({ clickable, variant = 'default', _hover, ...rest }, re
|
|
|
8
8
|
const mergedHover = clickable
|
|
9
9
|
? { ...clickableStyles._hover, ..._hover }
|
|
10
10
|
: _hover;
|
|
11
|
-
return (jsx(Card$1.Root, { ref: ref, position: "relative", bg: "bg.surface", color: "fg.default", boxShadow: "none", border: "1px solid",
|
|
11
|
+
return (jsx(Card$1.Root, { ref: ref, position: "relative", bg: "bg.surface", color: "fg.default", boxShadow: "none", border: "1px solid",
|
|
12
|
+
// border.default (gray.300 / gray.1100 _dark) instead of border.subtle:
|
|
13
|
+
// subtle's _dark (gray.1300 #1E2433) is ~invisible on bg.surface in dark,
|
|
14
|
+
// so cards blended into the canvas. default gives the card a discernible
|
|
15
|
+
// edge in both modes. The `gradient` variant keeps its primary.light border.
|
|
16
|
+
borderColor: "border.default", borderRadius: "lg", transitionProperty: "common", transitionDuration: "normal", transitionTimingFunction: "ease", p: 8, ...(clickable ? { cursor: clickableStyles.cursor } : {}), ...variantStyles[variant], ...rest, _hover: mergedHover }));
|
|
12
17
|
});
|
|
13
18
|
Card.displayName = 'Card';
|
|
14
19
|
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Card.mjs","sources":["../../../src/components/Card/Card.tsx"],"sourcesContent":[null],"names":["_jsx","ChakraCard"],"mappings":";;;;;;MAMa,IAAI,GAAG,UAAU,CAC5B,CAAC,EAAE,SAAS,EAAE,OAAO,GAAG,SAAS,EAAE,MAAM,EAAE,GAAG,IAAI,EAAE,EAAE,GAAG,KAAI;IAC3D,MAAM,WAAW,GAAG;UAChB,EAAE,GAAG,eAAe,CAAC,MAAM,EAAE,GAAG,MAAM;UACtC,MAAM;AAEV,IAAA,QACEA,GAAA,CAACC,MAAU,CAAC,IAAI,EAAA,EACd,GAAG,EAAE,GAAG,EACR,QAAQ,EAAC,UAAU,EACnB,EAAE,EAAC,YAAY,EACf,KAAK,EAAC,YAAY,EAClB,SAAS,EAAC,MAAM,EAChB,MAAM,EAAC,WAAW,
|
|
1
|
+
{"version":3,"file":"Card.mjs","sources":["../../../src/components/Card/Card.tsx"],"sourcesContent":[null],"names":["_jsx","ChakraCard"],"mappings":";;;;;;MAMa,IAAI,GAAG,UAAU,CAC5B,CAAC,EAAE,SAAS,EAAE,OAAO,GAAG,SAAS,EAAE,MAAM,EAAE,GAAG,IAAI,EAAE,EAAE,GAAG,KAAI;IAC3D,MAAM,WAAW,GAAG;UAChB,EAAE,GAAG,eAAe,CAAC,MAAM,EAAE,GAAG,MAAM;UACtC,MAAM;AAEV,IAAA,QACEA,GAAA,CAACC,MAAU,CAAC,IAAI,EAAA,EACd,GAAG,EAAE,GAAG,EACR,QAAQ,EAAC,UAAU,EACnB,EAAE,EAAC,YAAY,EACf,KAAK,EAAC,YAAY,EAClB,SAAS,EAAC,MAAM,EAChB,MAAM,EAAC,WAAW;;;;;QAKlB,WAAW,EAAC,gBAAgB,EAC5B,YAAY,EAAC,IAAI,EACjB,kBAAkB,EAAC,QAAQ,EAC3B,kBAAkB,EAAC,QAAQ,EAC3B,wBAAwB,EAAC,MAAM,EAC/B,CAAC,EAAE,CAAC,EAAA,IACC,SAAS,GAAG,EAAE,MAAM,EAAE,eAAe,CAAC,MAAM,EAAE,GAAG,EAAE,CAAC,KACrD,aAAa,CAAC,OAAO,CAAC,EAAA,GACtB,IAAI,EACR,MAAM,EAAE,WAAW,EAAA,CACnB;AAEN,CAAC;AAGH,IAAI,CAAC,WAAW,GAAG,MAAM;;;;"}
|
package/dist/theme/colors.d.ts
CHANGED
|
@@ -175,7 +175,7 @@ export declare const semanticTokens: {
|
|
|
175
175
|
* Use for: Error states, destructive actions, validation errors
|
|
176
176
|
*
|
|
177
177
|
* Light contrast ratios (on white):
|
|
178
|
-
* - main (#
|
|
178
|
+
* - main (#C1232C): 5.9:1 ✓ AA
|
|
179
179
|
* - dark (#7D0D14): 9.6:1 ✓ AAA
|
|
180
180
|
*/
|
|
181
181
|
readonly danger: {
|
package/dist/theme/colors.js
CHANGED
|
@@ -140,7 +140,7 @@ const semanticTokens = {
|
|
|
140
140
|
* Use for: Error states, destructive actions, validation errors
|
|
141
141
|
*
|
|
142
142
|
* Light contrast ratios (on white):
|
|
143
|
-
* - main (#
|
|
143
|
+
* - main (#C1232C): 5.9:1 ✓ AA
|
|
144
144
|
* - dark (#7D0D14): 9.6:1 ✓ AAA
|
|
145
145
|
*/
|
|
146
146
|
danger: {
|
|
@@ -377,8 +377,8 @@ const colors = {
|
|
|
377
377
|
100: { value: '#F3B9BD' }, // Lighter - subtle error fills
|
|
378
378
|
200: { value: '#E87D84' }, // Light - error borders
|
|
379
379
|
300: { value: '#DC4A53' }, // Medium - error accents
|
|
380
|
-
500: { value: '#
|
|
381
|
-
600: { value: '#
|
|
380
|
+
500: { value: '#C1232C' }, // Base - danger.main (desaturated ~1 notch from #D01721)
|
|
381
|
+
600: { value: '#9C1C23' }, // Dark - hover on main (desaturated to match .500)
|
|
382
382
|
700: { value: '#7D0D14' }, // Darker - error text
|
|
383
383
|
800: { value: '#53090D' }, // Very dark - emphasis
|
|
384
384
|
900: { value: '#2A0407' }, // Darkest - high contrast
|
|
@@ -485,8 +485,8 @@ const colors = {
|
|
|
485
485
|
100: { value: '#F3B9BD' },
|
|
486
486
|
200: { value: '#E87D84' },
|
|
487
487
|
300: { value: '#DC4A53' },
|
|
488
|
-
500: { value: '#
|
|
489
|
-
600: { value: '#
|
|
488
|
+
500: { value: '#C1232C' }, // kept in sync with rose.500 (deprecated alias)
|
|
489
|
+
600: { value: '#9C1C23' }, // kept in sync with rose.600 (deprecated alias)
|
|
490
490
|
700: { value: '#7D0D14' },
|
|
491
491
|
800: { value: '#53090D' },
|
|
492
492
|
900: { value: '#2A0407' },
|
package/dist/theme/colors.mjs
CHANGED
|
@@ -138,7 +138,7 @@ const semanticTokens = {
|
|
|
138
138
|
* Use for: Error states, destructive actions, validation errors
|
|
139
139
|
*
|
|
140
140
|
* Light contrast ratios (on white):
|
|
141
|
-
* - main (#
|
|
141
|
+
* - main (#C1232C): 5.9:1 ✓ AA
|
|
142
142
|
* - dark (#7D0D14): 9.6:1 ✓ AAA
|
|
143
143
|
*/
|
|
144
144
|
danger: {
|
|
@@ -375,8 +375,8 @@ const colors = {
|
|
|
375
375
|
100: { value: '#F3B9BD' }, // Lighter - subtle error fills
|
|
376
376
|
200: { value: '#E87D84' }, // Light - error borders
|
|
377
377
|
300: { value: '#DC4A53' }, // Medium - error accents
|
|
378
|
-
500: { value: '#
|
|
379
|
-
600: { value: '#
|
|
378
|
+
500: { value: '#C1232C' }, // Base - danger.main (desaturated ~1 notch from #D01721)
|
|
379
|
+
600: { value: '#9C1C23' }, // Dark - hover on main (desaturated to match .500)
|
|
380
380
|
700: { value: '#7D0D14' }, // Darker - error text
|
|
381
381
|
800: { value: '#53090D' }, // Very dark - emphasis
|
|
382
382
|
900: { value: '#2A0407' }, // Darkest - high contrast
|
|
@@ -483,8 +483,8 @@ const colors = {
|
|
|
483
483
|
100: { value: '#F3B9BD' },
|
|
484
484
|
200: { value: '#E87D84' },
|
|
485
485
|
300: { value: '#DC4A53' },
|
|
486
|
-
500: { value: '#
|
|
487
|
-
600: { value: '#
|
|
486
|
+
500: { value: '#C1232C' }, // kept in sync with rose.500 (deprecated alias)
|
|
487
|
+
600: { value: '#9C1C23' }, // kept in sync with rose.600 (deprecated alias)
|
|
488
488
|
700: { value: '#7D0D14' },
|
|
489
489
|
800: { value: '#53090D' },
|
|
490
490
|
900: { value: '#2A0407' },
|
package/package.json
CHANGED
|
@@ -18,7 +18,11 @@ export const Card = forwardRef<HTMLDivElement, CardProps>(
|
|
|
18
18
|
color="fg.default"
|
|
19
19
|
boxShadow="none"
|
|
20
20
|
border="1px solid"
|
|
21
|
-
|
|
21
|
+
// border.default (gray.300 / gray.1100 _dark) instead of border.subtle:
|
|
22
|
+
// subtle's _dark (gray.1300 #1E2433) is ~invisible on bg.surface in dark,
|
|
23
|
+
// so cards blended into the canvas. default gives the card a discernible
|
|
24
|
+
// edge in both modes. The `gradient` variant keeps its primary.light border.
|
|
25
|
+
borderColor="border.default"
|
|
22
26
|
borderRadius="lg"
|
|
23
27
|
transitionProperty="common"
|
|
24
28
|
transitionDuration="normal"
|
|
@@ -65,7 +65,7 @@ export const Invalid: Story = {
|
|
|
65
65
|
value={value}
|
|
66
66
|
onChange={(e) => setValue(e.target.value)}
|
|
67
67
|
/>
|
|
68
|
-
<span style={{ color: '#
|
|
68
|
+
<span style={{ color: '#C1232C', fontSize: '14px' }}>
|
|
69
69
|
This field contains an error. Please fix it.
|
|
70
70
|
</span>
|
|
71
71
|
</div>
|
package/src/theme/claude.md
CHANGED
|
@@ -54,8 +54,8 @@ Error and destructive action states.
|
|
|
54
54
|
| `rose.100` | `#F3B9BD` | Light error fills |
|
|
55
55
|
| `rose.200` | `#E87D84` | Error borders, icons |
|
|
56
56
|
| `rose.300` | `#DC4A53` | Error accents |
|
|
57
|
-
| `rose.500` | `#
|
|
58
|
-
| `rose.600` | `#
|
|
57
|
+
| `rose.500` | `#C1232C` | **Danger main** - error states |
|
|
58
|
+
| `rose.600` | `#9C1C23` | Hover on main |
|
|
59
59
|
| `rose.700` | `#7D0D14` | Error text |
|
|
60
60
|
| `rose.800` | `#53090D` | Dark emphasis |
|
|
61
61
|
| `rose.900` | `#2A0407` | Darkest, high contrast |
|
|
@@ -161,7 +161,7 @@ semanticTokens: {
|
|
|
161
161
|
extralight: 'rose.50', // #FBE8E9 - Extra-light backgrounds
|
|
162
162
|
lighter: 'rose.100', // #F3B9BD - Light error fills
|
|
163
163
|
light: 'rose.200', // #E87D84 - Error borders
|
|
164
|
-
main: 'rose.500', // #
|
|
164
|
+
main: 'rose.500', // #C1232C - Error states
|
|
165
165
|
dark: 'rose.700', // #7D0D14 - Error text on light bg
|
|
166
166
|
darker: 'rose.900', // #2A0407 - High contrast error text
|
|
167
167
|
},
|
|
@@ -249,7 +249,7 @@ All semantic color combinations meet WCAG 2.1 accessibility standards:
|
|
|
249
249
|
| `primary.lightest` + `primary.dark` | 7.2:1 | AAA |
|
|
250
250
|
| `primary.main` + white | 5.9:1 | AA |
|
|
251
251
|
| `danger.lightest` + `danger.dark` | 7.4:1 | AAA |
|
|
252
|
-
| `danger.main` + white | 5.
|
|
252
|
+
| `danger.main` + white | 5.9:1 | AA |
|
|
253
253
|
| `success.lightest` + `success.dark` | 6.1:1 | AA |
|
|
254
254
|
| `warning.lightest` + `warning.dark` | 5.8:1 | AA |
|
|
255
255
|
| `gray.0` + `gray.1300` | 11.2:1 | AAA |
|
package/src/theme/colors.ts
CHANGED
|
@@ -140,7 +140,7 @@ export const semanticTokens = {
|
|
|
140
140
|
* Use for: Error states, destructive actions, validation errors
|
|
141
141
|
*
|
|
142
142
|
* Light contrast ratios (on white):
|
|
143
|
-
* - main (#
|
|
143
|
+
* - main (#C1232C): 5.9:1 ✓ AA
|
|
144
144
|
* - dark (#7D0D14): 9.6:1 ✓ AAA
|
|
145
145
|
*/
|
|
146
146
|
danger: {
|
|
@@ -409,8 +409,8 @@ export const colors = {
|
|
|
409
409
|
100: { value: '#F3B9BD' }, // Lighter - subtle error fills
|
|
410
410
|
200: { value: '#E87D84' }, // Light - error borders
|
|
411
411
|
300: { value: '#DC4A53' }, // Medium - error accents
|
|
412
|
-
500: { value: '#
|
|
413
|
-
600: { value: '#
|
|
412
|
+
500: { value: '#C1232C' }, // Base - danger.main (desaturated ~1 notch from #D01721)
|
|
413
|
+
600: { value: '#9C1C23' }, // Dark - hover on main (desaturated to match .500)
|
|
414
414
|
700: { value: '#7D0D14' }, // Darker - error text
|
|
415
415
|
800: { value: '#53090D' }, // Very dark - emphasis
|
|
416
416
|
900: { value: '#2A0407' }, // Darkest - high contrast
|
|
@@ -523,8 +523,8 @@ export const colors = {
|
|
|
523
523
|
100: { value: '#F3B9BD' },
|
|
524
524
|
200: { value: '#E87D84' },
|
|
525
525
|
300: { value: '#DC4A53' },
|
|
526
|
-
500: { value: '#
|
|
527
|
-
600: { value: '#
|
|
526
|
+
500: { value: '#C1232C' }, // kept in sync with rose.500 (deprecated alias)
|
|
527
|
+
600: { value: '#9C1C23' }, // kept in sync with rose.600 (deprecated alias)
|
|
528
528
|
700: { value: '#7D0D14' },
|
|
529
529
|
800: { value: '#53090D' },
|
|
530
530
|
900: { value: '#2A0407' },
|