diff --git a/apps/web/shell/tailwind.config.js b/apps/web/shell/tailwind.config.js index e2ed557b8..461b5e141 100644 --- a/apps/web/shell/tailwind.config.js +++ b/apps/web/shell/tailwind.config.js @@ -1,7 +1,6 @@ const { createGlobPatternsForDependencies } = require("@nrwl/react/tailwind"); const { join } = require("path"); -const theme = require("../../../dist/design-system/tokens/js/theme"); - +const extend = require("../../../dist/design-system/tokens/js/theme"); /** @type {import('tailwindcss').Config} */ module.exports = { @@ -13,10 +12,7 @@ module.exports = { ...createGlobPatternsForDependencies(__dirname), ], theme: { - colors: { - ...theme?.colors - }, - extend: {}, + extend, }, plugins: [], }; diff --git a/design-system/tokens/project.json b/design-system/tokens/project.json index 11fbc22e8..cc1ae405c 100644 --- a/design-system/tokens/project.json +++ b/design-system/tokens/project.json @@ -30,7 +30,7 @@ "imagesDir": "assets/images" }, "resume": { - "tokensDir": "design-system/tokens/src/resume1", + "tokensDir": "design-system/tokens/src/resume0", "fontsDir": "assets/fonts", "imagesDir": "assets/images" } diff --git a/tools/executors/typescript/design-components-build/impl.ts b/tools/executors/typescript/design-components-build/impl.ts index 152ce1b0f..d5b07d6e6 100644 --- a/tools/executors/typescript/design-components-build/impl.ts +++ b/tools/executors/typescript/design-components-build/impl.ts @@ -18,21 +18,7 @@ export default async function ( printInfo("Cleaning previous design components build..."); result = await execute( - `attrib +r "dist/design-system/components/package.json"` - ); - if (result) { - printError(result); - return { success: false }; - } - - result = await execute(`del "dist/design-system/components"`); - if (result) { - printError(result); - return { success: false }; - } - - result = await execute( - `attrib -r "dist/design-system/components/package.json"` + `rimraf dist/design-system/components/!("package.json")` ); if (result) { printError(result); diff --git a/tools/executors/typescript/design-tokens-build/impl.ts b/tools/executors/typescript/design-tokens-build/impl.ts index 82def9715..6868aaa12 100644 --- a/tools/executors/typescript/design-tokens-build/impl.ts +++ b/tools/executors/typescript/design-tokens-build/impl.ts @@ -110,26 +110,20 @@ export default async function ( if (name && token.value) { const item = { id: name, - type: "textStyle", name, ...token, + type: "textStyle", + value: { + font: { + name: token.value?.fontFamily + ?.replaceAll(/[_]/g, "") + ?.replaceAll(/\s/g, ""), + value: { + ...token.value, + }, + }, + }, }; - printInfo(JSON.stringify(item, null, 2)); - - !item.value && (item.value = {}); - - if (token.value?.fontFamily) { - printInfo(`Adding font: ${token.value?.fontFamily}`); - printInfo( - JSON.stringify(token.value?.fontFamily, null, 2) - ); - - item.value.font = { - name: token.value?.fontFamily - ?.replaceAll(/[_]/g, "") - ?.replaceAll(/\s/g, ""), - }; - } ret.push(item); } @@ -141,7 +135,7 @@ export default async function ( : []), ], { - formatName: "camelCase", + formatName: "kebabCase", formatConfig: { objectName: "extend", exportDefault: true, diff --git a/tools/executors/typescript/utilities/design-token-parsers/parsers/to-tailwind/tokens/textStyle.ts b/tools/executors/typescript/utilities/design-token-parsers/parsers/to-tailwind/tokens/textStyle.ts index e3c73741f..480ee9aea 100644 --- a/tools/executors/typescript/utilities/design-token-parsers/parsers/to-tailwind/tokens/textStyle.ts +++ b/tools/executors/typescript/utilities/design-token-parsers/parsers/to-tailwind/tokens/textStyle.ts @@ -1,9 +1,14 @@ -import tinycolor from 'tinycolor2'; -import convertMeasurement from '../../../libs/size-manipulation'; -import { FontToken, TextStyleToken } from '../../../types'; -import { FormatTokenType, OptionsType } from '../to-tailwind.parser'; -import { ColorsFormat, TailwindMappingTypes, TextStyleMapping } from '../to-tailwind.type'; -import { Utils } from './index'; +/* eslint-disable @typescript-eslint/no-explicit-any */ +import tinycolor from "tinycolor2"; +import convertMeasurement from "../../../libs/size-manipulation"; +import { FontToken, TextStyleToken } from "../../../types"; +import { FormatTokenType, OptionsType } from "../to-tailwind.parser"; +import { + ColorsFormat, + TailwindMappingTypes, + TextStyleMapping, +} from "../to-tailwind.type"; +import { Utils } from "./index"; export class TextStyle extends TextStyleToken { token: Partial; @@ -17,14 +22,19 @@ export class TextStyle extends TextStyleToken { } private getLetterSpacing() { const ls = this.value.letterSpacing; - if (ls?.value) { - return `${ls.value.measure}${ls.value.unit}`; + if (ls?.value || (this.value?.font?.value as any)?.ls) { + return `${ + ls?.value?.measure ?? (this.value?.font?.value as any)?.ls ?? 0 + }${ls?.value?.unit ?? "%"}`; } + return undefined; } private getLineHeight() { const lh = this.value.lineHeight; - return `${lh?.value?.measure ?? 0}${lh?.value?.unit ?? "px"}`; + return `${ + lh?.value?.measure ?? (this.value?.font?.value as any)?.lineHeight ?? 0 + }${lh?.value?.unit ?? "px"}`; } private getColor(format: ColorsFormat) { if (this.value.color?.value) { @@ -39,15 +49,22 @@ export class TextStyle extends TextStyleToken { } private getFontFamily() { - return (this?.value?.font as FontToken)?.name ?? this.value?.font?.value?.fontPostScriptName; + return ( + (this?.value?.font as FontToken)?.name ?? + this.value?.font?.value?.fontPostScriptName + ); } - private getFontSize(fontFormat: FormatTokenType['fontSizeFormat']) { + private getFontSize(fontFormat: FormatTokenType["fontSizeFormat"]) { const fontSize = this.value.fontSize; - if (fontFormat?.unit && this.value.fontSize.value.unit !== fontFormat?.unit) { - this.value.fontSize.value = convertMeasurement(this.value.fontSize.value, fontFormat?.unit); + if (fontFormat?.unit && fontSize?.value?.unit !== fontFormat?.unit) { + fontSize.value = convertMeasurement(fontSize.value, fontFormat?.unit); } - return `${fontSize?.value?.measure ?? 0}${fontSize?.value?.unit ?? "px"}`; + return `${ + fontSize?.value?.measure ?? + (this.value?.font?.value as any)?.fontSize ?? + 0 + }${fontSize?.value?.unit ?? "px"}`; } generate(options: OptionsType): TextStyleMapping { @@ -56,85 +73,81 @@ export class TextStyle extends TextStyleToken { result.fontSize = Utils.go[0]>( this.token, options, - 'fontSize', - this.getFontSize(options?.formatTokens?.fontSizeFormat), + "fontSize", + this.getFontSize(options?.formatTokens?.fontSizeFormat) ); const letterSpacing = this.getLetterSpacing(); if (letterSpacing) { - result.letterSpacing = Utils.go[0]>( - this.token, - options, - 'letterSpacing', - letterSpacing, - ); + result.letterSpacing = Utils.go< + ConstructorParameters[0] + >(this.token, options, "letterSpacing", letterSpacing); } const lineHeight = this.getLineHeight(); - result.lineHeight = Utils.go[0]>( - this.token, - options, - 'lineHeight', - lineHeight, - ); + result.lineHeight = Utils.go< + ConstructorParameters[0] + >(this.token, options, "lineHeight", lineHeight); - const textColor = this.getColor(options?.formatTokens?.colorFormat?.format || 'hex'); + const textColor = this.getColor( + options?.formatTokens?.colorFormat?.format || "hex" + ); if (textColor) { - result.textColor = Utils.go[0]>( - this.token, - options, - 'textColor', - textColor, - ); + result.textColor = Utils.go< + ConstructorParameters[0] + >(this.token, options, "textColor", textColor); } const textOpacity = this.getOpacity(); if (textOpacity) { - result.textOpacity = Utils.go[0]>( - this.token, - options, - 'textOpacity', - textOpacity, - ); + result.textOpacity = Utils.go< + ConstructorParameters[0] + >(this.token, options, "textOpacity", textOpacity); } const fontFamily = this.getFontFamily(); - result.fontFamily = Utils.go[0]>( - this.token, - options, - 'fontFamily', - [fontFamily], - ); + result.fontFamily = Utils.go< + ConstructorParameters[0] + >(this.token, options, "fontFamily", [fontFamily, "sans-serif"]); const fontWeight = this.getFontWeight(); - result.fontWeight = Utils.go[0]>( - this.token, - options, - 'fontWeight', - fontWeight, - ); + result.fontWeight = Utils.go< + ConstructorParameters[0] + >(this.token, options, "fontWeight", fontWeight); return result; } static afterGenerate(TailwindTokens: TailwindMappingTypes) { if (TailwindTokens.fontSize) - TailwindTokens.fontSize = Utils.sortObjectByValue(TailwindTokens.fontSize); + TailwindTokens.fontSize = Utils.sortObjectByValue( + TailwindTokens.fontSize + ); if (TailwindTokens.fontWeight) - TailwindTokens.fontWeight = Utils.sortObjectByValue(TailwindTokens.fontWeight); + TailwindTokens.fontWeight = Utils.sortObjectByValue( + TailwindTokens.fontWeight + ); if (TailwindTokens.lineHeight) - TailwindTokens.lineHeight = Utils.sortObjectByValue(TailwindTokens.lineHeight); + TailwindTokens.lineHeight = Utils.sortObjectByValue( + TailwindTokens.lineHeight + ); if (TailwindTokens.letterSpacing) - TailwindTokens.letterSpacing = Utils.sortObjectByValue(TailwindTokens.letterSpacing); + TailwindTokens.letterSpacing = Utils.sortObjectByValue( + TailwindTokens.letterSpacing + ); if (TailwindTokens.textColor) - TailwindTokens.textColor = Utils.sortObjectByValue(TailwindTokens.textColor); + TailwindTokens.textColor = Utils.sortObjectByValue( + TailwindTokens.textColor + ); if (TailwindTokens.textOpacity) - TailwindTokens.textOpacity = Utils.sortObjectByValue(TailwindTokens.textOpacity); + TailwindTokens.textOpacity = Utils.sortObjectByValue( + TailwindTokens.textOpacity + ); return TailwindTokens; }