@xqmsg/ui-core 0.27.0 → 0.29.0

package/src/theme/components/alert.ts

@@ -12,26 +12,26 @@ const baseStyle = {
     width: '100%',
     fontSize: '13px',
     textAlign: 'left',
-    color: colors.label.primary.light,
+    color: colors.text.primary,
     lineHeight: '16px',
   },
 };
 
 function variantPositive() {
   return {
-    container: { bg: colors.fill.success },
+    container: { bg: colors.status.success.fill },
   };
 }
 
 function variantWarning() {
   return {
-    container: { bg: colors.fill.warning },
+    container: { bg: colors.status.warning.fill },
   };
 }
 
 function variantError() {
   return {
-    container: { bg: colors.fill.error },
+    container: { bg: colors.status.danger.fill },
   };
 }
 

package/src/theme/components/button.ts

@@ -5,8 +5,8 @@ const baseStyle = defineStyle({
   borderRadius: '4px',
   fontSize: '13px',
   fontWeight: 400,
-  bg: colors.fill.action,
-  color: colors.label.primary.dark,
+  bg: colors.action.solid,
+  color: colors.text.onAccent,
   h: '26px',
   border: 'none',
   px: '8px',
@@ -20,11 +20,11 @@ const baseStyle = defineStyle({
     pointerEvents: 'none',
   },
   _hover: {
-    bg: colors.fill.action,
+    bg: colors.action.solid,
   },
   _active: {
-    color: colors.label.primary.dark,
-    bg: colors.fill.action,
+    color: colors.text.onAccent,
+    bg: colors.action.solid,
     bgGradient: colors.fill.light.quaternary,
   },
   _focus: {
@@ -41,17 +41,17 @@ const variantSecondary = () => {
   return {
     ...baseStyle,
     color: colors.black,
-    bg: colors.label.primary.dark,
+    bg: colors.surface.canvas,
     _hover: {
-      bg: colors.label.primary.dark,
+      bg: colors.surface.canvas,
     },
     _active: {
       color: colors.black,
-      bg: colors.label.primary.dark,
+      bg: colors.surface.canvas,
       bgGradient: colors.fill.light.quaternary,
     },
     _focus: {
-      bg: colors.label.primary.dark,
+      bg: colors.surface.canvas,
     },
   };
 };
@@ -59,22 +59,22 @@ const variantSecondary = () => {
 const variantTertiary = () => {
   return {
     ...baseStyle,
-    color: colors.label.primary.dark,
-    bg: colors.blur.quaternary.dark,
+    color: colors.text.onAccent,
+    bg: colors.fill.dark.subtle,
     _hover: {
-      bg: colors.blur.quaternary.dark,
+      bg: colors.fill.dark.subtle,
     },
     _active: {
-      color: colors.label.primary.dark,
-      bg: colors.blur.tertiary.dark,
+      color: colors.text.onAccent,
+      bg: colors.fill.dark.strong,
     },
     _focus: {
-      color: colors.label.primary.dark,
-      bg: colors.blur.quaternary.dark,
+      color: colors.text.onAccent,
+      bg: colors.fill.dark.subtle,
     },
     _disabled: {
-      backgroundColor: colors.blur.quaternary.dark,
-      color: colors.blur.tertiary.dark,
+      backgroundColor: colors.fill.dark.subtle,
+      color: 'gray.500',
     },
   };
 };
@@ -83,22 +83,22 @@ const variantDanger = () => {
   return {
     ...baseStyle,
     fontWeight: '400',
-    color: colors.label.primary.dark,
-    bg: colors.label.error,
+    color: colors.text.onAccent,
+    bg: colors.action.danger,
     _hover: {
-      bg: colors.label.error,
+      bg: colors.action.danger,
     },
     _active: {
-      color: colors.label.primary.dark,
-      bg: colors.label.error,
+      color: colors.text.onAccent,
+      bg: colors.action.danger,
     },
     _focus: {
-      color: colors.label.primary.dark,
-      bg: colors.label.error,
+      color: colors.text.onAccent,
+      bg: colors.action.danger,
     },
     _disabled: {
-      backgroundColor: colors.label.error,
-      color: colors.label.secondary.light,
+      backgroundColor: colors.action.danger,
+      color: colors.text.secondary,
     },
   };
 };
@@ -106,7 +106,7 @@ const variantDanger = () => {
 const variantPrimaryFlat = () => {
   return {
     ...baseStyle,
-    bg: colors.fill.action,
+    bg: colors.action.solid,
     bgGradient: null,
     minWidth: '120px',
     padding: '10px 16px',
@@ -129,17 +129,17 @@ const variantSecondaryFlat = () => {
     ...variantPrimaryFlat(),
     fontWeight: '400',
     color: colors.black,
-    bg: colors.label.primary.dark,
+    bg: colors.surface.canvas,
     _hover: {
-      bg: colors.label.primary.dark,
+      bg: colors.surface.canvas,
     },
     _active: {
       color: colors.black,
-      bg: colors.label.primary.dark,
+      bg: colors.surface.canvas,
       bgGradient: colors.fill.light.quaternary,
     },
     _focus: {
-      bg: colors.label.primary.dark,
+      bg: colors.surface.canvas,
     },
   };
 };
@@ -147,22 +147,22 @@ const variantTertiaryFlat = () => {
   return {
     ...variantPrimaryFlat(),
     fontWeight: '400',
-    color: colors.label.primary.dark,
-    bg: colors.blur.quaternary.dark,
+    color: colors.text.onAccent,
+    bg: colors.fill.dark.subtle,
     _hover: {
-      bg: colors.blur.quaternary.dark,
+      bg: colors.fill.dark.subtle,
     },
     _active: {
-      color: colors.label.primary.dark,
-      bg: colors.blur.tertiary.dark,
+      color: colors.text.onAccent,
+      bg: colors.fill.dark.strong,
     },
     _focus: {
-      color: colors.label.primary.dark,
-      bg: colors.blur.quaternary.dark,
+      color: colors.text.onAccent,
+      bg: colors.fill.dark.subtle,
     },
     _disabled: {
-      backgroundColor: colors.blur.quaternary.dark,
-      color: colors.blur.tertiary.dark,
+      backgroundColor: colors.fill.dark.subtle,
+      color: 'gray.500',
     },
   };
 };
@@ -170,22 +170,22 @@ const variantDangerFlat = () => {
   return {
     ...variantPrimaryFlat(),
     fontWeight: '400',
-    color: colors.label.primary.dark,
-    bg: colors.label.error,
+    color: colors.text.onAccent,
+    bg: colors.action.danger,
     _hover: {
-      bg: colors.label.error,
+      bg: colors.action.danger,
     },
     _active: {
-      color: colors.label.primary.dark,
-      bg: colors.label.error,
+      color: colors.text.onAccent,
+      bg: colors.action.danger,
     },
     _focus: {
-      color: colors.label.primary.dark,
-      bg: colors.label.error,
+      color: colors.text.onAccent,
+      bg: colors.action.danger,
     },
     _disabled: {
-      backgroundColor: colors.label.error,
-      color: colors.label.secondary.light,
+      backgroundColor: colors.action.danger,
+      color: colors.text.secondary,
     },
   };
 };

package/src/theme/components/form-error.ts

@@ -4,10 +4,8 @@ const parts = ['text', 'icon'];
 
 function baseStyleText() {
   return {
-    color: colors.label.error,
-    position: 'absolute',
-    bottom: 0,
-    // mt: 1,
+    color: colors.text.danger,
+    mt: 1,
     ml: 1,
     fontSize: '11px',
   };
@@ -16,7 +14,7 @@ function baseStyleText() {
 function baseStyleIcon() {
   return {
     ml: 1,
-    color: colors.label.error,
+    color: colors.text.danger,
   };
 }
 

package/src/theme/components/form-label.ts

@@ -8,7 +8,7 @@ const baseStyle = {
   display: 'flex',
   ml: 1,
   // mb: 1,
-  color: colors.label.primary.light,
+  color: colors.text.primary,
   opacity: 1,
 };
 

package/src/theme/components/form.ts

@@ -5,7 +5,7 @@ const parts = ['requiredIndicator', 'helperText'];
 function baseStyleRequiredIndicator() {
   return {
     ml: 1,
-    color: colors.label.error,
+    color: colors.text.danger,
   };
 }
 
@@ -13,7 +13,7 @@ function baseStyleHelperText() {
   return {
     // mt: 1,
     ml: 1,
-    color: colors.label.secondary.light,
+    color: colors.text.secondary,
     fontSize: '11px',
   };
 }

package/src/theme/components/input.ts

@@ -7,7 +7,7 @@ const baseStyle = {
     fontSize: '13px',
     h: '26px',
     '::placeholder': {
-      color: colors.label.secondary.light,
+      color: colors.text.secondary,
     },
     py: '5px',
     px: '8px',
@@ -17,7 +17,7 @@ const baseStyle = {
       opacity: 1,
       cursor: 'not-allowed',
       bg: colors.fill.light.quaternary,
-      color: colors.label.secondary.light,
+      color: colors.text.secondary,
       border: '1px solid',
       borderColor: '#9999991A',
     },
@@ -27,7 +27,7 @@ const baseStyle = {
       borderColor: colors.border.focus,
     },
     _placeholder: {
-      color: colors.label.secondary.light,
+      color: colors.text.secondary,
     },
   },
 };

package/src/theme/components/link.ts

@@ -1,11 +1,10 @@
-import { getColor } from '@chakra-ui/theme-tools';
 import colors from '../foundations/colors';
 
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
 type Dict = Record<string, any>;
 
 const baseStyle = {
-  color: colors.fill.action,
+  color: colors.action.solid,
   textDecoration: 'underline',
   transition: 'none',
   _hover: {
@@ -17,7 +16,6 @@ function variantSidebar() {
   return {
     display: 'flex',
     alignItems: 'center',
-    // height: '56px',
     pl: 4,
     pr: 4,
     py: 2,
@@ -44,23 +42,16 @@ function variantSidebar() {
 // and not only for a child sub route match. I did it as a separate variant instead of a
 // prop to get around React complaining that the dom element was not recognized.
 function variantSidebarExact() {
-  // props: Dict
   const base = variantSidebar();
-  // const { theme } = props;
-  // const primaryColor = getColor(theme, 'primary.500');
 
   return {
     ...base,
-    '&.active': {
-      // ...base['&.active'],
-      // boxShadow: `inset 3px 0 0 0 ${primaryColor}`,
-    },
+    '&.active': {},
   };
 }
 
-function variantSubNavigation(props: Dict) {
-  const { theme } = props;
-  const primaryColor = getColor(theme, 'primary.500');
+function variantSubNavigation(_props: Dict) {
+  const primaryColor = colors.action.solid;
 
   return {
     display: 'block',

package/src/theme/components/menu.ts

@@ -37,7 +37,7 @@ function baseStyleItem(props: Dict) {
     transition: 'background 50ms ease-in 0s',
     _hover: {
       color: colors.white,
-      background: colors.fill.action,
+      background: colors.action.solid,
     },
     _active: {
       bg: mode(`gray.200`, `whiteAlpha.200`)(props),

package/src/theme/components/modal.ts

@@ -1,3 +1,5 @@
+import colors from '../foundations/colors';
+
 const parts = [
   'overlay',
   'dialogContainer',
@@ -9,30 +11,34 @@ const parts = [
 ];
 
 const baseStyle = {
-  width: 'fit-content',
-  height: 'fit-content',
-  background: '#F6F6F6',
-  backdropFilter: 'blur(25px)',
+  overlay: {
+    backdropFilter: 'blur(25px)',
+  },
+  dialog: {
+    width: 'fit-content',
+    height: 'fit-content',
+    background: colors.coolGray,
+  },
   header: {
-    pt: '32px',
-    px: '32px',
-    pb: '16px',
+    pt: 8,
+    px: 8,
+    pb: 4,
     fontSize: '18px',
     fontWeight: 600,
     lineHeight: '26px',
   },
   body: {
     pt: 0,
-    pb: '32px',
-    px: '32px',
+    pb: 8,
+    px: 8,
     fontSize: '13px',
     fontWeight: 400,
     lineHeight: '16px',
     whiteSpace: 'pre-line',
   },
   footer: {
-    py: '16px',
-    px: '32px',
+    py: 4,
+    px: 8,
     display: 'flex',
     justifyContent: 'flex-end',
     width: '100%',

package/src/theme/components/table.ts

@@ -3,9 +3,9 @@ import colors from '../foundations/colors';
 const parts = ['th', 'td', 'tr', 'body', 'thead'];
 
 const baseStyle = {
-  thead: { bg: colors.label.primary.dark },
+  thead: { bg: colors.surface.canvas },
   th: {
-    bg: colors.label.primary.dark,
+    bg: colors.surface.canvas,
     padding: '5px 8px !important',
     fontSize: '13px',
   },

package/src/theme/components/tabs.ts

@@ -55,7 +55,7 @@ const baseStyle = (props: Dict) => {
 const sizes = {
   sm: {
     tab: {
-      py: '0.25rem',
+      py: 1,
       px: 6,
       fontSize: '0.85rem',
     },
@@ -63,14 +63,14 @@ const sizes = {
   md: {
     tab: {
       fontSize: '1rem',
-      py: '0.75rem',
+      py: 3,
       px: 6,
     },
   },
   lg: {
     tab: {
       fontSize: { base: '1rem', sm: '1.15rem' },
-      py: '0.75rem',
+      py: 3,
       px: 6,
     },
   },
@@ -206,12 +206,12 @@ const variantSimple = {
     position: 'relative',
     borderColor: 'transparent',
     '&.active': {
-      color: colors.fill.action,
+      color: colors.action.solid,
       bg: 'transparent',
-      borderBottom: `1px solid ${colors.fill.action}`,
+      borderBottom: `1px solid ${colors.action.solid}`,
     },
     _selected: {
-      color: colors.fill.action,
+      color: colors.action.solid,
       bg: 'transparent',
       _after: {
         content: '""',

package/src/theme/foundations/colors.ts

@@ -63,60 +63,113 @@ const green: ColorHues = {
   900: 'hsl(138, 42%, 6%)',
 };
 
-const label = {
-  primary: { light: '#000000', dark: '#FFFFFF' },
-  secondary: { light: '#3C3C4399' },
-  tertiary: { light: '', dark: '#EBEBF52E' },
-  error: '#FF0000',
+// ─── Canonical semantic tokens ────────────────────────────────────────────────
+
+const text = {
+  primary: '#000000',      // body text
+  secondary: '#3C3C4399',  // de-emphasised text
+  tertiary: '#3C3C4366',   // hint / placeholder level — lighter than secondary
+  onAccent: '#FFFFFF',     // text on coloured (blue/red) surfaces
+  danger: red[500],        // form-error text and required indicator
 };
 
-const border = {
-  focus: '#3A6CD980',
-  default: '#D9D9D9',
-  light: '#99999919A',
+const surface = {
+  canvas: '#FFFFFF', // page / card / table-header background
 };
 
-const blur = {
-  quaternary: { light: '', dark: '#2A2A2A73' },
-  tertiary: { light: '', dark: '#111111A6' },
+const action = {
+  solid: '#0082ff',    // primary interactive blue (buttons, links, spinners)
+  danger: red[600],   // danger button fill; also used for focus rings
+};
+
+const status = {
+  success: { fill: '#d8f1b8' },
+  warning: { fill: '#ffefb4' },
+  danger:  { fill: '#ffbdb9' },
+};
+
+const border = {
+  focus:   '#3A6CD980',
+  default: '#D9D9D9',
+  /** @deprecated typo was '#99999919A' — kept for compat, use inline '#9999991A' */
+  light:   '#9999991A',
 };
 
 const fill = {
   light: {
-    primary: '#74748033',
-    secondary: '#74748029',
-    tertiary: '#7474801F',
+    primary:    '#74748033',
+    secondary:  '#74748029',
+    tertiary:   '#7474801F',
     quaternary: '#7474800D',
   },
+  // translucent "dark glass" fills — previously named blur.*
+  dark: {
+    subtle: '#2A2A2A60', // tertiary button default bg
+    strong: '#111111A6', // tertiary button pressed bg
+  },
+  // ─── deprecated aliases ───────────────────────────────────────────────────
+  /** @deprecated use colors.action.solid */
+  action:  '#0082ff',
+  /** @deprecated use colors.status.success.fill */
   success: '#d8f1b8',
-  error: '#ffbdb9',
+  /** @deprecated use colors.status.danger.fill */
+  error:   '#ffbdb9',
+  /** @deprecated use colors.status.warning.fill */
   warning: '#ffefb4',
-  action: '#0082ff',
 };
 
+// ─── Deprecated compat aliases ────────────────────────────────────────────────
+// Keep old top-level keys so consumer repos don't break on upgrade.
+// Remove these in the next major version.
+
+/** @deprecated use colors.text.* and colors.surface.canvas */
+const label = {
+  primary:   { light: text.primary, dark: text.onAccent },
+  secondary: { light: text.secondary },
+  tertiary:  { light: text.tertiary, dark: '#EBEBF52E' },
+  error:     text.danger,
+};
+
+/** @deprecated use colors.fill.dark.subtle / colors.fill.dark.strong */
+const blur = {
+  quaternary: { dark: fill.dark.subtle },
+  tertiary:   { dark: fill.dark.strong },
+};
+
+/** @deprecated colors.semantic.* was a parallel action palette — use colors.action / colors.status instead */
 const semantic = {
-  action: '#488ef7',
+  action:  '#488ef7',
   success: '#5fcf65',
   warning: '#f8c352',
-  error: '#f96057',
+  error:   '#f96057',
 };
 
 export const colors = {
-  label,
-  blur,
+  // canonical
+  text,
+  surface,
+  action,
+  status,
   border,
   fill,
+  // deprecated compat
+  label,
+  blur,
   semantic,
+  // misc
   transparent: 'transparent',
-  current: 'currentColor',
-  black: '#000000',
-  white: '#FFFFFF',
-  lightBlue: '#29abe2',
-  coolGray: '#F6F7FB',
-  darkBlue: '#292f4c',
-  backdrop: '#fbfcff',
+  current:     'currentColor',
+  black:       '#000000',
+  white:       '#FFFFFF',
+  /** @deprecated */
+  lightBlue:   '#29abe2',
+  coolGray:    '#F6F7FB',
+  /** @deprecated */
+  darkBlue:    '#292f4c',
+  /** @deprecated */
+  backdrop:    '#fbfcff',
   whiteAlpha: {
-    50: 'rgba(255, 255, 255, 0.04)',
+    50:  'rgba(255, 255, 255, 0.04)',
     100: 'rgba(255, 255, 255, 0.06)',
     200: 'rgba(255, 255, 255, 0.08)',
     300: 'rgba(255, 255, 255, 0.16)',
@@ -127,9 +180,8 @@ export const colors = {
     800: 'rgba(255, 255, 255, 0.80)',
     900: 'rgba(255, 255, 255, 0.92)',
   },
-
   blackAlpha: {
-    50: 'rgba(0, 0, 0, 0.04)',
+    50:  'rgba(0, 0, 0, 0.04)',
     100: 'rgba(0, 0, 0, 0.06)',
     200: 'rgba(0, 0, 0, 0.08)',
     300: 'rgba(0, 0, 0, 0.16)',
@@ -140,26 +192,26 @@ export const colors = {
     800: 'rgba(0, 0, 0, 0.80)',
     900: 'rgba(0, 0, 0, 0.92)',
   },
-
   gray: {
-    50: 'hsl(240, 3%, 94%)',
+    50:  'hsl(240, 3%, 94%)',
     100: 'hsl(210, 3%, 87%)',
-    200: 'hsl(220, 4%, 69%)', // #ADAFB3
+    200: 'hsl(220, 4%, 69%)',
     300: 'hsl(225, 4%, 56%)',
     400: 'hsl(222, 4%, 44%)',
     500: 'hsl(224, 6%, 38%)',
     600: 'hsl(227, 6%, 30%)',
-    700: 'hsl(230, 5%, 23%)', // #38393E
+    700: 'hsl(230, 5%, 23%)',
     800: 'hsl(216, 6%, 15%)',
     900: 'hsl(240, 5%, 4%)',
   },
-
   red,
   orange,
   green,
   blue,
 };
 
-export type Colors = typeof colors;
+/** Canonical alias — prefer this over `colors` for new code */
+export const tokens = colors;
 
+export type Colors = typeof colors;
 export default colors as Colors;

package/src/theme/foundations/shadows.ts

@@ -9,9 +9,9 @@ const shadows = {
   xl:
     '0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04)',
   '2xl': '0 25px 50px -12px rgba(0, 0, 0, 0.25)',
-  insetOutline: `inset 0 0 0 2px ${colors.fill.action}`,
-  outline: `0 0 0 2px ${colors.fill.action}`,
-  outlineDanger600: `0 0 0 2px ${colors.fill.error}`,
+  insetOutline:     `inset 0 0 0 2px ${colors.action.solid}`,
+  outline:          `0 0 0 2px ${colors.action.solid}`,
+  outlineDanger600: `0 0 0 2px ${colors.action.danger}`,
   inner: 'inset 0 2px 4px 0 rgba(0,0,0,0.06)',
   none: 'none',
   'dark-lg':