From 456043300c1e428e031ba40f108ebd2fb4936ed6 Mon Sep 17 00:00:00 2001 From: Lukasz Fuchs Date: Thu, 31 Aug 2023 16:39:14 +0200 Subject: [PATCH 1/2] FIX/ docs info --- docs/src/articles/guides/branding.md | 76 +++++++++++++++++----------- 1 file changed, 46 insertions(+), 30 deletions(-) diff --git a/docs/src/articles/guides/branding.md b/docs/src/articles/guides/branding.md index 09dc7c6b8..32bb54547 100644 --- a/docs/src/articles/guides/branding.md +++ b/docs/src/articles/guides/branding.md @@ -44,15 +44,16 @@ When the theme is ready, click the `Export` button and select `JSON` option. Copy the downloaded file into your project. To apply a theme, we should choose the theme provided by Eva to use it as a core for ours. In order to build dark theme, use `eva.dark` or `eva.light` otherwise. Our choice is dark. + ```js -import React from 'react'; -import * as eva from '@eva-design/eva'; -import { ApplicationProvider, Layout, Button } from '@ui-kitten/components'; -import { default as theme } from './theme.json'; // <-- Import app theme +import React from "react"; +import * as eva from "@eva-design/eva"; +import { ApplicationProvider, Layout, Button } from "@ui-kitten/components"; +import { default as theme } from "./theme.json"; // <-- Import app theme export default () => ( - + @@ -73,6 +74,7 @@ There are 11 shades of Basic color. In order to change backgrounds properly, eac To do this, we may get back to Eva Colors. Start with choosing the lightest shade of the background (usually, it is completely white in light themes) and move down accurately by picking darker shades. Paste each color into `theme.json` like in the example below. + ```json { "color-basic-100": "#FFFFFF", @@ -92,14 +94,15 @@ and move down accurately by picking darker shades. Paste each color into `theme. There are 6 shades of transparency in Eva. Pick color-basic-600 value and transform it to rgba format with adding an alpha channel. In Eva, we start with 8% transparency and move up with increasing it on the same value. + ```json { - "color-basic-transparent-100": "rgba(128, 128, 128, 0.08)", - "color-basic-transparent-200": "rgba(128, 128, 128, 0.16)", - "color-basic-transparent-300": "rgba(128, 128, 128, 0.24)", - "color-basic-transparent-400": "rgba(128, 128, 128, 0.32)", - "color-basic-transparent-500": "rgba(128, 128, 128, 0.4)", - "color-basic-transparent-600": "rgba(128, 128, 128, 0.48)" + "color-basic-transparent-100": "rgba(128, 128, 128, 0.08)", + "color-basic-transparent-200": "rgba(128, 128, 128, 0.16)", + "color-basic-transparent-300": "rgba(128, 128, 128, 0.24)", + "color-basic-transparent-400": "rgba(128, 128, 128, 0.32)", + "color-basic-transparent-500": "rgba(128, 128, 128, 0.4)", + "color-basic-transparent-600": "rgba(128, 128, 128, 0.48)" } ``` @@ -116,6 +119,7 @@ In a dark theme, text colors utilize the upper part of the shades (whitish color Sometimes it is required to make Text lighter or darker without modifying Basic palette in order not to break backgrounds. This can be done by configuring extra text variables. Let's take a look at the most useful of them: + - `text-basic-color` used everywhere as the default text color. - `text-hint-color` used for placeholders, labels, captions, subtitles and icons in its default state. - `text-disabled-color` used within every control in a disabled state. @@ -123,6 +127,7 @@ This can be done by configuring extra text variables. Let's take a look at the m So, to tweak text more accurately, we may add these variables to `theme.json` to override its default value. Let's make the default text darker. We may use the value of another theme variable by creating a reference with `$` sign. This will be handled by UI Kitten. + ```json { "text-basic-color": "$color-basic-400" @@ -140,18 +145,20 @@ Eva is designed with = 0.69 use `npm react-native-asset`) from the project root to link fonts with the native side. When it's done, create a `mapping.json` file and paste the code below to apply fonts to UI Kitten components. + ```json { "strict": { @@ -160,20 +167,18 @@ When it's done, create a `mapping.json` file and paste the code below to apply f } ``` -Then go to the `App.js` and add `customMapping` property: +Then go to the `App.js` and add `customMapping` property: + ```js -import React from 'react'; -import * as eva from '@eva-design/eva'; -import { ApplicationProvider, Layout, Button } from '@ui-kitten/components'; -import { default as theme } from './theme.json'; // <-- Import app theme -import { default as mapping } from './mapping.json'; // <-- Import app mapping +import React from "react"; +import * as eva from "@eva-design/eva"; +import { ApplicationProvider, Layout, Button } from "@ui-kitten/components"; +import { default as theme } from "./theme.json"; // <-- Import app theme +import { default as mapping } from "./mapping.json"; // <-- Import app mapping export default () => ( - - + + @@ -189,13 +194,15 @@ In case we need to configure it more accurately, we may use Text Categories. A single text category controls `fontSize`, `fontWeight` and `fontFamily`. There are 13 text categories in Eva: -- Headings: h1, h2 ... h6 + +- Headings: h1, h2 ... h6 - Subtitles: s1 and s2 - Paragraphs: p1 and p2 - Captions: c1 and c2 - Label. You may configure text categories with saving the consistency across UI Kitten components by modifying `mapping.json`: + ```json { "strict": { @@ -206,22 +213,22 @@ You may configure text categories with saving the consistency across UI Kitten c "text-heading-1-font-family": "OpenSans-Bold", // Same for `h2...h6` - + "text-subtitle-1-font-size": 15, "text-subtitle-1-font-weight": "600", "text-subtitle-1-font-family": "OpenSans-SemiBold", // Same for `s2` - + "text-paragraph-1-font-size": 15, "text-paragraph-1-font-weight": "400", "text-paragraph-1-font-family": "OpenSans-Regular", // Same for `p2` - + "text-caption-1-font-size": 12, "text-caption-1-font-weight": "400", "text-caption-1-font-family": "OpenSans-Regular", // Same for `c2` - + "text-label-font-size": 12, "text-label-font-weight": "800", "text-label-font-family": "OpenSans-Bold" @@ -234,6 +241,7 @@ You may configure text categories with saving the consistency across UI Kitten c ## Summary There are 9 shades for each semantic color (primary in this example), and 6 shades for the same color with transparency. + ```json { "color-primary-100": "#FFECD2", @@ -247,11 +255,13 @@ There are 9 shades for each semantic color (primary in this example), and 6 shad "color-primary-transparent-600": "rgba(255, 103, 33, 0.48)" } ``` + These colors define the rules of how another theme variables are used and should never be used directly in code. Transparent palette is always a `-500` color with an alpha channel. It is needed for disabled, outlined and ghost controls. There are 5 stateful color variables for each semantic color. + ```json { "color-primary-default": "$color-primary-500", @@ -261,10 +271,12 @@ There are 5 stateful color variables for each semantic color. "color-primary-disabled": "$color-basic-transparent-300" } ``` + These colors define the color of the component for a particular state. (-active, -disabled, and the rest). To take a value of another variable, that we use `$` sign to define the reference. Semantic colors are always used with its borders. + ```json { "color-primary-default-border": "$color-primary-default", @@ -276,23 +288,26 @@ Semantic colors are always used with its borders. ``` There is a special color within the semantic group - Basic. It has 11 shades. + ```json { "color-basic-100": "#FFFFFF", "color-basic-200": "#F5F5F5", // ... "color-basic-1100": "#141414", - + "color-basic-transparent-100": "rgba(128, 128, 128, 0.08)", "color-basic-transparent-200": "rgba(128, 128, 128, 0.16)", // ... "color-basic-transparent-600": "rgba(128, 128, 128, 0.48)" } ``` + Also, its transparent palette is always a `-600` color with alpha channel. Be careful when working with basic, as it is used by [both backgrounds and text](guides/branding#text-and-icons). There are 4 levels of background used by Layout, Input and similar to it components. + ```json { "background-basic-color-1": "$color-basic-800", @@ -301,6 +316,7 @@ There are 4 levels of background used by Layout, Input and similar to it compone "background-basic-color-4": "$color-basic-1100" } ``` + For instance, default background level is 1 (`background-basic-color-1`). And that's why Input looks well on it by using level 2. From 6c83a0da8297c88a718d857ee2f1a7f99f4f73f1 Mon Sep 17 00:00:00 2001 From: Lukasz Fuchs Date: Thu, 31 Aug 2023 16:43:12 +0200 Subject: [PATCH 2/2] FIX/ docs info --- docs/src/articles/guides/branding.md | 74 +++++++++++----------------- 1 file changed, 29 insertions(+), 45 deletions(-) diff --git a/docs/src/articles/guides/branding.md b/docs/src/articles/guides/branding.md index 32bb54547..bcc0423a9 100644 --- a/docs/src/articles/guides/branding.md +++ b/docs/src/articles/guides/branding.md @@ -44,16 +44,15 @@ When the theme is ready, click the `Export` button and select `JSON` option. Copy the downloaded file into your project. To apply a theme, we should choose the theme provided by Eva to use it as a core for ours. In order to build dark theme, use `eva.dark` or `eva.light` otherwise. Our choice is dark. - ```js -import React from "react"; -import * as eva from "@eva-design/eva"; -import { ApplicationProvider, Layout, Button } from "@ui-kitten/components"; -import { default as theme } from "./theme.json"; // <-- Import app theme +import React from 'react'; +import * as eva from '@eva-design/eva'; +import { ApplicationProvider, Layout, Button } from '@ui-kitten/components'; +import { default as theme } from './theme.json'; // <-- Import app theme export default () => ( - + @@ -74,7 +73,6 @@ There are 11 shades of Basic color. In order to change backgrounds properly, eac To do this, we may get back to Eva Colors. Start with choosing the lightest shade of the background (usually, it is completely white in light themes) and move down accurately by picking darker shades. Paste each color into `theme.json` like in the example below. - ```json { "color-basic-100": "#FFFFFF", @@ -94,15 +92,14 @@ and move down accurately by picking darker shades. Paste each color into `theme. There are 6 shades of transparency in Eva. Pick color-basic-600 value and transform it to rgba format with adding an alpha channel. In Eva, we start with 8% transparency and move up with increasing it on the same value. - ```json { - "color-basic-transparent-100": "rgba(128, 128, 128, 0.08)", - "color-basic-transparent-200": "rgba(128, 128, 128, 0.16)", - "color-basic-transparent-300": "rgba(128, 128, 128, 0.24)", - "color-basic-transparent-400": "rgba(128, 128, 128, 0.32)", - "color-basic-transparent-500": "rgba(128, 128, 128, 0.4)", - "color-basic-transparent-600": "rgba(128, 128, 128, 0.48)" + "color-basic-transparent-100": "rgba(128, 128, 128, 0.08)", + "color-basic-transparent-200": "rgba(128, 128, 128, 0.16)", + "color-basic-transparent-300": "rgba(128, 128, 128, 0.24)", + "color-basic-transparent-400": "rgba(128, 128, 128, 0.32)", + "color-basic-transparent-500": "rgba(128, 128, 128, 0.4)", + "color-basic-transparent-600": "rgba(128, 128, 128, 0.48)" } ``` @@ -119,7 +116,6 @@ In a dark theme, text colors utilize the upper part of the shades (whitish color Sometimes it is required to make Text lighter or darker without modifying Basic palette in order not to break backgrounds. This can be done by configuring extra text variables. Let's take a look at the most useful of them: - - `text-basic-color` used everywhere as the default text color. - `text-hint-color` used for placeholders, labels, captions, subtitles and icons in its default state. - `text-disabled-color` used within every control in a disabled state. @@ -127,7 +123,6 @@ This can be done by configuring extra text variables. Let's take a look at the m So, to tweak text more accurately, we may add these variables to `theme.json` to override its default value. Let's make the default text darker. We may use the value of another theme variable by creating a reference with `$` sign. This will be handled by UI Kitten. - ```json { "text-basic-color": "$color-basic-400" @@ -145,20 +140,18 @@ Eva is designed with = 0.69 use `npm react-native-asset`) from the project root to link fonts with the native side. When it's done, create a `mapping.json` file and paste the code below to apply fonts to UI Kitten components. - ```json { "strict": { @@ -167,18 +160,20 @@ When it's done, create a `mapping.json` file and paste the code below to apply f } ``` -Then go to the `App.js` and add `customMapping` property: - +Then go to the `App.js` and add `customMapping` property: ```js -import React from "react"; -import * as eva from "@eva-design/eva"; -import { ApplicationProvider, Layout, Button } from "@ui-kitten/components"; -import { default as theme } from "./theme.json"; // <-- Import app theme -import { default as mapping } from "./mapping.json"; // <-- Import app mapping +import React from 'react'; +import * as eva from '@eva-design/eva'; +import { ApplicationProvider, Layout, Button } from '@ui-kitten/components'; +import { default as theme } from './theme.json'; // <-- Import app theme +import { default as mapping } from './mapping.json'; // <-- Import app mapping export default () => ( - - + + @@ -194,15 +189,13 @@ In case we need to configure it more accurately, we may use Text Categories. A single text category controls `fontSize`, `fontWeight` and `fontFamily`. There are 13 text categories in Eva: - -- Headings: h1, h2 ... h6 +- Headings: h1, h2 ... h6 - Subtitles: s1 and s2 - Paragraphs: p1 and p2 - Captions: c1 and c2 - Label. You may configure text categories with saving the consistency across UI Kitten components by modifying `mapping.json`: - ```json { "strict": { @@ -213,22 +206,22 @@ You may configure text categories with saving the consistency across UI Kitten c "text-heading-1-font-family": "OpenSans-Bold", // Same for `h2...h6` - + "text-subtitle-1-font-size": 15, "text-subtitle-1-font-weight": "600", "text-subtitle-1-font-family": "OpenSans-SemiBold", // Same for `s2` - + "text-paragraph-1-font-size": 15, "text-paragraph-1-font-weight": "400", "text-paragraph-1-font-family": "OpenSans-Regular", // Same for `p2` - + "text-caption-1-font-size": 12, "text-caption-1-font-weight": "400", "text-caption-1-font-family": "OpenSans-Regular", // Same for `c2` - + "text-label-font-size": 12, "text-label-font-weight": "800", "text-label-font-family": "OpenSans-Bold" @@ -241,7 +234,6 @@ You may configure text categories with saving the consistency across UI Kitten c ## Summary There are 9 shades for each semantic color (primary in this example), and 6 shades for the same color with transparency. - ```json { "color-primary-100": "#FFECD2", @@ -255,13 +247,11 @@ There are 9 shades for each semantic color (primary in this example), and 6 shad "color-primary-transparent-600": "rgba(255, 103, 33, 0.48)" } ``` - These colors define the rules of how another theme variables are used and should never be used directly in code. Transparent palette is always a `-500` color with an alpha channel. It is needed for disabled, outlined and ghost controls. There are 5 stateful color variables for each semantic color. - ```json { "color-primary-default": "$color-primary-500", @@ -271,12 +261,10 @@ There are 5 stateful color variables for each semantic color. "color-primary-disabled": "$color-basic-transparent-300" } ``` - These colors define the color of the component for a particular state. (-active, -disabled, and the rest). To take a value of another variable, that we use `$` sign to define the reference. Semantic colors are always used with its borders. - ```json { "color-primary-default-border": "$color-primary-default", @@ -288,26 +276,23 @@ Semantic colors are always used with its borders. ``` There is a special color within the semantic group - Basic. It has 11 shades. - ```json { "color-basic-100": "#FFFFFF", "color-basic-200": "#F5F5F5", // ... "color-basic-1100": "#141414", - + "color-basic-transparent-100": "rgba(128, 128, 128, 0.08)", "color-basic-transparent-200": "rgba(128, 128, 128, 0.16)", // ... "color-basic-transparent-600": "rgba(128, 128, 128, 0.48)" } ``` - Also, its transparent palette is always a `-600` color with alpha channel. Be careful when working with basic, as it is used by [both backgrounds and text](guides/branding#text-and-icons). There are 4 levels of background used by Layout, Input and similar to it components. - ```json { "background-basic-color-1": "$color-basic-800", @@ -316,7 +301,6 @@ There are 4 levels of background used by Layout, Input and similar to it compone "background-basic-color-4": "$color-basic-1100" } ``` - For instance, default background level is 1 (`background-basic-color-1`). And that's why Input looks well on it by using level 2.