diff --git a/.github/dependabot.yml b/.github/dependabot.yml index a9f20a50..0032a63d 100644 --- a/.github/dependabot.yml +++ b/.github/dependabot.yml @@ -1,15 +1,15 @@ --- version: 2 updates: - - package-ecosystem: 'github-actions' - directory: '/' + - package-ecosystem: "github-actions" + directory: "/" schedule: - interval: 'daily' + interval: "daily" pull-request-branch-name: - separator: '-' - - package-ecosystem: 'npm' - directory: '/' + separator: "-" + - package-ecosystem: "npm" + directory: "/" schedule: - interval: 'daily' + interval: "daily" pull-request-branch-name: - separator: '-' + separator: "-" diff --git a/.github/workflows/99-auto-merge.yml b/.github/workflows/99-auto-merge.yml index 6e417750..76f9cc95 100644 --- a/.github/workflows/99-auto-merge.yml +++ b/.github/workflows/99-auto-merge.yml @@ -12,7 +12,7 @@ jobs: id: metadata uses: dependabot/fetch-metadata@v2.2.0 with: - github-token: '${{ secrets.GITHUB_TOKEN }}' + github-token: "${{ secrets.GITHUB_TOKEN }}" - name: 🤖 Enable auto-merge for Dependabot PRs run: gh pr merge --auto --squash "$PR_URL" diff --git a/.github/workflows/99-codeql-analysis.yml b/.github/workflows/99-codeql-analysis.yml index 6bc4338a..7f1d1285 100644 --- a/.github/workflows/99-codeql-analysis.yml +++ b/.github/workflows/99-codeql-analysis.yml @@ -1,5 +1,5 @@ --- -name: 'CodeQL' +name: "CodeQL" on: workflow_call: @@ -10,7 +10,7 @@ jobs: strategy: fail-fast: false matrix: - language: ['javascript'] + language: ["javascript"] steps: - name: ⬇ Checkout repo diff --git a/.github/workflows/99-dependency-review.yml b/.github/workflows/99-dependency-review.yml index f828f218..07c0b588 100644 --- a/.github/workflows/99-dependency-review.yml +++ b/.github/workflows/99-dependency-review.yml @@ -1,5 +1,5 @@ --- -name: 'Dependency Review' +name: "Dependency Review" on: workflow_call: diff --git a/.github/workflows/default.yml b/.github/workflows/default.yml index 9c1cd15b..d701776a 100644 --- a/.github/workflows/default.yml +++ b/.github/workflows/default.yml @@ -41,4 +41,4 @@ jobs: with: github_token: ${{ secrets.GITHUB_TOKEN }} publish_dir: ./dist - destination_dir: ${{steps.get-branch-name.outputs.result}} \ No newline at end of file + destination_dir: ${{steps.get-branch-name.outputs.result}} diff --git a/.github/workflows/pull-request.yml b/.github/workflows/pull-request.yml index add561e1..de802988 100644 --- a/.github/workflows/pull-request.yml +++ b/.github/workflows/pull-request.yml @@ -16,4 +16,4 @@ jobs: uses: ./.github/workflows/99-codeql-analysis.yml dependency-review: - uses: ./.github/workflows/99-dependency-review.yml \ No newline at end of file + uses: ./.github/workflows/99-dependency-review.yml diff --git a/CODE-OF-CONDUCT.md b/CODE-OF-CONDUCT.md index bd5d1d9f..22b4303a 100644 --- a/CODE-OF-CONDUCT.md +++ b/CODE-OF-CONDUCT.md @@ -17,24 +17,24 @@ diverse, inclusive, and healthy community. Examples of behavior that contributes to a positive environment for our community include: -- Demonstrating empathy and kindness toward other people -- Being respectful of differing opinions, viewpoints, and experiences -- Giving and gracefully accepting constructive feedback -- Accepting responsibility and apologizing to those affected by our mistakes, - and learning from the experience -- Focusing on what is best not just for us as individuals, but for the - overall community +- Demonstrating empathy and kindness toward other people +- Being respectful of differing opinions, viewpoints, and experiences +- Giving and gracefully accepting constructive feedback +- Accepting responsibility and apologizing to those affected by our mistakes, + and learning from the experience +- Focusing on what is best not just for us as individuals, but for the + overall community Examples of unacceptable behavior include: -- The use of sexualized language or imagery, and sexual attention or - advances of any kind -- Trolling, insulting or derogatory comments, and personal or political attacks -- Public or private harassment -- Publishing others' private information, such as a physical or email - address, without their explicit permission -- Other conduct which could reasonably be considered inappropriate in a - professional setting +- The use of sexualized language or imagery, and sexual attention or + advances of any kind +- Trolling, insulting or derogatory comments, and personal or political attacks +- Public or private harassment +- Publishing others' private information, such as a physical or email + address, without their explicit permission +- Other conduct which could reasonably be considered inappropriate in a + professional setting ## Enforcement Responsibilities diff --git a/postcss.config.js b/postcss.config.js index 2e7af2b7..2aa7205d 100644 --- a/postcss.config.js +++ b/postcss.config.js @@ -3,4 +3,4 @@ export default { tailwindcss: {}, autoprefixer: {}, }, -} +}; diff --git a/public/site.webmanifest b/public/site.webmanifest index c5b4ef35..134a1752 100644 --- a/public/site.webmanifest +++ b/public/site.webmanifest @@ -1,14 +1,14 @@ { - "short_name": "", - "name": "", - "icons": [ - { - "src": "/images/db_logo.svg", - "type": "image/svg", - "sizes": "192x192" - } - ], - "start_url": "/", - "background_color": "#fdfdfd", - "theme_color": "#fdfdfd" + "short_name": "", + "name": "", + "icons": [ + { + "src": "/images/db_logo.svg", + "type": "image/svg", + "sizes": "192x192" + } + ], + "start_url": "/", + "background_color": "#fdfdfd", + "theme_color": "#fdfdfd" } diff --git a/src/components/Customization/ActionBar/action-bar.tsx b/src/components/Customization/ActionBar/action-bar.tsx index 0914c9f4..1fbf6929 100644 --- a/src/components/Customization/ActionBar/action-bar.tsx +++ b/src/components/Customization/ActionBar/action-bar.tsx @@ -3,25 +3,17 @@ import { useThemeBuilderStore } from "../../../store"; import { useTranslation } from "react-i18next"; import Upload from "../Upload"; import { ThemeType } from "../../../utils/data.ts"; -import {downloadTheme} from "../../../utils/outputs/download.ts"; +import { downloadTheme } from "../../../utils/outputs/download.ts"; const ActionBar = () => { const { t } = useTranslation(); - const { - resetDefaults, - luminanceSteps, - theme, - speakingNames, - developerMode, - } = useThemeBuilderStore((state) => state); + const { resetDefaults, luminanceSteps, theme, speakingNames, developerMode } = + useThemeBuilderStore((state) => state); return ( <> {developerMode && ( - resetDefaults()} - > + resetDefaults()}> {t("reset")} )} @@ -46,9 +38,7 @@ const ActionBar = () => { - downloadTheme(speakingNames, luminanceSteps, theme) - } + onClick={() => downloadTheme(speakingNames, luminanceSteps, theme)} > {t("export")} diff --git a/src/components/Customization/LogoUpload/logo-upload.tsx b/src/components/Customization/LogoUpload/logo-upload.tsx index 10b5864d..b77586ed 100644 --- a/src/components/Customization/LogoUpload/logo-upload.tsx +++ b/src/components/Customization/LogoUpload/logo-upload.tsx @@ -52,8 +52,7 @@ const LogoUpload = memo(() => { logo diff --git a/src/components/Customization/Preview/ColorPalettes/color-palettes.tsx b/src/components/Customization/Preview/ColorPalettes/color-palettes.tsx index 7bf15054..bf380340 100644 --- a/src/components/Customization/Preview/ColorPalettes/color-palettes.tsx +++ b/src/components/Customization/Preview/ColorPalettes/color-palettes.tsx @@ -7,7 +7,7 @@ import { useTranslation } from "react-i18next"; import chroma from "chroma-js"; import PaletteBox from "./PaletteBox"; import { isValidColor } from "../../../../utils"; -import {DefaultColorType} from "../../../../utils/data.ts"; +import { DefaultColorType } from "../../../../utils/data.ts"; const ColorPalettes = () => { const { luminanceSteps, developerMode, theme } = useThemeBuilderStore( @@ -15,7 +15,9 @@ const ColorPalettes = () => { ); const { t } = useTranslation(); - const [allColors, setAllColors] = useState>({}); + const [allColors, setAllColors] = useState>( + {}, + ); useEffect(() => { setAllColors({ diff --git a/src/components/Customization/Preview/ComponentContainer/data.tsx b/src/components/Customization/Preview/ComponentContainer/data.tsx index 67fba711..4bf71d0c 100644 --- a/src/components/Customization/Preview/ComponentContainer/data.tsx +++ b/src/components/Customization/Preview/ComponentContainer/data.tsx @@ -195,7 +195,6 @@ export const components: ComponentList[] = [ message="Required Message" required /> - ), }, @@ -289,7 +288,6 @@ export const components: ComponentList[] = [ message="Required Message" required /> - ), }, diff --git a/src/components/Customization/Preview/ScreenContainer/LoginScreen/login-screen.tsx b/src/components/Customization/Preview/ScreenContainer/LoginScreen/login-screen.tsx index 913a0c4a..6b0fc31c 100644 --- a/src/components/Customization/Preview/ScreenContainer/LoginScreen/login-screen.tsx +++ b/src/components/Customization/Preview/ScreenContainer/LoginScreen/login-screen.tsx @@ -38,11 +38,7 @@ const LoginScreen = () => {
- + {t("forgotPassword")}
diff --git a/src/components/Customization/Preview/ScreenContainer/NavigationScreen/navigation-screen.tsx b/src/components/Customization/Preview/ScreenContainer/NavigationScreen/navigation-screen.tsx index 70dca3ca..cce33989 100644 --- a/src/components/Customization/Preview/ScreenContainer/NavigationScreen/navigation-screen.tsx +++ b/src/components/Customization/Preview/ScreenContainer/NavigationScreen/navigation-screen.tsx @@ -43,7 +43,11 @@ const NavigationScreen = () => {
{t("today")}, 00:00 1 Pers. - + {t("options")}
@@ -59,7 +63,9 @@ const NavigationScreen = () => { {t("now")} {t("later")}
- {t("iceInformation")} + + {t("iceInformation")} +
12:00 diff --git a/src/components/Customization/Preview/ScreenContainer/index.tsx b/src/components/Customization/Preview/ScreenContainer/index.tsx index e29c5a2d..90e6f2cc 100644 --- a/src/components/Customization/Preview/ScreenContainer/index.tsx +++ b/src/components/Customization/Preview/ScreenContainer/index.tsx @@ -1,3 +1,3 @@ import ScreenContainer from "./screen-container"; -export default ScreenContainer; \ No newline at end of file +export default ScreenContainer; diff --git a/src/components/Customization/Settings/ColorSelection/ColorPicker/color-picker.tsx b/src/components/Customization/Settings/ColorSelection/ColorPicker/color-picker.tsx index 93ec72b8..42acb702 100644 --- a/src/components/Customization/Settings/ColorSelection/ColorPicker/color-picker.tsx +++ b/src/components/Customization/Settings/ColorSelection/ColorPicker/color-picker.tsx @@ -82,7 +82,10 @@ const ColorPicker = ({ > {t(label)} {!isAddColor && ( - + {t("adaptColor")} )} diff --git a/src/components/Customization/Tabs/data.ts b/src/components/Customization/Tabs/data.ts index c0601116..1a942645 100644 --- a/src/components/Customization/Tabs/data.ts +++ b/src/components/Customization/Tabs/data.ts @@ -1,5 +1,5 @@ -import {TabItemType} from "../../../pages/Customization/data.ts"; +import { TabItemType } from "../../../pages/Customization/data.ts"; export type TabsPropsType = { - tabs: TabItemType[] -} \ No newline at end of file + tabs: TabItemType[]; +}; diff --git a/src/components/DefaultPage/default-page.tsx b/src/components/DefaultPage/default-page.tsx index 83999439..de6c30d3 100644 --- a/src/components/DefaultPage/default-page.tsx +++ b/src/components/DefaultPage/default-page.tsx @@ -17,7 +17,7 @@ const DefaultPage = ({ }: PropsWithChildren) => { const { t } = useTranslation(); const { theme, darkMode, developerMode } = useThemeBuilderStore( - (state) => state + (state) => state, ); const [drawerOpen, setDrawerOpen] = useState(); @@ -43,7 +43,7 @@ const DefaultPage = ({ src={getThemeImage( darkMode && theme.branding.image.dark ? theme.branding.image.dark - : theme.branding.image.light + : theme.branding.image.light, )} alt="brand" /> diff --git a/src/components/Demo/Sidenav/index.tsx b/src/components/Demo/Sidenav/index.tsx index 3cbf128c..2d75874f 100644 --- a/src/components/Demo/Sidenav/index.tsx +++ b/src/components/Demo/Sidenav/index.tsx @@ -1,3 +1,3 @@ import Sidenav from "./sidenav.tsx"; -export default Sidenav; \ No newline at end of file +export default Sidenav; diff --git a/src/components/Landing/Header/index.tsx b/src/components/Landing/Header/index.tsx index 5f386975..ebb5ff81 100644 --- a/src/components/Landing/Header/index.tsx +++ b/src/components/Landing/Header/index.tsx @@ -1,3 +1,3 @@ import Header from "./header.tsx"; -export default Header; \ No newline at end of file +export default Header; diff --git a/src/components/Landing/ThemeSelect/index.tsx b/src/components/Landing/ThemeSelect/index.tsx index 7064f812..50c4c47d 100644 --- a/src/components/Landing/ThemeSelect/index.tsx +++ b/src/components/Landing/ThemeSelect/index.tsx @@ -1,3 +1,3 @@ import ThemeSelect from "./theme-select.tsx"; -export default ThemeSelect; \ No newline at end of file +export default ThemeSelect; diff --git a/src/components/Playground/Sidebar/Customize/Setting/SelectColorDialog/select-color-dialog.tsx b/src/components/Playground/Sidebar/Customize/Setting/SelectColorDialog/select-color-dialog.tsx index 1faa993b..c1cc4167 100644 --- a/src/components/Playground/Sidebar/Customize/Setting/SelectColorDialog/select-color-dialog.tsx +++ b/src/components/Playground/Sidebar/Customize/Setting/SelectColorDialog/select-color-dialog.tsx @@ -62,7 +62,7 @@ const SelectColorDialog = ({ > diff --git a/src/components/Playground/Toolbar/toolbar.tsx b/src/components/Playground/Toolbar/toolbar.tsx index 8491f886..b00bd895 100644 --- a/src/components/Playground/Toolbar/toolbar.tsx +++ b/src/components/Playground/Toolbar/toolbar.tsx @@ -4,7 +4,7 @@ import { DBButton, DBTooltip } from "@db-ui/react-components"; import { useDragAndDropStore } from "../../../store"; import { useTranslation } from "react-i18next"; import Upload from "../../Customization/Upload"; -import {downloadPlayground} from "../../../utils/outputs/download.ts"; +import { downloadPlayground } from "../../../utils/outputs/download.ts"; const Toolbar = ({ className }: ToolbarType) => { const { t } = useTranslation(); diff --git a/src/index.scss b/src/index.scss index 24647d7a..fc244f98 100644 --- a/src/index.scss +++ b/src/index.scss @@ -137,7 +137,7 @@ h6 { font-size: 0; } -.db-tab-panel{ +.db-tab-panel { position: absolute; - inset-block-start: variables.$db-spacing-fixed-3xl; -} \ No newline at end of file + inset-block-start: variables.$db-spacing-fixed-3xl; +} diff --git a/src/pages/Demo/demo.tsx b/src/pages/Demo/demo.tsx index e7186ae5..c4dd2908 100644 --- a/src/pages/Demo/demo.tsx +++ b/src/pages/Demo/demo.tsx @@ -24,62 +24,62 @@ const Demo = ({ linkToDemo, density }: DemoPropsType) => { } > -
- -
-

{t("Dashboard")}

-
- -
-
Mobile Users
-

500

- - Good capacity - +
+ +
+

{t("Dashboard")}

+
+ +
+
Mobile Users
+

500

+ + Good capacity + +
+ + +
+
Tablet Users
+

200

+ + Medium capacity + +
+ + +
+
Progress
+
+
50%
- - -
-
Tablet Users
-

200

- - Medium capacity - -
- - -
-
Progress
-
-
50%
-
-
- - -
-
Desktop Users
-

100

- - Bad capacity - -
- -
+
+ + +
+
Desktop Users
+

100

+ + Bad capacity + +
+
+
); }; diff --git a/src/pages/Editor/properties.ts b/src/pages/Editor/properties.ts index 645fd96c..ff1e6062 100644 --- a/src/pages/Editor/properties.ts +++ b/src/pages/Editor/properties.ts @@ -25,7 +25,11 @@ export const properties = [ snippet: 'variant="outlined"', meta: "button-variant", }, - { value: "solidVariant", snippet: 'variant="filled"', meta: "button-variant" }, + { + value: "solidVariant", + snippet: 'variant="filled"', + meta: "button-variant", + }, { value: "textVariant", snippet: 'variant="ghost"', meta: "button-variant" }, { value: "adaptive", diff --git a/src/pages/Error/error.tsx b/src/pages/Error/error.tsx index 58ea8411..5b5059d2 100644 --- a/src/pages/Error/error.tsx +++ b/src/pages/Error/error.tsx @@ -1,7 +1,7 @@ -import {useTranslation} from "react-i18next"; -import {useThemeBuilderStore} from "../../store"; -import {DBButton, DBInfotext} from "@db-ui/react-components"; -import {useNavigate} from "react-router-dom"; +import { useTranslation } from "react-i18next"; +import { useThemeBuilderStore } from "../../store"; +import { DBButton, DBInfotext } from "@db-ui/react-components"; +import { useNavigate } from "react-router-dom"; const Error = () => { const { t } = useTranslation(); diff --git a/src/pages/Playground/index.scss b/src/pages/Playground/index.scss index 81bfb4d9..2a8159a8 100644 --- a/src/pages/Playground/index.scss +++ b/src/pages/Playground/index.scss @@ -68,8 +68,8 @@ $selected-outline-height: 3px; } .hovered { - outline: $selected-outline-height colors.$db-neutral-on-bg-basic-emphasis-70-default - dashed; + outline: $selected-outline-height + colors.$db-neutral-on-bg-basic-emphasis-70-default dashed; } .selected { diff --git a/src/utils/outputs/compose/colors.ts b/src/utils/outputs/compose/colors.ts index b5c857c6..efccaf84 100644 --- a/src/utils/outputs/compose/colors.ts +++ b/src/utils/outputs/compose/colors.ts @@ -1,6 +1,10 @@ import { DefaultColorType, HeisslufType, SpeakingName } from "../../data.ts"; import { kebabCase } from "../../index.ts"; -import { designSystemName, designSystemShortName, replacePackageName } from "./shared.ts"; +import { + designSystemName, + designSystemShortName, + replacePackageName, +} from "./shared.ts"; import { getPalette } from "../index.ts"; import { FALLBACK_COLOR } from "../../../constants.ts"; @@ -92,7 +96,7 @@ import ${replacePackageName}.${brandName.toLowerCase()}.data.${brandName}ColorMa `; -resolvedScheme += getInterfaceConstruct() + resolvedScheme += getInterfaceConstruct(); // 1. Generate semantic color classes like 'NeutralColors' const allSpeakingNames = [...speakingNames, ...originAdditionalColors]; resolvedScheme += `class ${designSystemShortName}ColorVariant private constructor(\n`; @@ -101,19 +105,27 @@ resolvedScheme += getInterfaceConstruct() resolvedScheme += `\tval ${resolvedName}: Color,\n`; } resolvedScheme += `) {\n`; - resolvedScheme += getInterfaceImplConstruct() + resolvedScheme += getInterfaceImplConstruct(); - resolvedScheme = generateConstructorsDarkLight(speakingNames, resolvedScheme) + resolvedScheme = generateConstructorsDarkLight(speakingNames, resolvedScheme); resolvedScheme += `class ${designSystemName}ColorScheme(\n`; for (const name of colorKeys) { resolvedScheme += `\tval ${name}: ${designSystemShortName}ColorVariant,\n`; } resolvedScheme += `) {\n\tinternal companion object {\n`; - resolvedScheme = generateColorSchemeDarkLightObjects(colorKeys, resolvedScheme, true) - resolvedScheme = generateColorSchemeDarkLightObjects(colorKeys, resolvedScheme, false) + resolvedScheme = generateColorSchemeDarkLightObjects( + colorKeys, + resolvedScheme, + true, + ); + resolvedScheme = generateColorSchemeDarkLightObjects( + colorKeys, + resolvedScheme, + false, + ); resolvedScheme += `\t}\n}\n\n`; - + resolvedScheme += `val LocalColors =\n\tstaticCompositionLocalOf { ${designSystemName}ColorScheme.getColorSchemeLight(${brandName}ColorMap) } val LocalActiveColor =\n\tstaticCompositionLocalOf { ${designSystemName}ColorScheme.getColorSchemeLight(${brandName}ColorMap).neutral } `; @@ -121,8 +133,10 @@ val LocalActiveColor =\n\tstaticCompositionLocalOf { ${designSystemName}ColorSch return resolvedScheme; }; -const generateConstructorsDarkLight = (speakingNames: SpeakingName[], resolvedScheme:string): string => { - +const generateConstructorsDarkLight = ( + speakingNames: SpeakingName[], + resolvedScheme: string, +): string => { const colorSchemes = ["dark", "light"]; resolvedScheme += `\tinternal companion object {\n`; @@ -130,9 +144,15 @@ const generateConstructorsDarkLight = (speakingNames: SpeakingName[], resolvedSc resolvedScheme += `\t\tfun ${colorScheme}(colorMap: Map, colorName: String) = ${designSystemShortName}ColorVariant(\n`; for (const speakingName of speakingNames) { let transparency = ""; - if (colorScheme == "light" && speakingName.transparencyLight !== undefined) { + if ( + colorScheme == "light" && + speakingName.transparencyLight !== undefined + ) { transparency = `.copy(${(speakingName.transparencyLight || 0) / 100}f)`; - } else if (colorScheme == "dark" && speakingName.transparencyDark !== undefined) { + } else if ( + colorScheme == "dark" && + speakingName.transparencyDark !== undefined + ) { transparency = `.copy(${(speakingName.transparencyDark || 0) / 100}f)`; } resolvedScheme += `\t\t\tcolorMap.getValue(colorName + ${colorScheme == "dark" ? speakingName.dark : speakingName.light})${transparency},\n`; @@ -149,7 +169,7 @@ const generateConstructorsDarkLight = (speakingNames: SpeakingName[], resolvedSc resolvedScheme += `\t}\n}\n\n`; return resolvedScheme; -} +}; const getInterfaceConstruct = (): string => { return `interface IStateColor { @@ -212,7 +232,7 @@ interface IInverted { val Background: IBackground val OnBackground: IStateColor }\n\n`; -} +}; const getInterfaceImplConstruct = (): string => { return ` val Basic = object : IBasic { diff --git a/src/utils/outputs/compose/density.ts b/src/utils/outputs/compose/density.ts index a03d7d98..ad4511db 100644 --- a/src/utils/outputs/compose/density.ts +++ b/src/utils/outputs/compose/density.ts @@ -1,4 +1,8 @@ -import { densities, designSystemShortName, replacePackageName } from "./shared.ts"; +import { + densities, + designSystemShortName, + replacePackageName, +} from "./shared.ts"; export const generateDensityEnumFile = (): string => { return `package ${replacePackageName}.core diff --git a/src/utils/outputs/compose/dimensions.ts b/src/utils/outputs/compose/dimensions.ts index e026a2e5..8de017f4 100644 --- a/src/utils/outputs/compose/dimensions.ts +++ b/src/utils/outputs/compose/dimensions.ts @@ -10,7 +10,10 @@ import { shirtSizes, } from "./shared.ts"; -export const generateComposeDimensionsFile = (brandName: string, theme: ThemeType): string => { +export const generateComposeDimensionsFile = ( + brandName: string, + theme: ThemeType, +): string => { let resolvedTokenFile: string = `package ${replacePackageName}.${brandName.toLowerCase()}.data import androidx.compose.ui.unit.dp @@ -59,14 +62,14 @@ export const generateDimensionsScheme = ( density: string, device: string, ): string => { - const params = [density, device] + const params = [density, device]; resolvedTokenFile += `\t\tfun getDimensions${density}${device}( \t\t\tdimensionsMap: Map, \t\t): ${designSystemName}Dimensions = ${designSystemName}Dimensions(`; for (const type of Object.keys(dimensionTypes)) { - resolvedTokenFile += `\n\t\t\t${type} = ${designSystemShortName}${kebabCase(type)}Dimensions(dimensionsMap, ${params.map(param => `"${param}"`).join(", ")}),`; - params.pop() + resolvedTokenFile += `\n\t\t\t${type} = ${designSystemShortName}${kebabCase(type)}Dimensions(dimensionsMap, ${params.map((param) => `"${param}"`).join(", ")}),`; + params.pop(); } resolvedTokenFile += `\n\t\t)\n\n`; @@ -82,7 +85,7 @@ import ${replacePackageName}.${brandName.toLowerCase()}.data.${brandName}Dimensi `; - const params = ["density", "device"] + const params = ["density", "device"]; for (const [type, values] of Object.entries(dimensionTypes)) { resolvedTokenFile += `class ${designSystemShortName}${kebabCase(type)}Dimensions private constructor(`; for (const value of values) { @@ -92,15 +95,15 @@ import ${replacePackageName}.${brandName.toLowerCase()}.data.${brandName}Dimensi } } resolvedTokenFile += "\n) {"; - resolvedTokenFile += `\n\tinternal constructor(dimensionsMap: Map, ${params.map(param => `${param}: String`).join(", ")}) : this(`; - for(const value of values) { - for(const size of shirtSizes) { + resolvedTokenFile += `\n\tinternal constructor(dimensionsMap: Map, ${params.map((param) => `${param}: String`).join(", ")}) : this(`; + for (const value of values) { + for (const size of shirtSizes) { const resolvedValue = value === "base" ? "" : `-${value}`; - const resolvedParams = params.map(param => `-\${${param}}`).join("") + const resolvedParams = params.map((param) => `-\${${param}}`).join(""); resolvedTokenFile += `\n\t\tdimensionsMap.getValue("${kebabCase(`${type}${resolvedValue}${resolvedParams}-${size}`, true)}"),`; } - if(params.length == 2 || type == "sizing") { - params.pop() + if (params.length == 2 || type == "sizing") { + params.pop(); } } resolvedTokenFile += "\n\t)\n}\n\n"; @@ -121,7 +124,7 @@ import ${replacePackageName}.${brandName.toLowerCase()}.data.${brandName}Dimensi ); } } - resolvedTokenFile +="\t}\n}\n\n" + resolvedTokenFile += "\t}\n}\n\n"; resolvedTokenFile += `val LocalDimensions = staticCompositionLocalOf { \t${designSystemName}Dimensions.getDimensionsRegularMobile( diff --git a/src/utils/outputs/compose/elevation.ts b/src/utils/outputs/compose/elevation.ts index 810bdf47..3cffe900 100644 --- a/src/utils/outputs/compose/elevation.ts +++ b/src/utils/outputs/compose/elevation.ts @@ -4,7 +4,6 @@ import { designSystemShortName, replacePackageName } from "./shared.ts"; export const generateComposeElevationFile = ( allElevations: ThemeSizing, ): string => { - let resolvedTokenFile = `package ${replacePackageName}.core import androidx.compose.ui.Modifier @@ -81,22 +80,30 @@ enum class ${designSystemShortName}Elevation(internal val config: List<${designS `; Object.entries(allElevations).forEach(([name, elevationScheme]) => { - if (name == "_scale") return - - const elevationStages = elevationScheme.toString().replaceAll(" ", " ").replaceAll("rgba(", "").replaceAll("), ", "#").replaceAll(")", "").replaceAll(",", "").replaceAll("px", "").split("#") + if (name == "_scale") return; + + const elevationStages = elevationScheme + .toString() + .replaceAll(" ", " ") + .replaceAll("rgba(", "") + .replaceAll("), ", "#") + .replaceAll(")", "") + .replaceAll(",", "") + .replaceAll("px", "") + .split("#"); resolvedTokenFile += ` ${name.toUpperCase()}( listOf(`; for (const elevationStage of elevationStages) { - const elevationValues = elevationStage.split(" ") - const horizontal = elevationValues[0] - const vertical = elevationValues[1] - const blur = elevationValues[2] - const spread = elevationValues[3] - const red = elevationValues[4] - const green = elevationValues[5] - const blue = elevationValues[6] - const alpha = elevationValues[7] + const elevationValues = elevationStage.split(" "); + const horizontal = elevationValues[0]; + const vertical = elevationValues[1]; + const blur = elevationValues[2]; + const spread = elevationValues[3]; + const red = elevationValues[4]; + const green = elevationValues[5]; + const blue = elevationValues[6]; + const alpha = elevationValues[7]; resolvedTokenFile += ` ${designSystemShortName}ElevationShadowConfig(DpOffset(${horizontal}.dp, ${vertical}.dp), ${blur}.dp, ${spread.startsWith("-") ? "(" + spread + ")" : spread}.dp, Color(${red}f, ${green}f, ${blue}f, ${alpha}f)),`; @@ -104,6 +111,6 @@ enum class ${designSystemShortName}Elevation(internal val config: List<${designS resolvedTokenFile += `\n ),\n ),\n`; }); - resolvedTokenFile += "}\n" + resolvedTokenFile += "}\n"; return resolvedTokenFile; -} +}; diff --git a/src/utils/outputs/compose/theme.ts b/src/utils/outputs/compose/theme.ts index a5d52ecd..df2e7715 100644 --- a/src/utils/outputs/compose/theme.ts +++ b/src/utils/outputs/compose/theme.ts @@ -1,7 +1,11 @@ -import { designSystemName, designSystemShortName, replacePackageName } from "./shared.ts"; +import { + designSystemName, + designSystemShortName, + replacePackageName, +} from "./shared.ts"; export const generateBrandThemeFile = (brandName: string): string => { - return `package ${replacePackageName}.${brandName.toLowerCase()} + return `package ${replacePackageName}.${brandName.toLowerCase()} import ${replacePackageName}.${designSystemShortName}Theme import ${replacePackageName}.${brandName.toLowerCase()}.data.${brandName}ColorMap @@ -14,9 +18,12 @@ object ${brandName}Theme : ${designSystemShortName}Theme { override val typographyMap = ${brandName}TypographyMap } `; -} +}; -export const generateThemeFile = (fileName: string, brandName: string): string => { +export const generateThemeFile = ( + fileName: string, + brandName: string, +): string => { return `package ${replacePackageName} import android.app.Activity diff --git a/src/utils/outputs/compose/typography.ts b/src/utils/outputs/compose/typography.ts index 6d1bdd28..ba615913 100644 --- a/src/utils/outputs/compose/typography.ts +++ b/src/utils/outputs/compose/typography.ts @@ -26,7 +26,10 @@ internal object ${designSystemShortName}Font { `; }; -export const generateComposeTypographyFile = (brandName:string, theme: ThemeType): string => { +export const generateComposeTypographyFile = ( + brandName: string, + theme: ThemeType, +): string => { let resolvedTokenFile: string = `package ${replacePackageName}.${brandName.toLowerCase()}.data import androidx.compose.ui.unit.sp @@ -117,13 +120,13 @@ import ${replacePackageName}.core.${designSystemShortName}Font import ${replacePackageName}.${brandName.toLowerCase()}.data.${brandName}TypographyMap `; - resolvedTokenFile += `\nclass ${designSystemShortName}Typography private constructor(\n`; - for (const size of shirtSizes) { - for (const type of typoTypes) { - resolvedTokenFile += `\tval ${kebabCase(`${type}-${size}`, true)}: TextUnit,\n`; - } + resolvedTokenFile += `\nclass ${designSystemShortName}Typography private constructor(\n`; + for (const size of shirtSizes) { + for (const type of typoTypes) { + resolvedTokenFile += `\tval ${kebabCase(`${type}-${size}`, true)}: TextUnit,\n`; } - resolvedTokenFile += `) { + } + resolvedTokenFile += `) { internal companion object { fun create( typographyMap: Map, diff --git a/src/utils/outputs/download.ts b/src/utils/outputs/download.ts index 9ff49d9c..5caf10e0 100644 --- a/src/utils/outputs/download.ts +++ b/src/utils/outputs/download.ts @@ -65,7 +65,7 @@ export const downloadTheme = async ( const themeJsonString = JSON.stringify(theme); const themeProperties = getCssThemeProperties(theme); - const brandName = kebabCase(theme.branding.name) + const brandName = kebabCase(theme.branding.name); const composeFileName = kebabCase(fileName); const zip = new JSZip(); @@ -77,10 +77,7 @@ export const downloadTheme = async ( const androidCoreFolder: string = `${androidThemeFolder}/core`; const androidBrandFolder: string = `${androidThemeFolder}/${kebabCase(theme.branding.name).toLowerCase()}`; const androidDataFolder: string = `${androidBrandFolder}/data`; - zip.file( - `${androidFolder}/README.md`, - generateAndroidReadmeFile(), - ); + zip.file(`${androidFolder}/README.md`, generateAndroidReadmeFile()); zip.file( `${androidThemeFolder}/${designSystemName}Theme.kt`, generateThemeFile(composeFileName, brandName), @@ -97,7 +94,10 @@ export const downloadTheme = async ( `${androidThemeFolder}/${designSystemName}Typography.kt`, generateTypographySchemeFile(brandName), ); - zip.file(`${androidCoreFolder}/${designSystemShortName}Font.kt`, generateFontFamilyFile()); + zip.file( + `${androidCoreFolder}/${designSystemShortName}Font.kt`, + generateFontFamilyFile(), + ); zip.file( `${androidDataFolder}/${brandName}Dimensions.kt`, generateComposeDimensionsFile(brandName, theme), @@ -105,7 +105,7 @@ export const downloadTheme = async ( zip.file( `${androidCoreFolder}/${designSystemShortName}Elevations.kt`, generateComposeElevationFile(theme.elevation), - ) + ); zip.file( `${androidDataFolder}/${brandName}Typography.kt`, generateComposeTypographyFile(brandName, theme), @@ -118,7 +118,10 @@ export const downloadTheme = async ( `${androidBrandFolder}/${brandName}Theme.kt`, generateBrandThemeFile(brandName), ); - zip.file(`${androidCoreFolder}/${designSystemShortName}Density.kt`, generateDensityEnumFile()); + zip.file( + `${androidCoreFolder}/${designSystemShortName}Density.kt`, + generateDensityEnumFile(), + ); // Utils const utilsFolder: string = "Utils"; diff --git a/src/utils/outputs/web/fonts.ts b/src/utils/outputs/web/fonts.ts index af7b1af3..fab80958 100644 --- a/src/utils/outputs/web/fonts.ts +++ b/src/utils/outputs/web/fonts.ts @@ -1,5 +1,4 @@ -import {FontType, ThemeType} from "../../data.ts"; - +import { FontType, ThemeType } from "../../data.ts"; export const getFontFaces = (theme: ThemeType): string => { let fontfaces: string = `@use "default.assets-paths" as assets-paths;`;