Skip to content
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
51 changes: 3 additions & 48 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -109,7 +109,7 @@ If it is necessary to modify the [antd5 theme](https://ant.design/docs/react/cus
// default.scss
:root {
--color-primary: #00b96b; // -> colorPrimary: #00b96b
--border-radius: 4px; // -> borderRadius: 4px
--border-radius: 4px; // -> borderRadius: 4
}
```

Expand All @@ -121,11 +121,11 @@ If it is necessary to modify the [antd5 theme](https://ant.design/docs/react/cus
"tokens": {
"dark": {
"colorPrimary": "#000",
"borderRadius": "4px",
"borderRadius": "4",
},
"default": {
"colorPrimary": "#00b96b",
"borderRadius": "4px"
"borderRadius": "4"
}
},
"vars": {
Expand All @@ -150,51 +150,6 @@ css 变量在切换主题时自动注入到 `head` 下,保证 [antd@5.x](https
</style>
```

警告⚠️: 主题文夹下文件中仅支持 css 变量

<!-- 如果使用`less`, 请安装 [less-vars-to-js](https://www.npmjs.com/package/less-vars-to-js) 按照下面 👇 代码自行调试。

If using `less`, please install [less-vars-to-js](https://www.npmjs.com/package/less-vars-to-js) According to the following 👇 Code self debugging.

````ts
import lessToJs from 'less-vars-to-js';
import { lowerCamel } from '@skax/camel';
import fs from 'fs';

/**
* less 变量转成 json 格式 (更改 antd 主题样式更新需要重启)
* Convert the less variable to JSON format
*
* @example
*
* ```less
* $color-primary: #00b96b;
* $border-radius: 2px;
* ```
*
* ```js
* lessVar2JSON() // -> {"colorPrimary": "#00b96b", "borderRadius": "2px"}
* ```
*
* @returns {Object}
*/
function lessVar2JSON() {
// Read the less file in as string
const paletteLess = fs.readFileSync('./src/styles/antd-theme.less', 'utf-8');
// Pass in file contents
const palette = lessToJs(paletteLess, {
resolveVariables: true,
stripPrefix: true,
});

return Object.keys(palette).reduce((pre, cur) => {
pre[lowerCamel(cur, '-')] = palette[cur];
return pre;
}, {});
}
export default lessVar2JSON;
```` -->

## Api

[gin_serve api](https://github.com/freeshineit/gin_serve)
Expand Down
4 changes: 2 additions & 2 deletions scripts/sass-to-json.ts
Original file line number Diff line number Diff line change
Expand Up @@ -14,12 +14,12 @@ import { lowerCamel } from '@skax/camel';
* ```scss
* // -> colorPrimary: #000
* --color-primary: #000;
* // -> borderRadius: 4px
* // -> borderRadius: 4
* --border-radius: 4px;
* ```
*
* ```ts
* sassVar2JSON() // -> {"colorPrimary": "#00b96b, borderRadius: '2px'}
* sassVar2JSON() // -> {"colorPrimary": "#00b96b", borderRadius: 4}
* ```
*
* @returns {Object}
Expand Down
6 changes: 6 additions & 0 deletions src/pages/home/home.module.scss
Original file line number Diff line number Diff line change
Expand Up @@ -24,6 +24,12 @@
}
}

.logoWrapper {
a {
display: inline-block;
}
}

.logo {
height: 6em;
padding: 1.5em;
Expand Down
3 changes: 1 addition & 2 deletions src/pages/home/home.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -17,11 +17,10 @@ const Home = () => {

return (
<div className={styles.home}>
<div>
<div className={styles.logoWrapper}>
<Popover
content="This project is built with Vite + React + TypeScript + Redux"
placement="top"
open={true}
>
<a href="https://vitejs.dev" target="_blank" rel="noreferrer">
<img src="/vite.svg" className={styles.logo} alt="Vite logo" />
Expand Down