@agentscope-ai/design 1.0.23-beta.1767087061250 → 1.0.23

package/lib/antd/styles/button.style.js

@@ -1,7 +1,19 @@
 var _templateObject;
 function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
 import createGlobalStyle from "../../libs/createStyle";
-export var useButtonStyle = createGlobalStyle(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n/* \u53D6\u6D88\u6240\u6709button\u7684boxShadow */\nbutton[type=\"button\"].", "-btn {\n  font-weight: 500;\n  padding-inline: 11px;\n  \n  span[data-spark-icon] {\n    /* @agentscope-ai/icons\u7684\u7279\u6B8A\u903B\u8F91 */\n    font-size: 20px;\n  }\n  \n  &.", "-btn-sm {\n    padding-inline: 7px;\n    \n    span[data-spark-icon] {\n      /* @agentscope-ai/icons\u7684\u7279\u6B8A\u903B\u8F91 */\n      font-size: 16px;\n    }\n  }\n  \n  &.", "-btn-lg {\n    span[data-spark-icon] {\n      /* @agentscope-ai/icons\u7684\u7279\u6B8A\u903B\u8F91 */\n      font-size: 24px;\n    }\n  }\n}\n\n.", "-btn-default {\n  border-color: var(--", "-color-border-secondary);\n}\n\n.", "-btn-textCompact:hover {\n  color: var(--", "-color-text-tertiary) !important;\n}\n\n.", "-btn.", "-btn-default.", "-btn-dangerous:not(:disabled):not(.", "-btn-disabled) {\n  border-color: transparent;\n  background-color: var(--", "-color-error-bg);\n  color: var(--", "-color-error);\n  \n  &:hover {\n    background-color: var(--", "-color-error-bg-hover);\n    border-color: transparent;\n    color: var(--", "-color-error-hover);\n  }\n}\n\n.", "-btn-color-dangerous.", "-btn-variant-solid:disabled,\n.", "-btn-color-dangerous.", "-btn-variant-solid.", "-btn-disabled {\n  border-color: transparent;\n  background-color: var(--", "-color-fill-disable);\n  color: var(--", "-color-text-white);\n}\n\n.", "-btn-primary {\n  color: var(--", "-color-text-on-primary);\n}\n.", "-btn-primary.", "-btn-variant-solid:not(:disabled):not(.", "-btn-disabled):hover {\n  color: var(--", "-color-text-on-primary);\n}\n\n.", "-btn-primary:disabled {\n  background: var(--", "-color-fill-disable);\n  color: var(--", "-color-text-white);\n  border-color: transparent;\n}\n\n.", "-btn-default:disabled {\n  background: var(--", "-color-bg-base);\n  color: var(--", "-color-text-tertiary);\n  border-color: var(--", "-color-border-secondary);\n}\n"])), function (p) {
+export var useButtonStyle = createGlobalStyle(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n/* \u53D6\u6D88\u6240\u6709button\u7684boxShadow */\nbutton[type=\"button\"].", "-btn {\n  font-weight: 500;\n  padding-inline: 11px;\n  \n  span[data-spark-icon] {\n    /* @agentscope-ai/icons\u7684\u7279\u6B8A\u903B\u8F91 */\n    font-size: 20px;\n  }\n  \n  &.", "-btn-sm {\n    padding-inline: 7px;\n    \n    span[data-spark-icon] {\n      /* @agentscope-ai/icons\u7684\u7279\u6B8A\u903B\u8F91 */\n      font-size: 16px;\n    }\n  }\n  \n  &.", "-btn-lg {\n    span[data-spark-icon] {\n      /* @agentscope-ai/icons\u7684\u7279\u6B8A\u903B\u8F91 */\n      font-size: 24px;\n    }\n  }\n}\n\n.", "-btn-default {\n  border-color: var(--", "-color-border-secondary);\n}\n\n.", "-btn-textCompact:hover {\n  color: var(--", "-color-text-tertiary) !important;\n}\n\n.", "-btn.", "-btn-default.", "-btn-dangerous:not(:disabled):not(.", "-btn-disabled) {\n  border-color: transparent;\n  background-color: var(--", "-color-error-bg);\n  color: var(--", "-color-error);\n  \n  &:hover {\n    background-color: var(--", "-color-error-bg-hover);\n    border-color: transparent;\n    color: var(--", "-color-error-hover);\n  }\n}\n\n.", "-btn-color-dangerous.", "-btn-variant-solid:disabled,\n.", "-btn-color-dangerous.", "-btn-variant-solid.", "-btn-disabled {\n  border-color: transparent;\n  background-color: var(--", "-color-fill-disable);\n  color: var(--", "-color-text-white);\n}\n\n.", "-btn-primary {\n  color: var(--", "-color-text-on-primary);\n}\n.", "-btn-primary.", "-btn-variant-solid:not(:disabled):not(.", "-btn-disabled):hover {\n  color: var(--", "-color-text-on-primary);\n}\n\n.", "-btn-primary:disabled {\n  background: var(--", "-color-fill-disable);\n  color: var(--", "-color-text-white);\n  border-color: transparent;\n}\n\n.", "-btn-default:disabled {\n  background: var(--", "-color-bg-base);\n  color: var(--", "-color-text-tertiary);\n  border-color: var(--", "-color-border-secondary);\n}\n\n/* Keep white text color for primaryLess buttons */\n.spark-button-primaryLess.", "-btn-primary {\n  color: var(--", "-color-text-white);\n}\n.spark-button-primaryLess.", "-btn-primary.", "-btn-variant-solid:not(:disabled):not(.", "-btn-disabled):hover {\n  color: var(--", "-color-text-white);\n}\n"])), function (p) {
+  return p.antPrefix;
+}, function (p) {
+  return p.antPrefix;
+}, function (p) {
+  return p.antPrefix;
+}, function (p) {
+  return p.antPrefix;
+}, function (p) {
+  return p.antPrefix;
+}, function (p) {
+  return p.antPrefix;
+}, function (p) {
   return p.antPrefix;
 }, function (p) {
   return p.antPrefix;

package/lib/antd/themes/carbonDarkTheme.json

@@ -64,7 +64,7 @@
 
  "colorTextWhite": "#ffffff",
  "colorTextBlack": "#000000",
- "colorTextOnPrimary": "#ffffff",
+ "colorTextOnPrimary": "#000000",
   "colorFillDisable": "#898989",
   "colorPurple": "#615CED",
   "colorPurpleHover": "#8383F0",

package/lib/antd/themes/generateTheme.d.ts

@@ -55,7 +55,7 @@ interface GenerateThemeProps {
     /** Whether it is dark mode */
     darkMode: boolean;
 }
-declare const generateTheme: ({ primaryHex, bgBaseHex, textBaseHex, darkMode, }: GenerateThemeProps) => {
+declare const generateTheme: (config: GenerateThemeProps) => {
     borderRadiusXS: number;
     borderRadiusSM: number;
     borderRadius: number;

package/lib/antd/themes/generateTheme.js

@@ -1,4 +1,3 @@
-// @ts-nocheck
 /**
  * Theme Generator
 
@@ -36,6 +35,36 @@
 import themeDataDark from "./bailianDarkTheme.json";
 import themeData from "./bailianTheme.json";
 
+/**
+ * Calculate WCAG relative luminance (used for contrast judgment)
+ * Return value range: 0 (darkest) to 1 (brightest)
+ */
+var getRelativeLuminance = function getRelativeLuminance(rgb) {
+  // Normalize RGB values to 0-1
+  var rsRGB = rgb.r / 255;
+  var gsRGB = rgb.g / 255;
+  var bsRGB = rgb.b / 255;
+
+  // Apply sRGB gamma correction
+  var r = rsRGB <= 0.03928 ? rsRGB / 12.92 : Math.pow((rsRGB + 0.055) / 1.055, 2.4);
+  var g = gsRGB <= 0.03928 ? gsRGB / 12.92 : Math.pow((gsRGB + 0.055) / 1.055, 2.4);
+  var b = bsRGB <= 0.03928 ? bsRGB / 12.92 : Math.pow((bsRGB + 0.055) / 1.055, 2.4);
+
+  // Calculate relative luminance using WCAG formula
+  return 0.2126 * r + 0.7152 * g + 0.0722 * b;
+};
+
+/**
+ * Determine whether to use dark or light text on the background color
+ * Use WCAG relative luminance algorithm, threshold is 0.5
+ * @returns {boolean} true means use dark text, false means use light text
+ */
+var shouldUseDarkText = function shouldUseDarkText(rgb) {
+  var luminance = getRelativeLuminance(rgb);
+  // Use dark text when luminance is greater than 0.5, otherwise use light text
+  return luminance > 0.5;
+};
+
 // ==================== Color Conversion Utility Functions ====================
 
 /**
@@ -217,21 +246,19 @@ var generateColorScale = function generateColorScale(baseHex, lightness) {
  * @returns {Object | null} Complete theme configuration object, returns null if parameters are invalid
  */
 
-var generateTheme = function generateTheme(_ref) {
-  var primaryHex = _ref.primaryHex,
-    bgBaseHex = _ref.bgBaseHex,
-    textBaseHex = _ref.textBaseHex,
-    _ref$darkMode = _ref.darkMode,
-    darkMode = _ref$darkMode === void 0 ? false : _ref$darkMode;
-  var resolvedBgBaseHex = bgBaseHex || (darkMode ? '#000000' : '#ffffff');
-  var resolvedTextBaseHex = textBaseHex || (darkMode ? '#E7E7ED' : '#1a1a1a');
+var generateTheme = function generateTheme(config) {
+  var primaryHex = config.primaryHex,
+    _config$darkMode = config.darkMode,
+    darkMode = _config$darkMode === void 0 ? false : _config$darkMode;
+  var bgBaseHex = config.bgBaseHex || (darkMode ? '#000000' : '#ffffff');
+  var textBaseHex = config.textBaseHex || (darkMode ? '#E7E7ED' : '#1a1a1a');
   var rgb = hexToRgb(primaryHex);
   if (!rgb) return null;
   var hsl = rgbToHsl(rgb.r, rgb.g, rgb.b);
 
   // Get RGB and HSL values for background and text colors
-  var bgBaseRgb = hexToRgb(resolvedBgBaseHex);
-  var textBaseRgb = hexToRgb(resolvedTextBaseHex);
+  var bgBaseRgb = hexToRgb(bgBaseHex);
+  var textBaseRgb = hexToRgb(textBaseHex);
   var bgBaseHsl = bgBaseRgb ? rgbToHsl(bgBaseRgb.r, bgBaseRgb.g, bgBaseRgb.b) : {
     h: 210,
     s: 8,
@@ -285,7 +312,7 @@ var generateTheme = function generateTheme(_ref) {
     colorPrimaryTextActive: darkMode ? generateColorWithLightness(primaryHex, Math.max(hsl.l - 10, 35), hsl.s * 0.95) : adjustColor(primaryHex, hsl.l < 50 ? -10 : -20, 0),
     // Text color displayed on primary color background: automatically selects black or white based on actual primary color lightness
     // Light theme colors (lightness > 50) use black text, dark theme colors (lightness <= 50) use white text
-    colorTextOnPrimary: actualPrimaryHsl.l > 50 ? '#000000' : '#ffffff',
+    colorTextOnPrimary: shouldUseDarkText(actualPrimaryRgb) ? '#000000' : '#ffffff',
     // ========== Text Color System ==========
     // Generated based on textBase hue, uses transparency to achieve different levels
     colorTextBase: textBaseHex,

package/lib/components/commonComponents/Button/index.js

@@ -70,7 +70,9 @@ var Button = /*#__PURE__*/forwardRef(function (props, ref) {
       fontWeight: 500,
       lineHeight: 1
     }, restProps.style),
-    className: classNames(restProps.className, 'spark-button')
+    className: classNames(restProps.className, 'spark-button', {
+      'spark-button-primaryLess': restProps.type === 'primaryLess'
+    })
   }));
 
   // @ts-ignore

package/lib/components/commonComponents/Tooltip/index.style.js

@@ -1,7 +1,7 @@
 var _templateObject;
 function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
 import createGlobalStyle from "../../../libs/createStyle";
-export var useStyle = createGlobalStyle(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n/* \u9ED8\u8BA4\u6DF1\u8272 */\n.", "-tooltip-content {\n  .", "-tooltip-inner {\n    border: 1px solid transparent;\n    padding: 6px 12px;\n    background: var(--", "-color-slate);\n    color: var(--", "-color-text-on-primary);\n  }\n}\n\n/* \u6D45\u8272\u6A21\u5F0F */\n.", "-tooltip-light {\n  .", "-tooltip-content .", "-tooltip-inner {\n    background: var(--", "-color-bg-base);\n    color: var(--", "-color-text);\n  }\n  \n  .", "-tooltip-arrow {\n    &::after {\n      background: var(--", "-color-bg-base);\n    }\n  }\n}\n"])), function (p) {
+export var useStyle = createGlobalStyle(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n/* Default dark mode */\n.", "-tooltip-content {\n  .", "-tooltip-inner {\n    border: 1px solid transparent;\n    padding: 6px 12px;\n    background: var(--", "-color-slate);\n    color: var(--", "-color-text-white);\n  }\n}\n\n/* Light mode - keep same style as dark mode */\n.", "-tooltip-light {\n  .", "-tooltip-content .", "-tooltip-inner {\n    background: var(--", "-color-slate);\n    color: var(--", "-color-text-white);\n  }\n  \n  .", "-tooltip-arrow {\n    &::after {\n      background: var(--", "-color-slate);\n    }\n  }\n}\n"])), function (p) {
   return p.antPrefix;
 }, function (p) {
   return p.antPrefix;