Skip to content

Commit

Permalink
docs: update roadmap docs (#483)
Browse files Browse the repository at this point in the history
  • Loading branch information
@uyarn
uyarn authored Apr 24, 2024
1 parent 253e18b commit 6ffdcef
Show file tree
Hide file tree
Showing 3 changed files with 58 additions and 104 deletions.
16 changes: 6 additions & 10 deletions docs/roadmap.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,20 +10,16 @@ TDesign upcoming iterate plans are as below:

**What TDesign is doing**

Add more UI components [📌 New Component Request · Issue #220 · Tencent/tdesign · GitHub](https://github.com/Tencent/tdesign/issues/220)
Provide more UI components [📌 New Component Request · Issue #220 · Tencent/tdesign · GitHub](https://github.com/Tencent/tdesign/issues/220)

Open-source mobile Flutter version
Open-source mobile Flutter version [TDesign Flutter](https://github.com/Tencent/tdesign-flutter)

Assist community in building desktop Blazor
Support MiniProgram Skyline engine

Accessibility renovation on mobile components, read more details in 📄 [「技术向善，助力 TDesign 无障碍改造」主题活动开始啦 · Issue #1045 · Tencent/tdesign-miniprogram · GitHub](https://github.com/Tencent/tdesign-miniprogram/issues/1045)

Cross-platform intelligent conversion, supporting the conversion of Desktop Vue/Vue next project to Mobile WeChat Mini Program
Provide comprehensive international multi-language experience

**What TDesign are planning to do**

- Provide a more comprehensive international multi-language experience and adapt to RTL

- Provide a components market to host more resources from community contributions, such as pro components and page templates
Provide a components market to host more resources from community contributions, such as pro components and page templates

All of the above work is conducted openly on GitHub Projects. [view on GitHub](https://github.com/orgs/Tencent/projects/1/views/1)
All of the above work is conducted openly on GitHub Projects. [view on GitHub](https://github.com/orgs/Tencent/projects/1)
14 changes: 5 additions & 9 deletions docs/roadmap_zh-CN.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,20 +11,16 @@ title: 后续计划

**我们正在做的**

增加新的通用 UI 组件 [📌 新组件招募 · Issue #220 · Tencent/tdesign · GitHub](https://github.com/Tencent/tdesign/issues/220)
持续增加更多的通用 UI 组件 [📌 新组件招募 · Issue #220 · Tencent/tdesign · GitHub](https://github.com/Tencent/tdesign/issues/220)

对外开源移动端 Flutter
对外开源移动端 Flutter，并持续迭代至稳定版本 [TDesign Flutter](https://github.com/Tencent/tdesign-flutter)

协助社区完成桌面端 Blazor 建设
小程序组件支持 Skyline 引擎

无障碍改造移动端组件，详情参见 📄[「技术向善，助力 TDesign 无障碍改造」主题活动开始啦 · Issue #1045 · Tencent/tdesign-miniprogram · GitHub](https://github.com/Tencent/tdesign-miniprogram/issues/1045)

多端智能转换，支持 Vue/Vue next 等转换为微信小程序
提供更全面的国际化多语言体验

**我们准备做的**

提供更全面的国际化多语言体验，适配 RTL 语言

搭建物料市场，承载更多来自社区贡献的组件、页面模板等资源

以上工作都在 GitHub Projects 上公开进行。[view on GitHub](https://github.com/orgs/Tencent/projects/1/views/1)
以上工作都在 GitHub Projects 上公开进行。[view on GitHub](https://github.com/orgs/Tencent/projects/1)
132 changes: 47 additions & 85 deletions packages/theme-generator/src/common/utils/index.js
View file
Original file line number Diff line number Diff line change
@@ -1,28 +1,25 @@
import { Color } from "tvision-color";
import cssbeautify from "cssbeautify";
import {
LIGHT_FUNCTION_COLOR,
DARK_FUNCTION_COLOR,
} from "../../color-panel/utils/const";
import { Color } from 'tvision-color';
import cssbeautify from 'cssbeautify';
import { LIGHT_FUNCTION_COLOR, DARK_FUNCTION_COLOR } from '../../color-panel/utils/const';

import generatorVariables from "!raw-loader!./vars.css"; // variables for generator
import defaultDarkVariables from "!raw-loader!./default-dark";
import generatorVariables from '!raw-loader!./vars.css'; // variables for generator
import defaultDarkVariables from '!raw-loader!./default-dark';

import { builtInThemeMap } from "../built-in/theme-map";
import { builtInThemeMap } from '../built-in/theme-map';

export * from "tdesign-vue/es/_common/js/color-picker";
export * from 'tdesign-vue/es/_common/js/color-picker';

export const generatorSymbol = "TDESIGN_GENERATOR_SYMBOL";
export const generatorSymbol = 'TDESIGN_GENERATOR_SYMBOL';

export const customTheme = "custom-theme";
export const customDarkTheme = "custom-dark-theme";
export const customTheme = 'custom-theme';
export const customDarkTheme = 'custom-dark-theme';

export function initVariables() {
let styleSheet;
let themeStylesheet = document.getElementById(generatorSymbol);

if (!themeStylesheet) {
styleSheet = document.createElement("style");
styleSheet = document.createElement('style');
styleSheet.id = generatorSymbol;
styleSheet.innerText = generatorVariables;
document.head.appendChild(styleSheet);
Expand All @@ -34,9 +31,9 @@ export function appendStyleSheet(themeId) {
const existSheet = document.getElementById(themeId);

if (!existSheet) {
styleSheet = document.createElement("style");
styleSheet = document.createElement('style');
styleSheet.id = themeId;
styleSheet.type = "text/css";
styleSheet.type = 'text/css';
document.head.appendChild(styleSheet);
} else {
styleSheet = existSheet;
Expand All @@ -50,12 +47,7 @@ export function generateNewTheme(hex, remainInput = true) {
let styleSheet = appendStyleSheet(customTheme);
let darkStyleSheet = appendStyleSheet(customDarkTheme);

const { brandColorIdx, colorPalette, styleSheetString } = generateTokenList(
hex,
false,
10,
remainInput
);
const { brandColorIdx, colorPalette, styleSheetString } = generateTokenList(hex, false, 10, remainInput);
if (builtInThemeMap[hex]) {
styleSheet.innerText = builtInThemeMap[hex];
document.head.removeChild(darkStyleSheet);
Expand All @@ -65,24 +57,19 @@ export function generateNewTheme(hex, remainInput = true) {
darkStyleSheet.innerText = darkCssTokenString;
}

document.documentElement.setAttribute("theme-color", customTheme);
document.documentElement.setAttribute('theme-color', customTheme);
updateBrandMain(hex);
return { brandColorIdx, colorPalette };
}

// update `--brand-main` variable when update theme
export function updateBrandMain(hex) {
const root = document.documentElement;
root.style.setProperty("--brand-main", hex);
root.style.setProperty('--brand-main', hex);
}

// generate token column
export function generateTokenList(
hex,
isDark = false,
step = 10,
remainInput = true
) {
export function generateTokenList(hex, isDark = false, step = 10, remainInput = true) {
const lowCaseHex = hex.toLocaleLowerCase();
const root = isDark
? `:root[theme-color="${customTheme}"][theme-mode="dark"]`
Expand All @@ -98,25 +85,25 @@ export function generateTokenList(
colorPalette = colors;
brandColorIdx = primary;
if (isDark) {
if (lowCaseHex === "#0052d9") {
if (lowCaseHex === '#0052d9') {
colorPalette = [
"#1b2f51",
"#173463",
"#143975",
"#103d88",
"#0d429a",
"#054bbe",
"#2667d4",
"#4582e6",
"#699ef5",
"#96bbf8",
'#1b2f51',
'#173463',
'#143975',
'#103d88',
'#0d429a',
'#054bbe',
'#2667d4',
'#4582e6',
'#699ef5',
'#96bbf8',
];
brandColorIdx = 8;
} else {
// eslint-disable-next-line no-use-before-define
colorPalette.reverse().map((color) => {
const [h, s, l] = Color.colorTransform(color, "hex", "hsl");
return Color.colorTransform([h, Number(s) - 4, l], "hsl", "hex");
const [h, s, l] = Color.colorTransform(color, 'hex', 'hsl');
return Color.colorTransform([h, Number(s) - 4, l], 'hsl', 'hex');
});
brandColorIdx = 5;
}
Expand All @@ -125,32 +112,20 @@ export function generateTokenList(
}
const existSheet = document.getElementById(customTheme);
// combine font/radius/shadow/size into new theme sheet
const fontConfig = existSheet.innerText.match(
/\/\* 字体配置 \*\/(.*)\/\* end 字体配置 \*\//
)?.[0];
const radiusConfig = existSheet.innerText.match(
/\/\* 圆角配置 \*\/(.*)\/\* end 圆角配置 \*\//
)?.[0];
const shadowConfig = existSheet.innerText.match(
/\/\* 阴影配置 \*\/(.*)\/\* end 阴影配置 \*\//
)?.[0];
const sizeConfig = existSheet.innerText.match(
/\/\* 尺寸配置 \*\/(.*)\/\* end 尺寸配置 \*\//
)?.[0];
const fontConfig = existSheet.innerText.match(/\/\* 字体配置 \*\/(.*)\/\* end 字体配置 \*\//)?.[0];
const radiusConfig = existSheet.innerText.match(/\/\* 圆角配置 \*\/(.*)\/\* end 圆角配置 \*\//)?.[0];
const shadowConfig = existSheet.innerText.match(/\/\* 阴影配置 \*\/(.*)\/\* end 阴影配置 \*\//)?.[0];
const sizeConfig = existSheet.innerText.match(/\/\* 尺寸配置 \*\/(.*)\/\* end 尺寸配置 \*\//)?.[0];

// TODO: 功能色、中性色未通过t-vision生成 先固定住
const styleSheetString = `${root}{
--brand-main: var(--td-brand-color-${brandColorIdx + 1});
--td-brand-color-light: var(--td-brand-color-1);
--td-brand-color-focus: var(--td-brand-color-2);
--td-brand-color-disabled: var(--td-brand-color-3);
--td-brand-color-hover: var(--td-brand-color-${
brandColorIdx > 0 ? brandColorIdx : brandColorIdx + 1
});
--td-brand-color-hover: var(--td-brand-color-${brandColorIdx > 0 ? brandColorIdx : brandColorIdx + 1});
--td-brand-color: var(--td-brand-color-${brandColorIdx + 1});
--td-brand-color-active:var(--td-brand-color-${
brandColorIdx > 8 ? brandColorIdx + 1 : brandColorIdx + 2
});
--td-brand-color-active:var(--td-brand-color-${brandColorIdx > 8 ? brandColorIdx + 1 : brandColorIdx + 2});
--td-brand-color-1: ${colorPalette[0]};
--td-brand-color-2: ${colorPalette[1]};
--td-brand-color-3: ${colorPalette[2]};
Expand All @@ -175,42 +150,32 @@ export function handleDownload() {
const darkStyleSheet = document.getElementById(customDarkTheme);
const hex = window
.getComputedStyle(document.documentElement)
.getPropertyValue("--td-brand-color")
.getPropertyValue('--td-brand-color')
.toLocaleUpperCase()
.trim();

let cssVariablesString = styleSheet?.innerText?.replaceAll(
`[theme-color="${customTheme}"]`,
""
);
let darkCssVariablesString = darkStyleSheet?.innerText?.replaceAll(
`[theme-color="${customTheme}"]`,
""
);
let cssVariablesString = styleSheet?.innerText?.replaceAll(`[theme-color="${customTheme}"]`, '');
let darkCssVariablesString = darkStyleSheet?.innerText?.replaceAll(`[theme-color="${customTheme}"]`, '');

const finalCssVariablesString = builtInThemeMap[hex]
? cssVariablesString
: `${cssVariablesString}${darkCssVariablesString}`;
if (window._horizon) {
window._horizon.send("主题生成器主题下载", "click", hex.replace("#", ""));
window._horizon.send('主题生成器主题下载', 'click', hex.replace('#', ''));
}
const beautifyCssVariablesString = cssbeautify(finalCssVariablesString);
const blob = new Blob([beautifyCssVariablesString], { type: "text" });
const blob = new Blob([beautifyCssVariablesString], { type: 'text' });
const cssUrl = URL.createObjectURL(blob);
const a = document.createElement("a");
a.download = "theme.css";
a.target = "_blank";
const a = document.createElement('a');
a.download = 'theme.css';
a.target = '_blank';
a.href = cssUrl;
a.click();
}

// set attach node, to resolve web component shadow root dom issue
export function handleAttach() {
return (
document
.querySelector("td-theme-generator")
?.shadowRoot?.querySelector?.(".theme-generator") || document.body
);
return document.querySelector('td-theme-generator')?.shadowRoot?.querySelector?.('.theme-generator') || document.body;
}

// modify custom-theme token/variable value
Expand All @@ -219,15 +184,12 @@ export function modifyToken(tokenIdxName, res) {
if (!styleSheet) return;
const reg = new RegExp(`${tokenIdxName}: (.*)`);

const curSize = styleSheet.innerText.match(reg)?.[1]?.split?.(";")?.[0];
const curSize = styleSheet.innerText.match(reg)?.[1]?.split?.(';')?.[0];
if (!curSize) {
console.warn(`CSS variable: ${tokenIdxName} is not exist`);
return;
}
styleSheet.innerText = styleSheet.innerText.replace(
`${tokenIdxName}: ${curSize}`,
`${tokenIdxName}: ${res}`
);
styleSheet.innerText = styleSheet.innerText.replace(`${tokenIdxName}: ${curSize}`, `${tokenIdxName}: ${res}`);
}

// get current stylesheet
Expand Down

0 comments on commit 6ffdcef

Please sign in to comment.