Skip to content

Commit

Permalink
feat(plasma-theme-builder): Add generate tokens state value
Browse files Browse the repository at this point in the history
  • Loading branch information
@neretin-trike
neretin-trike committed Mar 21, 2024
1 parent f3d4ae7 commit a2afd17
Show file tree
Hide file tree
Showing 3 changed files with 99 additions and 9 deletions.
69 changes: 63 additions & 6 deletions website/plasma-theme-builder/src/builder/createTheme.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -16,33 +16,89 @@ import {
} from './themeTokenGetters';

import type { TextIconsTokenName, ControlsSurfacesName, BackgroundName, OverlayName } from './themeTokenGetters';
import type { Theme } from '../types';
import type { Theme, TokenData } from '../types';
import { sectionToFormulaMap, getStateToken } from '../utils';

const getStatTokens = (
section: string,
name: string,
mode: ThemeMode,
tokens?: Record<ThemeMode, Record<string, TokenData<{}>>>,
) => {
let defaultStateTokens = undefined;
let onDarkStateTokens = undefined;
let onLightStateTokens = undefined;
let inverseStateTokens = undefined;
const sectionName = sectionToFormulaMap[section];

if (!sectionName || !tokens) {
return { defaultStateTokens, onDarkStateTokens, onLightStateTokens, inverseStateTokens };
}

const getDefaultStateToken = getStateToken(sectionName, mode, tokens[mode].default);
defaultStateTokens = {
[`${name}Hover`]: getDefaultStateToken('hover'),
[`${name}Active`]: getDefaultStateToken('active'),
};

const getOnDarkStateToken = getStateToken(sectionName, mode, tokens[mode].onDark);
onDarkStateTokens = {
[`${name}Hover`]: getOnDarkStateToken('hover'),
[`${name}Active`]: getOnDarkStateToken('active'),
};

const getOnLightStateToken = getStateToken(sectionName, mode, tokens[mode].onLight);
onLightStateTokens = {
[`${name}Hover`]: getOnLightStateToken('hover'),
[`${name}Active`]: getOnLightStateToken('active'),
};

const getInverseStateToken = getStateToken(sectionName, mode, tokens[mode].inverse);
inverseStateTokens = {
[`${name}Hover`]: getInverseStateToken('hover'),
[`${name}Active`]: getInverseStateToken('active'),
};

return { defaultStateTokens, onDarkStateTokens, onLightStateTokens, inverseStateTokens };
};

