- {gridGroup.map((item, i) => (
-
- {item.map((childItem, index) => (
- this.props.columnItem(childItem, i, index)
- ))}
+ let crossAxisGap = 0
+ if (this.props.crossAxisGap !== undefined) {
+ crossAxisGap = this.props.crossAxisGap
+ }
+ const childs: ReactElement[] = []
+
+ const layout: { i: string | number | null, x: number, y: number, w: number, h: number, static: boolean }[] = []
+ let column = 3
+ if (this.props.crossAxisCount !== undefined) {
+ column = this.props.crossAxisCount
+ }
+
+ let count = 0
+ React.Children.map(this.props.children, (child) => {
+ // 在这里对每个子元素进行操作
+ // 例如，可以给每个子元素添加一些属性或包装组件等
+ if (React.isValidElement(child)) {
+ const i = child.key
+ const y = Math.floor(count / column)
+ const x = count % column
+ const w = child.props.w
+ const h = child.props.h
+
+ layout.push({ i: i, x: x, y: y, w, h, static: true })
+ childs.push(
+
+ {child}
- ))}
-
+ )
+
+ count++
+ // console.log('count ' + count + ' column ' + column + ' x: ' + x + ' y: ' + y + ' w: ' + w + ' h: ' + h + ' child ' + typeof child + ' i: ' + child.key)
+ }
+ })
+ // console.log(' layout ' + layout)
+
+ return (
+
+ {childs}
+
+
)
}
}
diff --git a/packages/taro-components-mpharmony/src/components/index.ts b/packages/taro-components-mpharmony/src/components/index.ts
index c2802317e215..fdf44efd8510 100644
--- a/packages/taro-components-mpharmony/src/components/index.ts
+++ b/packages/taro-components-mpharmony/src/components/index.ts
@@ -2,4 +2,8 @@ export * from './block/block'
export * from './grid/grid'
export * from './label/label'
export * from './list/list'
+export * from './page-container/page-container'
export * from './root-portal/root-portal'
+export * from './sticky-header/sticky-header'
+export * from './sticky-section/sticky-section'
+
diff --git a/packages/taro-components-mpharmony/src/components/match-media/match-media.tsx b/packages/taro-components-mpharmony/src/components/match-media/match-media.tsx
new file mode 100644
index 000000000000..938eed513326
--- /dev/null
+++ b/packages/taro-components-mpharmony/src/components/match-media/match-media.tsx
@@ -0,0 +1,92 @@
+import React, { PureComponent, ReactNode } from 'react'
+
+interface Props {
+ children: ReactNode
+ minWidth?: number
+ maxWidth?: number
+ width?: number
+ minHeight?: number
+ maxHeight?: number
+ height?: number
+ orientation: string // 屏幕方向（landscape 或 portrait）
+
+}
+
+interface State {
+ isAllSuit: boolean
+}
+
+export class MatchMedia extends PureComponent
{
+ context: unknown
+ readonly props: Readonly
+ refs: { [p: string]: React.ReactInstance }
+
+ constructor (props) {
+ super(props)
+ this.state = {
+ isAllSuit: true
+ }
+ this.handleResize = this.handleResize.bind(this)
+ }
+
+ componentDidMount () {
+ window.addEventListener('resize', this.handleResize)
+ }
+
+ componentWillUnmount () {
+ window.removeEventListener('resize', this.handleResize)
+ }
+
+ handleResize () {
+
+
+ let isSuitMinWidth = true
+ let isSuitMaxWidth = true
+
+ let isSuitMinHeight = true
+ let isSuitMaxHeight = true
+
+ let isSuitWidth = true
+ let isSuitHeight = true
+
+ const screenWidth = window.innerWidth
+ const screenHeight = window.innerHeight
+
+ // console.log('screenWidth '+screenWidth+' screenHeight '+screenHeight)
+ if (this.props.minWidth !== null && this.props.minWidth !== undefined) {
+ isSuitMinWidth = screenWidth > this.props.minWidth
+ }
+
+ if (this.props.maxWidth !== null && this.props.maxWidth !== undefined) {
+ isSuitMaxWidth = screenWidth < this.props.maxWidth
+ }
+
+ if (this.props.minHeight !== null && this.props.minHeight !== undefined) {
+ isSuitMinHeight = screenHeight > this.props.minHeight
+ }
+
+ if (this.props.maxHeight !== null && this.props.maxHeight !== undefined) {
+ isSuitMaxHeight = screenHeight < this.props.maxHeight
+ }
+
+ if (this.props.width !== null&& this.props.width !== undefined) {
+ isSuitWidth = screenWidth === this.props.width
+ }
+
+ if (this.props.height !== null&& this.props.height !== undefined) {
+ isSuitHeight = screenHeight === this.props.height
+ }
+
+ const isAllSuit = isSuitMinWidth && isSuitMaxWidth && isSuitMinHeight && isSuitMaxHeight && isSuitWidth && isSuitHeight
+
+ // console.log('isSuitMinWidth ' + isSuitMinWidth + ' isSuitMaxWidth ' + isSuitMaxWidth + ' isSuitMinHeight ' + isSuitMinHeight + ' isSuitMaxHeight ' + isSuitMaxHeight + ' isSuitWidth ' + isSuitWidth + ' isSuitHeight ' + isSuitHeight)
+
+ this.setState({ isAllSuit: isAllSuit })
+ }
+
+ render (): React.ReactNode {
+ const { isAllSuit } = this.state
+ return (isAllSuit ? this.props.children : null)
+ }
+
+}
diff --git a/packages/taro-components-mpharmony/src/components/page-container/page-container.tsx b/packages/taro-components-mpharmony/src/components/page-container/page-container.tsx
new file mode 100644
index 000000000000..985ec411d8c5
--- /dev/null
+++ b/packages/taro-components-mpharmony/src/components/page-container/page-container.tsx
@@ -0,0 +1,112 @@
+import '../../style/components/page-container.scss'
+
+import classNames from 'classnames'
+import React, { PureComponent, ReactNode } from 'react'
+
+interface Props {
+ className?: string
+ children: ReactNode
+ show: boolean
+ duration?: number
+ zIndex?: number
+ overlay: boolean
+ position: 'top' | 'bottom' | 'right' | 'center'
+ round?: boolean
+ closeOnSlideDown?: boolean
+ overlayStyle?: string
+ customStyle?: string
+ bindbeforeenter?: (res) => void
+ bindenter?: (res) => void
+ bindafterenter?: (res) => void
+ bindbeforeleave?: (res) => void
+ bindleave?: (res) => void
+ bindafterleave?: (res) => void
+ bindclickoverlay?: (res) => void
+}
+
+export default class PageContainer extends PureComponent {
+ context: unknown
+ readonly props: Readonly
+ refs: { [p: string]: React.ReactInstance }
+
+ render (): React.ReactNode {
+ const rootClass = classNames(
+ 'at-float-layout',
+ {
+ 'at-float-layout--active': this.props.show,
+ },
+ this.props.className
+ )
+
+ let position_css = 'no_active_bottom'
+ if (this.props.show) {
+ if (this.props.position === 'bottom') {
+ position_css = 'active_bottom'
+ } else if (this.props.position === 'top') {
+ position_css = 'active_top'
+ } else if (this.props.position === 'right') {
+ position_css = 'active_right'
+ }
+ } else {
+ if (this.props.position === 'bottom') {
+ position_css = 'no_active_bottom'
+ } else if (this.props.position === 'top') {
+ position_css = 'no_active_top'
+ } else if (this.props.position === 'right') {
+ position_css = 'no_active_right'
+ }
+ }
+
+ const container = classNames(
+ 'at-float-layout__container',
+ 'layout',
+ {
+ 'container_has_corner': this.props.round,
+ [position_css]: false,
+ },
+ this.props.customStyle
+ )
+
+ let overlay_color = 'overlay_none'
+
+ if (this.props.overlay) {
+ overlay_color = 'overlay_none'
+ } else {
+ if (this.props.overlayStyle !== undefined) {
+ overlay_color = this.props.overlayStyle
+ } else {
+ overlay_color = 'overlay_black'
+ }
+ }
+
+ const overlay = classNames(
+ 'at-float-layout__overlay',
+ {
+ [overlay_color]: true,
+ },
+ )
+
+ let zIndex = 810
+ if (this.props.zIndex !== undefined) {
+ zIndex = this.props.zIndex
+ }
+
+ let transitionDuration = '500ms'
+ if (this.props.duration !== undefined) {
+ transitionDuration = this.props.duration + 'ms'
+ }
+
+ return (
+
+
+
+
+ {this.props.children}
+
+
+
+ )
+ }
+
+
+}
diff --git a/packages/taro-components-mpharmony/src/components/share-element/share-element.tsx b/packages/taro-components-mpharmony/src/components/share-element/share-element.tsx
new file mode 100644
index 000000000000..f5b4ba41b1c4
--- /dev/null
+++ b/packages/taro-components-mpharmony/src/components/share-element/share-element.tsx
@@ -0,0 +1,16 @@
+import React, { PureComponent, ReactNode } from 'react'
+
+interface Props {
+ children: ReactNode
+}
+
+export class ShareElement extends PureComponent
{
+ context: unknown
+ readonly props: Readonly
+ refs: { [p: string]: React.ReactInstance }
+
+ render (): React.ReactNode {
+ return this.props.children
+ }
+
+}
diff --git a/packages/taro-components-mpharmony/src/index.ts b/packages/taro-components-mpharmony/src/index.ts
index 36be6f523240..aa18b611a92f 100644
--- a/packages/taro-components-mpharmony/src/index.ts
+++ b/packages/taro-components-mpharmony/src/index.ts
@@ -35,13 +35,11 @@ export { LivePusher } from '@tarojs/components/lib/react'
export { Login } from '@tarojs/components/lib/react'
export { Lottie } from '@tarojs/components/lib/react'
export { Map } from '@tarojs/components/lib/react'
-export { MatchMedia } from '@tarojs/components/lib/react'
export { MovableArea, MovableView } from '@tarojs/components/lib/react'
export { NavigationBar } from '@tarojs/components/lib/react'
export { Navigator } from '@tarojs/components/lib/react'
export { OfficialAccount } from '@tarojs/components/lib/react'
export { OpenData } from '@tarojs/components/lib/react'
-export { PageContainer } from '@tarojs/components/lib/react'
export { PageMeta } from '@tarojs/components/lib/react'
export { Picker, PickerGroup } from '@tarojs/components/lib/react'
export { PickerView, PickerViewColumn } from '@tarojs/components/lib/react'
@@ -71,3 +69,5 @@ export * from './components/list/list'
export * from './components/root-portal/root-portal'
export * from './components/sticky-header/sticky-header'
export * from './components/sticky-section/sticky-section'
+export { MatchMedia } from './components/match-media/match-media'
+export { default as PageContainer } from './components/page-container/page-container'
diff --git a/packages/taro-components-mpharmony/src/style/components/grid.scss b/packages/taro-components-mpharmony/src/style/components/grid.scss
new file mode 100644
index 000000000000..c16c9001b201
--- /dev/null
+++ b/packages/taro-components-mpharmony/src/style/components/grid.scss
@@ -0,0 +1,182 @@
+.react-resizable {
+ position: relative;
+}
+.react-resizable-handle {
+ position: absolute;
+ width: 20px;
+ height: 20px;
+ background-repeat: no-repeat;
+ background-origin: content-box;
+ box-sizing: border-box;
+ background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA2IDYiIHN0eWxlPSJiYWNrZ3JvdW5kLWNvbG9yOiNmZmZmZmYwMCIgeD0iMHB4IiB5PSIwcHgiIHdpZHRoPSI2cHgiIGhlaWdodD0iNnB4Ij48ZyBvcGFjaXR5PSIwLjMwMiI+PHBhdGggZD0iTSA2IDYgTCAwIDYgTCAwIDQuMiBMIDQgNC4yIEwgNC4yIDQuMiBMIDQuMiAwIEwgNiAwIEwgNiA2IEwgNiA2IFoiIGZpbGw9IiMwMDAwMDAiLz48L2c+PC9zdmc+');
+ background-position: bottom right;
+ padding: 0 3px 3px 0;
+}
+.react-resizable-handle-sw {
+ bottom: 0;
+ left: 0;
+ cursor: sw-resize;
+ transform: rotate(90deg);
+}
+.react-resizable-handle-se {
+ bottom: 0;
+ right: 0;
+ cursor: se-resize;
+}
+.react-resizable-handle-nw {
+ top: 0;
+ left: 0;
+ cursor: nw-resize;
+ transform: rotate(180deg);
+}
+.react-resizable-handle-ne {
+ top: 0;
+ right: 0;
+ cursor: ne-resize;
+ transform: rotate(270deg);
+}
+.react-resizable-handle-w,
+.react-resizable-handle-e {
+ top: 50%;
+ margin-top: -10px;
+ cursor: ew-resize;
+}
+.react-resizable-handle-w {
+ left: 0;
+ transform: rotate(135deg);
+}
+.react-resizable-handle-e {
+ right: 0;
+ transform: rotate(315deg);
+}
+.react-resizable-handle-n,
+.react-resizable-handle-s {
+ left: 50%;
+ margin-left: -10px;
+ cursor: ns-resize;
+}
+.react-resizable-handle-n {
+ top: 0;
+ transform: rotate(225deg);
+}
+.react-resizable-handle-s {
+ bottom: 0;
+ transform: rotate(45deg);
+}
+
+
+.react-grid-layout {
+ position: relative;
+ transition: height 200ms ease;
+}
+.react-grid-item {
+ transition: all 200ms ease;
+ transition-property: left, top;
+}
+.react-grid-item img {
+ pointer-events: none;
+ user-select: none;
+}
+.react-grid-item.cssTransforms {
+ transition-property: transform;
+}
+.react-grid-item.resizing {
+ z-index: 1;
+ will-change: width, height;
+}
+
+.react-grid-item.react-draggable-dragging {
+ transition: none;
+ z-index: 3;
+ will-change: transform;
+}
+
+.react-grid-item.dropping {
+ visibility: hidden;
+}
+
+.react-grid-item.react-grid-placeholder {
+ background: red;
+ opacity: 0.2;
+ transition-duration: 100ms;
+ z-index: 2;
+ -webkit-user-select: none;
+ -moz-user-select: none;
+ -ms-user-select: none;
+ -o-user-select: none;
+ user-select: none;
+}
+
+.react-grid-item > .react-resizable-handle {
+ position: absolute;
+ width: 20px;
+ height: 20px;
+}
+
+.react-grid-item > .react-resizable-handle::after {
+ content: "";
+ position: absolute;
+ right: 3px;
+ bottom: 3px;
+ width: 5px;
+ height: 5px;
+ border-right: 2px solid rgba(0, 0, 0, 0.4);
+ border-bottom: 2px solid rgba(0, 0, 0, 0.4);
+}
+
+.react-resizable-hide > .react-resizable-handle {
+ display: none;
+}
+
+.react-grid-item > .react-resizable-handle.react-resizable-handle-sw {
+ bottom: 0;
+ left: 0;
+ cursor: sw-resize;
+ transform: rotate(90deg);
+}
+.react-grid-item > .react-resizable-handle.react-resizable-handle-se {
+ bottom: 0;
+ right: 0;
+ cursor: se-resize;
+}
+.react-grid-item > .react-resizable-handle.react-resizable-handle-nw {
+ top: 0;
+ left: 0;
+ cursor: nw-resize;
+ transform: rotate(180deg);
+}
+.react-grid-item > .react-resizable-handle.react-resizable-handle-ne {
+ top: 0;
+ right: 0;
+ cursor: ne-resize;
+ transform: rotate(270deg);
+}
+.react-grid-item > .react-resizable-handle.react-resizable-handle-w,
+.react-grid-item > .react-resizable-handle.react-resizable-handle-e {
+ top: 50%;
+ margin-top: -10px;
+ cursor: ew-resize;
+}
+.react-grid-item > .react-resizable-handle.react-resizable-handle-w {
+ left: 0;
+ transform: rotate(135deg);
+}
+.react-grid-item > .react-resizable-handle.react-resizable-handle-e {
+ right: 0;
+ transform: rotate(315deg);
+}
+.react-grid-item > .react-resizable-handle.react-resizable-handle-n,
+.react-grid-item > .react-resizable-handle.react-resizable-handle-s {
+ left: 50%;
+ margin-left: -10px;
+ cursor: ns-resize;
+}
+.react-grid-item > .react-resizable-handle.react-resizable-handle-n {
+ top: 0;
+ transform: rotate(225deg);
+}
+.react-grid-item > .react-resizable-handle.react-resizable-handle-s {
+ bottom: 0;
+ transform: rotate(45deg);
+}
+
diff --git a/packages/taro-components-mpharmony/src/style/components/page-container.scss b/packages/taro-components-mpharmony/src/style/components/page-container.scss
new file mode 100644
index 000000000000..c38cd0d1ee92
--- /dev/null
+++ b/packages/taro-components-mpharmony/src/style/components/page-container.scss
@@ -0,0 +1,126 @@
+$float-layout-timer: 300ms;
+$zindex-flot-layout: 810 !default;
+@import "../variables/default";
+
+.at-float-layout {
+ position: fixed;
+ width: 100%;
+ height: 100%;
+ top: 0;
+ left: 0;
+ visibility: hidden;
+ z-index: $zindex-flot-layout;
+ transition: visibility $float-layout-timer cubic-bezier(0.36, 0.66, 0.04, 1);
+
+ .container_has_corner {
+ border-top-left-radius: 20px;
+ border-top-right-radius: 20px;
+ }
+
+ /* elements */
+ &__overlay {
+ opacity: 0;
+ width: 100%;
+ height: 100%;
+
+ transition: opacity 150ms ease-in;
+ }
+
+ .overlay_none {
+
+ }
+
+ .overlay_black {
+ background: #0d0d0d;
+ }
+
+ .overlay_white {
+ background: #f4f4f4;
+ }
+
+ &__container {
+ position: absolute;
+ bottom: 0;
+ width: 100%;
+ min-height: $float-layout-height-min;
+ max-height: $float-layout-height-max;
+ background-color: $color-bg;
+ transform: translate3d(0, 100%, 0);
+ transition: transform $float-layout-timer cubic-bezier(0.36, 0.66, 0.04, 1);
+ }
+
+ .layout {
+ &-header {
+ position: relative;
+ padding: $spacing-v-md;
+ line-height: $line-height-zh;
+ background-color: $float-layout-header-bg-color;
+
+ &__title {
+ color: $float-layout-title-color;
+ font-size: $float-layout-title-font-size;
+ display: block;
+ padding-right: 80px;
+ }
+
+ &__btn-close {
+ position: absolute;
+ padding: $spacing-h-sm;
+ top: 50%;
+ right: $spacing-v-md;
+ width: 40px;
+ height: 100%;
+ line-height: 1;
+ transform: translate(0, -50%);
+
+ &::before,
+ &::after {
+ content: '';
+ position: absolute;
+ top: 50%;
+ left: 50%;
+ display: inline-block;
+ width: 36px;
+ height: 2PX;
+ border-radius: 1PX;
+ background: $float-layout-btn-color;
+ }
+
+ &::before {
+ transform: translate3d(-50%, -50%, 0) rotate(45deg);
+ }
+
+ &::after {
+ transform: translate3d(-50%, -50%, 0) rotate(-45deg);
+ }
+ }
+ }
+
+ &-body {
+ font-size: $font-size-base;
+ padding: $spacing-v-md;
+ max-height: 828px;
+ min-height: 514px;
+
+ &__content {
+ max-height: 798px;
+ min-height: 484px;
+ }
+ }
+ }
+
+ /* modifiers */
+ &--active {
+ visibility: visible;
+
+ .at-float-layout__overlay {
+ opacity: 0.8;
+ }
+
+ .at-float-layout__container {
+ transform: translate3d(0, 0, 0);
+ }
+ }
+}
+
+
diff --git a/packages/taro-components-mpharmony/src/style/mixins/index.scss b/packages/taro-components-mpharmony/src/style/mixins/index.scss
new file mode 100644
index 000000000000..a68b7f60a339
--- /dev/null
+++ b/packages/taro-components-mpharmony/src/style/mixins/index.scss
@@ -0,0 +1,18 @@
+/**
+ * Mixins
+ */
+
+/* library */
+@import './libs/absolute-center';
+@import './libs/clearfix';
+@import './libs/line';
+@import './libs/overlay';
+@import './libs/shade';
+@import './libs/tint';
+@import './libs/flex';
+@import './libs/border';
+@import './libs/active';
+@import './libs/disabled';
+@import './libs/placeholder';
+@import './libs/alignhack';
+@import './libs/hairline';
diff --git a/packages/taro-components-mpharmony/src/style/mixins/libs/absolute-center.scss b/packages/taro-components-mpharmony/src/style/mixins/libs/absolute-center.scss
new file mode 100644
index 000000000000..1efdc156c764
--- /dev/null
+++ b/packages/taro-components-mpharmony/src/style/mixins/libs/absolute-center.scss
@@ -0,0 +1,9 @@
+/**
+ * 元素居中定位
+ */
+@mixin absolute-center($pos: absolute) {
+ position: $pos;
+ top: 50%;
+ left: 50%;
+ transform: translate(-50%, -50%);
+}
diff --git a/packages/taro-components-mpharmony/src/style/mixins/libs/active.scss b/packages/taro-components-mpharmony/src/style/mixins/libs/active.scss
new file mode 100644
index 000000000000..c3222bfd6179
--- /dev/null
+++ b/packages/taro-components-mpharmony/src/style/mixins/libs/active.scss
@@ -0,0 +1,10 @@
+/**
+ * 点击态
+ */
+@mixin active {
+ transition: background-color 0.3s;
+
+ &:active {
+ background-color: $color-grey-5;
+ }
+}
diff --git a/packages/taro-components-mpharmony/src/style/mixins/libs/alignhack.scss b/packages/taro-components-mpharmony/src/style/mixins/libs/alignhack.scss
new file mode 100644
index 000000000000..c557f2617bdb
--- /dev/null
+++ b/packages/taro-components-mpharmony/src/style/mixins/libs/alignhack.scss
@@ -0,0 +1,11 @@
+// 修复小元素文本垂直居中
+@mixin alignhack($position: before, $margintop: 1px) {
+ &::#{$position} {
+ content: '';
+ display: inline-block;
+ vertical-align: middle;
+ width: 0;
+ height: 100%;
+ margin-top: $margintop;
+ }
+}
diff --git a/packages/taro-components-mpharmony/src/style/mixins/libs/border.scss b/packages/taro-components-mpharmony/src/style/mixins/libs/border.scss
new file mode 100644
index 000000000000..976b472bd984
--- /dev/null
+++ b/packages/taro-components-mpharmony/src/style/mixins/libs/border.scss
@@ -0,0 +1,46 @@
+/**
+ * 默认主题下 $color-border-light
+ */
+
+@mixin border-thin(
+ $color: $color-border-light,
+ $style: solid,
+ $directions: top bottom right left,
+ $width: 1px
+) {
+ @each $value in $directions {
+ border-#{$value}: $width $color $style;
+ }
+}
+
+@mixin border-thin-top(
+ $color: $color-border-light,
+ $style: solid,
+ $width: 1px
+) {
+ @include border-thin($color, $style, top, $width);
+}
+
+@mixin border-thin-left(
+ $color: $color-border-light,
+ $style: solid,
+ $width: 1px
+) {
+ @include border-thin($color, $style, left, $width);
+}
+
+@mixin border-thin-right(
+ $color: $color-border-light,
+ $style: solid,
+ $width: 1px
+) {
+ @include border-thin($color, $style, right, $width);
+}
+
+@mixin border-thin-bottom(
+ $color: $color-border-light,
+ $style: solid,
+ $width: 1px
+) {
+ @include border-thin($color, $style, bottom, $width);
+}
diff --git a/packages/taro-components-mpharmony/src/style/mixins/libs/clearfix.scss b/packages/taro-components-mpharmony/src/style/mixins/libs/clearfix.scss
new file mode 100644
index 000000000000..cc099a5b2cd6
--- /dev/null
+++ b/packages/taro-components-mpharmony/src/style/mixins/libs/clearfix.scss
@@ -0,0 +1,21 @@
+/**
+ * @example scss
+ *
+ * .element {
+ * @include clearfix;
+ * }
+ *
+ * // CSS Output
+ * .element::after {
+ * clear: both;
+ * content: '';
+ * display: block;
+ * }
+ */
+@mixin clearfix {
+ &::after {
+ clear: both;
+ content: '';
+ display: block;
+ }
+}
diff --git a/packages/taro-components-mpharmony/src/style/mixins/libs/disabled.scss b/packages/taro-components-mpharmony/src/style/mixins/libs/disabled.scss
new file mode 100644
index 000000000000..9c4c123ac433
--- /dev/null
+++ b/packages/taro-components-mpharmony/src/style/mixins/libs/disabled.scss
@@ -0,0 +1,6 @@
+/**
+ * 禁止态
+ */
+@mixin disabled {
+ color: #bbb;
+}
diff --git a/packages/taro-components-mpharmony/src/style/mixins/libs/flex.scss b/packages/taro-components-mpharmony/src/style/mixins/libs/flex.scss
new file mode 100644
index 000000000000..576204a12b87
--- /dev/null
+++ b/packages/taro-components-mpharmony/src/style/mixins/libs/flex.scss
@@ -0,0 +1,50 @@
+@mixin display-flex {
+ display: flex;
+}
+
+@mixin flex-wrap($value: nowrap) {
+ flex-wrap: $value;
+}
+
+@mixin align-items($value: stretch) {
+ align-items: $value;
+ @if $value == flex-start {
+ -webkit-box-align: start;
+ } @else if $value == flex-end {
+ -webkit-box-align: end;
+ } @else {
+ -webkit-box-align: $value;
+ }
+}
+
+@mixin align-content($value: flex-start) {
+ align-content: $value;
+}
+
+@mixin justify-content($value: flex-start) {
+ justify-content: $value;
+ @if $value == flex-start {
+ -webkit-box-pack: start;
+ } @else if $value == flex-end {
+ -webkit-box-pack: end;
+ } @else if $value == space-between {
+ -webkit-box-pack: justify;
+ } @else {
+ -webkit-box-pack: $value;
+ }
+}
+
+/* Flex Item */
+@mixin flex($fg: 1, $fs: null, $fb: null) {
+ flex: $fg $fs $fb;
+ -webkit-box-flex: $fg;
+}
+
+@mixin flex-order($n) {
+ order: $n;
+ -webkit-box-ordinal-group: $n;
+}
+
+@mixin align-self($value: auto) {
+ align-self: $value;
+}
diff --git a/packages/taro-components-mpharmony/src/style/mixins/libs/hairline.scss b/packages/taro-components-mpharmony/src/style/mixins/libs/hairline.scss
new file mode 100644
index 000000000000..84f269fe655f
--- /dev/null
+++ b/packages/taro-components-mpharmony/src/style/mixins/libs/hairline.scss
@@ -0,0 +1,190 @@
+/**
+ * 默认主题下 $color-border-light
+ */
+
+@mixin hairline-common() {
+ content: '';
+ position: absolute;
+ transform-origin: center;
+ box-sizing: border-box;
+ pointer-events: none;
+}
+
+@mixin hairline-base(
+ $color: $color-border-light,
+ $style: solid
+) {
+ @include hairline-common();
+
+ top: -50%;
+ left: -50%;
+ right: -50%;
+ bottom: -50%;
+ border: 0 $style $color;
+ transform: scale(0.5);
+}
+
+@mixin hairline-surround(
+ $color: $color-border-light,
+ $style: solid,
+ $width: 1PX
+) {
+ position: relative;
+
+ &::after {
+ @include hairline-base($color, $style);
+
+ border-width: $width;
+ }
+}
+
+@mixin hairline-top(
+ $color: $color-border-light,
+ $style: solid,
+ $width: 1PX
+) {
+ position: relative;
+
+ &::after {
+ @include hairline-base($color, $style);
+
+ border-top-width: $width;
+ }
+}
+
+@mixin hairline-bottom(
+ $color: $color-border-light,
+ $style: solid,
+ $width: 1PX
+) {
+ position: relative;
+
+ &::after {
+ @include hairline-base($color, $style);
+
+ border-bottom-width: $width;
+ }
+}
+
+@mixin hairline-left(
+ $color: $color-border-light,
+ $style: solid,
+ $width: 1PX
+) {
+ position: relative;
+
+ &::after {
+ @include hairline-base($color, $style);
+
+ border-left-width: $width;
+ }
+}
+
+@mixin hairline-right(
+ $color: $color-border-light,
+ $style: solid,
+ $width: 1PX
+) {
+ position: relative;
+
+ &::after {
+ @include hairline-base($color, $style);
+
+ border-right-width: $width;
+ }
+}
+
+@mixin hairline-top-bottom(
+ $color: $color-border-light,
+ $style: solid,
+ $width: 1PX
+) {
+ position: relative;
+
+ &::after {
+ @include hairline-base($color, $style);
+
+ border-top-width: $width;
+ border-bottom-width: $width;
+ }
+}
+
+@mixin hairline-bottom-relative(
+ $color: $color-border-light,
+ $style: solid,
+ $width: 1PX,
+ $left: 0
+) {
+ position: relative;
+
+ &::after {
+ @include hairline-common();
+
+ top: auto;
+ left: $left;
+ right: 0;
+ bottom: 0;
+ transform: scaleY(0.5);
+ border-bottom: $width $style $color;
+ }
+}
+
+@mixin hairline-top-relative(
+ $color: $color-border-light,
+ $style: solid,
+ $width: 1PX,
+ $left: 0
+) {
+ position: relative;
+
+ &::before {
+ @include hairline-common();
+
+ top: 0;
+ left: $left;
+ right: 0;
+ bottom: auto;
+ transform: scaleY(0.5);
+ border-top: $width $style $color;
+ }
+}
+
+@mixin hairline-left-relative(
+ $color: $color-border-light,
+ $style: solid,
+ $width: 1PX,
+ $top: 0
+) {
+ position: relative;
+
+ &::after {
+ @include hairline-common();
+
+ top: $top;
+ left: 0;
+ right: auto;
+ bottom: 0;
+ transform: scaleX(0.5);
+ border-left: $width $style $color;
+ }
+}
+
+@mixin hairline-right-relative(
+ $color: $color-border-light,
+ $style: solid,
+ $width: 1PX,
+ $top: 0
+) {
+ position: relative;
+
+ &::after {
+ @include hairline-common();
+
+ top: $top;
+ left: auto;
+ right: 0;
+ bottom: 0;
+ transform: scaleX(0.5);
+ border-right: $width $style $color;
+ }
+}
diff --git a/packages/taro-components-mpharmony/src/style/mixins/libs/line.scss b/packages/taro-components-mpharmony/src/style/mixins/libs/line.scss
new file mode 100644
index 000000000000..1bd982420ead
--- /dev/null
+++ b/packages/taro-components-mpharmony/src/style/mixins/libs/line.scss
@@ -0,0 +1,14 @@
+@mixin line($num: 1) {
+ overflow: hidden;
+ text-overflow: ellipsis;
+
+ @if ($num == 1) {
+ white-space: nowrap;
+ } @else {
+ display: -webkit-box;
+ -webkit-line-clamp: $num;
+
+ /* autoprefixer: off */
+ -webkit-box-orient: vertical;
+ }
+}
diff --git a/packages/taro-components-mpharmony/src/style/mixins/libs/overlay.scss b/packages/taro-components-mpharmony/src/style/mixins/libs/overlay.scss
new file mode 100644
index 000000000000..2cdbbbc91ee6
--- /dev/null
+++ b/packages/taro-components-mpharmony/src/style/mixins/libs/overlay.scss
@@ -0,0 +1,11 @@
+/**
+ * 通用的遮罩
+ */
+@mixin overlay {
+ top: 0;
+ left: 0;
+ width: 100%;
+ height: 100%;
+ position: absolute;
+ background-color: rgba($color: #000, $alpha: 0.3);
+}
diff --git a/packages/taro-components-mpharmony/src/style/mixins/libs/placeholder.scss b/packages/taro-components-mpharmony/src/style/mixins/libs/placeholder.scss
new file mode 100644
index 000000000000..6f6f5bd865a6
--- /dev/null
+++ b/packages/taro-components-mpharmony/src/style/mixins/libs/placeholder.scss
@@ -0,0 +1,12 @@
+/**
+ * 设置placeholder 颜色
+ */
+@mixin placeholder($color: $color-grey-3) {
+ @at-root .placeholder {
+ color: $color;
+ }
+
+ &::placeholder {
+ color: $color;
+ }
+}
diff --git a/packages/taro-components-mpharmony/src/style/mixins/libs/shade.scss b/packages/taro-components-mpharmony/src/style/mixins/libs/shade.scss
new file mode 100644
index 000000000000..b9bc71bb5873
--- /dev/null
+++ b/packages/taro-components-mpharmony/src/style/mixins/libs/shade.scss
@@ -0,0 +1,23 @@
+/**
+ * Mixes a color with black. It's different from darken()
+ *
+ * @param {color} $color
+ * @param {number (percentage)} $percent [The amount of black to be mixed in]
+ * @return {color}
+ *
+ * @example
+ * .element {
+ * background-color: shade(#ffbb52, 60%);
+ * }
+ *
+ * // CSS Output
+ * .element {
+ * background-color: #664a20;
+ * }
+ */
+@function shade(
+ $color,
+ $percent
+) {
+ @return mix(#000, $color, $percent);
+}
diff --git a/packages/taro-components-mpharmony/src/style/mixins/libs/tint.scss b/packages/taro-components-mpharmony/src/style/mixins/libs/tint.scss
new file mode 100644
index 000000000000..ca201ea94706
--- /dev/null
+++ b/packages/taro-components-mpharmony/src/style/mixins/libs/tint.scss
@@ -0,0 +1,23 @@
+/**
+ * Mixes a color with white. It's different from lighten()
+ *
+ * @param {color} $color
+ * @param {number (percentage)} $percent [The amout of white to be mixed in]
+ * @return {color}
+ *
+ * @example
+ * .element {
+ * background-color: tint(#6ecaa6 , 40%);
+ * }
+ *
+ * // CSS Output
+ * .element {
+ * background-color: #a8dfc9;
+ * }
+ */
+@function tint(
+ $color,
+ $percent
+) {
+ @return mix(#FFF, $color, $percent);
+}
diff --git a/packages/taro-components-mpharmony/src/style/variables/default.scss b/packages/taro-components-mpharmony/src/style/variables/default.scss
new file mode 100644
index 000000000000..091bbe8bcdc0
--- /dev/null
+++ b/packages/taro-components-mpharmony/src/style/variables/default.scss
@@ -0,0 +1,457 @@
+/**
+ * Default variables
+ */
+
+@import '../mixins/libs/tint';
+
+$hd: 2 !default; // 基本单位
+
+/* The Color of O2Team Brand */
+$color-brand: #6190E8 !default;
+$color-brand-light: #78A4F4 !default;
+$color-brand-dark: #346FC2 !default;
+
+/* Color */
+$color-success: #13CE66 !default;
+$color-error: #FF4949 !default;
+$color-warning: #FFC82C !default;
+$color-info: #78A4FA !default;
+
+/* Color Palette */
+$color-black-0: #000 !default;
+$color-black-1: #333 !default;
+$color-black-2: #7F7F7F !default;
+$color-black-3: #B2B2B2 !default;
+
+$color-grey-0: #333 !default;
+$color-grey-1: #666 !default;
+$color-grey-2: #999 !default;
+$color-grey-3: #CCC !default;
+$color-grey-4: #E5E5E5 !default;
+$color-grey-5: #F0F0F0 !default;
+$color-grey-6: #F7F7F7 !default;
+
+$color-white: #FFF !default;
+
+/* Text Color */
+$color-text-base: #333 !default; // 文字的基本色
+$color-text-base-inverse: #FFF !default; // 反色
+$color-text-secondary: #36D57D !default; // 辅助色
+$color-text-placeholder: #C9C9C9 !default;
+$color-text-disabled: #CCC !default;
+$color-text-title: #2C405A !default; // 文章标题
+$color-text-paragraph: #3F536E !default; // 文章段落
+
+/* Link */
+$color-link: #6190E8 !default;
+$color-link-hover: #79A1EB !default;
+$color-link-active: #4F7DE2 !default;
+$color-link-disabled: #BFBFBF !default;
+
+/* 背景色 */
+$color-bg: #FFF !default;
+$color-bg-base: #FAFBFC !default;
+$color-bg-light: #ECF5FD !default;
+$color-bg-lighter: tint($color-bg-light, 50%) !default;
+$color-bg-grey: #F7F7F7 !default;
+
+/* 边框颜色 */
+$color-border-base: #C5D9E8 !default;
+$color-border-split: tint($color-border-base, 20%) !default; // 分割线
+$color-border-light: tint($color-border-base, 30%) !default;
+$color-border-lighter: tint($color-border-base, 50%) !default;
+$color-border-lightest: tint($color-border-base, 80%) !default;
+$color-border-grey: #CCC !default;
+
+/* 图标颜色 */
+$color-icon-base: #CCC !default;
+
+/* Border Radius */
+$border-radius-sm: 2px * $hd !default;
+$border-radius-md: 4px * $hd !default;
+$border-radius-lg: 6px * $hd !default;
+$border-radius-circle: 50% !default;
+
+/* 透明度 */
+$opacity-active: 0.6 !default; // Button 等组件点击态额透明度
+$opacity-disabled: 0.3 !default; // Button 等组件禁用态的透明度
+
+/* Font */
+$font-size-xs: 10px * $hd !default; // 非常用字号，用于标签
+$font-size-sm: 12px * $hd !default; // 用于辅助信息
+$font-size-base: 14px * $hd !default; // 常用字号
+$font-size-lg: 16px * $hd !default; // 常规标题
+$font-size-xl: 18px * $hd !default; // 大标题
+$font-size-xxl: 20px * $hd !default; // 用于大号的数字
+
+/* Line Height */
+$line-height-base: 1 !default; // 单行
+$line-height-en: 1.3 !default; // 英文多行
+$line-height-zh: 1.5 !default; // 中文多行
+
+/* 水平间距 */
+$spacing-h-sm: 5px * $hd !default;
+$spacing-h-md: 8px * $hd !default;
+$spacing-h-lg: 12px * $hd !default;
+$spacing-h-xl: 16px * $hd !default;
+
+/* 垂直间距 */
+$spacing-v-xs: 3px * $hd !default;
+$spacing-v-sm: 6px * $hd !default;
+$spacing-v-md: 9px * $hd !default;
+$spacing-v-lg: 12px * $hd !default;
+$spacing-v-xl: 15px * $hd !default;
+
+/* 图标尺寸 */
+$icon-size-sm: 18px * $hd !default;
+$icon-size-md: 22px * $hd !default;
+$icon-size-lg: 36px * $hd !default;
+
+/* z-index */
+$zindex-divider: 100 !default;
+$zindex-steps: 500 !default;
+$zindex-tab: 600 !default;
+$zindex-form: 700 !default;
+$zindex-nav: 800 !default;
+$zindex-search-bar: 800 !default;
+$zindex-indexes: 805 !default;
+$zindex-flot-layout: 810 !default;
+$zindex-drawer: 900 !default;
+$zindex-modal: 1000 !default;
+$zindex-action-sheet: 1010 !default;
+$zindex-picker: 1010 !default;
+$zindex-curtain: 1080 !default;
+$zindex-message: 1090 !default;
+$zindex-toast: 1090 !default;
+
+/* timing function */
+$timing-func: cubic-bezier(0.36, 0.66, 0.04, 1) !default;
+
+/**
+* CSS cubic-bezier timing functions
+* http://bourbon.io/docs/#timing-functions
+*/
+$ease-in-quad: cubic-bezier(0.550, 0.085, 0.680, 0.530) !default;
+$ease-in-cubic: cubic-bezier(0.550, 0.055, 0.675, 0.190) !default;
+$ease-in-quart: cubic-bezier(0.895, 0.030, 0.685, 0.220) !default;
+$ease-in-quint: cubic-bezier(0.755, 0.050, 0.855, 0.060) !default;
+$ease-in-sine: cubic-bezier(0.470, 0.000, 0.745, 0.715) !default;
+$ease-in-expo: cubic-bezier(0.950, 0.050, 0.795, 0.035) !default;
+$ease-in-circ: cubic-bezier(0.600, 0.040, 0.980, 0.335) !default;
+$ease-in-back: cubic-bezier(0.600, -0.280, 0.735, 0.045) !default;
+
+$ease-out-quad: cubic-bezier(0.250, 0.460, 0.450, 0.940) !default;
+$ease-out-cubic: cubic-bezier(0.215, 0.610, 0.355, 1.000) !default;
+$ease-out-quart: cubic-bezier(0.165, 0.840, 0.440, 1.000) !default;
+$ease-out-quint: cubic-bezier(0.230, 1.000, 0.320, 1.000) !default;
+$ease-out-sine: cubic-bezier(0.390, 0.575, 0.565, 1.000) !default;
+$ease-out-expo: cubic-bezier(0.190, 1.000, 0.220, 1.000) !default;
+$ease-out-circ: cubic-bezier(0.075, 0.820, 0.165, 1.000) !default;
+$ease-out-back: cubic-bezier(0.175, 0.885, 0.320, 1.275) !default;
+
+$ease-in-out-quad: cubic-bezier(0.455, 0.030, 0.515, 0.955) !default;
+$ease-in-out-cubic: cubic-bezier(0.645, 0.045, 0.355, 1.000) !default;
+$ease-in-out-quart: cubic-bezier(0.770, 0.000, 0.175, 1.000) !default;
+$ease-in-out-quint: cubic-bezier(0.860, 0.000, 0.070, 1.000) !default;
+$ease-in-out-sine: cubic-bezier(0.445, 0.050, 0.550, 0.950) !default;
+$ease-in-out-expo: cubic-bezier(1.000, 0.000, 0.000, 1.000) !default;
+$ease-in-out-circ: cubic-bezier(0.785, 0.135, 0.150, 0.860) !default;
+$ease-in-out-back: cubic-bezier(0.680, -0.550, 0.265, 1.550) !default;
+
+/**
+ * 组件变量
+ */
+
+/* Accordion */
+$at-accordion-color-arrow: $color-grey-3 !default;
+
+/* Activity Indicator */
+$at-activity-indicator-font-size: 28px !default;
+$at-activity-indicator-font-color: $color-grey-2 !default;
+
+/* Avatar */
+$at-avatar-color: $color-white !default;
+$at-avatar-bg-color: $color-grey-4 !default;
+$at-avatar-size-sm: 80px !default;
+$at-avatar-size-md: 100px !default;
+$at-avatar-size-lg: 120px !default;
+
+/* Badge */
+$at-badge-color: $color-white !default;
+$at-badge-bg-color: $color-error !default;
+$at-badge-bg: $at-badge-bg-color !default;
+$at-badge-font-size: $font-size-xs !default;
+$at-badge-dot-size: 20px !default;
+
+/* Button */
+$at-button-height: 92px !default;
+$at-button-height-sm: 60px !default;
+$at-button-color: $color-brand !default;
+$at-button-border-color-primary: $color-brand !default;
+$at-button-border-color-secondary: $color-brand !default;
+$at-button-bg: $at-button-color !default;
+
+/* Float Button */
+$at-fab-size: 56px * $hd !default;
+$at-fab-size-sm: 40px * $hd !default;
+$at-fab-icon-size: 24px * $hd !default;
+$at-fab-bg-color: $color-brand;
+$at-fab-bg-color-active: $color-brand-dark;
+$at-fab-box-shadow:
+ 0 6px 10px -2px rgba(0, 0, 0, 0.2),
+ 0 12px 20px 0 rgba(0, 0, 0, 0.14),
+ 0 2px 36px 0 rgba(0, 0, 0, 0.12) !default;
+$at-fab-box-shadow-active:
+ 0 14px 16px -8px rgba(0, 0, 0, 0.2),
+ 0 24px 34px 4px rgba(0, 0, 0, 0.14),
+ 0 10px 44px 8px rgba(0, 0, 0, 0.12) !default;
+
+/* Calendar */
+$at-calendar-day-size: 72px !default;
+$at-calendar-mark-size: 8px !default;
+$at-calendar-header-color: #B8BFC6 !default;
+$at-calendar-main-color: $color-brand !default;
+$at-calendar-day-color: #7C86A2 !default;
+
+/* Card */
+$at-card-thumb-size: 32px !default;
+$at-card-icon-size: 32px !default;
+$at-card-title-color: $color-text-title !default;
+$at-card-extra-color: $color-text-title !default;
+$at-card-info-color: $color-text-base !default;
+$at-card-note-color: $color-grey-2 !default;
+
+/* Checkbox */
+$at-checkbox-circle-size: 40px !default;
+$at-checkbox-icon-size: $font-size-sm !default;
+$at-checkbox-icon-color: $color-brand !default;
+$at-checkbox-icon-color-checked: $color-white !default;
+$at-checkbox-title-color: $color-text-base !default;
+$at-checkbox-title-font-size: $font-size-lg !default;
+$at-checkbox-desc-font-size: $font-size-sm !default;
+$at-checkbox-desc-color: $color-grey-2 !default;
+
+/* Countdown */
+$at-countdown-font-size: $font-size-lg !default;
+$at-countdown-num-color: $color-text-base !default;
+$at-countdown-card-num-color: #FF4949 !default;
+$at-countdown-card-num-bg-color: $color-white !default;
+
+/* Curtain */
+$at-curtain-btn-color: $color-white !default;
+
+/* Divider */
+$at-divider-height: 112px;
+$at-divider-content-color: $color-brand !default;
+$at-divider-font-size: $font-size-lg !default;
+$at-divider-line-color: $color-grey-3 !default;
+
+/* Drawer */
+$at-drawer-content-width: 460px !default;
+
+/* FloatLayout */
+$float-layout-height-min: 600px !default;
+$float-layout-height-max: 950px !default;
+$float-layout-header-bg-color: $color-bg-grey !default;
+$float-layout-title-color: $color-text-base !default;
+$float-layout-title-font-size: $font-size-lg !default;
+$float-layout-btn-color: $color-grey-3 !default;
+
+/* Grid */
+$at-grid-text-color: $color-text-base !default;
+$at-grid-font-size: $font-size-lg !default;
+$at-grid-img-size: 80px !default;
+$at-gird-img-size-sm: 50px !default;
+
+/* ImagePicker */
+$at-image-picker-btn-add-color: $color-grey-3 !default;
+$at-image-picker-btn-remove-color: $color-white !default;
+$at-image-picker-btn-remove-bg-color: $color-grey-2 !default;
+
+/* Indexes */
+$at-indexes-nav-color: $color-link !default;
+$at-indexes-nav-font-size: $font-size-sm !default;
+$at-indexes-title-color: $color-black-2 !default;
+$at-indexes-title-font-size: $font-size-sm !default;
+$at-indexes-title-bg-color: $color-grey-6 !default;
+
+/* InputNumber */
+$at-input-number-text-color: $color-text-base !default;
+$at-input-number-font-size: $font-size-base !default;
+$at-input-number-font-size-lg: $font-size-xl !default;
+$at-input-number-btn-color: $color-brand !default;
+$at-input-number-btn-size: 30px !default;
+$at-input-number-btn-size-lg: 36px !default;
+$at-input-number-width-min: 80px !default;
+$at-input-number-width-min-lg: 120px !default;
+
+/* Input */
+$at-input-label-color: $color-text-base !default;
+$at-input-text-color: $color-text-base !default;
+$at-input-font-size: $font-size-lg !default;
+$at-input-placeholder-color: $color-grey-3 !default;
+
+/* List */
+$at-list-thumb-size: 56px !default;
+$at-list-arrow-color: $color-grey-3 !default;
+$at-list-text-color: $color-text-base !default;
+$at-list-content-color: $color-grey-2 !default;
+$at-list-extra-color: $color-grey-2 !default;
+$at-list-extra-width: 235px !default;
+
+/* LoadMore */
+$at-load-more-height: 80PX !default;
+$at-load-more-tips-color: $color-grey-1 !default;
+$at-load-more-tips-size: $font-size-lg !default;
+
+/* Loading */
+$at-loading-size: 36px !default;
+$at-loading-color: $color-brand !default;
+
+/* Message */
+$at-message-color: $color-white !default;
+$at-message-font-size: $font-size-base !default;
+$at-message-bg-color: $color-info !default;
+
+/* Modal */
+$at-modal-width: 540px !default;
+$at-modal-header-text-color: $color-text-base !default;
+$at-modal-content-text-color: $color-text-base !default;
+$at-modal-btn-default-color: $color-text-base !default;
+$at-modal-btn-confirm-color: $color-brand !default;
+$at-modal-bg-color: $color-white !default;
+
+/* NavBar */
+$at-nav-bar-title-color: $color-text-base !default;
+$at-nav-bar-link-color: $color-brand !default;
+
+/* NoticeBar */
+$at-noticebar-text-color: #DE8C17 !default;
+$at-noticebar-bg-color: #FCF6ED !default;
+$at-noticebar-font-size: $font-size-sm !default;
+$at-noticebar-icon-size: 30px !default;
+$at-noticebar-btn-close-size: 32px !default;
+$at-noticebar-btn-close-color: $color-grey-3 !default;
+
+/* Pagination */
+$at-pagination-margin: 40px !default;
+$at-pagination-num-color: $color-text-base !default;
+$at-pagination-num-font-size: $font-size-base !default;
+$at-pagination-current-num-color: $color-brand !default;
+$at-pagination-icon-color: $color-text-base !default;
+$at-pagination-icon-font-size: 32px !default;
+
+/* Progress */
+$at-progress-height: 16px !default;
+$at-progress-text-size: $font-size-sm !default;
+$at-progress-icon-size: $font-size-xl !default;
+$at-progress-inner-bg-color: $color-grey-6 !default;
+$at-progress-bar-bg-color: $color-brand-light !default;
+$at-progress-bar-bg-color-active: $color-white !default;
+
+/* Radio */
+$at-radio-title-color: $color-text-base !default;
+$at-radio-title-size: $font-size-lg !default;
+$at-radio-desc-color: $color-grey-2 !default;
+$at-radio-desc-size: $font-size-sm !default;
+$at-radio-check-color: $color-brand !default;
+
+/* Range */
+$at-range-slider-size: 28PX !default;
+$at-range-rail-height: 2PX !default;
+$at-range-rail-bg-color: #E9E9E9 !default;
+$at-range-track-bg-color: $color-brand !default;
+$at-range-slider-color: $color-white !default;
+$at-range-slider-shadow: 0 0 4PX 0 rgba(0, 0, 0, 0.2) !default;
+
+/* Rate */
+$at-rate-icon-size: 20PX !default;
+$at-rate-star-color: #ECECEC !default;
+$at-rate-star-color-on: #FFCA3E !default;
+
+/* SearchBar */
+$at-search-bar-btn-color: $color-white !default;
+$at-search-bar-btn-bg-color: $color-brand !default;
+
+/* SegmentedControl */
+$at-segmented-control-color: $color-brand !default;
+$at-segmented-control-color-active: $color-white !default;
+$at-segmented-control-bg-color: transparent !default;
+$at-segmented-control-font-size: $font-size-base !default;
+
+/* Slider */
+$at-slider-text-color: $color-grey-2 !default;
+$at-slider-text-size: $font-size-base !default;
+
+/* Steps */
+$at-steps-circle-size: 56px !default;
+$at-steps-icon-size: $font-size-sm !default;
+$at-steps-color: $color-white !default;
+$at-steps-color-active: $color-grey-2 !default;
+$at-steps-bg-color: $color-grey-4 !default;
+$at-steps-bg-color-active: $color-brand !default;
+$at-steps-line-color: $color-grey-3 !default;
+$at-steps-title-color: $color-black-0 !default;
+$at-steps-title-size: $font-size-lg !default;
+$at-steps-desc-color: $color-grey-3 !default;
+$at-steps-desc-size: $font-size-sm !default;
+
+/* SwipeAction */
+$at-swipe-action-color: $color-white !default;
+$at-swipe-action-font-size: $font-size-base !default;
+$at-swipe-action-bg-color: $color-white !default;
+$at-swipe-action-option-bg-color: $color-grey-2 !default;
+
+/* Switch */
+$at-switch-title-color: $color-text-base !default;
+$at-switch-title-size: $font-size-base !default;
+
+/* TabBar */
+$at-tab-bar-bg-color: $color-white !default;
+$at-tab-bar-color: $color-text-base !default;
+$at-tab-bar-color-active: $color-brand !default;
+$at-tab-bar-font-size: $font-size-base !default;
+$at-tab-bar-icon-color: $color-grey-0 !default;
+$at-tab-bar-icon-font-size: 48px !default;
+$at-tab-bar-icon-image-size: 50px !default;
+
+/* Tabs */
+$at-tabs-color: $color-text-base !default;
+$at-tabs-color-active: $color-brand !default;
+$at-tabs-font-size: $font-size-base !default;
+$at-tabs-line-height: 1PX !default;
+$at-tabs-underline-color: $color-grey-5 !default;
+$at-tabs-bg-color: $color-bg !default;
+
+/* Tag */
+$at-tag-height: 60px !default;
+$at-tag-height-sm: 40px !default;
+$at-tag-color: $color-grey-1 !default;
+$at-tag-color-primary: $color-grey-1 !default;
+$at-tag-color-active: $color-brand-light !default;
+$at-tag-color-primary-active: $color-text-base-inverse !default;
+$at-tag-font-size: $font-size-base !default;
+$at-tag-font-size-sm: $font-size-xs !default;
+$at-tag-bg-color: $color-bg-grey !default;
+$at-tag-bg-color-primary: $color-bg-grey !default;
+$at-tag-bg-color-active: $color-white !default;
+$at-tag-bg-color-primary-active: $at-tag-color-active !default;
+$at-tag-border-color: $at-tag-bg-color !default;
+$at-tag-border-color-primary: $at-tag-bg-color !default;
+$at-tag-border-color-active: $at-tag-color-active !default;
+
+/* Textarea */
+$at-textarea-font-size: $font-size-lg !default;
+$at-textarea-tips-color: $color-text-placeholder !default;
+$at-textarea-tips-size: $font-size-base !default;
+
+/* Timeline */
+$at-timeline-offset-left: 40px !default;
+$at-timeline-title-color: $color-grey-0 !default;
+$at-timeline-title-font-size: $font-size-base !default;
+$at-timeline-desc-color: $color-grey-1 !default;
+$at-timeline-desc-font-size: $font-size-sm !default;
+$at-timeline-dot-size: 24px !default;
+$at-timeline-dot-color: $color-bg !default;
+$at-timeline-dot-border-color: $color-brand-light !default;
+$at-timeline-line-color: $color-border-lighter !default;
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index dbb6621ca21f..c1730fa3ed99 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -2240,6 +2240,18 @@ importers:
react-dom:
specifier: ^18.0.0
version: registry.npmjs.org/react-dom@18.2.0(react@18.2.0)
+ react-draggable:
+ specifier: ^4.4.5
+ version: registry.npmjs.org/react-draggable@4.4.5(react-dom@18.2.0)(react@18.2.0)
+ react-grid-layout:
+ specifier: ^1.3.4
+ version: registry.npmjs.org/react-grid-layout@1.3.4(react-dom@18.2.0)(react@18.2.0)
+ react-resizable:
+ specifier: ^3.0.4
+ version: registry.npmjs.org/react-resizable@3.0.5(react-dom@18.2.0)(react@18.2.0)
+ react-responsive:
+ specifier: ^9.0.2
+ version: registry.npmjs.org/react-responsive@9.0.2(react@18.2.0)
swiper:
specifier: 6.8.0
version: registry.npmjs.org/swiper@6.8.0
@@ -23021,6 +23033,13 @@ packages:
process-nextick-args: registry.npmjs.org/process-nextick-args@2.0.1
readable-stream: registry.npmjs.org/readable-stream@2.3.8
+ registry.npmjs.org/clsx@1.2.1:
+ resolution: {integrity: sha512-EcR6r5a8bj6pu3ycsa/E/cKVGuTgZJZdsyUYHOksG/UHIiKfjxzRxYJpyVBwYaQeOvghal9fcc4PidlgzugAQg==, registry: https://registry.yarnpkg.com/, tarball: https://registry.npmjs.org/clsx/-/clsx-1.2.1.tgz}
+ name: clsx
+ version: 1.2.1
+ engines: {node: '>=6'}
+ dev: false
+
registry.npmjs.org/co@4.6.0:
resolution: {integrity: sha512-QVb0dM5HvG+uaxitm8wONl7jltx8dqhfU33DcqtOZcLSVIKSDDLDi7+0LbAKiyI8hD9u42m2YxXSkMGWThaecQ==, registry: https://registry.yarnpkg.com/, tarball: https://registry.npmjs.org/co/-/co-4.6.0.tgz}
name: co
@@ -31273,6 +31292,12 @@ packages:
hasBin: true
dev: true
+ registry.npmjs.org/hyphenate-style-name@1.0.4:
+ resolution: {integrity: sha512-ygGZLjmXfPHj+ZWh6LwbC37l43MhfztxetbFCoYTM2VjkIUpeHgSNn7QIyVFj7YQ1Wl9Cbw5sholVJPzWvC2MQ==, registry: https://registry.yarnpkg.com/, tarball: https://registry.npmjs.org/hyphenate-style-name/-/hyphenate-style-name-1.0.4.tgz}
+ name: hyphenate-style-name
+ version: 1.0.4
+ dev: false
+
registry.npmjs.org/iconv-lite@0.4.24:
resolution: {integrity: sha512-v3MXnZAcvnywkTUEZomIActle7RXXeedOR31wwl7VlyoXO4Qi9arvSenNQWne1TcRwhCL1HwLI21bEqdpj8/rA==, registry: https://registry.yarnpkg.com/, tarball: https://registry.npmjs.org/iconv-lite/-/iconv-lite-0.4.24.tgz}
name: iconv-lite
@@ -35697,6 +35722,12 @@ packages:
name: lodash.debounce
version: 4.0.8
+ registry.npmjs.org/lodash.isequal@4.5.0:
+ resolution: {integrity: sha512-pDo3lu8Jhfjqls6GkMgpahsF9kCyayhgykjyLMNFTKWrpVdAQtYyB4muAMWozBB4ig/dtWAmsMxLEI8wuz+DYQ==, registry: https://registry.yarnpkg.com/, tarball: https://registry.npmjs.org/lodash.isequal/-/lodash.isequal-4.5.0.tgz}
+ name: lodash.isequal
+ version: 4.5.0
+ dev: false
+
registry.npmjs.org/lodash.ismatch@4.4.0:
resolution: {integrity: sha512-fPMfXjGQEV9Xsq/8MTSgUf255gawYRbjwMyDbcvDhXgV7enSZA0hynz6vMPnpAb5iONEzBHBPsT+0zes5Z301g==, registry: https://registry.yarnpkg.com/, tarball: https://registry.npmjs.org/lodash.ismatch/-/lodash.ismatch-4.4.0.tgz}
name: lodash.ismatch
@@ -36025,6 +36056,14 @@ packages:
dev: false
optional: true
+ registry.npmjs.org/matchmediaquery@0.3.1:
+ resolution: {integrity: sha512-Hlk20WQHRIm9EE9luN1kjRjYXAQToHOIAHPJn9buxBwuhfTHoKUcX+lXBbxc85DVQfXYbEQ4HcwQdd128E3qHQ==, registry: https://registry.yarnpkg.com/, tarball: https://registry.npmjs.org/matchmediaquery/-/matchmediaquery-0.3.1.tgz}
+ name: matchmediaquery
+ version: 0.3.1
+ dependencies:
+ css-mediaquery: registry.npmjs.org/css-mediaquery@0.1.2
+ dev: false
+
registry.npmjs.org/math-random@1.0.4:
resolution: {integrity: sha512-rUxjysqif/BZQH2yhd5Aaq7vXMSx9NdEsQcyA07uEzIvxgI7zIr33gGsh+RU0/XjmQpCW7RsVof1vlkvQVCK5A==, registry: https://registry.yarnpkg.com/, tarball: https://registry.npmjs.org/math-random/-/math-random-1.0.4.tgz}
name: math-random
@@ -42290,6 +42329,21 @@ packages:
react: registry.npmjs.org/react@18.2.0
scheduler: registry.npmjs.org/scheduler@0.23.0
+ registry.npmjs.org/react-draggable@4.4.5(react-dom@18.2.0)(react@18.2.0):
+ resolution: {integrity: sha512-OMHzJdyJbYTZo4uQE393fHcqqPYsEtkjfMgvCHr6rejT+Ezn4OZbNyGH50vv+SunC1RMvwOTSWkEODQLzw1M9g==, registry: https://registry.yarnpkg.com/, tarball: https://registry.npmjs.org/react-draggable/-/react-draggable-4.4.5.tgz}
+ id: registry.npmjs.org/react-draggable/4.4.5
+ name: react-draggable
+ version: 4.4.5
+ peerDependencies:
+ react: '>= 16.3.0'
+ react-dom: '>= 16.3.0'
+ dependencies:
+ clsx: registry.npmjs.org/clsx@1.2.1
+ prop-types: registry.npmjs.org/prop-types@15.8.1
+ react: registry.npmjs.org/react@18.2.0
+ react-dom: registry.npmjs.org/react-dom@18.2.0(react@18.2.0)
+ dev: false
+
registry.npmjs.org/react-error-overlay@6.0.11:
resolution: {integrity: sha512-/6UZ2qgEyH2aqzYZgQPxEnz33NJ2gNsnHA2o5+o4wW9bLM/JYQitNP9xPhsXwC08hMMovfGe/8retsdDsczPRg==, registry: https://registry.yarnpkg.com/, tarball: https://registry.npmjs.org/react-error-overlay/-/react-error-overlay-6.0.11.tgz}
name: react-error-overlay
@@ -42308,6 +42362,24 @@ packages:
react: registry.npmjs.org/react@18.1.0
dev: false
+ registry.npmjs.org/react-grid-layout@1.3.4(react-dom@18.2.0)(react@18.2.0):
+ resolution: {integrity: sha512-sB3rNhorW77HUdOjB4JkelZTdJGQKuXLl3gNg+BI8gJkTScspL1myfZzW/EM0dLEn+1eH+xW+wNqk0oIM9o7cw==, registry: https://registry.yarnpkg.com/, tarball: https://registry.npmjs.org/react-grid-layout/-/react-grid-layout-1.3.4.tgz}
+ id: registry.npmjs.org/react-grid-layout/1.3.4
+ name: react-grid-layout
+ version: 1.3.4
+ peerDependencies:
+ react: '>= 16.3.0'
+ react-dom: '>= 16.3.0'
+ dependencies:
+ clsx: registry.npmjs.org/clsx@1.2.1
+ lodash.isequal: registry.npmjs.org/lodash.isequal@4.5.0
+ prop-types: registry.npmjs.org/prop-types@15.8.1
+ react: registry.npmjs.org/react@18.2.0
+ react-dom: registry.npmjs.org/react-dom@18.2.0(react@18.2.0)
+ react-draggable: registry.npmjs.org/react-draggable@4.4.5(react-dom@18.2.0)(react@18.2.0)
+ react-resizable: registry.npmjs.org/react-resizable@3.0.5(react-dom@18.2.0)(react@18.2.0)
+ dev: false
+
registry.npmjs.org/react-is@16.13.1:
resolution: {integrity: sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==, registry: https://registry.yarnpkg.com/, tarball: https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz}
name: react-is
@@ -42776,6 +42848,37 @@ packages:
version: 0.9.0
engines: {node: '>=0.10.0'}
+ registry.npmjs.org/react-resizable@3.0.5(react-dom@18.2.0)(react@18.2.0):
+ resolution: {integrity: sha512-vKpeHhI5OZvYn82kXOs1bC8aOXktGU5AmKAgaZS4F5JPburCtbmDPqE7Pzp+1kN4+Wb81LlF33VpGwWwtXem+w==, registry: https://registry.yarnpkg.com/, tarball: https://registry.npmjs.org/react-resizable/-/react-resizable-3.0.5.tgz}
+ id: registry.npmjs.org/react-resizable/3.0.5
+ name: react-resizable
+ version: 3.0.5
+ peerDependencies:
+ react: '>= 16.3'
+ dependencies:
+ prop-types: registry.npmjs.org/prop-types@15.8.1
+ react: registry.npmjs.org/react@18.2.0
+ react-draggable: registry.npmjs.org/react-draggable@4.4.5(react-dom@18.2.0)(react@18.2.0)
+ transitivePeerDependencies:
+ - react-dom
+ dev: false
+
+ registry.npmjs.org/react-responsive@9.0.2(react@18.2.0):
+ resolution: {integrity: sha512-+4CCab7z8G8glgJoRjAwocsgsv6VA2w7JPxFWHRc7kvz8mec1/K5LutNC2MG28Mn8mu6+bu04XZxHv5gyfT7xQ==, registry: https://registry.yarnpkg.com/, tarball: https://registry.npmjs.org/react-responsive/-/react-responsive-9.0.2.tgz}
+ id: registry.npmjs.org/react-responsive/9.0.2
+ name: react-responsive
+ version: 9.0.2
+ engines: {node: '>=0.10'}
+ peerDependencies:
+ react: '>=16.8.0'
+ dependencies:
+ hyphenate-style-name: registry.npmjs.org/hyphenate-style-name@1.0.4
+ matchmediaquery: registry.npmjs.org/matchmediaquery@0.3.1
+ prop-types: registry.npmjs.org/prop-types@15.8.1
+ react: registry.npmjs.org/react@18.2.0
+ shallow-equal: registry.npmjs.org/shallow-equal@1.2.1
+ dev: false
+
registry.npmjs.org/react-shallow-renderer@16.15.0(react@18.1.0):
resolution: {integrity: sha512-oScf2FqQ9LFVQgA73vr86xl2NaOIX73rh+YFqcOp68CWj56tSfgtGKrEbyhCj0rSijyG9M1CYprTh39fBi5hzA==, registry: https://registry.yarnpkg.com/, tarball: https://registry.npmjs.org/react-shallow-renderer/-/react-shallow-renderer-16.15.0.tgz}
id: registry.npmjs.org/react-shallow-renderer/16.15.0
@@ -44989,6 +45092,12 @@ packages:
dependencies:
kind-of: registry.npmjs.org/kind-of@6.0.3
+ registry.npmjs.org/shallow-equal@1.2.1:
+ resolution: {integrity: sha512-S4vJDjHHMBaiZuT9NPb616CSmLf618jawtv3sufLl6ivK8WocjAo58cXwbRV1cgqxH0Qbv+iUt6m05eqEa2IRA==, registry: https://registry.yarnpkg.com/, tarball: https://registry.npmjs.org/shallow-equal/-/shallow-equal-1.2.1.tgz}
+ name: shallow-equal
+ version: 1.2.1
+ dev: false
+
registry.npmjs.org/shallowequal@1.1.0:
resolution: {integrity: sha512-y0m1JoUZSlPAjXVtPPW70aZWfIL/dSP7AFkRnniLCrK/8MDKog3TySTBmckD+RObVxH0v4Tox67+F14PdED2oQ==, registry: https://registry.yarnpkg.com/, tarball: https://registry.npmjs.org/shallowequal/-/shallowequal-1.1.0.tgz}
name: shallowequal