@nuee/tokens 0.4.0 → 0.5.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nuee/tokens",
-  "version": "0.4.0",
+  "version": "0.5.0",
   "private": false,
   "repository": {
     "type": "git",

package/src/color-palette.stylex.ts

@@ -26,7 +26,7 @@ export const colorPalette = stylex.defineVars({
   primaryContrast: "oklch(24.353% 0 0)",
   primaryContrastDark: "oklch(93.846% 0.0041 121.56)",
   redWeak: "oklch(88.842% 0.0501 22.71)",
-  redWeakDark: "oklch(79.615% 0.1170 24.47 / 24%)",
+  redWeakDark: "oklch(79.615% 0.1170 24.47 / 32%)",
   redMuted: "oklch(82.720% 0.0510 21.28)",
   redMutedDark: "oklch(71.697% 0.1767 23.77)",
   redSolid: "oklch(39.780% 0.1604 22.34)",
@@ -45,7 +45,7 @@ export const colorPalette = stylex.defineVars({
   orangeContrast: "oklch(39.668% 0.0989 54.41)",
   orangeContrastDark: "oklch(87.437% 0.0803 57.28)",
   yellowWeak: "oklch(89.932% 0.0846 84.60)",
-  yellowWeakDark: "oklch(78.635% 0.1457 89.67 / 24%)",
+  yellowWeakDark: "oklch(78.635% 0.1457 89.67 / 32%)",
   yellowMuted: "oklch(82.759% 0.0996 85.33)",
   yellowMutedDark: "oklch(69.931% 0.1403 90)",
   yellowSolid: "oklch(39.679% 0.0811 89.57)",
@@ -55,7 +55,7 @@ export const colorPalette = stylex.defineVars({
   yellowFeedback: "oklch(48.284% 0.0987 90.04)",
   yellowBadge: "oklch(87.026% 0.1672 89.94)",
   greenWeak: "oklch(88.883% 0.0603 141.35)",
-  greenWeakDark: "oklch(77.164% 0.1234 143.03 / 24%)",
+  greenWeakDark: "oklch(77.164% 0.1234 143.03 / 32%)",
   greenMuted: "oklch(82.794% 0.0607 140.55)",
   greenMutedDark: "oklch(68.460% 0.1219 143.49)",
   greenSolid: "oklch(39.780% 0.1319 141.35)",
@@ -74,7 +74,7 @@ export const colorPalette = stylex.defineVars({
   cyanContrast: "oklch(39.727% 0.0705 215.91)",
   cyanContrastDark: "oklch(86.361% 0.0691 217.16)",
   blueWeak: "oklch(88.873% 0.0494 253.08)",
-  blueWeakDark: "oklch(78.788% 0.1067 269.17 / 24%)",
+  blueWeakDark: "oklch(78.788% 0.1067 269.17 / 32%)",
   blueMuted: "oklch(82.782% 0.0497 254.11)",
   blueMutedDark: "oklch(70.325% 0.1529 263.59)",
   blueSolid: "oklch(39.777% 0.1328 255.38)",
@@ -104,6 +104,7 @@ export const colorPalette = stylex.defineVars({
   alphaBlack10: "oklch(0% 0 0 / 10%)",
   alphaBlack20: "oklch(0% 0 0 / 20%)",
   alphaBlack30: "oklch(0% 0 0 / 30%)",
+  alphaBlack40: "oklch(0% 0 0 / 40%)",
   alphaBlack50: "oklch(0% 0 0 / 50%)",
   alphaBlack80: "oklch(0% 0 0 / 80%)",
   alphaWhite5: "oklch(100% 0 0 / 5%)",

package/src/index.ts

@@ -1,6 +1,7 @@
 export { colorPalette, colorPaletteGroups } from "./color-palette.stylex";
 export {
   colorVars,
+  layerVars,
   motionVars,
   opacityVars,
   radiusVars,

package/src/semantic.stylex.ts

@@ -6,11 +6,16 @@ export const colorVars = stylex.defineVars({
   bgCanvas: colorPalette.neutral100,
   bgSurface: colorPalette.neutral0,
   bgSurfacePressed: "oklch(97% 0 0)",
+  bgInverse: colorPalette.neutral950,
   bgSubtle: colorPalette.neutral50,
   bgRaised: colorPalette.neutral0,
   bgRaisedPressed: "oklch(97% 0 0)",
+  bgCurrent: colorPalette.alphaBlack6,
+  bgOverlay: colorPalette.alphaBlack40,
+  bgSkeleton: colorPalette.neutral200,
   bgActionPrimary: colorPalette.primarySolid,
   bgActionDestructive: colorPalette.redFeedback,
+  bgMessageOutgoing: colorPalette.primarySolid,
   bgFeedbackInfo: colorPalette.blueWeak,
   bgFeedbackSuccess: colorPalette.greenWeak,
   bgFeedbackWarning: colorPalette.yellowWeak,
@@ -18,10 +23,11 @@ export const colorVars = stylex.defineVars({
   fgPrimary: colorPalette.neutral950,
   fgSecondary: colorPalette.neutral600,
   fgTertiary: colorPalette.neutral500,
-  fgDisabled: colorPalette.alphaBlack50,
+  fgDisabled: colorPalette.neutral500,
   fgInverse: colorPalette.neutral0,
   fgOnActionPrimary: colorPalette.neutral0,
   fgOnActionDestructive: colorPalette.neutral0,
+  fgOnMessageOutgoing: colorPalette.neutral0,
   fgAction: colorPalette.primarySolid,
   fgFeedbackInfo: colorPalette.blueSolid,
   fgFeedbackSuccess: colorPalette.greenFeedback,
@@ -37,16 +43,19 @@ export const colorVars = stylex.defineVars({
   strokeFeedbackError: colorPalette.redMuted,
   interactionDefault: "transparent",
   interactionHover: colorPalette.alphaBlack6,
-  interactionPressed: "oklch(97% 0 0)",
+  // Translucent state layers preserve the underlying surface; press is stronger than hover.
+  interactionPressed: colorPalette.alphaBlack10,
   interactionSolidHover: colorPalette.alphaWhite10,
   interactionSolidPressed: colorPalette.alphaWhite20,
-  interactionSelected: "oklch(97% 0 0)",
+  // Persistent selected surface for segmented controls, matching the explicit light theme.
+  interactionSelected: colorPalette.neutral0,
   interactionDisabled: colorPalette.alphaBlack8,
   interactionFocus: colorPalette.blueBadge,
 });
 
 export const spacingVars = stylex.defineVars({
   space0: "0",
+  space0_5: "0.125rem",
   space1: "0.25rem",
   space2: "0.5rem",
   space3: "0.75rem",
@@ -59,13 +68,19 @@ export const spacingVars = stylex.defineVars({
 });
 
 export const sizeVars = stylex.defineVars({
+  controlXs: "1.5rem",
   controlSm: "2rem",
   controlMd: "2.25rem",
   controlLg: "2.5rem",
+  iconXs: "0.75rem",
   iconSm: "0.875rem",
   iconMd: "1rem",
+  iconLg: "1.25rem",
+  contentXs: "18rem",
   contentSm: "24rem",
   contentMd: "32rem",
+  trackSm: "0.375rem",
+  trackMd: "0.5rem",
   touchTarget: "2.75rem",
   stroke: "0.0625rem",
   focusRing: "0.125rem",
@@ -75,6 +90,7 @@ export const radiusVars = stylex.defineVars({
   sm: "0.375rem",
   md: "0.5rem",
   lg: "0.75rem",
+  xl: "1rem",
   full: "9999px",
 });
 
@@ -84,8 +100,20 @@ export const shadowVars = stylex.defineVars({
   overlay: "0 4px 16px oklch(0% 0 0 / 12%)",
 });
 
+export const layerVars = stylex.defineVars({
+  modalBackdrop: "50",
+  modal: "51",
+  popup: "60",
+  notification: "70",
+});
+
 export const typographyVars = stylex.defineVars({
+  /** @deprecated Use fontFamilyBody or fontFamilyHeading instead. */
   fontFamily: '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif',
+  fontFamilyBody:
+    '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif',
+  fontFamilyHeading:
+    '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif',
   fontSizeXs: "0.75rem",
   fontSizeSm: "0.875rem",
   fontSizeMd: "1rem",
@@ -99,13 +127,16 @@ export const typographyVars = stylex.defineVars({
 });
 
 export const opacityVars = stylex.defineVars({
-  disabled: "0.8",
+  disabled: "0.6",
 });
 
 export const motionVars = stylex.defineVars({
+  durationInstant: "0.01ms",
   durationFast: "120ms",
   durationNormal: "180ms",
   durationSlow: "240ms",
+  durationLoading: "700ms",
+  durationLoadingReduced: "1.5s",
   easingStandard: "cubic-bezier(0.2, 0, 0, 1)",
   easingEnter: "cubic-bezier(0.16, 1, 0.3, 1)",
   easingExit: "cubic-bezier(0.4, 0, 1, 1)",

package/src/themes.stylex.ts

@@ -7,11 +7,16 @@ export const lightColorTheme = stylex.createTheme(colorVars, {
   bgCanvas: colorPalette.neutral100,
   bgSurface: colorPalette.neutral0,
   bgSurfacePressed: "oklch(97% 0 0)",
+  bgInverse: colorPalette.neutral950,
   bgSubtle: colorPalette.neutral50,
   bgRaised: colorPalette.neutral0,
   bgRaisedPressed: "oklch(97% 0 0)",
+  bgCurrent: colorPalette.alphaBlack6,
+  bgOverlay: colorPalette.alphaBlack40,
+  bgSkeleton: colorPalette.neutral200,
   bgActionPrimary: colorPalette.primarySolid,
   bgActionDestructive: colorPalette.redFeedback,
+  bgMessageOutgoing: colorPalette.primarySolid,
   bgFeedbackInfo: colorPalette.blueWeak,
   bgFeedbackSuccess: colorPalette.greenWeak,
   bgFeedbackWarning: colorPalette.yellowWeak,
@@ -19,10 +24,11 @@ export const lightColorTheme = stylex.createTheme(colorVars, {
   fgPrimary: colorPalette.neutral950,
   fgSecondary: colorPalette.neutral600,
   fgTertiary: colorPalette.neutral500,
-  fgDisabled: colorPalette.alphaBlack50,
+  fgDisabled: colorPalette.neutral500,
   fgInverse: colorPalette.neutral0,
   fgOnActionPrimary: colorPalette.neutral0,
   fgOnActionDestructive: colorPalette.neutral0,
+  fgOnMessageOutgoing: colorPalette.neutral0,
   fgAction: colorPalette.primarySolid,
   fgFeedbackInfo: colorPalette.blueSolid,
   fgFeedbackSuccess: colorPalette.greenFeedback,
@@ -38,43 +44,49 @@ export const lightColorTheme = stylex.createTheme(colorVars, {
   strokeFeedbackError: colorPalette.redMuted,
   interactionDefault: "transparent",
   interactionHover: colorPalette.alphaBlack6,
-  interactionPressed: "oklch(97% 0 0)",
+  interactionPressed: colorPalette.alphaBlack10,
   interactionSolidHover: colorPalette.alphaWhite10,
   interactionSolidPressed: colorPalette.alphaWhite20,
-  interactionSelected: "oklch(97% 0 0)",
+  interactionSelected: colorPalette.neutral0,
   interactionDisabled: colorPalette.alphaBlack8,
   interactionFocus: colorPalette.blueBadge,
 });
 
 export const darkColorTheme = stylex.createTheme(colorVars, {
   bgCanvas: colorPalette.neutral950,
-  bgSurface: colorPalette.alphaWhite5,
-  bgSurfacePressed: colorPalette.alphaWhite10,
-  bgSubtle: colorPalette.alphaWhite8,
-  bgRaised: colorPalette.neutral850,
-  bgRaisedPressed: colorPalette.neutral800,
-  bgActionPrimary: colorPalette.primarySolidDark,
+  bgSurface: colorPalette.neutral900,
+  bgSurfacePressed: colorPalette.neutral800,
+  bgInverse: colorPalette.neutral800,
+  bgSubtle: colorPalette.neutral850,
+  bgRaised: colorPalette.neutral800,
+  bgRaisedPressed: colorPalette.neutral700,
+  bgCurrent: colorPalette.alphaWhite8,
+  bgOverlay: colorPalette.alphaBlack40,
+  bgSkeleton: colorPalette.neutral700,
+  bgActionPrimary: colorPalette.neutral100,
   bgActionDestructive: colorPalette.redFeedback,
+  bgMessageOutgoing: colorPalette.neutral100,
   bgFeedbackInfo: colorPalette.blueWeakDark,
   bgFeedbackSuccess: colorPalette.greenWeakDark,
   bgFeedbackWarning: colorPalette.yellowWeakDark,
   bgFeedbackError: colorPalette.redWeakDark,
-  fgPrimary: colorPalette.neutral50,
-  fgSecondary: colorPalette.neutral300,
-  fgTertiary: colorPalette.neutral400,
-  fgDisabled: colorPalette.alphaWhite50,
-  fgInverse: colorPalette.neutral950,
+  fgPrimary: colorPalette.neutral100,
+  fgSecondary: colorPalette.neutral400,
+  fgTertiary: colorPalette.neutral500,
+  fgDisabled: colorPalette.neutral500,
+  fgInverse: colorPalette.neutral200,
   fgOnActionPrimary: colorPalette.neutral950,
-  fgOnActionDestructive: colorPalette.neutral0,
-  fgAction: colorPalette.primaryContrastDark,
+  fgOnActionDestructive: colorPalette.neutral200,
+  fgOnMessageOutgoing: colorPalette.neutral950,
+  fgAction: colorPalette.primarySolidDark,
   fgFeedbackInfo: colorPalette.blueContrastDark,
   fgFeedbackSuccess: colorPalette.greenContrastDark,
   fgFeedbackWarning: colorPalette.yellowContrastDark,
   fgFeedbackError: colorPalette.redContrastDark,
-  strokeDefault: colorPalette.neutral700,
-  strokeStrong: colorPalette.neutral600,
-  strokeFocus: colorPalette.blueSolidDark,
-  strokeAction: colorPalette.primarySolidDark,
+  strokeDefault: colorPalette.neutral800,
+  strokeStrong: colorPalette.neutral700,
+  strokeFocus: colorPalette.blueBadge,
+  strokeAction: colorPalette.neutral100,
   strokeFeedbackInfo: colorPalette.blueMutedDark,
   strokeFeedbackSuccess: colorPalette.greenMutedDark,
   strokeFeedbackWarning: colorPalette.yellowMutedDark,
@@ -84,9 +96,9 @@ export const darkColorTheme = stylex.createTheme(colorVars, {
   interactionPressed: colorPalette.alphaWhite10,
   interactionSolidHover: colorPalette.alphaBlack10,
   interactionSolidPressed: colorPalette.alphaBlack20,
-  interactionSelected: colorPalette.primaryWeakDark,
-  interactionDisabled: colorPalette.alphaWhite10,
-  interactionFocus: colorPalette.blueSolidDark,
+  interactionSelected: colorPalette.neutral800,
+  interactionDisabled: colorPalette.neutral700,
+  interactionFocus: colorPalette.blueBadge,
 });
 
 export const lightShadowTheme = stylex.createTheme(shadowVars, {
@@ -96,7 +108,7 @@ export const lightShadowTheme = stylex.createTheme(shadowVars, {
 });
 
 export const darkShadowTheme = stylex.createTheme(shadowVars, {
-  subtle: "0 1px 4px oklch(0% 0 0 / 50%)",
-  floating: "0 2px 10px oklch(0% 0 0 / 68%)",
-  overlay: "0 4px 16px oklch(0% 0 0 / 80%)",
+  subtle: "0 0 0 1px oklch(100% 0 0 / 6%), 0 1px 4px oklch(0% 0 0 / 36%)",
+  floating: "0 0 0 1px oklch(100% 0 0 / 8%), 0 8px 24px oklch(0% 0 0 / 52%)",
+  overlay: "0 0 0 1px oklch(100% 0 0 / 10%), 0 16px 40px oklch(0% 0 0 / 64%)",
 });