const getTokensByGroups = <T extends string>(
tokenGetters: Record<string, TokensGetterFn>,
config: ThemeConfig,
mode: ThemeMode,
section: string,
): TokensByType<T> => {
return Object.entries(tokenGetters).reduce(
(tokensByGroup, [name, getter]) => {
const tokens = getter(config);

const { defaultStateTokens, onDarkStateTokens, onLightStateTokens, inverseStateTokens } = getStatTokens(
section,
name,
mode,
tokens,
);

return {
default: {
...tokensByGroup.default,
[name]: tokens[mode].default,
...defaultStateTokens,
},
onDark: {
...tokensByGroup.onDark,
[name]: tokens[mode].onDark,
...onDarkStateTokens,
},
onLight: {
...tokensByGroup.onLight,
[name]: tokens[mode].onLight,
...onLightStateTokens,
},
inverse: {
...tokensByGroup.inverse,
[name]: tokens[mode].inverse,
...inverseStateTokens,
},
};
},
Expand All @@ -59,6 +115,7 @@ const getTokensBackgroundByGroups = <T extends string>(
tokenGetters: Record<string, TokensGetterFn>,
config: ThemeConfig,
mode: ThemeMode,
section: string,
): TokensBackgroundByType<T> => {
return Object.entries(tokenGetters).reduce(
(tokensByGroup, [name, getter]) => {
Expand Down Expand Up @@ -94,11 +151,11 @@ const getTokensBackgroundByGroups = <T extends string>(

const getThemeModeTokens = <T extends ThemeMode>(config: ThemeConfig, mode: T): Theme[T] => {
return {
text: getTokensByGroups<TextIconsTokenName>(textTokenGetters, config, mode),
surface: getTokensByGroups<ControlsSurfacesName>(surfaceTokenGetters, config, mode),
background: getTokensBackgroundByGroups<BackgroundName>(backgroundTokenGetters, config, mode),
overlay: getTokensByGroups<OverlayName>(overlayTokenGetters, config, mode),
outline: getTokensByGroups<OutlineName>(outlineTokenGetters, config, mode),
text: getTokensByGroups<TextIconsTokenName>(textTokenGetters, config, mode, 'text'),
surface: getTokensByGroups<ControlsSurfacesName>(surfaceTokenGetters, config, mode, 'surface'),
background: getTokensBackgroundByGroups<BackgroundName>(backgroundTokenGetters, config, mode, 'background'),
overlay: getTokensByGroups<OverlayName>(overlayTokenGetters, config, mode, 'overlay'),
outline: getTokensByGroups<OutlineName>(outlineTokenGetters, config, mode, 'outline'),
};
};

Expand Down
29 changes: 27 additions & 2 deletions website/plasma-theme-builder/src/components/TokenForm/TokenForm.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,15 +2,16 @@ import React, { ChangeEvent, useCallback, useState } from 'react';
import styled from 'styled-components';
import { Button, H3, Modal, Switch, TextField } from '@salutejs/plasma-b2c';
import { surfaceLiquid01 } from '@salutejs/plasma-tokens-b2c';
import type { ThemeMode } from '@salutejs/plasma-tokens-utils';
import { ThemeMode } from '@salutejs/plasma-tokens-utils';

import { FormField } from '../FormField/FormField';
import { SolidTokenValue } from '../SolidTokenValue/SolidTokenValue';
import { TypeTabs } from '../TypeTabs/TypeTabs';
import { GradientTokenValue } from '../GradientTokenValue/GradientTokenValue';

import { SBSansTextMono } from '../mixins';
import type { MultiplatformValue, InputData, Theme as ThemeType } from '../../types';
import type { MultiplatformValue, InputData, Theme as ThemeType, TokenData } from '../../types';
import { sectionToFormulaMap, getStateToken } from '../../utils';

const Form = styled.form``;

Expand Down Expand Up @@ -149,9 +150,32 @@ export const TokenForm = ({
const hasToken = themeData[themeMode][section.value][subsection.value][tokenName];
const cleanedValue = typeof value.value === 'string' ? value.value.replace(/[\s;]*/gm, '') : value.value;

const getStateTokens = (section: string, themeMode: ThemeMode): Record<string, TokenData> | undefined => {
const sectionName = sectionToFormulaMap[section];

if (!sectionName) {
return undefined;
}

const data = {
value: cleanedValue,
comment: comment?.value,
enabled: enabled?.value,
};

const getStateTokenFunc = getStateToken(sectionName, themeMode, data);

return {
[`${tokenName}Hover`]: getStateTokenFunc('hover'),
[`${tokenName}Active`]: getStateTokenFunc('active'),
};
};

const getDataByThemeMode = (themeMode: ThemeMode) => {
delete themeData[themeMode][section.value][subsection.value][prevName.value];

const stateTokens = getStateTokens(section.value, themeMode);

return {
...themeData[themeMode],
[section.value]: {
Expand All @@ -163,6 +187,7 @@ export const TokenForm = ({
comment: comment?.value,
enabled: enabled?.value,
},
...stateTokens,
},
},
};
Expand Down
10 changes: 9 additions & 1 deletion website/plasma-theme-builder/src/utils/themes.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,7 @@ import { createTheme } from '../builder/createTheme';
import { getFilesSource } from '../api';
import { getFormatDate, loadTheme } from '.';
import { THEME_BUILDER_PREFIX, BASE_PREFIX } from '../types';
import type { Theme as ThemeType } from '../types';
import type { FormulaMode, Theme as ThemeType } from '../types';

const StyledDate = styled.div`
opacity: 0.5;
Expand Down Expand Up @@ -144,3 +144,11 @@ export const getPrefix = (themeName?: string, branchName?: string) => {

export const getFullThemeName = (themeName?: string, branchName?: string) =>
`${getPrefix(themeName, branchName)}${themeName}`;

// TODO: Подумать как сделать этот список динамическим, либо добавить механизм к группе
// который будет указывать как применять формулы для генерации active и hover состояний
export const sectionToFormulaMap: Record<string, FormulaMode> = {
text: 'stroke',
outline: 'stroke',
surface: 'fill',
};

0 comments on commit a2afd17

Please sign in to comment.