diff --git a/src/Umbraco.Web.UI.Client/.vscode/lit.code-snippets b/src/Umbraco.Web.UI.Client/.vscode/lit.code-snippets index 38ffed71f5..65acb2b39c 100644 --- a/src/Umbraco.Web.UI.Client/.vscode/lit.code-snippets +++ b/src/Umbraco.Web.UI.Client/.vscode/lit.code-snippets @@ -3,7 +3,7 @@ "prefix": "lit new", "scope": "typescript", "body": [ - "import { UUITextStyles } from '@umbraco-ui/uui-css';", + "import { UmbTextStyles } from '@umbraco-ui/backoffice/style';", "import { css, html } from 'lit';", "import { customElement } from 'lit/decorators.js';", "import { UmbLitElement } from '@umbraco-cms/internal/lit-element';", @@ -14,7 +14,7 @@ "\t\treturn html`${0:umb-${TM_FILENAME_BASE/(.*)\\..+$/$1/}}`;", "\t}", "", - "\tstatic styles = [UUITextStyles, css``];", + "\tstatic styles = [UmbTextStyles, css``];", "}", "", "export default Umb${TM_FILENAME_BASE/(.*)\\..+$/${1:/pascalcase}/}Element", diff --git a/src/Umbraco.Web.UI.Client/devops/plop/templates/property-editor-ui/element.ts.hbs b/src/Umbraco.Web.UI.Client/devops/plop/templates/property-editor-ui/element.ts.hbs index fd5c0e263f..d2f7851d28 100644 --- a/src/Umbraco.Web.UI.Client/devops/plop/templates/property-editor-ui/element.ts.hbs +++ b/src/Umbraco.Web.UI.Client/devops/plop/templates/property-editor-ui/element.ts.hbs @@ -1,6 +1,6 @@ import { html } from 'lit'; import { customElement, property } from 'lit/decorators.js'; -import { UUITextStyles } from '@umbraco-ui/uui-css'; +import { UmbTextStyles } from '@umbraco-cms/backoffice/style'; import { UmbLitElement } from '@umbraco-cms/element'; /** @@ -8,7 +8,7 @@ import { UmbLitElement } from '@umbraco-cms/element'; */ @customElement('{{ extensionTagName extensionType name }}') export class {{className extensionType name }} extends UmbLitElement { - static styles = [UUITextStyles]; + static styles = [UmbTextStyles]; @property() value = ''; diff --git a/src/Umbraco.Web.UI.Client/package.json b/src/Umbraco.Web.UI.Client/package.json index 7fd15bf024..c5a92796de 100644 --- a/src/Umbraco.Web.UI.Client/package.json +++ b/src/Umbraco.Web.UI.Client/package.json @@ -20,6 +20,7 @@ "./repository": "./dist-cms/shared/repository/index.js", "./resources": "./dist-cms/shared/resources/index.js", "./router": "./dist-cms/shared/router/index.js", + "./style": "./dist-cms/shared/style/index.js", "./utils": "./dist-cms/shared/utils/index.js", "./action": "./dist-cms/packages/core/action/index.js", "./collection": "./dist-cms/packages/core/collection/index.js", diff --git a/src/Umbraco.Web.UI.Client/src/apps/backoffice/backoffice.element.ts b/src/Umbraco.Web.UI.Client/src/apps/backoffice/backoffice.element.ts index d0e69c513b..8c7779b9a9 100644 --- a/src/Umbraco.Web.UI.Client/src/apps/backoffice/backoffice.element.ts +++ b/src/Umbraco.Web.UI.Client/src/apps/backoffice/backoffice.element.ts @@ -1,7 +1,6 @@ import { UmbBackofficeContext, UMB_BACKOFFICE_CONTEXT_TOKEN } from './backoffice.context.js'; import { UmbExtensionInitializer } from './extension-initializer.controller.js'; import { css, html, customElement } from '@umbraco-cms/backoffice/external/lit'; -import { UUITextStyles } from '@umbraco-cms/backoffice/external/uui'; import { umbExtensionsRegistry } from '@umbraco-cms/backoffice/extension-registry'; import { UmbBundleExtensionInitializer, @@ -48,7 +47,6 @@ export class UmbBackofficeElement extends UmbLitElement { } static styles = [ - UUITextStyles, css` :host { display: flex; diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/collection/collection-selection-actions.element.ts b/src/Umbraco.Web.UI.Client/src/packages/core/collection/collection-selection-actions.element.ts index 06bd7ab183..9fabdf3601 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/core/collection/collection-selection-actions.element.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/core/collection/collection-selection-actions.element.ts @@ -1,4 +1,4 @@ -import { UUITextStyles } from '@umbraco-cms/backoffice/external/uui'; +import { UmbTextStyles } from '@umbraco-cms/backoffice/style'; import { css, html, nothing, customElement, state } from '@umbraco-cms/backoffice/external/lit'; import { map } from '@umbraco-cms/backoffice/external/rxjs'; import { UMB_COLLECTION_CONTEXT_TOKEN, UmbCollectionContext } from '@umbraco-cms/backoffice/collection'; @@ -110,7 +110,7 @@ export class UmbCollectionSelectionActionsElement extends UmbLitElement { } static styles = [ - UUITextStyles, + UmbTextStyles, css` #container { display: flex; diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/collection/collection-toolbar.element.ts b/src/Umbraco.Web.UI.Client/src/packages/core/collection/collection-toolbar.element.ts index b768692b27..3a639e490c 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/core/collection/collection-toolbar.element.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/core/collection/collection-toolbar.element.ts @@ -1,5 +1,5 @@ +import { UmbTextStyles } from '@umbraco-cms/backoffice/style'; import type { TooltipMenuItem } from '../components/tooltip-menu/index.js'; -import { UUITextStyles } from '@umbraco-cms/backoffice/external/uui'; import { css, html, nothing, customElement, property, state } from '@umbraco-cms/backoffice/external/lit'; import { map } from '@umbraco-cms/backoffice/external/rxjs'; import { ManifestCollectionView, umbExtensionsRegistry } from '@umbraco-cms/backoffice/extension-registry'; @@ -145,7 +145,7 @@ export class UmbCollectionToolbarElement extends UmbLitElement { } static styles = [ - UUITextStyles, + UmbTextStyles, css` :host { display: flex; diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/collection/collection.element.ts b/src/Umbraco.Web.UI.Client/src/packages/core/collection/collection.element.ts index 8a4a38b7e7..685a85a64b 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/core/collection/collection.element.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/core/collection/collection.element.ts @@ -1,4 +1,4 @@ -import { UUITextStyles } from '@umbraco-cms/backoffice/external/uui'; +import { UmbTextStyles } from '@umbraco-cms/backoffice/external/uui'; import { css, html, nothing, customElement, state, property } from '@umbraco-cms/backoffice/external/lit'; import { map } from '@umbraco-cms/backoffice/external/rxjs'; import { UmbCollectionContext, UMB_COLLECTION_CONTEXT_TOKEN } from '@umbraco-cms/backoffice/collection'; @@ -96,7 +96,7 @@ export class UmbCollectionElement extends UmbLitElement { } static styles = [ - UUITextStyles, + UmbTextStyles, css` :host { display: flex; diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/collection/dashboards/dashboard-collection.element.ts b/src/Umbraco.Web.UI.Client/src/packages/core/collection/dashboards/dashboard-collection.element.ts index a6a4fd5ee2..ac060fd291 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/core/collection/dashboards/dashboard-collection.element.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/core/collection/dashboards/dashboard-collection.element.ts @@ -1,4 +1,3 @@ -import { UUITextStyles } from '@umbraco-cms/backoffice/external/uui'; import { css, html, customElement, state, ifDefined } from '@umbraco-cms/backoffice/external/lit'; import { UMB_COLLECTION_CONTEXT_TOKEN, UmbCollectionContext } from '@umbraco-cms/backoffice/collection'; import type { ManifestDashboardCollection } from '@umbraco-cms/backoffice/extension-registry'; @@ -33,7 +32,6 @@ export class UmbDashboardCollectionElement extends UmbLitElement { } static styles = [ - UUITextStyles, css` :host { display: flex; diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/components/backoffice-modal-container/backoffice-modal-container.element.ts b/src/Umbraco.Web.UI.Client/src/packages/core/components/backoffice-modal-container/backoffice-modal-container.element.ts index 2b6252fea1..827ead0d6b 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/core/components/backoffice-modal-container/backoffice-modal-container.element.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/core/components/backoffice-modal-container/backoffice-modal-container.element.ts @@ -1,4 +1,4 @@ -import { UUITextStyles } from '@umbraco-cms/backoffice/external/uui'; +import { UmbTextStyles } from '@umbraco-cms/backoffice/style'; import { css, CSSResultGroup, html, repeat, customElement, state } from '@umbraco-cms/backoffice/external/lit'; import { UmbModalContext, @@ -40,7 +40,7 @@ export class UmbBackofficeModalContainerElement extends UmbLitElement { } static styles: CSSResultGroup = [ - UUITextStyles, + UmbTextStyles, css` :host { position: absolute; diff --git a/src/Umbraco.Web.UI.Client/src/packages/umbraco-news/umbraco-news-dashboard.element.ts b/src/Umbraco.Web.UI.Client/src/packages/umbraco-news/umbraco-news-dashboard.element.ts index 5f60141300..3cb295a95a 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/umbraco-news/umbraco-news-dashboard.element.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/umbraco-news/umbraco-news-dashboard.element.ts @@ -1,4 +1,4 @@ -import { UUITextStyles } from '@umbraco-cms/backoffice/external/uui'; +import { UmbTextStyles } from '@umbraco-cms/backoffice/style'; import { UMB_AUTH } from '@umbraco-cms/backoffice/auth'; import { css, html, customElement, state } from '@umbraco-cms/backoffice/external/lit'; import { UmbLitElement } from '@umbraco-cms/internal/lit-element'; @@ -43,7 +43,7 @@ export class UmbUmbracoNewsDashboardElement extends UmbLitElement { } static styles = [ - UUITextStyles, + UmbTextStyles, css` :host { display: block; diff --git a/src/Umbraco.Web.UI.Client/src/shared/style/index.ts b/src/Umbraco.Web.UI.Client/src/shared/style/index.ts new file mode 100644 index 0000000000..25e4656859 --- /dev/null +++ b/src/Umbraco.Web.UI.Client/src/shared/style/index.ts @@ -0,0 +1 @@ +export * from './text-style.style.js'; diff --git a/src/Umbraco.Web.UI.Client/src/shared/style/text-style.style.ts b/src/Umbraco.Web.UI.Client/src/shared/style/text-style.style.ts new file mode 100644 index 0000000000..434b4cadc0 --- /dev/null +++ b/src/Umbraco.Web.UI.Client/src/shared/style/text-style.style.ts @@ -0,0 +1,15 @@ +import { UUITextStyles } from "@umbraco-ui/uui-css"; +import { css } from "lit"; + + +export const UmbTextStyles = css` + ${UUITextStyles} + + a { + color: var(--uui-color-interactive); + } + a:hover, + a:focus { + color: var(--uui-color-interactive-emphasis); + } +` diff --git a/src/Umbraco.Web.UI.Client/tsconfig.json b/src/Umbraco.Web.UI.Client/tsconfig.json index 392973c0d2..5a5e9ff013 100644 --- a/src/Umbraco.Web.UI.Client/tsconfig.json +++ b/src/Umbraco.Web.UI.Client/tsconfig.json @@ -47,6 +47,7 @@ "@umbraco-cms/backoffice/repository": ["src/shared/repository"], "@umbraco-cms/backoffice/resources": ["src/shared/resources"], "@umbraco-cms/backoffice/router": ["src/shared/router"], + "@umbraco-cms/backoffice/style": ["src/shared/style"], "@umbraco-cms/backoffice/utils": ["src/shared/utils"], // CORE diff --git a/src/Umbraco.Web.UI.Client/web-test-runner.config.mjs b/src/Umbraco.Web.UI.Client/web-test-runner.config.mjs index 4d5038b62f..733e0bfa0e 100644 --- a/src/Umbraco.Web.UI.Client/web-test-runner.config.mjs +++ b/src/Umbraco.Web.UI.Client/web-test-runner.config.mjs @@ -47,6 +47,7 @@ export default { '@umbraco-cms/backoffice/repository': './src/shared/repository/index.ts', '@umbraco-cms/backoffice/resources': './src/shared/resources/index.ts', '@umbraco-cms/backoffice/router': './src/shared/router/index.ts', + '@umbraco-cms/backoffice/style': './src/shared/style/index.ts', '@umbraco-cms/backoffice/utils': './src/shared/utils/index.ts', '@umbraco-cms/internal/lit-element': './src/shared/lit-element/index.ts',