advance-semi-theme 1.0.0

package/dist/antd/styles/components/typography.css

@@ -0,0 +1,184 @@
+/**
+ * Typography 排版 - Semi Design 风格
+ */
+
+.semi:where([data-semi="all"], [data-semi-typography]) .ant-typography {
+  color: var(--semi-color-text-0);
+}
+
+/* 标题 */
+.semi:where([data-semi="all"], [data-semi-typography]) h1.ant-typography,
+.semi:where([data-semi="all"], [data-semi-typography]) .ant-typography h1 {
+  color: var(--semi-color-text-0);
+  font-size: 32px;
+  font-weight: 600;
+  line-height: 1.25;
+  margin-bottom: 0.5em;
+}
+
+.semi:where([data-semi="all"], [data-semi-typography]) h2.ant-typography,
+.semi:where([data-semi="all"], [data-semi-typography]) .ant-typography h2 {
+  color: var(--semi-color-text-0);
+  font-size: 24px;
+  font-weight: 600;
+  line-height: 1.33;
+  margin-bottom: 0.5em;
+}
+
+.semi:where([data-semi="all"], [data-semi-typography]) h3.ant-typography,
+.semi:where([data-semi="all"], [data-semi-typography]) .ant-typography h3 {
+  color: var(--semi-color-text-0);
+  font-size: 20px;
+  font-weight: 600;
+  line-height: 1.4;
+  margin-bottom: 0.5em;
+}
+
+.semi:where([data-semi="all"], [data-semi-typography]) h4.ant-typography,
+.semi:where([data-semi="all"], [data-semi-typography]) .ant-typography h4 {
+  color: var(--semi-color-text-0);
+  font-size: 16px;
+  font-weight: 600;
+  line-height: 1.5;
+  margin-bottom: 0.5em;
+}
+
+.semi:where([data-semi="all"], [data-semi-typography]) h5.ant-typography,
+.semi:where([data-semi="all"], [data-semi-typography]) .ant-typography h5 {
+  color: var(--semi-color-text-0);
+  font-size: 14px;
+  font-weight: 600;
+  line-height: 1.57;
+  margin-bottom: 0.5em;
+}
+
+/* 段落 */
+.semi:where([data-semi="all"], [data-semi-typography]) div.ant-typography,
+.semi:where([data-semi="all"], [data-semi-typography]) p.ant-typography,
+.semi:where([data-semi="all"], [data-semi-typography]) .ant-typography p {
+  color: var(--semi-color-text-0);
+  font-size: var(--semi-font-size-regular);
+  line-height: 1.57;
+  margin-bottom: 1em;
+}
+
+/* 次要文本 */
+.semi:where([data-semi="all"], [data-semi-typography]) .ant-typography-secondary {
+  color: var(--semi-color-text-1);
+}
+
+/* 成功文本 */
+.semi:where([data-semi="all"], [data-semi-typography]) .ant-typography-success {
+  color: var(--semi-color-success);
+}
+
+/* 警告文本 */
+.semi:where([data-semi="all"], [data-semi-typography]) .ant-typography-warning {
+  color: var(--semi-color-warning);
+}
+
+/* 危险文本 */
+.semi:where([data-semi="all"], [data-semi-typography]) .ant-typography-danger {
+  color: var(--semi-color-danger);
+}
+
+/* 禁用文本 */
+.semi:where([data-semi="all"], [data-semi-typography]) .ant-typography-disabled {
+  color: var(--semi-color-text-3);
+  cursor: not-allowed;
+  user-select: none;
+}
+
+/* 标记文本 */
+.semi:where([data-semi="all"], [data-semi-typography]) .ant-typography mark {
+  background: var(--semi-color-warning-light-default);
+  padding: 0;
+}
+
+/* 代码 */
+.semi:where([data-semi="all"], [data-semi-typography]) .ant-typography code {
+  background: var(--semi-color-fill-0);
+  border: 1px solid var(--semi-color-border);
+  border-radius: var(--semi-border-radius-small);
+  font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, Courier, monospace;
+  font-size: 85%;
+  margin: 0 0.2em;
+  padding: 0.2em 0.4em;
+}
+
+/* 键盘快捷键 */
+.semi:where([data-semi="all"], [data-semi-typography]) .ant-typography kbd {
+  background: var(--semi-color-fill-0);
+  border: 1px solid var(--semi-color-border);
+  border-radius: var(--semi-border-radius-small);
+  font-size: 90%;
+  padding: 0.15em 0.4em;
+}
+
+/* 链接 */
+.semi:where([data-semi="all"], [data-semi-typography]) a.ant-typography,
+.semi:where([data-semi="all"], [data-semi-typography]) .ant-typography a {
+  color: var(--semi-color-primary);
+  text-decoration: none;
+  transition: color var(--semi-transition-duration) var(--semi-transition-timing);
+}
+
+.semi:where([data-semi="all"], [data-semi-typography]) a.ant-typography:hover,
+.semi:where([data-semi="all"], [data-semi-typography]) .ant-typography a:hover {
+  color: var(--semi-color-primary-hover);
+}
+
+.semi:where([data-semi="all"], [data-semi-typography]) a.ant-typography:active,
+.semi:where([data-semi="all"], [data-semi-typography]) .ant-typography a:active {
+  color: var(--semi-color-primary-active);
+}
+
+/* 可编辑 */
+.semi:where([data-semi="all"], [data-semi-typography]) .ant-typography-edit {
+  color: var(--semi-color-text-2);
+  margin-inline-start: 4px;
+}
+
+.semi:where([data-semi="all"], [data-semi-typography]) .ant-typography-edit:hover {
+  color: var(--semi-color-primary);
+}
+
+/* 可复制 */
+.semi:where([data-semi="all"], [data-semi-typography]) .ant-typography-copy {
+  color: var(--semi-color-text-2);
+  margin-inline-start: 4px;
+}
+
+.semi:where([data-semi="all"], [data-semi-typography]) .ant-typography-copy:hover {
+  color: var(--semi-color-primary);
+}
+
+.semi:where([data-semi="all"], [data-semi-typography]) .ant-typography-copy-success {
+  color: var(--semi-color-success);
+}
+
+/* 展开/收起 */
+.semi:where([data-semi="all"], [data-semi-typography]) .ant-typography-expand,
+.semi:where([data-semi="all"], [data-semi-typography]) .ant-typography-collapse {
+  color: var(--semi-color-primary);
+  cursor: pointer;
+  margin-inline-start: 4px;
+}
+
+.semi:where([data-semi="all"], [data-semi-typography]) .ant-typography-expand:hover,
+.semi:where([data-semi="all"], [data-semi-typography]) .ant-typography-collapse:hover {
+  color: var(--semi-color-primary-hover);
+}
+
+/* 省略号 */
+.semi:where([data-semi="all"], [data-semi-typography]) .ant-typography-ellipsis-single-line {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.semi:where([data-semi="all"], [data-semi-typography]) .ant-typography-ellipsis-multiple-line {
+  display: -webkit-box;
+  overflow: hidden;
+  -webkit-box-orient: vertical;
+}

package/dist/antd/styles/components/upload.css

@@ -0,0 +1,181 @@
+/**
+ * Upload 上传 - Semi Design 风格
+ */
+
+.semi:where([data-semi="all"], [data-semi-upload]) .ant-upload-wrapper {
+  color: var(--semi-color-text-0);
+  font-size: var(--semi-font-size-regular);
+}
+
+/* 点击上传 */
+.semi:where([data-semi="all"], [data-semi-upload]) .ant-upload-select-text .ant-upload {
+  display: inline-block;
+}
+
+/* 拖拽上传 */
+.semi:where([data-semi="all"], [data-semi-upload]) .ant-upload-drag {
+  background: var(--semi-color-fill-0);
+  border: 1px dashed var(--semi-color-border);
+  border-radius: var(--semi-border-radius-medium);
+  padding: 16px;
+  text-align: center;
+  transition: all var(--semi-transition-duration) var(--semi-transition-timing);
+}
+
+.semi:where([data-semi="all"], [data-semi-upload]) .ant-upload-drag:hover {
+  border-color: var(--semi-color-primary);
+}
+
+.semi:where([data-semi="all"], [data-semi-upload]) .ant-upload-drag.ant-upload-drag-hover {
+  border-color: var(--semi-color-primary);
+  background: var(--semi-color-primary-light-default);
+}
+
+.semi:where([data-semi="all"], [data-semi-upload]) .ant-upload-drag-icon {
+  color: var(--semi-color-primary);
+  font-size: 48px;
+  margin-bottom: 16px;
+}
+
+.semi:where([data-semi="all"], [data-semi-upload]) .ant-upload-text {
+  color: var(--semi-color-text-0);
+  font-size: var(--semi-font-size-regular);
+  margin: 0 0 4px;
+}
+
+.semi:where([data-semi="all"], [data-semi-upload]) .ant-upload-hint {
+  color: var(--semi-color-text-2);
+  font-size: var(--semi-font-size-small);
+}
+
+/* 图片卡片 */
+.semi:where([data-semi="all"], [data-semi-upload]) .ant-upload-select-picture-card,
+.semi:where([data-semi="all"], [data-semi-upload]) .ant-upload-list-picture-card .ant-upload-list-item-container {
+  background: var(--semi-color-fill-0);
+  border: 1px dashed var(--semi-color-border);
+  border-radius: var(--semi-border-radius-medium);
+  height: 104px;
+  width: 104px;
+  margin-inline-end: 8px;
+  margin-bottom: 8px;
+  overflow: hidden;
+  transition: all var(--semi-transition-duration) var(--semi-transition-timing);
+}
+
+.semi:where([data-semi="all"], [data-semi-upload]) .ant-upload-select-picture-card:hover {
+  border-color: var(--semi-color-primary);
+}
+
+.semi:where([data-semi="all"], [data-semi-upload]) .ant-upload-list-picture-card .ant-upload-list-item {
+  border: none;
+  border-radius: var(--semi-border-radius-medium);
+  padding: 0;
+}
+
+/* 上传按钮 */
+.semi:where([data-semi="all"], [data-semi-upload]) .ant-upload-select-picture-card .ant-upload {
+  align-items: center;
+  color: var(--semi-color-text-2);
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  justify-content: center;
+  width: 100%;
+}
+
+/* 文件列表 */
+.semi:where([data-semi="all"], [data-semi-upload]) .ant-upload-list {
+  font-size: var(--semi-font-size-regular);
+}
+
+.semi:where([data-semi="all"], [data-semi-upload]) .ant-upload-list-item {
+  border-radius: var(--semi-border-radius-small);
+  height: 24px;
+  margin-top: 8px;
+  padding: 0 4px;
+  transition: background var(--semi-transition-duration) var(--semi-transition-timing);
+}
+
+.semi:where([data-semi="all"], [data-semi-upload]) .ant-upload-list-item:hover {
+  background: var(--semi-color-fill-0);
+}
+
+.semi:where([data-semi="all"], [data-semi-upload]) .ant-upload-list-item-name {
+  color: var(--semi-color-text-0);
+  flex: 1;
+  padding: 0 8px;
+}
+
+.semi:where([data-semi="all"], [data-semi-upload]) .ant-upload-list-item-card-actions {
+  opacity: 0;
+  transition: opacity var(--semi-transition-duration) var(--semi-transition-timing);
+}
+
+.semi:where([data-semi="all"], [data-semi-upload]) .ant-upload-list-item:hover .ant-upload-list-item-card-actions {
+  opacity: 1;
+}
+
+/* 删除按钮 */
+.semi:where([data-semi="all"], [data-semi-upload]) .ant-upload-list-item-action {
+  color: var(--semi-color-text-2);
+}
+
+.semi:where([data-semi="all"], [data-semi-upload]) .ant-upload-list-item-action:hover {
+  color: var(--semi-color-danger);
+}
+
+/* 上传中 */
+.semi:where([data-semi="all"], [data-semi-upload]) .ant-upload-list-item-uploading {
+  color: var(--semi-color-text-2);
+}
+
+.semi:where([data-semi="all"], [data-semi-upload]) .ant-upload-list-item-progress {
+  bottom: -12px;
+  padding-inline-start: 28px;
+}
+
+/* 上传错误 */
+.semi:where([data-semi="all"], [data-semi-upload]) .ant-upload-list-item-error {
+  color: var(--semi-color-danger);
+}
+
+.semi:where([data-semi="all"], [data-semi-upload]) .ant-upload-list-item-error .ant-upload-list-item-name {
+  color: var(--semi-color-danger);
+}
+
+/* 图片预览 */
+.semi:where([data-semi="all"], [data-semi-upload]) .ant-upload-list-picture-card .ant-upload-list-item-actions {
+  background: rgba(0, 0, 0, 0.5);
+  display: flex;
+  inset: 0;
+  justify-content: center;
+  align-items: center;
+  opacity: 0;
+  position: absolute;
+  transition: opacity var(--semi-transition-duration) var(--semi-transition-timing);
+}
+
+.semi:where([data-semi="all"], [data-semi-upload]) .ant-upload-list-picture-card .ant-upload-list-item-container:hover .ant-upload-list-item-actions {
+  opacity: 1;
+}
+
+.semi:where([data-semi="all"], [data-semi-upload]) .ant-upload-list-picture-card .ant-upload-list-item-actions .anticon {
+  color: rgba(255, 255, 255, 0.85);
+  font-size: 16px;
+  margin: 0 4px;
+}
+
+.semi:where([data-semi="all"], [data-semi-upload]) .ant-upload-list-picture-card .ant-upload-list-item-actions .anticon:hover {
+  color: #fff;
+}
+
+/* 禁用状态 */
+.semi:where([data-semi="all"], [data-semi-upload]) .ant-upload-disabled .ant-upload,
+.semi:where([data-semi="all"], [data-semi-upload]) .ant-upload-disabled .ant-upload-drag {
+  background: var(--semi-color-fill-0);
+  cursor: not-allowed;
+}
+
+.semi:where([data-semi="all"], [data-semi-upload]) .ant-upload-disabled .ant-upload-drag:hover {
+  border-color: var(--semi-color-border);
+}

package/dist/antd/styles/components/watermark.css

@@ -0,0 +1,16 @@
+/**
+ * Watermark 水印 - Semi Design 风格
+ */
+
+.semi:where([data-semi="all"], [data-semi-watermark]) .ant-watermark {
+  position: absolute;
+  inset: 0;
+  pointer-events: none;
+  z-index: 9;
+  overflow: hidden;
+}
+
+.semi:where([data-semi="all"], [data-semi-watermark]) .ant-watermark-content {
+  position: relative;
+  z-index: 10;
+}