@oceanbase/design 1.0.0-alpha.4 → 1.0.0-alpha.6

package/lib/theme/compact.js

@@ -32,13 +32,9 @@ __export(compact_exports, {
   default: () => compact_default
 });
 module.exports = __toCommonJS(compact_exports);
-var import_antd = require("antd");
 var import_index = __toESM(require("./index"));
 var compactTheme = {
-  token: import_antd.theme.getDesignToken({
-    algorithm: import_antd.theme.compactAlgorithm,
-    token: import_index.default.defaultSeed
-  }),
+  token: import_index.default.defaultSeed,
   components: {
     InputNumber: {
       handleVisible: true

package/lib/theme/default.js

@@ -40,6 +40,9 @@ var colorFillQuaternary = "#F5F7FC";
 var colorBorderSecondary = colorFillSecondary;
 var fontSizeSM = 12;
 var tagColorBorder = colorTextQuaternary;
+var borderRadius = 4;
+var borderRadiusMD = 6;
+var borderRadiusLG = 8;
 var fontFamilyEn = `Inter, 'Noto sans', sans-serif, Roboto, 'Open Sans', 'Segoe UI', 'Helvetica Neue', 'Helvetica, Arial', 'Apple Color Emoji'`;
 var fontWeightWeakEn = 400;
 var fontWeightEn = 500;
@@ -52,9 +55,9 @@ var defaultTheme = {
     fontWeight: 400,
     fontWeightStrong: 500,
     borderRadiusSM: 2,
-    borderRadius: 4,
-    borderRadiusMD: 6,
-    borderRadiusLG: 8,
+    borderRadius,
+    borderRadiusMD,
+    borderRadiusLG,
     fontSizeSM,
     fontSize: 13,
     lineHeight: 20 / 13,
@@ -118,7 +121,7 @@ var defaultTheme = {
   },
   components: {
     Alert: {
-      borderRadiusLG: 6
+      borderRadiusLG: borderRadiusMD
     },
     Badge: {
       statusSize: 8
@@ -139,16 +142,29 @@ var defaultTheme = {
     },
     Card: {
       headerFontSize: 16,
-      borderRadiusLG: 8
+      borderRadiusLG
     },
     Collapse: {
       colorBorder: colorBorderSecondary
     },
+    DatePicker: {
+      borderRadiusLG: borderRadiusMD
+    },
     Descriptions: {
       labelColor: colorTextSecondary
     },
+    Dropdown: {
+      borderRadiusLG: borderRadiusMD
+    },
+    Input: {
+      borderRadiusLG: borderRadiusMD
+    },
     InputNumber: {
-      handleVisible: true
+      handleVisible: true,
+      borderRadiusLG: borderRadiusMD
+    },
+    Popover: {
+      borderRadiusLG: borderRadiusMD
     },
     Progress: {
       defaultColor: colorPrimarySecondary
@@ -162,6 +178,7 @@ var defaultTheme = {
     },
     Select: {
       // work for all multiple select component, including Select, TreeSelect and Cascader and so on
+      borderRadiusLG: borderRadiusMD,
       multipleItemBg: colorFillQuaternary,
       multipleItemBorderColor: tagColorBorder,
       multipleItemBorderColorDisabled: tagColorBorder
@@ -175,7 +192,7 @@ var defaultTheme = {
       handleColorDisabled: "#b3ccff"
     },
     Skeleton: {
-      blockRadius: 4
+      blockRadius: borderRadius
     },
     Tabs: {
       horizontalItemGutter: 24,
@@ -185,7 +202,7 @@ var defaultTheme = {
     },
     Tag: {
       colorBorder: tagColorBorder,
-      borderRadiusSM: 4
+      borderRadiusSM: borderRadius
     },
     Table: {
       cellFontSize: fontSizeSM,
@@ -199,13 +216,15 @@ var defaultTheme = {
       rowSelectedHoverBg: colorFillTertiary
     },
     Tooltip: {
+      borderRadius: borderRadiusMD,
       colorBgSpotlight: "#ffffff",
       colorTextLightSolid: colorText
     },
     Menu: {
+      borderRadiusLG: borderRadiusMD,
       paddingContentVertical: 0,
       itemHeight: 30,
-      itemBorderRadius: 4,
+      itemBorderRadius: borderRadius,
       // 80 means 50% opacity
       itemHoverBg: colorFillSecondary + "80",
       itemActiveBg: colorFillSecondary + "80",

package/lib/typography/style/index.js

@@ -23,10 +23,14 @@ __export(style_exports, {
   genTypographyStyle: () => genTypographyStyle
 });
 module.exports = __toCommonJS(style_exports);
+var import_cssinjs = require("@ant-design/cssinjs");
 var import_genComponentStyleHook = require("../../_util/genComponentStyleHook");
 var genTypographyStyle = (token) => {
-  const { componentCls, controlHeight, fontSize, lineHeight } = token;
-  const marginOffset = (controlHeight - fontSize * lineHeight) / 2;
+  const { componentCls, controlHeight, fontSize, lineHeight, calc } = token;
+  const marginOffset = calc(controlHeight).sub(calc(fontSize).mul(lineHeight).equal()).div(2).equal();
+  const paddingTop = calc(marginOffset).sub(token.lineWidth).equal();
+  const paddingInline = calc(token.paddingSM).sub(token.lineWidth).equal();
+  const negativeMarginOffset = calc(marginOffset).mul(-1).equal();
   return {
     // inherit color and lineHeight from parent instead of fixed colorText
     [`${componentCls}`]: {
@@ -40,43 +44,43 @@ var genTypographyStyle = (token) => {
     [`${componentCls}${componentCls}-editable-text:not(${componentCls}-edit-content)`]: {
       "&:hover": {
         background: token.colorBgContainer,
-        border: `${token.lineWidth}px ${token.lineType} ${token.colorBorder}`,
+        border: `${(0, import_cssinjs.unit)(token.lineWidth)} ${token.lineType} ${token.colorBorder}`,
         borderRadius: token.borderRadius,
         position: "relative",
-        insetInlineStart: -token.paddingSM,
-        padding: `${marginOffset - token.lineWidth}px ${token.paddingSM - token.lineWidth}px`
+        insetInlineStart: calc(token.paddingSM).mul(-1).equal(),
+        padding: `${paddingTop} ${paddingInline}`
       },
       "div&:hover": {
         height: token.controlHeight,
-        marginTop: -marginOffset,
-        marginBottom: `calc(1em - ${marginOffset}px)`
+        marginTop: negativeMarginOffset,
+        marginBottom: calc("1em").sub(marginOffset).equal()
       },
       "span&:hover": {
         display: "inline-block",
         height: token.controlHeight,
-        marginTop: -marginOffset,
-        marginBottom: -marginOffset
+        marginTop: negativeMarginOffset,
+        marginBottom: negativeMarginOffset
       },
       "h1&:hover, h2&:hover, h3&:hover, h4&:hover, h5&:hover": {
-        marginTop: `${-marginOffset}px !important`,
-        marginBottom: `${-marginOffset}px !important`
+        marginTop: `${negativeMarginOffset} !important`,
+        marginBottom: `${negativeMarginOffset} !important`
       }
     },
     [`${componentCls}${componentCls}-edit-content`]: {
       [`${componentCls}-div&`]: {
-        insetInlineStart: -token.paddingSM,
-        marginTop: -marginOffset,
-        marginBottom: `calc(1em - ${marginOffset}px)`
+        insetInlineStart: calc(token.paddingSM).mul(-1).equal(),
+        marginTop: negativeMarginOffset,
+        marginBottom: calc("1em").sub(marginOffset).equal()
       },
       [`${componentCls}-span&`]: {
-        insetInlineStart: -token.paddingSM,
-        marginTop: -marginOffset,
-        marginBottom: -marginOffset
+        insetInlineStart: calc(token.paddingSM).mul(-1).equal(),
+        marginTop: negativeMarginOffset,
+        marginBottom: negativeMarginOffset
       },
       [`${componentCls}-h1&, ${componentCls}-h2&, ${componentCls}-h3&, ${componentCls}-h4&, ${componentCls}-h5&`]: {
-        insetInlineStart: -token.paddingSM,
-        marginTop: `${-marginOffset}px !important`,
-        marginBottom: `${-marginOffset}px !important`
+        insetInlineStart: calc(token.paddingSM).mul(-1).equal(),
+        marginTop: `${negativeMarginOffset} !important`,
+        marginBottom: `${negativeMarginOffset} !important`
       }
     }
   };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@oceanbase/design",
-  "version": "1.0.0-alpha.4",
+  "version": "1.0.0-alpha.6",
   "description": "The Design System of OceanBase",
   "keywords": [
     "oceanbase",
@@ -31,7 +31,6 @@
     "LICENSE"
   ],
   "sideEffects": [
-    "**/*.less",
     "**/*.css"
   ],
   "scripts": {
@@ -66,5 +65,5 @@
     "react": ">=16.9.0",
     "react-dom": ">=16.9.0"
   },
-  "gitHead": "7619cf0d3f5d29dd4c7b67be8265ace300d7e731"
+  "gitHead": "7ce9c565c23262a8ffaeab5904095ca65806def9"
 }

package/es/global.css

@@ -1,48 +0,0 @@
-@import '~antd/dist/reset.css';
-
-@font-face {
-  font-family: 'Inter';
-  /* load priority: local font > self-hosting font > remote font */
-  src:
-    local('Inter'),
-    url('./fonts/Inter.woff2') format('woff2'),
-    url('https://mdn.alipayobjects.com/huamei_fhnyvh/afts/file/A*2aG4RJIdUGYAAAAAAAAAAAAADmfOAQ/Inter.woff2')
-      format('woff2');
-  /* load strategy: use default font as fallback */
-  font-display: swap;
-}
-
-@font-face {
-  font-family: 'Consolas';
-  src:
-    local('Consolas'),
-    url('./fonts/Consolas.woff2') format('woff2'),
-    url('https://mdn.alipayobjects.com/huamei_fhnyvh/afts/file/A*R8bMTqAdGWgAAAAAAAAAAAAADmfOAQ/Consolas.woff2')
-      format('woff2');
-  font-display: swap;
-}
-
-@font-face {
-  font-family: 'Helvetica Neue';
-  src:
-    local('Helvetica Neue'),
-    url('./fonts/HelveticaNeue.woff2') format('woff2'),
-    url('https://mdn.alipayobjects.com/huamei_fhnyvh/afts/file/A*3EzqR6aYJMkAAAAAAAAAAAAADmfOAQ/HelveticaNeue.woff2')
-      format('woff2');
-  font-display: swap;
-}
-
-pre,
-code,
-kbd,
-samp {
-  font-family: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace;
-}
-
-* {
-  scrollbar-color: #e2e8f3 transparent;
-}
-
-.rc-virtual-list-scrollbar-thumb {
-  background: #e2e8f3 !important;
-}

package/lib/global.css

@@ -1,48 +0,0 @@
-@import '~antd/dist/reset.css';
-
-@font-face {
-  font-family: 'Inter';
-  /* load priority: local font > self-hosting font > remote font */
-  src:
-    local('Inter'),
-    url('./fonts/Inter.woff2') format('woff2'),
-    url('https://mdn.alipayobjects.com/huamei_fhnyvh/afts/file/A*2aG4RJIdUGYAAAAAAAAAAAAADmfOAQ/Inter.woff2')
-      format('woff2');
-  /* load strategy: use default font as fallback */
-  font-display: swap;
-}
-
-@font-face {
-  font-family: 'Consolas';
-  src:
-    local('Consolas'),
-    url('./fonts/Consolas.woff2') format('woff2'),
-    url('https://mdn.alipayobjects.com/huamei_fhnyvh/afts/file/A*R8bMTqAdGWgAAAAAAAAAAAAADmfOAQ/Consolas.woff2')
-      format('woff2');
-  font-display: swap;
-}
-
-@font-face {
-  font-family: 'Helvetica Neue';
-  src:
-    local('Helvetica Neue'),
-    url('./fonts/HelveticaNeue.woff2') format('woff2'),
-    url('https://mdn.alipayobjects.com/huamei_fhnyvh/afts/file/A*3EzqR6aYJMkAAAAAAAAAAAAADmfOAQ/HelveticaNeue.woff2')
-      format('woff2');
-  font-display: swap;
-}
-
-pre,
-code,
-kbd,
-samp {
-  font-family: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace;
-}
-
-* {
-  scrollbar-color: #e2e8f3 transparent;
-}
-
-.rc-virtual-list-scrollbar-thumb {
-  background: #e2e8f3 !important;
-}