From 505c2463c51afed3d1edcaf73156b4163891a3dc Mon Sep 17 00:00:00 2001 From: iamkun Date: Wed, 26 Jun 2019 17:38:27 +0800 Subject: [PATCH 1/2] update theme md --- examples/docs/en-US/custom-theme.md | 8 ++++---- examples/docs/es/custom-theme.md | 7 ++++--- examples/docs/zh-CN/custom-theme.md | 8 ++++---- 3 files changed, 12 insertions(+), 11 deletions(-) diff --git a/examples/docs/en-US/custom-theme.md b/examples/docs/en-US/custom-theme.md index 22d4ed3d105..589975acc12 100644 --- a/examples/docs/en-US/custom-theme.md +++ b/examples/docs/en-US/custom-theme.md @@ -2,7 +2,7 @@ Element uses BEM-styled CSS so that you can override styles easily. But if you need to replace styles at a large scale, e.g. change the theme color from blue to orange or green, maybe overriding them one by one is not a good idea. We provide four ways to change the style variables. ### Online Theme Roller -Use [Online Theme Roller](./#/en-US/theme) to customize all Design Tokens of global variables and components，and preview the new theme in real-time.and it can generate a complete style package based on the new theme for you to download directly (to import new style files in your project, please refer to the 'Import custom theme' or 'Import component theme on demand' part of this section). +Use [Online Theme Roller](./#/en-US/theme) to customize all Design Tokens of global variables and components，and preview the new theme in real-time.and it can generate a complete style package based on the new theme for you to download directly (to import new style files in your project, please refer to the 'Import custom theme' part of this section). @@ -92,16 +92,16 @@ $--color-primary: red; ``` #### Build theme -After saving the variable file, use `et` to build your theme. You can activate `watch` mode by adding a parameter `-w`. And if you customized the variable file's output, you need to add a parameter `-c` and variable file's name: +After saving the variable file, use `et` to build your theme. You can activate `watch` mode by adding a parameter `-w`. And if you customized the variable file's output, you need to add a parameter `-c` and variable file's name. By default the build theme file is placed inside `./theme`. You can specify its output directory with parameter `-o`. ```shell et > ✔ build theme font > ✔ build element theme ``` - +### Use custom theme #### Import custom theme -By default the build theme file is placed inside `./theme`. You can specify its output directory with parameter `-o`. Importing your own theme is just like importing the default theme, only this time you import the file you just built: +Importing your own theme is just like importing the default theme, only this time you import the file built from "Online Theme Roller" or "CLI tool": ```javascript import '../theme/index.css' diff --git a/examples/docs/es/custom-theme.md b/examples/docs/es/custom-theme.md index b382440e521..c1f48902c1d 100644 --- a/examples/docs/es/custom-theme.md +++ b/examples/docs/es/custom-theme.md @@ -2,7 +2,7 @@ Element utiliza la metodología BEM en CSS con la finalidad de que puedas sobrescribir los estilos fácilmente. Pero, si necesita remplazar estilos a gran escala, por ejemplo, cambiar el color del tema de azul a naranja o verde, quizás reemplazarlos uno a uno no sea lo más adecuado, para ello hay 4 maneras de modificar los estilos. ### Online Theme Roller -Use [Online Theme Roller](./#/es/theme) to customize all Design Tokens of global variables and components，and preview the new theme in real-time.and it can generate a complete style package based on the new theme for you to download directly (to import new style files in your project, please refer to the 'Import custom theme' or 'Import component theme on demand' part of this section). +Use [Online Theme Roller](./#/es/theme) to customize all Design Tokens of global variables and components，and preview the new theme in real-time.and it can generate a complete style package based on the new theme for you to download directly (to import new style files in your project, please refer to the 'Import custom theme' or part of this section). @@ -92,7 +92,7 @@ $--color-primary: red; ``` #### Construyendo el tema -Después de haber modificado el archivo de variables, utilizaremos el comando `et` para construir nuestro tema. Puedes activar el modo `watch` agregando el parámetro `-w`. Y, si desea personalizar el nombre del archivo, debes agregar el parámetro `-c` seguido del nombre. +Después de haber modificado el archivo de variables, utilizaremos el comando `et` para construir nuestro tema. Puedes activar el modo `watch` agregando el parámetro `-w`. Y, si desea personalizar el nombre del archivo, debes agregar el parámetro `-c` seguido del nombre. Por defecto, el archivo de tema construido es colocado dentro de `./theme`. Puede especificar un directorio distinto utilizando el parámetro `-o`. ```shell et @@ -100,8 +100,9 @@ et > ✔ build element theme ``` +### Use custom theme #### Importar un tema personalizado -Por defecto, el archivo de tema construido es colocado dentro de `./theme`. Puede especificar un directorio distinto utilizando el parámetro `-o`. Importar su propio tema es igual a como si importará el tema por defecto, únicamente tiene que importar el archivo que se construyó: +Importing your own theme is just like importing the default theme, only this time you import the file built from "Online Theme Roller" or "CLI tool": ```javascript import '../theme/index.css' diff --git a/examples/docs/zh-CN/custom-theme.md b/examples/docs/zh-CN/custom-theme.md index a1047bef398..4f0b65ef476 100644 --- a/examples/docs/zh-CN/custom-theme.md +++ b/examples/docs/zh-CN/custom-theme.md @@ -2,7 +2,7 @@ Element 默认提供一套主题，CSS 命名采用 BEM 的风格，方便使用者覆盖样式。我们提供了四种方法，可以进行不同程度的样式自定义。 ### 在线主题编辑器 -使用[在线主题编辑器](./#/zh-CN/theme)，可以修改定制 Element 所有全局和组件的 Design Tokens，并可以方便地实时预览样式改变后的视觉。同时它还可以基于新的定制样式生成完整的样式文件包，供直接下载使用（关于如何使用下载的主题包，请参考本节「引入自定义主题」和「搭配插件按需引入组件主题」部分）。 +使用[在线主题编辑器](./#/zh-CN/theme)，可以修改定制 Element 所有全局和组件的 Design Tokens，并可以方便地实时预览样式改变后的视觉。同时它还可以基于新的定制样式生成完整的样式文件包，供直接下载使用（关于如何使用下载的主题包，请参考本节「引入自定义主题」部分）。 @@ -91,16 +91,16 @@ $--color-primary: red; ``` #### 编译主题 -保存文件后，到命令行里执行 `et` 编译主题，如果你想启用 `watch` 模式，实时编译主题，增加 `-w` 参数；如果你在初始化时指定了自定义变量文件，则需要增加 `-c` 参数，并带上你的变量文件名 +保存文件后，到命令行里执行 `et` 编译主题，如果你想启用 `watch` 模式，实时编译主题，增加 `-w` 参数；如果你在初始化时指定了自定义变量文件，则需要增加 `-c` 参数，并带上你的变量文件名。默认情况下编译的主题目录是放在 `./theme` 下，你可以通过 `-o` 参数指定打包目录。 ```shell et > ✔ build theme font > ✔ build element theme ``` - +### 使用自定义主题 #### 引入自定义主题 -默认情况下编译的主题目录是放在 `./theme` 下，你可以通过 `-o` 参数指定打包目录。像引入默认主题一样，在代码里直接引用 `theme/index.css` 文件即可。 +和引入默认主题一样，在代码里直接引用「在线主题编辑器」或「命令行工具」生成的主题的 `theme/index.css` 文件即可。 ```javascript import '../theme/index.css' From b99b3a9677e956e84554038f7d962c9eb4573497 Mon Sep 17 00:00:00 2001 From: iamkun Date: Wed, 26 Jun 2019 17:42:46 +0800 Subject: [PATCH 2/2] update fr doc --- examples/docs/fr-FR/custom-theme.md | 7 ++++--- 1 file changed, 4 insertions(+), 3 deletions(-) diff --git a/examples/docs/fr-FR/custom-theme.md b/examples/docs/fr-FR/custom-theme.md index c42f564b64b..d9465c6d0f0 100644 --- a/examples/docs/fr-FR/custom-theme.md +++ b/examples/docs/fr-FR/custom-theme.md @@ -2,7 +2,7 @@ Element utilise le style BEM pour le CSS afin que vous puissiez écraser les règles prédéfinies facilement. Mais si vous avez besoin de remplacer des styles à une plus grande échelle , e.g. changer le thème de bleu à orange ou vert, les modifier une par une serait fastidieux. Nous fournissons ttrtois méthodes pour changer les variables de style. ### Online Theme Roller -Utilisez [Online Theme Roller](./#/fr-FR/theme) pour personnaliser les Design Tokens des variables globales et des composants, et prévisualisez le nouveau thème en temps réel. Il peut générer un package de style complet basé sur le nouveau thème que vous pouvez télécharger directement (pour importer de nouveaux fichiers de style dans votre projet, veuillez vous reporter à la partie 'Importer un thème personnalisé'' ou 'Importer un thème de composant à la demande' de cette section). +Utilisez [Online Theme Roller](./#/fr-FR/theme) pour personnaliser les Design Tokens des variables globales et des composants, et prévisualisez le nouveau thème en temps réel. Il peut générer un package de style complet basé sur le nouveau thème que vous pouvez télécharger directement (pour importer de nouveaux fichiers de style dans votre projet, veuillez vous reporter à la partie 'Importer un thème personnalisé'' de cette section). @@ -93,7 +93,7 @@ $--color-primary: red; ``` #### Générer le thème -Après avoir sauvegardé le fichier de variables, utilisez `et` pour générer le thème. Vous pouvez activer le mode `watch` en ajoutant le paramètre `-w`. Si vous avez choisi le chemin du fichier de sortie, il vous faudra ajouter le paramètre `-c` avec le nom du fichier: +Après avoir sauvegardé le fichier de variables, utilisez `et` pour générer le thème. Vous pouvez activer le mode `watch` en ajoutant le paramètre `-w`. Si vous avez choisi le chemin du fichier de sortie, il vous faudra ajouter le paramètre `-c` avec le nom du fichier. Par défaut le thème généré est placé dans `./theme`. Vous pouvez spécifier le dossier de sortie grâce à `-o`. ```shell et @@ -101,8 +101,9 @@ et > ✔ build element theme ``` +### Use custom theme #### Importer le thème -Par défaut le thème généré est placé dans `./theme`. Vous pouvez spécifier le dossier de sortie grâce à `-o`. Importer votre propre thème se fait de la même manière qu'importer le thème par défaut: +Importing your own theme is just like importing the default theme, only this time you import the file built from "Online Theme Roller" or "CLI tool": ```javascript import '../theme/index.css'