diff --git a/assets/web/css/cpd-common.css b/assets/web/css/cpd-common.css index 720302a2..50e56648 100644 --- a/assets/web/css/cpd-common.css +++ b/assets/web/css/cpd-common.css @@ -1,20 +1,4 @@ :root, [class*="cpd-theme-"] { - --cpd-icon-web-browser: url(../icons/web-browser.svg); - --cpd-icon-visibility-visible: url(../icons/visibility-visible.svg); - --cpd-icon-visibility-invisible: url(../icons/visibility-invisible.svg); - --cpd-icon-user: url(../icons/user.svg); - --cpd-icon-thread: url(../icons/thread.svg); - --cpd-icon-mobile: url(../icons/mobile.svg); - --cpd-icon-lock: url(../icons/lock.svg); - --cpd-icon-info: url(../icons/info.svg); - --cpd-icon-error: url(../icons/error.svg); - --cpd-icon-delete: url(../icons/delete.svg); - --cpd-icon-computer: url(../icons/computer.svg); - --cpd-icon-close: url(../icons/close.svg); - --cpd-icon-chevron: url(../icons/chevron.svg); - --cpd-icon-check: url(../icons/check.svg); - --cpd-icon-check-circle: url(../icons/check-circle.svg); - --cpd-icon-chat: url(../icons/chat.svg); --cpd-font-letter-spacing-heading-xl: -0.0216em; --cpd-font-letter-spacing-heading-lg: -0.0209em; --cpd-font-letter-spacing-heading-md: -0.0195em; diff --git a/src/configs/getWebConfig.ts b/src/configs/getWebConfig.ts index b6d6637b..d309d1bb 100644 --- a/src/configs/getWebConfig.ts +++ b/src/configs/getWebConfig.ts @@ -37,10 +37,6 @@ export default function (target: "js" | "css" | "ts", theme: Theme): Platform { target === "css" ? "name/cti/kebab" : "camelCaseDecimal", ]; - if (target === "css") { - transforms.push("css/iconsImport"); - } - return { prefix: COMPOUND_TOKENS_NAMESPACE, transforms, @@ -81,7 +77,7 @@ function getFilesFormat(theme: Theme, target: "css" | "js" | "ts"): File[] { { destination: `${COMPOUND_TOKENS_NAMESPACE}-common.css`, format: "css/variables", - filter: "isNotCoreColor", + filter: "isSharedAcrossTheme", options: { showFileHeader: false, outputReferences: true, diff --git a/src/filters/isSharedAcrossTheme.ts b/src/filters/isSharedAcrossTheme.ts new file mode 100644 index 00000000..21de0e3e --- /dev/null +++ b/src/filters/isSharedAcrossTheme.ts @@ -0,0 +1,27 @@ +/* +Copyright 2023 The Matrix.org Foundation C.I.C. + +Licensed under the Apache License, Version 2.0 (the "License"); +you may not use this file except in compliance with the License. +You may obtain a copy of the License at + + http://www.apache.org/licenses/LICENSE-2.0 + +Unless required by applicable law or agreed to in writing, software +distributed under the License is distributed on an "AS IS" BASIS, +WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. +See the License for the specific language governing permissions and +limitations under the License. +*/ + +import { TransformedToken } from "style-dictionary/types/TransformedToken"; +import { isNotCoreColor } from "./isCoreColor"; + +const isSharedAcrossTheme = { + name: "isSharedAcrossTheme", + matcher: function (token: TransformedToken): boolean { + return isNotCoreColor.matcher(token) && token.type !== "icon"; + }, +}; + +export { isSharedAcrossTheme }; diff --git a/src/setupStyleDictionary.ts b/src/setupStyleDictionary.ts index 22b86cb4..080f695a 100644 --- a/src/setupStyleDictionary.ts +++ b/src/setupStyleDictionary.ts @@ -19,13 +19,16 @@ import { Core } from "style-dictionary"; import { Named } from "style-dictionary/types/_helpers"; import { Transform } from "style-dictionary/types/Transform"; import { registerTransforms } from "@tokens-studio/sd-transforms"; -import * as fs from 'fs'; -import * as path from 'path'; +import * as fs from "fs"; +import * as path from "path"; import camelCaseDecimal from "./transforms/camelCaseDecimal"; import pxToCGFloat from "./transforms/swift/pxToCGFloat"; import toFontWeight from "./transforms/swift/toFontWeight"; -import { getStyleDictionaryConfig, getStyleDictionaryCommonConfig } from "./configs"; +import { + getStyleDictionaryConfig, + getStyleDictionaryCommonConfig, +} from "./configs"; import { Platform, Theme } from "./@types"; import colorset from "./actions/swift/colorset"; import { Action } from "style-dictionary/types/Action"; @@ -44,6 +47,7 @@ import svgToDrawable from "./transforms/kotlin/svgToDrawable"; import iconsImport from "./transforms/css/iconsImport"; import svgToImageView from "./transforms/swift/svgToImageView"; import * as lodash from "lodash"; +import { isSharedAcrossTheme } from "./filters/isSharedAcrossTheme"; async function setupDictionary(sb: Core) { await registerTransforms(sb); @@ -117,13 +121,21 @@ async function setupDictionary(sb: Core) { sb.registerFilter(iosExclude); sb.registerFilter(isCoreColor); sb.registerFilter(isNotCoreColor); + sb.registerFilter(isSharedAcrossTheme); const extraColorsTemplate = lodash.template( - fs.readFileSync(path.join(__dirname, 'formats/templates/compose/extra-colors.kt.template')).toString() + fs + .readFileSync( + path.join( + __dirname, + "formats/templates/compose/extra-colors.kt.template" + ) + ) + .toString() ); sb.registerFormat({ - name: 'compose/extra-colors', - formatter: extraColorsTemplate + name: "compose/extra-colors", + formatter: extraColorsTemplate, }); }