@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.
@@ -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;;;kDA2BhB,CAAC"}
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", borderColor: "border.subtle", borderRadius: "lg", transitionProperty: "common", transitionDuration: "normal", transitionTimingFunction: "ease", p: 8, ...(clickable ? { cursor: Card_styles.clickableStyles.cursor } : {}), ...Card_styles.variantStyles[variant], ...rest, _hover: mergedHover }));
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,EAClB,WAAW,EAAC,eAAe,EAC3B,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,EAAA,GACrDG,yBAAa,CAAC,OAAO,CAAC,EAAA,GACtB,IAAI,EACR,MAAM,EAAE,WAAW,EAAA,CACnB;AAEN,CAAC;AAGH,IAAI,CAAC,WAAW,GAAG,MAAM;;;;"}
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", borderColor: "border.subtle", borderRadius: "lg", transitionProperty: "common", transitionDuration: "normal", transitionTimingFunction: "ease", p: 8, ...(clickable ? { cursor: clickableStyles.cursor } : {}), ...variantStyles[variant], ...rest, _hover: mergedHover }));
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,EAClB,WAAW,EAAC,eAAe,EAC3B,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,EAAA,GACrD,aAAa,CAAC,OAAO,CAAC,EAAA,GACtB,IAAI,EACR,MAAM,EAAE,WAAW,EAAA,CACnB;AAEN,CAAC;AAGH,IAAI,CAAC,WAAW,GAAG,MAAM;;;;"}
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;;;;"}
@@ -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 (#D01721): 5.2:1 ✓ AA
178
+ * - main (#C1232C): 5.9:1 ✓ AA
179
179
  * - dark (#7D0D14): 9.6:1 ✓ AAA
180
180
  */
181
181
  readonly danger: {
@@ -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 (#D01721): 5.2:1 ✓ AA
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: '#D01721' }, // Base - danger.main
381
- 600: { value: '#A6121A' }, // Dark - hover on main
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: '#D01721' },
489
- 600: { value: '#A6121A' },
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' },
@@ -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 (#D01721): 5.2:1 ✓ AA
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: '#D01721' }, // Base - danger.main
379
- 600: { value: '#A6121A' }, // Dark - hover on main
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: '#D01721' },
487
- 600: { value: '#A6121A' },
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
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@mindlogic-ai/logician-ui",
3
- "version": "3.1.0-alpha.5",
3
+ "version": "3.1.0-alpha.6",
4
4
  "description": "A comprehensive React design system built on Chakra UI",
5
5
  "main": "dist/index.js",
6
6
  "module": "dist/index.mjs",
@@ -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
- borderColor="border.subtle"
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: '#D01721', fontSize: '14px' }}>
68
+ <span style={{ color: '#C1232C', fontSize: '14px' }}>
69
69
  This field contains an error. Please fix it.
70
70
  </span>
71
71
  </div>
@@ -475,7 +475,7 @@ export const ContrastReference: Story = {
475
475
  bg: 'danger.main',
476
476
  text: 'white',
477
477
  label: 'danger.main + white',
478
- ratio: '5.2:1',
478
+ ratio: '5.9:1',
479
479
  badge: 'AA',
480
480
  },
481
481
  {
@@ -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` | `#D01721` | **Danger main** - error states |
58
- | `rose.600` | `#A6121A` | Hover on main |
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', // #D01721 - Error states
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.2:1 | AA |
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 |
@@ -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 (#D01721): 5.2:1 ✓ AA
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: '#D01721' }, // Base - danger.main
413
- 600: { value: '#A6121A' }, // Dark - hover on main
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: '#D01721' },
527
- 600: { value: '#A6121A' },
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' },