1、应用切换组件（app-switch）
typescript
{
"app-switch-background-color": "#333E4C",
"app-switch-border-color": "var(--oio-border-color)",
"app-switch-app-name-overflow": "unset",
"app-switch-app-name-margin-right": "8px",
"app-switch-app-name-caret-down-display": "unset",
"app-switch-logo-color": "var(--oio-primary-color)",
"app-switch-designer-background-color": "var(--oio-primary-color)",
"app-switch-designer-logo-color": "var(--oio-primary-color)"
}1
2
3
4
5
6
7
8
9
10
2
3
4
5
6
7
8
9
10
2、按钮（button）
typescript
{
"button-background": "var(--oio-background)",
"button-border-width": "var(--oio-border-width)",
"button-border-style": "var(--oio-border-style)",
"button-border-color": "var(--oio-border-color)",
"button-border-radius": "var(--oio-border-radius)",
"button-outline": "none",
"button-shadow": "none",
"button-text-color": "var(--oio-text-color)",
"button-background-active": "var(--oio-button-background)",
"button-border-width-active": "var(--oio-button-border-width)",
"button-border-style-active": "var(--oio-button-border-style)",
"button-border-color-active": "var(--oio-button-border-color)",
"button-border-radius-active": "var(--oio-button-border-radius)",
"button-outline-active": "var(--oio-button-outline)",
"button-shadow-active": "var(--oio-button-shadow)",
"button-text-color-active": "var(--oio-primary-color-active)",
"button-background-focus": "var(--oio-button-background)",
"button-border-width-focus": "var(--oio-button-border-width)",
"button-border-style-focus": "var(--oio-button-border-style)",
"button-border-color-focus": "var(--oio-button-border-color)",
"button-border-radius-focus": "var(--oio-button-border-radius)",
"button-outline-focus": "var(--oio-button-outline)",
"button-shadow-focus": "var(--oio-button-shadow)",
"button-text-color-focus": "var(--oio-primary-color-focus)",
"button-background-hover": "var(--oio-button-background)",
"button-border-width-hover": "var(--oio-button-border-width)",
"button-border-style-hover": "var(--oio-button-border-style)",
"button-border-color-hover": "var(--oio-button-border-color)",
"button-border-radius-hover": "var(--oio-button-border-radius)",
"button-outline-hover": "var(--oio-button-outline)",
"button-shadow-hover": "var(--oio-button-shadow)",
"button-text-color-hover": "var(--oio-primary-color-hover)",
"button-background-visited": "var(--oio-button-background)",
"button-border-width-visited": "var(--oio-button-border-width)",
"button-border-style-visited": "var(--oio-button-border-style)",
"button-border-color-visited": "var(--oio-button-border-color)",
"button-border-radius-visited": "var(--oio-button-border-radius)",
"button-outline-visited": "var(--oio-button-outline)",
"button-shadow-visited": "var(--oio-button-shadow)",
"button-text-color-visited": "var(--oio-button-text-color)",
"button-default-danger-background": "var(--oio-button-background)",
"button-default-danger-border-width": "var(--oio-button-border-width)",
"button-default-danger-border-style": "var(--oio-button-border-style)",
"button-default-danger-border-color": "var(--oio-error-color)",
"button-default-danger-border-radius": "var(--oio-button-border-radius)",
"button-default-danger-outline": "var(--oio-error-color-outline)",
"button-default-danger-shadow": "none",
"button-default-danger-text-color": "var(--oio-error-color)",
"button-default-danger-background-active": "var(--oio-button-default-danger-background)",
"button-default-danger-border-width-active": "var(--oio-button-default-danger-border-width)",
"button-default-danger-border-style-active": "var(--oio-button-default-danger-border-style)",
"button-default-danger-border-color-active": "var(--oio-error-color-active)",
"button-default-danger-border-radius-active": "var(--oio-button-default-danger-border-radius)",
"button-default-danger-outline-active": "var(--oio-button-default-danger-outline)",
"button-default-danger-shadow-active": "var(--oio-button-default-danger-shadow)",
"button-default-danger-text-color-active": "var(--oio-error-color-active)",
"button-default-danger-background-focus": "var(--oio-button-default-danger-background)",
"button-default-danger-border-width-focus": "var(--oio-button-default-danger-border-width)",
"button-default-danger-border-style-focus": "var(--oio-button-default-danger-border-style)",
"button-default-danger-border-color-focus": "var(--oio-error-color-focus)",
"button-default-danger-border-radius-focus": "var(--oio-button-default-danger-border-radius)",
"button-default-danger-outline-focus": "var(--oio-button-default-danger-outline)",
"button-default-danger-shadow-focus": "var(--oio-button-default-danger-shadow)",
"button-default-danger-text-color-focus": "var(--oio-error-color-focus)",
"button-default-danger-background-hover": "var(--oio-button-default-danger-background)",
"button-default-danger-border-width-hover": "var(--oio-button-default-danger-border-width)",
"button-default-danger-border-style-hover": "var(--oio-button-default-danger-border-style)",
"button-default-danger-border-color-hover": "var(--oio-error-color-hover)",
"button-default-danger-border-radius-hover": "var(--oio-button-default-danger-border-radius)",
"button-default-danger-outline-hover": "var(--oio-button-default-danger-outline)",
"button-default-danger-shadow-hover": "var(--oio-button-default-danger-shadow)",
"button-default-danger-text-color-hover": "var(--oio-error-color-hover)",
"button-default-danger-background-visited": "var(--oio-button-default-danger-background)",
"button-default-danger-border-width-visited": "var(--oio-button-default-danger-border-width)",
"button-default-danger-border-style-visited": "var(--oio-button-default-danger-border-style)",
"button-default-danger-border-color-visited": "var(--oio-button-default-danger-border-color)",
"button-default-danger-border-radius-visited": "var(--oio-button-default-danger-border-radius)",
"button-default-danger-outline-visited": "var(--oio-button-default-danger-outline)",
"button-default-danger-shadow-visited": "var(--oio-button-default-danger-shadow)",
"button-default-danger-text-color-visited": "var(--oio-button-default-danger-text-color)",
"button-default-info-background": "var(--oio-button-background)",
"button-default-info-border-width": "var(--oio-button-border-width)",
"button-default-info-border-style": "var(--oio-button-border-style)",
"button-default-info-border-color": "var(--oio-info-color)",
"button-default-info-border-radius": "var(--oio-button-border-radius)",
"button-default-info-outline": "none",
"button-default-info-shadow": "none",
"button-default-info-text-color": "var(--oio-info-color)",
"button-default-info-background-active": "var(--oio-button-default-info-background)",
"button-default-info-border-width-active": "var(--oio-button-default-info-border-width)",
"button-default-info-border-style-active": "var(--oio-button-default-info-border-style)",
"button-default-info-border-color-active": "var(--oio-info-color-active)",
"button-default-info-border-radius-active": "var(--oio-button-default-info-border-radius)",
"button-default-info-outline-active": "var(--oio-button-default-info-outline)",
"button-default-info-shadow-active": "var(--oio-button-default-info-shadow)",
"button-default-info-text-color-active": "var(--oio-info-color-active)",
"button-default-info-background-focus": "var(--oio-button-default-info-background)",
"button-default-info-border-width-focus": "var(--oio-button-default-info-border-width)",
"button-default-info-border-style-focus": "var(--oio-button-default-info-border-style)",
"button-default-info-border-color-focus": "var(--oio-info-color-focus)",
"button-default-info-border-radius-focus": "var(--oio-button-default-info-border-radius)",
"button-default-info-outline-focus": "var(--oio-button-default-info-outline)",
"button-default-info-shadow-focus": "var(--oio-button-default-info-shadow)",
"button-default-info-text-color-focus": "var(--oio-info-color-focus)",
"button-default-info-background-hover": "var(--oio-button-default-info-background)",
"button-default-info-border-width-hover": "var(--oio-button-default-info-border-width)",
"button-default-info-border-style-hover": "var(--oio-button-default-info-border-style)",
"button-default-info-border-color-hover": "var(--oio-info-color-hover)",
"button-default-info-border-radius-hover": "var(--oio-button-default-info-border-radius)",
"button-default-info-outline-hover": "var(--oio-button-default-info-outline)",
"button-default-info-shadow-hover": "var(--oio-button-default-info-shadow)",
"button-default-info-text-color-hover": "var(--oio-info-color-hover)",
"button-default-info-background-visited": "var(--oio-button-default-info-background)",
"button-default-info-border-width-visited": "var(--oio-button-default-info-border-width)",
"button-default-info-border-style-visited": "var(--oio-button-default-info-border-style)",
"button-default-info-border-color-visited": "var(--oio-button-default-info-border-color)",
"button-default-info-border-radius-visited": "var(--oio-button-default-info-border-radius)",
"button-default-info-outline-visited": "var(--oio-button-default-info-outline)",
"button-default-info-shadow-visited": "var(--oio-button-default-info-shadow)",
"button-default-info-text-color-visited": "var(--oio-button-default-info-text-color)",
"button-default-success-background": "var(--oio-button-background)",
"button-default-success-border-width": "var(--oio-button-border-width)",
"button-default-success-border-style": "var(--oio-button-border-style)",
"button-default-success-border-color": "var(--oio-success-color)",
"button-default-success-border-radius": "var(--oio-button-border-radius)",
"button-default-success-outline": "none",
"button-default-success-shadow": "none",
"button-default-success-text-color": "var(--oio-success-color)",
"button-default-success-background-active": "var(--oio-button-default-success-background)",
"button-default-success-border-width-active": "var(--oio-button-default-success-border-width)",
"button-default-success-border-style-active": "var(--oio-button-default-success-border-style)",
"button-default-success-border-color-active": "var(--oio-success-color-active)",
"button-default-success-border-radius-active": "var(--oio-button-default-success-border-radius)",
"button-default-success-outline-active": "var(--oio-button-default-success-outline)",
"button-default-success-shadow-active": "var(--oio-button-default-success-shadow)",
"button-default-success-text-color-active": "var(--oio-success-color-active)",
"button-default-success-background-focus": "var(--oio-button-default-success-background)",
"button-default-success-border-width-focus": "var(--oio-button-default-success-border-width)",
"button-default-success-border-style-focus": "var(--oio-button-default-success-border-style)",
"button-default-success-border-color-focus": "var(--oio-success-color-focus)",
"button-default-success-border-radius-focus": "var(--oio-button-default-success-border-radius)",
"button-default-success-outline-focus": "var(--oio-button-default-success-outline)",
"button-default-success-shadow-focus": "var(--oio-button-default-success-shadow)",
"button-default-success-text-color-focus": "var(--oio-success-color-focus)",
"button-default-success-background-hover": "var(--oio-button-default-success-background)",
"button-default-success-border-width-hover": "var(--oio-button-default-success-border-width)",
"button-default-success-border-style-hover": "var(--oio-button-default-success-border-style)",
"button-default-success-border-color-hover": "var(--oio-success-color-hover)",
"button-default-success-border-radius-hover": "var(--oio-button-default-success-border-radius)",
"button-default-success-outline-hover": "var(--oio-button-default-success-outline)",
"button-default-success-shadow-hover": "var(--oio-button-default-success-shadow)",
"button-default-success-text-color-hover": "var(--oio-success-color-hover)",
"button-default-success-background-visited": "var(--oio-button-default-success-background)",
"button-default-success-border-width-visited": "var(--oio-button-default-success-border-width)",
"button-default-success-border-style-visited": "var(--oio-button-default-success-border-style)",
"button-default-success-border-color-visited": "var(--oio-button-default-success-border-color)",
"button-default-success-border-radius-visited": "var(--oio-button-default-success-border-radius)",
"button-default-success-outline-visited": "var(--oio-button-default-success-outline)",
"button-default-success-shadow-visited": "var(--oio-button-default-success-shadow)",
"button-default-success-text-color-visited": "var(--oio-button-default-success-text-color)",
"button-default-warning-background": "var(--oio-button-background)",
"button-default-warning-border-width": "var(--oio-button-border-width)",
"button-default-warning-border-style": "var(--oio-button-border-style)",
"button-default-warning-border-color": "var(--oio-warning-color)",
"button-default-warning-border-radius": "var(--oio-button-border-radius)",
"button-default-warning-outline": "none",
"button-default-warning-shadow": "none",
"button-default-warning-text-color": "var(--oio-warning-color)",
"button-default-warning-background-active": "var(--oio-button-default-warning-background)",
"button-default-warning-border-width-active": "var(--oio-button-default-warning-border-width)",
"button-default-warning-border-style-active": "var(--oio-button-default-warning-border-style)",
"button-default-warning-border-color-active": "var(--oio-warning-color-active)",
"button-default-warning-border-radius-active": "var(--oio-button-default-warning-border-radius)",
"button-default-warning-outline-active": "var(--oio-button-default-warning-outline)",
"button-default-warning-shadow-active": "var(--oio-button-default-warning-shadow)",
"button-default-warning-text-color-active": "var(--oio-warning-color-active)",
"button-default-warning-background-focus": "var(--oio-button-default-warning-background)",
"button-default-warning-border-width-focus": "var(--oio-button-default-warning-border-width)",
"button-default-warning-border-style-focus": "var(--oio-button-default-warning-border-style)",
"button-default-warning-border-color-focus": "var(--oio-warning-color-focus)",
"button-default-warning-border-radius-focus": "var(--oio-button-default-warning-border-radius)",
"button-default-warning-outline-focus": "var(--oio-button-default-warning-outline)",
"button-default-warning-shadow-focus": "var(--oio-button-default-warning-shadow)",
"button-default-warning-text-color-focus": "var(--oio-warning-color-focus)",
"button-default-warning-background-hover": "var(--oio-button-default-warning-background)",
"button-default-warning-border-width-hover": "var(--oio-button-default-warning-border-width)",
"button-default-warning-border-style-hover": "var(--oio-button-default-warning-border-style)",
"button-default-warning-border-color-hover": "var(--oio-warning-color-hover)",
"button-default-warning-border-radius-hover": "var(--oio-button-default-warning-border-radius)",
"button-default-warning-outline-hover": "var(--oio-button-default-warning-outline)",
"button-default-warning-shadow-hover": "var(--oio-button-default-warning-shadow)",
"button-default-warning-text-color-hover": "var(--oio-warning-color-hover)",
"button-default-warning-background-visited": "var(--oio-button-default-warning-background)",
"button-default-warning-border-width-visited": "var(--oio-button-default-warning-border-width)",
"button-default-warning-border-style-visited": "var(--oio-button-default-warning-border-style)",
"button-default-warning-border-color-visited": "var(--oio-button-default-warning-border-color)",
"button-default-warning-border-radius-visited": "var(--oio-button-default-warning-border-radius)",
"button-default-warning-outline-visited": "var(--oio-button-default-warning-outline)",
"button-default-warning-shadow-visited": "var(--oio-button-default-warning-shadow)",
"button-default-warning-text-color-visited": "var(--oio-button-default-warning-text-color)",
"button-primary-background": "var(--oio-primary-color)",
"button-primary-border-width": "var(--oio-border-width)",
"button-primary-border-style": "var(--oio-border-style)",
"button-primary-border-color": "var(--oio-primary-color)",
"button-primary-border-radius": "var(--oio-border-radius)",
"button-primary-outline": "var(--oio-primary-color-outline)",
"button-primary-shadow": "none",
"button-primary-text-color": "#ffffff",
"button-primary-background-active": "var(--oio-primary-color-active)",
"button-primary-border-width-active": "var(--oio-button-primary-border-width)",
"button-primary-border-style-active": "var(--oio-button-primary-border-style)",
"button-primary-border-color-active": "var(--oio-primary-color-active)",
"button-primary-border-radius-active": "var(--oio-button-primary-border-radius)",
"button-primary-outline-active": "var(--oio-button-primary-outline)",
"button-primary-shadow-active": "var(--oio-button-primary-shadow)",
"button-primary-text-color-active": "var(--oio-button-primary-text-color)",
"button-primary-background-focus": "var(--oio-primary-color-focus)",
"button-primary-border-width-focus": "var(--oio-button-primary-border-width)",
"button-primary-border-style-focus": "var(--oio-button-primary-border-style)",
"button-primary-border-color-focus": "var(--oio-primary-color-focus)",
"button-primary-border-radius-focus": "var(--oio-button-primary-border-radius)",
"button-primary-outline-focus": "var(--oio-button-primary-outline)",
"button-primary-shadow-focus": "var(--oio-button-primary-shadow)",
"button-primary-text-color-focus": "var(--oio-button-primary-text-color)",
"button-primary-background-hover": "var(--oio-primary-color-hover)",
"button-primary-border-width-hover": "var(--oio-button-primary-border-width)",
"button-primary-border-style-hover": "var(--oio-button-primary-border-style)",
"button-primary-border-color-hover": "var(--oio-primary-color-hover)",
"button-primary-border-radius-hover": "var(--oio-button-primary-border-radius)",
"button-primary-outline-hover": "var(--oio-button-primary-outline)",
"button-primary-shadow-hover": "var(--oio-button-primary-shadow)",
"button-primary-text-color-hover": "var(--oio-button-primary-text-color)",
"button-primary-background-visited": "var(--oio-button-primary-background)",
"button-primary-border-width-visited": "var(--oio-button-primary-border-width)",
"button-primary-border-style-visited": "var(--oio-button-primary-border-style)",
"button-primary-border-color-visited": "var(--oio-button-primary-border-color)",
"button-primary-border-radius-visited": "var(--oio-button-primary-border-radius)",
"button-primary-outline-visited": "var(--oio-button-primary-outline)",
"button-primary-shadow-visited": "var(--oio-button-primary-shadow)",
"button-primary-text-color-visited": "var(--oio-button-primary-text-color)",
"button-primary-danger-background": "var(--oio-error-color)",
"button-primary-danger-border-width": "var(--oio-button-primary-border-width)",
"button-primary-danger-border-style": "var(--oio-button-primary-border-style)",
"button-primary-danger-border-color": "var(--oio-error-color)",
"button-primary-danger-border-radius": "var(--oio-button-primary-border-radius)",
"button-primary-danger-outline": "var(--oio-error-color)",
"button-primary-danger-shadow": "none",
"button-primary-danger-text-color": "#ffffff",
"button-primary-danger-background-active": "var(--oio-error-color-active)",
"button-primary-danger-border-width-active": "var(--oio-button-primary-danger-border-width)",
"button-primary-danger-border-style-active": "var(--oio-button-primary-danger-border-style)",
"button-primary-danger-border-color-active": "var(--oio-error-color-active)",
"button-primary-danger-border-radius-active": "var(--oio-button-primary-danger-border-radius)",
"button-primary-danger-outline-active": "var(--oio-button-primary-danger-outline)",
"button-primary-danger-shadow-active": "var(--oio-button-primary-danger-shadow)",
"button-primary-danger-text-color-active": "var(--oio-button-primary-danger-text-color)",
"button-primary-danger-background-focus": "var(--oio-error-color-focus)",
"button-primary-danger-border-width-focus": "var(--oio-button-primary-danger-border-width)",
"button-primary-danger-border-style-focus": "var(--oio-button-primary-danger-border-style)",
"button-primary-danger-border-color-focus": "var(--oio-error-color-focus)",
"button-primary-danger-border-radius-focus": "var(--oio-button-primary-danger-border-radius)",
"button-primary-danger-outline-focus": "var(--oio-button-primary-danger-outline)",
"button-primary-danger-shadow-focus": "var(--oio-button-primary-danger-shadow)",
"button-primary-danger-text-color-focus": "var(--oio-button-primary-danger-text-color)",
"button-primary-danger-background-hover": "var(--oio-error-color-hover)",
"button-primary-danger-border-width-hover": "var(--oio-button-primary-danger-border-width)",
"button-primary-danger-border-style-hover": "var(--oio-button-primary-danger-border-style)",
"button-primary-danger-border-color-hover": "var(--oio-error-color-hover)",
"button-primary-danger-border-radius-hover": "var(--oio-button-primary-danger-border-radius)",
"button-primary-danger-outline-hover": "var(--oio-button-primary-danger-outline)",
"button-primary-danger-shadow-hover": "var(--oio-button-primary-danger-shadow)",
"button-primary-danger-text-color-hover": "var(--oio-button-primary-danger-text-color)",
"button-primary-danger-background-visited": "var(--oio-button-primary-danger-background)",
"button-primary-danger-border-width-visited": "var(--oio-button-primary-danger-border-width)",
"button-primary-danger-border-style-visited": "var(--oio-button-primary-danger-border-style)",
"button-primary-danger-border-color-visited": "var(--oio-button-primary-danger-border-color)",
"button-primary-danger-border-radius-visited": "var(--oio-button-primary-danger-border-radius)",
"button-primary-danger-outline-visited": "var(--oio-button-primary-danger-outline)",
"button-primary-danger-shadow-visited": "var(--oio-button-primary-danger-shadow)",
"button-primary-danger-text-color-visited": "var(--oio-button-primary-danger-text-color)",
"button-primary-info-background": "var(--oio-info-color)",
"button-primary-info-border-width": "var(--oio-button-primary-border-width)",
"button-primary-info-border-style": "var(--oio-button-primary-border-style)",
"button-primary-info-border-color": "var(--oio-info-color)",
"button-primary-info-border-radius": "var(--oio-button-primary-border-radius)",
"button-primary-info-outline": "none",
"button-primary-info-shadow": "none",
"button-primary-info-text-color": "#ffffff",
"button-primary-info-background-active": "var(--oio-info-color-active)",
"button-primary-info-border-width-active": "var(--oio-button-primary-info-border-width)",
"button-primary-info-border-style-active": "var(--oio-button-primary-info-border-style)",
"button-primary-info-border-color-active": "var(--oio-info-color-active)",
"button-primary-info-border-radius-active": "var(--oio-button-primary-info-border-radius)",
"button-primary-info-outline-active": "var(--oio-button-primary-info-outline)",
"button-primary-info-shadow-active": "var(--oio-button-primary-info-shadow)",
"button-primary-info-text-color-active": "var(--oio-button-primary-info-text-color)",
"button-primary-info-background-focus": "var(--oio-info-color-focus)",
"button-primary-info-border-width-focus": "var(--oio-button-primary-info-border-width)",
"button-primary-info-border-style-focus": "var(--oio-button-primary-info-border-style)",
"button-primary-info-border-color-focus": "var(--oio-info-color-focus)",
"button-primary-info-border-radius-focus": "var(--oio-button-primary-info-border-radius)",
"button-primary-info-outline-focus": "var(--oio-button-primary-info-outline)",
"button-primary-info-shadow-focus": "var(--oio-button-primary-info-shadow)",
"button-primary-info-text-color-focus": "var(--oio-button-primary-info-text-color)",
"button-primary-info-background-hover": "var(--oio-info-color-hover)",
"button-primary-info-border-width-hover": "var(--oio-button-primary-info-border-width)",
"button-primary-info-border-style-hover": "var(--oio-button-primary-info-border-style)",
"button-primary-info-border-color-hover": "var(--oio-info-color-hover)",
"button-primary-info-border-radius-hover": "var(--oio-button-primary-info-border-radius)",
"button-primary-info-outline-hover": "var(--oio-button-primary-info-outline)",
"button-primary-info-shadow-hover": "var(--oio-button-primary-info-shadow)",
"button-primary-info-text-color-hover": "var(--oio-button-primary-info-text-color)",
"button-primary-info-background-visited": "var(--oio-button-primary-info-background)",
"button-primary-info-border-width-visited": "var(--oio-button-primary-info-border-width)",
"button-primary-info-border-style-visited": "var(--oio-button-primary-info-border-style)",
"button-primary-info-border-color-visited": "var(--oio-button-primary-info-border-color)",
"button-primary-info-border-radius-visited": "var(--oio-button-primary-info-border-radius)",
"button-primary-info-outline-visited": "var(--oio-button-primary-info-outline)",
"button-primary-info-shadow-visited": "var(--oio-button-primary-info-shadow)",
"button-primary-info-text-color-visited": "var(--oio-button-primary-info-text-color)",
"button-primary-success-background": "var(--oio-success-color)",
"button-primary-success-border-width": "var(--oio-button-primary-border-width)",
"button-primary-success-border-style": "var(--oio-button-primary-border-style)",
"button-primary-success-border-color": "var(--oio-success-color)",
"button-primary-success-border-radius": "var(--oio-button-primary-border-radius)",
"button-primary-success-outline": "none",
"button-primary-success-shadow": "none",
"button-primary-success-text-color": "#ffffff",
"button-primary-success-background-active": "var(--oio-success-color-active)",
"button-primary-success-border-width-active": "var(--oio-button-primary-success-border-width)",
"button-primary-success-border-style-active": "var(--oio-button-primary-success-border-style)",
"button-primary-success-border-color-active": "var(--oio-success-color-active)",
"button-primary-success-border-radius-active": "var(--oio-button-primary-success-border-radius)",
"button-primary-success-outline-active": "var(--oio-button-primary-success-outline)",
"button-primary-success-shadow-active": "var(--oio-button-primary-success-shadow)",
"button-primary-success-text-color-active": "var(--oio-button-primary-success-text-color)",
"button-primary-success-background-focus": "var(--oio-success-color-focus)",
"button-primary-success-border-width-focus": "var(--oio-button-primary-success-border-width)",
"button-primary-success-border-style-focus": "var(--oio-button-primary-success-border-style)",
"button-primary-success-border-color-focus": "var(--oio-success-color-focus)",
"button-primary-success-border-radius-focus": "var(--oio-button-primary-success-border-radius)",
"button-primary-success-outline-focus": "var(--oio-button-primary-success-outline)",
"button-primary-success-shadow-focus": "var(--oio-button-primary-success-shadow)",
"button-primary-success-text-color-focus": "var(--oio-button-primary-success-text-color)",
"button-primary-success-background-hover": "var(--oio-success-color-hover)",
"button-primary-success-border-width-hover": "var(--oio-button-primary-success-border-width)",
"button-primary-success-border-style-hover": "var(--oio-button-primary-success-border-style)",
"button-primary-success-border-color-hover": "var(--oio-success-color-hover)",
"button-primary-success-border-radius-hover": "var(--oio-button-primary-success-border-radius)",
"button-primary-success-outline-hover": "var(--oio-button-primary-success-outline)",
"button-primary-success-shadow-hover": "var(--oio-button-primary-success-shadow)",
"button-primary-success-text-color-hover": "var(--oio-button-primary-success-text-color)",
"button-primary-success-background-visited": "var(--oio-button-primary-success-background)",
"button-primary-success-border-width-visited": "var(--oio-button-primary-success-border-width)",
"button-primary-success-border-style-visited": "var(--oio-button-primary-success-border-style)",
"button-primary-success-border-color-visited": "var(--oio-button-primary-success-border-color)",
"button-primary-success-border-radius-visited": "var(--oio-button-primary-success-border-radius)",
"button-primary-success-outline-visited": "var(--oio-button-primary-success-outline)",
"button-primary-success-shadow-visited": "var(--oio-button-primary-success-shadow)",
"button-primary-success-text-color-visited": "var(--oio-button-primary-success-text-color)",
"button-primary-warning-background": "var(--oio-warning-color)",
"button-primary-warning-border-width": "var(--oio-button-primary-border-width)",
"button-primary-warning-border-style": "var(--oio-button-primary-border-style)",
"button-primary-warning-border-color": "var(--oio-warning-color)",
"button-primary-warning-border-radius": "var(--oio-button-primary-border-radius)",
"button-primary-warning-outline": "none",
"button-primary-warning-shadow": "none",
"button-primary-warning-text-color": "#ffffff",
"button-primary-warning-background-active": "var(--oio-warning-color-active)",
"button-primary-warning-border-width-active": "var(--oio-button-primary-warning-border-width)",
"button-primary-warning-border-style-active": "var(--oio-button-primary-warning-border-style)",
"button-primary-warning-border-color-active": "var(--oio-warning-color-active)",
"button-primary-warning-border-radius-active": "var(--oio-button-primary-warning-border-radius)",
"button-primary-warning-outline-active": "var(--oio-button-primary-warning-outline)",
"button-primary-warning-shadow-active": "var(--oio-button-primary-warning-shadow)",
"button-primary-warning-text-color-active": "var(--oio-button-primary-warning-text-color)",
"button-primary-warning-background-focus": "var(--oio-warning-color-focus)",
"button-primary-warning-border-width-focus": "var(--oio-button-primary-warning-border-width)",
"button-primary-warning-border-style-focus": "var(--oio-button-primary-warning-border-style)",
"button-primary-warning-border-color-focus": "var(--oio-warning-color-focus)",
"button-primary-warning-border-radius-focus": "var(--oio-button-primary-warning-border-radius)",
"button-primary-warning-outline-focus": "var(--oio-button-primary-warning-outline)",
"button-primary-warning-shadow-focus": "var(--oio-button-primary-warning-shadow)",
"button-primary-warning-text-color-focus": "var(--oio-button-primary-warning-text-color)",
"button-primary-warning-background-hover": "var(--oio-warning-color-hover)",
"button-primary-warning-border-width-hover": "var(--oio-button-primary-warning-border-width)",
"button-primary-warning-border-style-hover": "var(--oio-button-primary-warning-border-style)",
"button-primary-warning-border-color-hover": "var(--oio-warning-color-hover)",
"button-primary-warning-border-radius-hover": "var(--oio-button-primary-warning-border-radius)",
"button-primary-warning-outline-hover": "var(--oio-button-primary-warning-outline)",
"button-primary-warning-shadow-hover": "var(--oio-button-primary-warning-shadow)",
"button-primary-warning-text-color-hover": "var(--oio-button-primary-warning-text-color)",
"button-primary-warning-background-visited": "var(--oio-button-primary-warning-background)",
"button-primary-warning-border-width-visited": "var(--oio-button-primary-warning-border-width)",
"button-primary-warning-border-style-visited": "var(--oio-button-primary-warning-border-style)",
"button-primary-warning-border-color-visited": "var(--oio-button-primary-warning-border-color)",
"button-primary-warning-border-radius-visited": "var(--oio-button-primary-warning-border-radius)",
"button-primary-warning-outline-visited": "var(--oio-button-primary-warning-outline)",
"button-primary-warning-shadow-visited": "var(--oio-button-primary-warning-shadow)",
"button-primary-warning-text-color-visited": "var(--oio-button-primary-warning-text-color)",
"button-link-background": "transparent",
"button-link-border-width": "none",
"button-link-border-style": "none",
"button-link-border-color": "none",
"button-link-border-radius": "none",
"button-link-outline": "none",
"button-link-shadow": "none",
"button-link-text-color": "var(--oio-primary-color)",
"button-link-background-active": "var(--oio-button-link-background)",
"button-link-border-width-active": "var(--oio-button-link-border-width)",
"button-link-border-style-active": "var(--oio-button-link-border-style)",
"button-link-border-color-active": "var(--oio-button-link-border-color)",
"button-link-border-radius-active": "var(--oio-button-link-border-radius)",
"button-link-outline-active": "var(--oio-button-link-outline)",
"button-link-shadow-active": "var(--oio-button-link-shadow)",
"button-link-text-color-active": "var(--oio-button-link-text-color)",
"button-link-background-focus": "var(--oio-button-link-background)",
"button-link-border-width-focus": "var(--oio-button-link-border-width)",
"button-link-border-style-focus": "var(--oio-button-link-border-style)",
"button-link-border-color-focus": "var(--oio-button-link-border-color)",
"button-link-border-radius-focus": "var(--oio-button-link-border-radius)",
"button-link-outline-focus": "var(--oio-button-link-outline)",
"button-link-shadow-focus": "var(--oio-button-link-shadow)",
"button-link-text-color-focus": "var(--oio-button-link-text-color)",
"button-link-background-hover": "var(--oio-button-link-background)",
"button-link-border-width-hover": "var(--oio-button-link-border-width)",
"button-link-border-style-hover": "var(--oio-button-link-border-style)",
"button-link-border-color-hover": "var(--oio-button-link-border-color)",
"button-link-border-radius-hover": "var(--oio-button-link-border-radius)",
"button-link-outline-hover": "var(--oio-button-link-outline)",
"button-link-shadow-hover": "var(--oio-button-link-shadow)",
"button-link-text-color-hover": "var(--oio-button-link-text-color)",
"button-link-background-visited": "var(--oio-button-link-background)",
"button-link-border-width-visited": "var(--oio-button-link-border-width)",
"button-link-border-style-visited": "var(--oio-button-link-border-style)",
"button-link-border-color-visited": "var(--oio-button-link-border-color)",
"button-link-border-radius-visited": "var(--oio-button-link-border-radius)",
"button-link-outline-visited": "var(--oio-button-link-outline)",
"button-link-shadow-visited": "var(--oio-button-link-shadow)",
"button-link-text-color-visited": "var(--oio-button-link-text-color)",
"button-link-danger-background": "var(--oio-button-link-background)",
"button-link-danger-border-width": "var(--oio-button-link-border-width)",
"button-link-danger-border-style": "var(--oio-button-link-border-style)",
"button-link-danger-border-color": "var(--oio-button-link-border-color)",
"button-link-danger-border-radius": "var(--oio-button-link-border-radius)",
"button-link-danger-outline": "none",
"button-link-danger-shadow": "none",
"button-link-danger-text-color": "var(--oio-error-color)",
"button-link-danger-background-active": "var(--oio-button-link-danger-color)",
"button-link-danger-border-width-active": "var(--oio-button-link-danger-border-width)",
"button-link-danger-border-style-active": "var(--oio-button-link-danger-border-style)",
"button-link-danger-border-color-active": "var(--oio-button-link-danger-color)",
"button-link-danger-border-radius-active": "var(--oio-button-link-danger-border-radius)",
"button-link-danger-outline-active": "var(--oio-button-link-danger-outline)",
"button-link-danger-shadow-active": "var(--oio-button-link-danger-shadow)",
"button-link-danger-text-color-active": "var(--oio-error-color-active)",
"button-link-danger-background-focus": "var(--oio-button-link-danger-color)",
"button-link-danger-border-width-focus": "var(--oio-button-link-danger-border-width)",
"button-link-danger-border-style-focus": "var(--oio-button-link-danger-border-style)",
"button-link-danger-border-color-focus": "var(--oio-button-link-danger-color)",
"button-link-danger-border-radius-focus": "var(--oio-button-link-danger-border-radius)",
"button-link-danger-outline-focus": "var(--oio-button-link-danger-outline)",
"button-link-danger-shadow-focus": "var(--oio-button-link-danger-shadow)",
"button-link-danger-text-color-focus": "var(--oio-error-color-focus)",
"button-link-danger-background-hover": "var(--oio-button-link-danger-color)",
"button-link-danger-border-width-hover": "var(--oio-button-link-danger-border-width)",
"button-link-danger-border-style-hover": "var(--oio-button-link-danger-border-style)",
"button-link-danger-border-color-hover": "var(--oio-button-link-danger-color)",
"button-link-danger-border-radius-hover": "var(--oio-button-link-danger-border-radius)",
"button-link-danger-outline-hover": "var(--oio-button-link-danger-outline)",
"button-link-danger-shadow-hover": "var(--oio-button-link-danger-shadow)",
"button-link-danger-text-color-hover": "var(--oio-error-color-hover)",
"button-link-danger-background-visited": "var(--oio-button-link-danger-background)",
"button-link-danger-border-width-visited": "var(--oio-button-link-danger-border-width)",
"button-link-danger-border-style-visited": "var(--oio-button-link-danger-border-style)",
"button-link-danger-border-color-visited": "var(--oio-button-link-danger-border-color)",
"button-link-danger-border-radius-visited": "var(--oio-button-link-danger-border-radius)",
"button-link-danger-outline-visited": "var(--oio-button-link-danger-outline)",
"button-link-danger-shadow-visited": "var(--oio-button-link-danger-shadow)",
"button-link-danger-text-color-visited": "var(--oio-button-link-danger-text-color)",
"button-link-info-background": "var(--oio-button-link-background)",
"button-link-info-border-width": "var(--oio-button-link-border-width)",
"button-link-info-border-style": "var(--oio-button-link-border-style)",
"button-link-info-border-color": "var(--oio-button-link-border-color)",
"button-link-info-border-radius": "var(--oio-button-link-border-radius)",
"button-link-info-outline": "none",
"button-link-info-shadow": "none",
"button-link-info-text-color": "var(--oio-info-color)",
"button-link-info-background-active": "var(--oio-button-link-info-color)",
"button-link-info-border-width-active": "var(--oio-button-link-info-border-width)",
"button-link-info-border-style-active": "var(--oio-button-link-info-border-style)",
"button-link-info-border-color-active": "var(--oio-button-link-info-color)",
"button-link-info-border-radius-active": "var(--oio-button-link-info-border-radius)",
"button-link-info-outline-active": "var(--oio-button-link-info-outline)",
"button-link-info-shadow-active": "var(--oio-button-link-info-shadow)",
"button-link-info-text-color-active": "var(--oio-info-color-active)",
"button-link-info-background-focus": "var(--oio-button-link-info-color)",
"button-link-info-border-width-focus": "var(--oio-button-link-info-border-width)",
"button-link-info-border-style-focus": "var(--oio-button-link-info-border-style)",
"button-link-info-border-color-focus": "var(--oio-button-link-info-color)",
"button-link-info-border-radius-focus": "var(--oio-button-link-info-border-radius)",
"button-link-info-outline-focus": "var(--oio-button-link-info-outline)",
"button-link-info-shadow-focus": "var(--oio-button-link-info-shadow)",
"button-link-info-text-color-focus": "var(--oio-info-color-focus)",
"button-link-info-background-hover": "var(--oio-button-link-info-color)",
"button-link-info-border-width-hover": "var(--oio-button-link-info-border-width)",
"button-link-info-border-style-hover": "var(--oio-button-link-info-border-style)",
"button-link-info-border-color-hover": "var(--oio-button-link-info-color)",
"button-link-info-border-radius-hover": "var(--oio-button-link-info-border-radius)",
"button-link-info-outline-hover": "var(--oio-button-link-info-outline)",
"button-link-info-shadow-hover": "var(--oio-button-link-info-shadow)",
"button-link-info-text-color-hover": "var(--oio-info-color-hover)",
"button-link-info-background-visited": "var(--oio-button-link-info-background)",
"button-link-info-border-width-visited": "var(--oio-button-link-info-border-width)",
"button-link-info-border-style-visited": "var(--oio-button-link-info-border-style)",
"button-link-info-border-color-visited": "var(--oio-button-link-info-border-color)",
"button-link-info-border-radius-visited": "var(--oio-button-link-info-border-radius)",
"button-link-info-outline-visited": "var(--oio-button-link-info-outline)",
"button-link-info-shadow-visited": "var(--oio-button-link-info-shadow)",
"button-link-info-text-color-visited": "var(--oio-button-link-info-text-color)",
"button-link-success-background": "var(--oio-button-link-background)",
"button-link-success-border-width": "var(--oio-button-link-border-width)",
"button-link-success-border-style": "var(--oio-button-link-border-style)",
"button-link-success-border-color": "var(--oio-button-link-border-color)",
"button-link-success-border-radius": "var(--oio-button-link-border-radius)",
"button-link-success-outline": "none",
"button-link-success-shadow": "none",
"button-link-success-text-color": "var(--oio-success-color)",
"button-link-success-background-active": "var(--oio-button-link-success-color)",
"button-link-success-border-width-active": "var(--oio-button-link-success-border-width)",
"button-link-success-border-style-active": "var(--oio-button-link-success-border-style)",
"button-link-success-border-color-active": "var(--oio-button-link-success-color)",
"button-link-success-border-radius-active": "var(--oio-button-link-success-border-radius)",
"button-link-success-outline-active": "var(--oio-button-link-success-outline)",
"button-link-success-shadow-active": "var(--oio-button-link-success-shadow)",
"button-link-success-text-color-active": "var(--oio-success-color-active)",
"button-link-success-background-focus": "var(--oio-button-link-success-color)",
"button-link-success-border-width-focus": "var(--oio-button-link-success-border-width)",
"button-link-success-border-style-focus": "var(--oio-button-link-success-border-style)",
"button-link-success-border-color-focus": "var(--oio-button-link-success-color)",
"button-link-success-border-radius-focus": "var(--oio-button-link-success-border-radius)",
"button-link-success-outline-focus": "var(--oio-button-link-success-outline)",
"button-link-success-shadow-focus": "var(--oio-button-link-success-shadow)",
"button-link-success-text-color-focus": "var(--oio-success-color-focus)",
"button-link-success-background-hover": "var(--oio-button-link-success-color)",
"button-link-success-border-width-hover": "var(--oio-button-link-success-border-width)",
"button-link-success-border-style-hover": "var(--oio-button-link-success-border-style)",
"button-link-success-border-color-hover": "var(--oio-button-link-success-color)",
"button-link-success-border-radius-hover": "var(--oio-button-link-success-border-radius)",
"button-link-success-outline-hover": "var(--oio-button-link-success-outline)",
"button-link-success-shadow-hover": "var(--oio-button-link-success-shadow)",
"button-link-success-text-color-hover": "var(--oio-success-color-hover)",
"button-link-success-background-visited": "var(--oio-button-link-success-background)",
"button-link-success-border-width-visited": "var(--oio-button-link-success-border-width)",
"button-link-success-border-style-visited": "var(--oio-button-link-success-border-style)",
"button-link-success-border-color-visited": "var(--oio-button-link-success-border-color)",
"button-link-success-border-radius-visited": "var(--oio-button-link-success-border-radius)",
"button-link-success-outline-visited": "var(--oio-button-link-success-outline)",
"button-link-success-shadow-visited": "var(--oio-button-link-success-shadow)",
"button-link-success-text-color-visited": "var(--oio-button-link-success-text-color)",
"button-link-warning-background": "var(--oio-button-link-background)",
"button-link-warning-border-width": "var(--oio-button-link-border-width)",
"button-link-warning-border-style": "var(--oio-button-link-border-style)",
"button-link-warning-border-color": "var(--oio-button-link-border-color)",
"button-link-warning-border-radius": "var(--oio-button-link-border-radius)",
"button-link-warning-outline": "none",
"button-link-warning-shadow": "none",
"button-link-warning-text-color": "var(--oio-warning-color)",
"button-link-warning-background-active": "var(--oio-button-link-warning-color)",
"button-link-warning-border-width-active": "var(--oio-button-link-warning-border-width)",
"button-link-warning-border-style-active": "var(--oio-button-link-warning-border-style)",
"button-link-warning-border-color-active": "var(--oio-button-link-warning-color)",
"button-link-warning-border-radius-active": "var(--oio-button-link-warning-border-radius)",
"button-link-warning-outline-active": "var(--oio-button-link-warning-outline)",
"button-link-warning-shadow-active": "var(--oio-button-link-warning-shadow)",
"button-link-warning-text-color-active": "var(--oio-warning-color-active)",
"button-link-warning-background-focus": "var(--oio-button-link-warning-color)",
"button-link-warning-border-width-focus": "var(--oio-button-link-warning-border-width)",
"button-link-warning-border-style-focus": "var(--oio-button-link-warning-border-style)",
"button-link-warning-border-color-focus": "var(--oio-button-link-warning-color)",
"button-link-warning-border-radius-focus": "var(--oio-button-link-warning-border-radius)",
"button-link-warning-outline-focus": "var(--oio-button-link-warning-outline)",
"button-link-warning-shadow-focus": "var(--oio-button-link-warning-shadow)",
"button-link-warning-text-color-focus": "var(--oio-warning-color-focus)",
"button-link-warning-background-hover": "var(--oio-button-link-warning-color)",
"button-link-warning-border-width-hover": "var(--oio-button-link-warning-border-width)",
"button-link-warning-border-style-hover": "var(--oio-button-link-warning-border-style)",
"button-link-warning-border-color-hover": "var(--oio-button-link-warning-color)",
"button-link-warning-border-radius-hover": "var(--oio-button-link-warning-border-radius)",
"button-link-warning-outline-hover": "var(--oio-button-link-warning-outline)",
"button-link-warning-shadow-hover": "var(--oio-button-link-warning-shadow)",
"button-link-warning-text-color-hover": "var(--oio-warning-color-hover)",
"button-link-warning-background-visited": "var(--oio-button-link-warning-background)",
"button-link-warning-border-width-visited": "var(--oio-button-link-warning-border-width)",
"button-link-warning-border-style-visited": "var(--oio-button-link-warning-border-style)",
"button-link-warning-border-color-visited": "var(--oio-button-link-warning-border-color)",
"button-link-warning-border-radius-visited": "var(--oio-button-link-warning-border-radius)",
"button-link-warning-outline-visited": "var(--oio-button-link-warning-outline)",
"button-link-warning-shadow-visited": "var(--oio-button-link-warning-shadow)",
"button-link-warning-text-color-visited": "var(--oio-button-link-warning-text-color)"
}1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
485
486
487
488
489
490
491
492
493
494
495
496
497
498
499
500
501
502
503
504
505
506
507
508
509
510
511
512
513
514
515
516
517
518
519
520
521
522
523
524
525
526
527
528
529
530
531
532
533
534
535
536
537
538
539
540
541
542
543
544
545
546
547
548
549
550
551
552
553
554
555
556
557
558
559
560
561
562
563
564
565
566
567
568
569
570
571
572
573
574
575
576
577
578
579
580
581
582
583
584
585
586
587
588
589
590
591
592
593
594
595
596
597
598
599
600
601
602
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
485
486
487
488
489
490
491
492
493
494
495
496
497
498
499
500
501
502
503
504
505
506
507
508
509
510
511
512
513
514
515
516
517
518
519
520
521
522
523
524
525
526
527
528
529
530
531
532
533
534
535
536
537
538
539
540
541
542
543
544
545
546
547
548
549
550
551
552
553
554
555
556
557
558
559
560
561
562
563
564
565
566
567
568
569
570
571
572
573
574
575
576
577
578
579
580
581
582
583
584
585
586
587
588
589
590
591
592
593
594
595
596
597
598
599
600
601
602
3、多选框（Checkbox）
typescript
{
"checkbox-color": "var(--oio-text-color)",
"checkbox-background": "var(--oio-background)",
"checkbox-border-color": "var(--oio-border-color)",
"checkbox-disabled-border-color": "var(--oio-disabled-border-color)"
}1
2
3
4
5
6
2
3
4
5
6
4、日期时间选择器（datetime）
typescript
{
"datetime-padding": "4px 12px"
}1
2
3
2
3
5、抽屉（drawer）
typescript
{
"drawer-width-small": "560px",
"drawer-width-medium": "890px",
"drawer-width-large": "1200px",
"drawer-height-small": "40vh",
"drawer-height-medium": "60vh",
"drawer-height-large": "90vh"
}1
2
3
4
5
6
7
8
2
3
4
5
6
7
8
6、下拉菜单（dropdown）
typescript
{
"dropdown-background-color": "var(--oio-background)",
"dropdown-border-color": "var(--oio-border-color)",
"dropdown-box-shadow": "0px 0px 6px 0px rgba(0, 0, 0, 0.2)",
"dropdown-color": "var(--oio-text-color)",
"dropdown-color-hover": "var(--oio-hover-text-color)",
"dropdown-color-disabled": "var(--oio-disabled-color)",
"dropdown-color-disabled-hover": "var(--oio-disabled-color)",
"dropdown-item-background-color-hover": "var(--oio-hover-background-color)",
"dropdown-item-background-color-disabled-hover": "transparent"
}1
2
3
4
5
6
7
8
9
10
11
2
3
4
5
6
7
8
9
10
11
7、表单项（form-item）
typescript
{
"form-item-config": {
"readonlyShowPlaceholder": false,
"disabledShowPlaceholder": false
}
}1
2
3
4
5
6
2
3
4
5
6
8、顶部栏（header）
typescript
{
"header-border-bottom": "var(--oio-border-color)",
"header-color": "rgba(255,255,255,0.65)"
}1
2
3
4
2
3
4
9、输入框（input）
typescript
{
"input-background": "#15232E",
"input-background-color": "#15232E",
"input-border-style": "var(--oio-border-style)",
"input-border-color": "var(--oio-border-color)",
"input-outline": "none",
"input-shadow": "none",
"input-text-color": "var(--oio-text-color)",
"input-counter-background": "#ffffff",
"input-counter-color": "rgba(0, 0, 0, 0.25)",
"input-background-hover": "var(--oio-input-background)",
"input-border-width-hover": "var(--oio-input-border-width)",
"input-border-style-hover": "var(--oio-input-border-style)",
"input-border-color-hover": "var(--oio-primary-color-hover)",
"input-border-radius-hover": "var(--oio-input-border-radius)",
"input-outline-hover": "var(--oio-input-outline)",
"input-shadow-hover": "var(--oio-input-shadow)",
"input-text-color-hover": "var(--oio-input-text-color)",
"input-background-focus": "var(--oio-input-background)",
"input-border-width-focus": "var(--oio-input-border-width)",
"input-border-style-focus": "var(--oio-input-border-style)",
"input-border-color-focus": "var(--oio-primary-color-hover)",
"input-border-radius-focus": "var(--oio-input-border-radius)",
"input-outline-focus": "var(--oio-input-outline)",
"input-shadow-focus": "0px 0px 0px 2px rgba(var(--oio-primary-color-rgb),0.1);",
"input-text-color-focus": "var(--oio-input-text-color)",
"input-readonly-border-color": "var(--oio-readonly-border-color)",
"input-error-border-color": "#ff4d4f",
"input-disabled-border-color": "var(--oio-disabled-border-color)",
"input-addon-background": "#303B48",
"input-addon-color": "rgba(255,255,255,0.65)",
"input-tag-background": "rgba(3,93,255,0.2)",
"input-clear-background": "#000",
"input-clear-color": "var(--oio-text-color)",
"input-border-width": "var(--oio-border-width)",
"input-border-radius": "var(--oio-border-radius)",
"input-line-height": "22px",
"input-counter-font-size": "var(--oio-font-size-sm)"
}1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
10、菜单（menu）
大（large）
typescript
{
"menu-background-color": "#ffffff",
"menu-border-color": "#e3e7ee",
"menu-font-color": "rgba(0,0,0,0.85)",
"menu-expand-background-color": "#ffffff",
"menu-default-icon-color": "rgba(0, 0, 0, 0.25)",
"menu-default-expand-icon-color": "rgba(38, 38, 38, 0.75)",
"menu-search-background-color": "#ffffff",
"menu-select-dropdown-background": "#ffffff",
"menu-select-dropdown-color": "rgba(0,0,0,0.65)",
"menu-select-dropdown-selected-color": "#035DFF",
"menu-select-dropdown-selected": "rgba(3, 93, 255, 0.1)",
"menu-select-dropdown-box-shadow": "0 3px 6px -4px rgba(0, 0, 0, 0.12), 0 6px 16px 0 rgba(0, 0, 0, 0.08),0 9px 28px 8px rgba(0, 0, 0, 0.05)",
"menu-select-color": "rgba(0,0,0,0.85)",
"menu-select-background": "#ffffff",
"menu-select-placeholder-color": "rgba(0,0,0,0.25)",
"menu-selected-icon-color": "#035DFF",
"menu-selected-background-color": "rgba(3, 93, 255, 0.1)",
"menu-selected-title-color": "#035DFF",
"menu-selected-title-hover-color": "#035DFF",
"menu-selected-root-title-color": "#035DFF",
"menu-selected-root-icon-color": "#035DFF",
"menu-selected-root-background-color": "rgba(3, 93, 255, 0.1)",
"menu-hover-background-color": "rgba(3, 93, 255, 0.1)",
"menu-root-title-hover-color": "#035DFF",
"menu-root-title-hover-icon-color": "#035DFF",
"menu-active-parent-title-color": "rgba(0, 0, 0, 0.85)",
"menu-search-display": "unset",
"menu-search-background": "#ffffff",
"menu-collapsed-button-hover-background-color": "rgba(3, 93, 255, 0.1)",
"menu-collapsed-button-background-color": "rgba(38, 38, 38, 0.05)",
"menu-collapsed-button-title-color": "rgba(0,0,0,0.65)",
"menu-designer-font-color": "#333333",
"menu-designer-background-color": "#ffffff",
"menu-designer-collapsed-button-hover-background-color": "rgba(3, 93, 255, 0.1)",
"menu-designer-collapsed-button-background-color": "rgba(38, 38, 38, 0.05)",
"menu-padding": "0 16px",
"menu-margin-top": "4px",
"menu-item-height": "40px",
"menu-item-margin-top": "4px",
"menu-area-width": "263px",
"menu-collapsed-popup-item-padding": "0 16px",
"menu-collapsed-popup-margin-left": "-16px",
"menu-collapsed-button-border-radius": "4px",
"menu-collapsed-button-height": "40px",
"menu-collapsed-button-line-height": "38px",
"menu-designer-collapsed-button-height": "40px",
"menu-designer-collapsed-button-line-height": "30px",
"menu-designer-collapsed-button-border-radius": "4px",
"menu-border-radius": "4px",
"menu-selected-root-border-radius": "4px",
"menu-selected-margin-top": "4px"
}1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
中（medium）
typescript
{
"menu-background-color": "#ffffff",
"menu-border-color": "#e3e7ee",
"menu-font-color": "rgba(0,0,0,0.85)",
"menu-expand-background-color": "#ffffff",
"menu-default-icon-color": "rgba(0, 0, 0, 0.25)",
"menu-default-expand-icon-color": "rgba(38, 38, 38, 0.75)",
"menu-search-background-color": "#ffffff",
"menu-select-dropdown-background": "#ffffff",
"menu-select-dropdown-color": "rgba(0,0,0,0.65)",
"menu-select-dropdown-selected-color": "#035DFF",
"menu-select-dropdown-selected": "rgba(3, 93, 255, 0.1)",
"menu-select-dropdown-box-shadow": "0 3px 6px -4px rgba(0, 0, 0, 0.12), 0 6px 16px 0 rgba(0, 0, 0, 0.08),0 9px 28px 8px rgba(0, 0, 0, 0.05)",
"menu-select-color": "rgba(0,0,0,0.85)",
"menu-select-background": "#ffffff",
"menu-select-placeholder-color": "rgba(0,0,0,0.25)",
"menu-selected-icon-color": "#035DFF",
"menu-selected-background-color": "rgba(3, 93, 255, 0.1)",
"menu-selected-title-color": "#035DFF",
"menu-selected-title-hover-color": "#035DFF",
"menu-selected-root-title-color": "#035DFF",
"menu-selected-root-icon-color": "#035DFF",
"menu-selected-root-background-color": "rgba(3, 93, 255, 0.1)",
"menu-hover-background-color": "rgba(3, 93, 255, 0.1)",
"menu-root-title-hover-color": "#035DFF",
"menu-root-title-hover-icon-color": "#035DFF",
"menu-active-parent-title-color": "rgba(0, 0, 0, 0.85)",
"menu-search-display": "unset",
"menu-search-background": "#ffffff",
"menu-collapsed-button-hover-background-color": "rgba(3, 93, 255, 0.1)",
"menu-collapsed-button-background-color": "rgba(38, 38, 38, 0.05)",
"menu-collapsed-button-title-color": "rgba(0,0,0,0.65)",
"menu-designer-font-color": "#333333",
"menu-designer-background-color": "#ffffff",
"menu-designer-collapsed-button-hover-background-color": "rgba(3, 93, 255, 0.1)",
"menu-designer-collapsed-button-background-color": "rgba(38, 38, 38, 0.05)",
"menu-padding": "0 16px",
"menu-margin-top": "8px",
"menu-item-height": "32px",
"menu-item-margin-top": "4px",
"menu-area-width": "263px",
"menu-collapsed-popup-item-padding": "0 16px",
"menu-collapsed-popup-margin-left": "-16px",
"menu-collapsed-button-border-radius": "4px",
"menu-collapsed-button-height": "32px",
"menu-collapsed-button-line-height": "30px",
"menu-designer-collapsed-button-height": "32px",
"menu-designer-collapsed-button-line-height": "30px",
"menu-designer-collapsed-button-border-radius": "4px",
"menu-border-radius": "4px",
"menu-selected-root-border-radius": "4px",
"menu-selected-margin-top": "4px"
}1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
小（small）
typescript
{
"menu-background-color": "#ffffff",
"menu-border-color": "#e3e7ee",
"menu-font-color": "rgba(0,0,0,0.85)",
"menu-expand-background-color": "#ffffff",
"menu-default-icon-color": "rgba(0, 0, 0, 0.25)",
"menu-default-expand-icon-color": "rgba(38, 38, 38, 0.75)",
"menu-search-background-color": "#ffffff",
"menu-select-dropdown-background": "#ffffff",
"menu-select-dropdown-color": "rgba(0,0,0,0.65)",
"menu-select-dropdown-selected-color": "#035DFF",
"menu-select-dropdown-selected": "rgba(3, 93, 255, 0.1)",
"menu-select-dropdown-box-shadow": "0 3px 6px -4px rgba(0, 0, 0, 0.12), 0 6px 16px 0 rgba(0, 0, 0, 0.08),0 9px 28px 8px rgba(0, 0, 0, 0.05)",
"menu-select-color": "rgba(0,0,0,0.85)",
"menu-select-background": "#ffffff",
"menu-select-placeholder-color": "rgba(0,0,0,0.25)",
"menu-selected-icon-color": "#035DFF",
"menu-selected-background-color": "rgba(3, 93, 255, 0.1)",
"menu-selected-title-color": "#035DFF",
"menu-selected-title-hover-color": "#035DFF",
"menu-selected-root-title-color": "#035DFF",
"menu-selected-root-icon-color": "#035DFF",
"menu-selected-root-background-color": "rgba(3, 93, 255, 0.1)",
"menu-hover-background-color": "rgba(3, 93, 255, 0.1)",
"menu-root-title-hover-color": "#035DFF",
"menu-root-title-hover-icon-color": "#035DFF",
"menu-active-parent-title-color": "rgba(0, 0, 0, 0.85)",
"menu-search-display": "unset",
"menu-search-background": "#ffffff",
"menu-collapsed-button-hover-background-color": "rgba(3, 93, 255, 0.1)",
"menu-collapsed-button-background-color": "rgba(38, 38, 38, 0.05)",
"menu-collapsed-button-title-color": "rgba(0,0,0,0.65)",
"menu-designer-font-color": "#333333",
"menu-designer-background-color": "#ffffff",
"menu-designer-collapsed-button-hover-background-color": "rgba(3, 93, 255, 0.1)",
"menu-designer-collapsed-button-background-color": "rgba(38, 38, 38, 0.05)",
"menu-padding": "0 16px",
"menu-margin-top": "8px",
"menu-item-height": "24px",
"menu-item-margin-top": "4px",
"menu-area-width": "263px",
"menu-collapsed-popup-item-padding": "0 16px",
"menu-collapsed-popup-margin-left": "-16px",
"menu-collapsed-button-border-radius": "4px",
"menu-collapsed-button-height": "24px",
"menu-collapsed-button-line-height": "22px",
"menu-designer-collapsed-button-height": "24px",
"menu-designer-collapsed-button-line-height": "22px",
"menu-designer-collapsed-button-border-radius": "4px",
"menu-border-radius": "4px",
"menu-selected-root-border-radius": "4px",
"menu-selected-margin-top": "4px"
}1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
11、弹出框（modal）
typescript
{
"modal-color": "rgba(255, 255, 255, 0.85)",
"modal-width-small": "560px",
"modal-width-medium": "890px",
"modal-width-large": "1200px",
"modal-height-small": "40vh",
"modal-height-medium": "60vh",
"modal-height-large": "90vh"
}1
2
3
4
5
6
7
8
9
2
3
4
5
6
7
8
9
12、选项卡（multi-tab）
typescript
{
"multi-tabs-background": "var(--oio-body-background)",
"multi-tabs-color": "var(--oio-text-color)",
"multi-tabs-active-color": "#ffffff",
"multi-tabs-active-font-weight": 500,
"multi-tabs-active-background": "var(--oio-background)",
"multi-tabs-icon-color": "rgba(255, 255, 255, 0.3)",
"multi-tabs-hover-background-color": "rgba(255, 255, 255, 0.10)",
"multi-tabs-background-color-inline": "var(--oio-background)",
"multi-tabs-color-inline": "var(--oio-text-color)",
"multi-tabs-active-color-inline": "var(--oio-primary-color)",
"multi-tabs-active-background-color-inline": "var(--oio-body-background)",
"multi-tabs-hover-background-color-inline": "var(--oio-body-background)",
"multi-tabs-background-color-theme1": "var(--oio-body-background)",
"multi-tabs-background-color-active-theme1": "var(--oio-background)",
"multi-tabs-border-color-theme1": "var(--oio-border-color)",
"multi-tabs-background-color-theme1-inline": "var(--oio-background)",
"multi-tabs-background-color-active-theme1-inline": "rgba(255, 255, 255, 0.2)",
"multi-tabs-active-color-active-theme1-inline": "#ffffff",
"multi-tabs-icon-color-active-theme1-inline": "var(--oio-multi-tabs-icon-color)",
"multi-tabs-background-color-theme2": "var(--oio-background)",
"multi-tabs-border-color-theme2": "var(--oio-border-color)",
"multi-tabs-background-color-theme3": "var(--oio-body-background)",
"multi-tabs-background-color-active-theme3": "rgba(255, 255, 255, 0.2)",
"multi-tabs-active-color-active-theme3": "#ffffff",
"multi-tabs-icon-color-active-theme3": "var(--oio-multi-tabs-icon-color)",
"multi-tabs-background-color-theme3-inline": "var(--oio-background)",
"multi-tabs-background-color-theme4-inline": "var(--oio-background)",
"multi-tabs-background-color-active-theme4-inline": "rgba(255, 255, 255, 0.2)",
"multi-tabs-active-color-active-theme4-inline": "#ffffff",
"multi-tabs-icon-color-active-theme4-inline": "var(--oio-multi-tabs-icon-color)"
}1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
13、分页器（pagination）
大（large）
typescript
{
"pagination-background": "var(--oio-background)",
"pagination-border-color": "var(--oio-border-color)",
"pagination-text-color": "var(--oio-text-color)",
"pagination-height": "32px",
"pagination-item-height": "30px",
"pagination-item-width": "32px"
}1
2
3
4
5
6
7
8
2
3
4
5
6
7
8
中（medium）
typescript
{
"pagination-background": "var(--oio-background)",
"pagination-border-color": "var(--oio-border-color)",
"pagination-text-color": "var(--oio-text-color)",
"pagination-height": "32px",
"pagination-item-height": "30px",
"pagination-item-width": "32px"
}1
2
3
4
5
6
7
8
2
3
4
5
6
7
8
小（small）
typescript
{
"pagination-background": "var(--oio-background)",
"pagination-border-color": "var(--oio-border-color)",
"pagination-text-color": "var(--oio-text-color)",
"pagination-height": "24px",
"pagination-item-height": "22px",
"pagination-item-width": "24px"
}1
2
3
4
5
6
7
8
2
3
4
5
6
7
8
14、气泡确认框（popconfirm）
typescript
{
"popconfirm-background": "var(--oio-background)",
"popconfirm-color": "var(--oio-text-color)",
"popconfirm-borderColor": "var(--oio-border-color)",
"popconfirm-arrowBackground": "ar(--oio-background)"
}1
2
3
4
5
6
2
3
4
5
6
15、富文本（rich-text）
typescript
{
"rich-text-textarea-bg-color": "var(--oio-background)",
"rich-text-textarea-color": "var(--oio-text-color)",
"rich-text-textarea-border-color": "var(--oio-border-color)",
"rich-text-textarea-slight-border-color": "var(--oio-border-color)",
"rich-text-textarea-slight-color": "var(--oio-text-color)",
"rich-text-textarea-slight-bg-color": "var(--oio-body-background)",
"rich-text-textarea-selected-border-color": "#333e4c",
"rich-text-textarea-handler-bg-color": "#4290f7",
"rich-text-toolbar-color": "var(--oio-select-dropdown-color)",
"rich-text-toolbar-bg-color": "var(--oio-select-dropdown-background)",
"rich-text-toolbar-active-color": "var(--oio-select-dropdown-selected-color)",
"rich-text-toolbar-active-bg-color": "var(--oio-select-dropdown-selected)",
"rich-text-toolbar-color-active-bg-color": "var(--oio-select-dropdown-selected)",
"rich-text-toolbar-disabled-color": "var(--oio-disabled-color)",
"rich-text-toolbar-border-color": "var(--oio-border-color)",
"rich-text-modal-button-bg-color": "#fafafa",
"rich-text-modal-button-border-color": "#d9d9d9",
"rich-text-button-tooltip-bg-color": "#333",
"rich-text-button-tooltip-color": "#fff"
}1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
16、滚动条（scrollbar）
typescript
{
"scrollbar-thumb-background-color": "#7e7e7e",
"scrollbar-thumb-background-color-hover": "#999999"
}1
2
3
4
2
3
4
17、下拉选择（select）
大（large）
typescript
{
"select-background": "#15232E",
"select-border-width": "var(--oio-border-width)",
"select-border-style": "var(--oio-border-style)",
"select-border-color": "var(--oio-border-color)",
"select-border-radius": "var(--oio-border-radius)",
"select-outline": "none",
"select-shadow": "none",
"select-text-color": "var(--oio-text-color)",
"select-counter-background": "#15232E",
"select-counter-color": "rgba(255,255,255,0.65)",
"select-counter-font-size": "var(--oio-font-size-sm)",
"select-background-hover": "var(--oio-select-background)",
"select-border-width-hover": "var(--oio-select-border-width)",
"select-border-style-hover": "var(--oio-select-border-style)",
"select-border-color-hover": "var(--oio-primary-color-hover)",
"select-border-radius-hover": "var(--oio-select-border-radius)",
"select-outline-hover": "var(--oio-select-outline)",
"select-shadow-hover": "var(--oio-select-shadow)",
"select-text-color-hover": "var(--oio-select-text-color)",
"select-background-focus": "var(--oio-select-background)",
"select-border-width-focus": "var(--oio-select-border-width)",
"select-border-style-focus": "var(--oio-select-border-style)",
"select-border-color-focus": "var(--oio-primary-color-hover)",
"select-border-radius-focus": "var(--oio-select-border-radius)",
"select-outline-focus": "var(--oio-select-outline)",
"select-shadow-focus": "0px 0px 0px 2px rgba(3,93,255,0.1);",
"select-text-color-focus": "var(--oio-select-text-color)",
"select-readonly-border-color": "var(--oio-readonly-border-color)",
"select-item-readonly-bg": "var(--oio-primary-color-rgb)",
"select-item-readonly-color": "var(--oio-primary-color)",
"select-item-readonly-radius": "var(--oio-border-radius)",
"select-dropdown-background": "#1F2935",
"select-dropdown-selected-color": "#fff",
"select-dropdown-color": "rgba(255,255,255,0.65)",
"select-dropdown-selected": "rgba(255,255,255,0.1)",
"select-dropdown-box-shadow": "0px 0px 6px 0px rgba(0,0,0,0.2)",
"select-line-height": "22px"
}1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
中（medium）
typescript
{
"select-background": "#15232E",
"select-border-width": "var(--oio-border-width)",
"select-border-style": "var(--oio-border-style)",
"select-border-color": "var(--oio-border-color)",
"select-border-radius": "var(--oio-border-radius)",
"select-outline": "none",
"select-shadow": "none",
"select-text-color": "var(--oio-text-color)",
"select-counter-background": "#15232E",
"select-counter-color": "rgba(255,255,255,0.65)",
"select-counter-font-size": "var(--oio-font-size-sm)",
"select-background-hover": "var(--oio-select-background)",
"select-border-width-hover": "var(--oio-select-border-width)",
"select-border-style-hover": "var(--oio-select-border-style)",
"select-border-color-hover": "var(--oio-primary-color-hover)",
"select-border-radius-hover": "var(--oio-select-border-radius)",
"select-outline-hover": "var(--oio-select-outline)",
"select-shadow-hover": "var(--oio-select-shadow)",
"select-text-color-hover": "var(--oio-select-text-color)",
"select-background-focus": "var(--oio-select-background)",
"select-border-width-focus": "var(--oio-select-border-width)",
"select-border-style-focus": "var(--oio-select-border-style)",
"select-border-color-focus": "var(--oio-primary-color-hover)",
"select-border-radius-focus": "var(--oio-select-border-radius)",
"select-outline-focus": "var(--oio-select-outline)",
"select-shadow-focus": "0px 0px 0px 2px rgba(3,93,255,0.1);",
"select-text-color-focus": "var(--oio-select-text-color)",
"select-readonly-border-color": "var(--oio-readonly-border-color)",
"select-item-readonly-bg": "var(--oio-primary-color-rgb)",
"select-item-readonly-color": "var(--oio-primary-color)",
"select-item-readonly-radius": "var(--oio-border-radius)",
"select-dropdown-background": "#1F2935",
"select-dropdown-selected-color": "#fff",
"select-dropdown-color": "rgba(255,255,255,0.65)",
"select-dropdown-selected": "rgba(255,255,255,0.1)",
"select-dropdown-box-shadow": "0px 0px 6px 0px rgba(0,0,0,0.2)",
"select-line-height": "22px"
}1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
小（small）
typescript
{
"select-background": "#15232E",
"select-border-width": "var(--oio-border-width)",
"select-border-style": "var(--oio-border-style)",
"select-border-color": "var(--oio-border-color)",
"select-border-radius": "var(--oio-border-radius)",
"select-outline": "none",
"select-shadow": "none",
"select-text-color": "var(--oio-text-color)",
"select-counter-background": "#15232E",
"select-counter-color": "rgba(255,255,255,0.65)",
"select-counter-font-size": "var(--oio-font-size-sm)",
"select-background-hover": "var(--oio-select-background)",
"select-border-width-hover": "var(--oio-select-border-width)",
"select-border-style-hover": "var(--oio-select-border-style)",
"select-border-color-hover": "var(--oio-primary-color-hover)",
"select-border-radius-hover": "var(--oio-select-border-radius)",
"select-outline-hover": "var(--oio-select-outline)",
"select-shadow-hover": "var(--oio-select-shadow)",
"select-text-color-hover": "var(--oio-select-text-color)",
"select-background-focus": "var(--oio-select-background)",
"select-border-width-focus": "var(--oio-select-border-width)",
"select-border-style-focus": "var(--oio-select-border-style)",
"select-border-color-focus": "var(--oio-primary-color-hover)",
"select-border-radius-focus": "var(--oio-select-border-radius)",
"select-outline-focus": "var(--oio-select-outline)",
"select-shadow-focus": "0px 0px 0px 2px rgba(3,93,255,0.1);",
"select-text-color-focus": "var(--oio-select-text-color)",
"select-readonly-border-color": "var(--oio-readonly-border-color)",
"select-item-readonly-bg": "var(--oio-primary-color-rgb)",
"select-item-readonly-color": "var(--oio-primary-color)",
"select-item-readonly-radius": "var(--oio-border-radius)",
"select-dropdown-background": "#1F2935",
"select-dropdown-selected-color": "#fff",
"select-dropdown-color": "rgba(255,255,255,0.65)",
"select-dropdown-selected": "rgba(255,255,255,0.1)",
"select-dropdown-box-shadow": "0px 0px 6px 0px rgba(0,0,0,0.2)",
"select-line-height": "16px"
}1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
18、开关（switch）
typescript
{
"switch-background": "rgba(255,255,255,0.25)"
}1
2
3
2
3
19、表格（table）
大（large）
typescript
{
"table-thead-bg": "var(--oio-background)",
"table-body-bg": "var(--oio-background)",
"table-text-color": "var(--oio-text-color)",
"table-title-color": "rgba(255,255,255,0.85)",
"table-title-font-weight": 500,
"table-title-sort-icon-size": "11px",
"table-tr-height": "var(--oio-height-lg)",
"table-tr-stripe-bg": "rgba(255,255,255,0.1)",
"table-tr-checked-bg": "rgba(255,255,255,0.1)",
"table-tr-hover-bg": "rgba(255,255,255,0.1)",
"table-row-border": "rgba(51,62,76,1)",
"table-row-body-border": "rgba(51,62,76,1)",
"table-config": {
"border": "full",
"stripe": false,
"isCurrent": true,
"isHover": true
},
"table-thead-height": "54px",
"table-user-prefer-top": "12px",
"table-user-prefer-right": "22px"
}1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
中（medium）
typescript
{
"table-thead-bg": "var(--oio-background)",
"table-body-bg": "var(--oio-background)",
"table-text-color": "var(--oio-text-color)",
"table-title-color": "rgba(255,255,255,0.85)",
"table-title-font-weight": 500,
"table-title-sort-icon-size": "11px",
"table-tr-height": "var(--oio-height-lg)",
"table-tr-stripe-bg": "rgba(255,255,255,0.1)",
"table-tr-checked-bg": "rgba(255,255,255,0.1)",
"table-tr-hover-bg": "rgba(255,255,255,0.1)",
"table-row-border": "rgba(51,62,76,1)",
"table-row-body-border": "rgba(51,62,76,1)",
"table-config": {
"border": "full",
"stripe": false,
"isCurrent": true,
"isHover": true
},
"table-thead-height": "48px",
"table-user-prefer-top": "8px",
"table-user-prefer-right": "22px"
}1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
小（small）
typescript
{
"table-thead-bg": "var(--oio-background)",
"table-body-bg": "var(--oio-background)",
"table-text-color": "var(--oio-text-color)",
"table-title-color": "rgba(255,255,255,0.85)",
"table-title-font-weight": 500,
"table-title-sort-icon-size": "11px",
"table-tr-height": "var(--oio-height-lg)",
"table-tr-stripe-bg": "rgba(255,255,255,0.1)",
"table-tr-checked-bg": "rgba(255,255,255,0.1)",
"table-tr-hover-bg": "rgba(255,255,255,0.1)",
"table-row-border": "rgba(51,62,76,1)",
"table-row-body-border": "rgba(51,62,76,1)",
"table-config": {
"border": "full",
"stripe": false,
"isCurrent": true,
"isHover": true
},
"table-thead-height": "40px",
"table-user-prefer-top": "4px",
"table-user-prefer-right": "22px"
}1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
20、选项卡（tabs）
大（large）
typescript
{
"tabs-font-size": "var(--oio-font-size-lg)"
}1
2
3
2
3
中（medium）
typescript
{
"tabs-font-size": "var(--oio-font-size)"
}1
2
3
2
3
小（small）
typescript
{
"tabs-font-size": "var(--oio-font-size)"
}1
2
3
2
3
21、多行文本（textarea）
typescript
{
"textarea-background": "#15232E",
"textarea-border-width": "var(--oio-border-width)",
"textarea-border-style": "var(--oio-border-style)",
"textarea-border-color": "var(--oio-border-color)",
"textarea-border-radius": "var(--oio-border-radius)",
"textarea-outline": "none",
"textarea-shadow": "none",
"textarea-text-color": "var(--oio-text-color)",
"textarea-background-hover": "var(--oio-textarea-background)",
"textarea-border-width-hover": "var(--oio-textarea-border-width)",
"textarea-border-style-hover": "var(--oio-textarea-border-style)",
"textarea-border-color-hover": "var(--oio-primary-color-hover)",
"textarea-border-radius-hover": "var(--oio-textarea-border-radius)",
"textarea-outline-hover": "var(--oio-textarea-outline)",
"textarea-shadow-hover": "var(--oio-textarea-shadow)",
"textarea-text-color-hover": "var(--oio-textarea-text-color)",
"textarea-background-focus": "var(--oio-textarea-background)",
"textarea-border-width-focus": "var(--oio-textarea-border-width)",
"textarea-border-style-focus": "var(--oio-textarea-border-style)",
"textarea-border-color-focus": "var(--oio-primary-color-hover)",
"textarea-border-radius-focus": "var(--oio-textarea-border-radius)",
"textarea-outline-focus": "var(--oio-textarea-outline)",
"textarea-shadow-focus": "0px 0px 0px 2px rgba(var(--oio-primary-color-rgb),0.1);",
"textarea-text-color-focus": "var(--oio-textarea-text-color)"
}1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
22、穿梭框（transfer）
typescript
{
"transfer-background-color": "var(--oio-background)",
"transfer-header-border-color": "var(--oio-border-color)"
}1
2
3
4
2
3
4
23、树选择（tree-select）
大（large）
typescript
{
"tree-select-selection-height": "24px",
"tree-select-selection-line-height": "22px"
}1
2
3
4
2
3
4
中（medium）
typescript
{
"tree-select-selection-height": "24px",
"tree-select-selection-line-height": "22px"
}1
2
3
4
2
3
4
小（small）
typescript
{
"tree-select-selection-height": "16px",
"tree-select-selection-line-height": "16px"
}1
2
3
4
2
3
4
24、上传（upload）
typescript
{
"upload-background": "var(--oio-background)",
"upload-border-width": "var(--oio-border-width)",
"upload-border-style": "dashed",
"upload-border-color": "var(--oio-border-color)",
"upload-border-radius": "var(--oio-border-radius)",
"upload-outline": "none",
"upload-shadow": "none",
"upload-text-color": "var(--oio-text-color)",
"upload-background-hover": "var(--oio-upload-background)",
"upload-border-width-hover": "var(--oio-upload-border-width)",
"upload-border-style-hover": "var(--oio-upload-border-style)",
"upload-border-color-hover": "var(--oio-primary-color-hover)",
"upload-border-radius-hover": "var(--oio-upload-border-radius)",
"upload-outline-hover": "var(--oio-upload-outline)",
"upload-shadow-hover": "var(--oio-upload-shadow)",
"upload-text-color-hover": "var(--oio-upload-text-color)",
"upload-background-focus": "var(--oio-upload-background)",
"upload-border-width-focus": "var(--oio-upload-border-width)",
"upload-border-style-focus": "var(--oio-upload-border-style)",
"upload-border-color-focus": "var(--oio-primary-color-hover)",
"upload-border-radius-focus": "var(--oio-upload-border-radius)",
"upload-outline-focus": "var(--oio-upload-outline)",
"upload-shadow-focus": "var(--oio-upload-shadow)",
"upload-text-color-focus": "var(--oio-upload-text-color)"
}1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26