diff --git a/package.json b/package.json
index b01b81c5..893c78c8 100644
--- a/package.json
+++ b/package.json
@@ -23,7 +23,7 @@
"version-packages:ci": "changeset version && pnpm install --shamefully-hoist --no-frozen-lockfile",
"changelog": "conventional-changelog -p angular -i CHANGELOG.md -s -r 0",
"release": "pnpm build && pnpm release:only",
- "release:only": "changeset publish --registry=https://registry.npmjs.com/",
+ "release:only": "changeset publish --registry=https://npm.infra.inner.casamiel.cn/",
"test": "pnpm --filter=ossa-demo test",
"checkUIChange": "node ./scripts/checkModifyListAndTest.js",
"prepare": "husky install"
diff --git a/packages/ossa-demo/src/assets/style/_variable.scss b/packages/ossa-demo/src/assets/style/_variable.scss
index 4bfea084..7f406693 100644
--- a/packages/ossa-demo/src/assets/style/_variable.scss
+++ b/packages/ossa-demo/src/assets/style/_variable.scss
@@ -6,6 +6,9 @@
$--font-color:#666;
$--font-size:14px;
+/* Theme Color */
+$--color-primay:#AF7357 !default; // 主题色
+
/* Color */
$--color-red:#DD1A21 !default; // 品牌红
// $--color-logo:#FF142F !default; // 桌面图标亮红色
diff --git a/packages/ossa-demo/src/components/color/demo/index.tsx b/packages/ossa-demo/src/components/color/demo/index.tsx
index 76cffe0f..6f0fea8e 100644
--- a/packages/ossa-demo/src/components/color/demo/index.tsx
+++ b/packages/ossa-demo/src/components/color/demo/index.tsx
@@ -40,6 +40,11 @@ function getClassObject() {
}
const initialColorList: ColorListItem[] = [
+ {
+ color: "#AF7357",
+ title: "YXColorPrimary",
+ desc: "主题色",
+ },
{
color: "#DD1A21",
title: "YXColorRed",
diff --git a/packages/ossa-demo/src/components/tag/demo/index.tsx b/packages/ossa-demo/src/components/tag/demo/index.tsx
index 8f3f0993..aeed9b30 100644
--- a/packages/ossa-demo/src/components/tag/demo/index.tsx
+++ b/packages/ossa-demo/src/components/tag/demo/index.tsx
@@ -161,6 +161,26 @@ export default function Index() {
+
+
+
+ 女性蛋糕
+
+
+ 女性蛋糕
+
+
+
+
+
+
+ 整条（12片装）
+
+
+ 整条（12片装）
+
+
+
diff --git a/packages/ossa-doc/docs/color.md b/packages/ossa-doc/docs/color.md
index 216e9772..790ea486 100644
--- a/packages/ossa-doc/docs/color.md
+++ b/packages/ossa-doc/docs/color.md
@@ -7,6 +7,9 @@ demo_url: 'https://neteaseyanxuan.github.io/OSSA/#/components/color/demo/index'
### scss变量
```scss
+/* Theme Color */
+$--color-primay: #AF7357 !default; // 主题色
+
/* Color */
$--color-red:#DD1A21 !default; // 品牌红
$--color-yellow:#F48F18 !default; // 营销色
diff --git "a/packages/ossa-doc/docs/\347\273\204\344\273\266/tag.md" "b/packages/ossa-doc/docs/\347\273\204\344\273\266/tag.md"
index ff016f28..81438442 100644
--- "a/packages/ossa-doc/docs/\347\273\204\344\273\266/tag.md"
+++ "b/packages/ossa-doc/docs/\347\273\204\344\273\266/tag.md"
@@ -65,6 +65,8 @@ demo_url: 'https://neteaseyanxuan.github.io/OSSA/#/components/tag/demo/index'
|endBgColor|填充渐变结束色，可选|string|-（只支持radius腰圆标签，且与startBgColor配合使用）|
|showArrow|显示向右箭头，可选|boolean|-（只支持radius腰圆标签）|
|customStyle|自定义Style，可选|Object|-|
+|size|tag尺寸|,可选|middle|large|-|
+|border|边框,可选｜string|-
### 方法
diff --git a/packages/ossa/package.json b/packages/ossa/package.json
index a0157584..2e3b53e0 100644
--- a/packages/ossa/package.json
+++ b/packages/ossa/package.json
@@ -1,6 +1,6 @@
{
- "name": "ossaui",
- "version": "0.7.4",
+ "name": "@casamiel/ossaui",
+ "version": "0.7.4-beta.4",
"description": "",
"main": "dist/index.js",
"module": "dist/index.esm.js",
diff --git a/packages/ossa/src/components/modal/index.tsx b/packages/ossa/src/components/modal/index.tsx
index 97bdeff9..a5fa9e5a 100644
--- a/packages/ossa/src/components/modal/index.tsx
+++ b/packages/ossa/src/components/modal/index.tsx
@@ -1,9 +1,10 @@
import React from "react";
-import { View, Image, Text, Button } from "@tarojs/components";
+import { View, Image, Text } from "@tarojs/components";
import classNames from "classnames";
import { OsModalProps } from "../../../types/index";
import getOpenTypeRelatedProps from "../../utils/getOpenTypeRelatedProps";
import { deprecatedProp } from "../../utils";
+import Button from "../button";
const closeIconImg =
"https://yanxuan-static.nosdn.127.net/hxm/yanxuan-wap/p/20161201/style/img/icon-normal/modalClose-9d2d6d39f7.png?imageView";
@@ -108,8 +109,10 @@ export default function Index(props: OsModalProps) {
className={classNames({
["ossa-action-btn"]: true,
["ossa-action-btn--cancel"]: true,
- ["ossa-action-btn--disabled"]: props.disableCancelBtn,
})}
+ shape='round'
+ size={confirmText ? 'normal' : 'block'}
+ disabled={props.disableConfirmBtn}
onClick={(e) => onClickCancelBtn(props)}
>
{cancelText}
@@ -120,9 +123,12 @@ export default function Index(props: OsModalProps) {
className={classNames({
["ossa-action-btn"]: true,
["ossa-action-btn--confirm"]: true,
- ["ossa-action-btn--disabled"]: props.disableConfirmBtn,
})}
openType={confirmOpenType}
+ type='primary'
+ shape='round'
+ size={cancelText ? 'normal' : 'block'}
+ disabled={props.disableConfirmBtn}
{...openTypeRelatedProps}
onClick={(e) => onClickConfirmBtn(props)}
>
@@ -158,8 +164,10 @@ export default function Index(props: OsModalProps) {
className={classNames({
["ossa-action-btn"]: true,
["ossa-action-btn--cancel"]: true,
- ["ossa-action-btn--disabled"]: props.disableCancelBtn,
})}
+ shape='round'
+ size={confirmText ? 'normal' : 'block'}
+ disabled={props.disableCancelBtn}
onClick={(e) => onClickCancelBtn(props)}
>
{cancelText}
@@ -170,9 +178,12 @@ export default function Index(props: OsModalProps) {
className={classNames({
["ossa-action-btn"]: true,
["ossa-action-btn--confirm"]: true,
- ["ossa-action-btn--disabled"]: props.disableConfirmBtn,
})}
openType={confirmOpenType}
+ type='primary'
+ shape='round'
+ size={cancelText ? 'normal' : 'block'}
+ disabled={props.disableConfirmBtn}
{...openTypeRelatedProps}
onClick={(e) => onClickConfirmBtn(props)}
>
diff --git a/packages/ossa/src/components/tag/index.tsx b/packages/ossa/src/components/tag/index.tsx
index 58fd1c24..c6e92f80 100644
--- a/packages/ossa/src/components/tag/index.tsx
+++ b/packages/ossa/src/components/tag/index.tsx
@@ -11,6 +11,7 @@ function getStyleObj(props: OsTagProps): CSSProperties {
bgColor,
startBgColor,
endBgColor,
+ border,
} = props;
let _styleObj: CSSProperties = {};
@@ -29,6 +30,14 @@ function getStyleObj(props: OsTagProps): CSSProperties {
_styleObj["background"] = bgColor;
}
+ if (border) {
+ _styleObj["border"] = border;
+ }
+
+ if (color) {
+ _styleObj["color"] = color;
+ }
+
if (startBgColor && endBgColor) {
_styleObj[
"background-image"
@@ -46,6 +55,7 @@ function getClassObject(props: OsTagProps) {
bgColor,
startBgColor,
endBgColor,
+ size,
} = props;
@@ -53,6 +63,7 @@ function getClassObject(props: OsTagProps) {
[`ossa-tag--type-${type}`]: TagType[type],
[`ossa-tag--color-${color}`]: TagColor[color],
["ossa-tag--border-none"]: bgColor || startBgColor || endBgColor,
+ [`ossa-tag--size-${size}`]: size,
};
return classObject;
}
diff --git a/packages/ossa/src/style/_variable.scss b/packages/ossa/src/style/_variable.scss
index 4bfea084..19586c15 100644
--- a/packages/ossa/src/style/_variable.scss
+++ b/packages/ossa/src/style/_variable.scss
@@ -6,6 +6,9 @@
$--font-color:#666;
$--font-size:14px;
+/* Theme Color */
+$--color-primay:#AF7357 !default; // 主题色
+
/* Color */
$--color-red:#DD1A21 !default; // 品牌红
// $--color-logo:#FF142F !default; // 桌面图标亮红色
@@ -139,9 +142,9 @@ $--fill-color-button-default: transparent !default;
$--fill-color-button-default-active: $--fill-body !default;
$--fill-color-button-default-disabled: $--text-color-disabled !default;
-$--fill-color-button-primary: $--color-red !default;
+$--fill-color-button-primary: $--color-primay !default;
$--fill-color-button-primary-active: #C6171D !default;
-$--fill-color-button-primary-disabled: $--color-red !default;
+$--fill-color-button-primary-disabled: $--color-primay !default;
$--fill-color-button-special1: transparent !default;
@@ -155,15 +158,15 @@ $--border-color-default: $--text-color-secondary !default;
$--border-color-default-active: $--text-color-secondary !default;
$--border-color-default-disabled: transparent !default;
-$--border-color-primary: $--color-red !default;
+$--border-color-primary: $--color-primay !default;
$--border-color-primary-active: #A22929 !default;
-$--border-color-primary-disabled: $--color-red !default;
+$--border-color-primary-disabled: $--color-primay !default;
$--border-color-special1: $--color-border-base-1 !default;
-$--border-color-special1-active: $--color-red !default;
+$--border-color-special1-active: $--color-primay !default;
$--border-color-special2: $--text-color-disabled !default;
-$--border-color-special2-active: $--color-red !default;
+$--border-color-special2-active: $--color-primay !default;
$--border-color-icon: #979797 !default;
$--border-color-icon-active: #979797 !default;
diff --git a/packages/ossa/src/style/components/actionsheet.scss b/packages/ossa/src/style/components/actionsheet.scss
index 751eddff..aac932b4 100644
--- a/packages/ossa/src/style/components/actionsheet.scss
+++ b/packages/ossa/src/style/components/actionsheet.scss
@@ -21,6 +21,7 @@ $animation-duration: 200ms;
.ossa-actionsheet__container {
transform: translate(-50%, 0%);
+ background-color: #F4F4F4
}
}
@@ -34,9 +35,9 @@ $animation-duration: 200ms;
&__container {
@include absolute-center-bottom();
@include safe-area-inset-bottom();
-
width: 100%;
background: $--fill-default;
+ border-radius: 32px 32px 0px 0px;
transform: translate(-50%, 100%);
transition: transform 200ms ease-in;
}
@@ -47,7 +48,6 @@ $animation-duration: 200ms;
justify-content: flex-end;
align-items: center;
padding: 40px 24px;
- @include hairline-bottom();
}
&__title {
diff --git a/packages/ossa/src/style/components/modal.scss b/packages/ossa/src/style/components/modal.scss
index ffacb712..3a730abf 100644
--- a/packages/ossa/src/style/components/modal.scss
+++ b/packages/ossa/src/style/components/modal.scss
@@ -44,40 +44,38 @@ $modal-duration: 200ms;
}
&__title {
- font-size: 32px;
+ font-size: 36px;
+ font-weight: 500;
line-height: 48px;
display: block;
text-align: center;
}
&__header {
- padding-top: 48px;
- padding-bottom: 8px;
+ padding-top: 40px;
+ padding-left: 32px;
+ padding-right: 32px;
}
&__content {
- padding: 0 60px 48px;
+ padding: 32px;
color: $--text-color-secondary;
font-size: 28px;
font-weight: $--font-weight-default;
}
&__footer {
- @include hairline-top();
-
+ margin-bottom: 40px;
+ padding: 0 32px;
display: flex;
flex-direction: row;
align-items: center;
+ gap: 26px;
& > .ossa-action-btn {
@include line(1);
-
- color: $--text-color-base;
- background-color: $--fill-default;
border: none;
font-size: 28px;
- height: 104px;
- line-height: 104px;
text-align: center;
box-sizing: border-box;
flex: 1;
@@ -96,16 +94,12 @@ $modal-duration: 200ms;
border-radius: 0;
}
- &:active {
- background-color: $--fill-model-btns-active;
- }
-
&.ossa-action-btn--cancel {
color: $--text-color-base;
- }
-
- &.ossa-action-btn--confirm {
- color: $--color-red;
+ background: $--fill-body;
+ &::after {
+ border: none;
+ }
}
&.ossa-action-btn--disabled {
diff --git a/packages/ossa/src/style/components/tag.scss b/packages/ossa/src/style/components/tag.scss
index ddf8ca17..8959cfc7 100644
--- a/packages/ossa/src/style/components/tag.scss
+++ b/packages/ossa/src/style/components/tag.scss
@@ -3,12 +3,15 @@
.ossa-tag {
color: $--color-red;
background-color: $--fill-tag-default;
- font-size: 24px;
- line-height: 30px;
- height: 30px;
+ font-size: 20px;
+ height: 32px;
+ line-height: 1;
text-align: center;
- padding: 0 16px 0 16px;
- display: inline-block;
+ padding: 7px 10px;
+ border-radius: 4px;
+ display: inline-flex;
+ justify-content: center;
+ align-items: center;
box-sizing: border-box;
font-weight: $--font-weight-light;
@@ -43,9 +46,7 @@
&--type-radius {
position: relative;
- padding: 0 12px 0 12px;
- font-size: 20px;
- border-radius: 16px;
+ border-radius: 32px;
.ossa-border {
position: absolute;
@@ -55,7 +56,7 @@
height: 200%;
transform: scale(0.5);
border: 1px solid $--border-color-tag-default;
- border-radius: 30px;
+ border-radius: 12px;
transform-origin: 0 0;
}
@@ -75,11 +76,8 @@
&--type-primary {
background-color: $--fill-tag-primary;
color: $--text-color-base-inverse;
- border-radius: 0 0 4px 4px;
- font-size: 24px;
- line-height: 36px;
- height: 36px;
-
+ padding: 6px 10px;
+ font-size: 18px;
.ossa-tag__title {
transform: scale(1);
display: inline-block;
@@ -103,4 +101,16 @@
opacity: 0.8;
}
}
+
+ &--size-middle {
+ padding: 12px 24px;
+ font-size: 24px;
+ height: 58px;
+ }
+
+ &--size-large {
+ padding: 16px 48px;
+ font-size: 24px;
+ height: 66px;
+ }
}
diff --git a/packages/ossa/types/tag.d.ts b/packages/ossa/types/tag.d.ts
index 524ae99e..465d5770 100644
--- a/packages/ossa/types/tag.d.ts
+++ b/packages/ossa/types/tag.d.ts
@@ -42,6 +42,17 @@ interface TagProps extends OsComponent {
* @support type="normal"
*/
showArrow?: boolean;
+ /**
+ * tag尺寸大小
+ * @default "normal"
+ * @support type="normal"
+ */
+ size?: "middle" | "large";
+ /**
+ * 边框颜色
+ */
+ border?: string;
+
}
declare const Tag: ComponentClass;