@c8y/style 1024.10.8 → 1024.14.0

package/README.md

@@ -1,16 +1,19 @@
 # Branding
 
-For styling the application global CSS created with [LESS](http://lesscss.org/) is used. These styles are based on Bootstrap 3, and the original LESS source is distributed via the npm package [@c8y/style](https://www.npmjs.com/package/@c8y/style).
-By extending these styles it is possible to change any detail of the application but the vast majority of developers want to change: colors, logos and fonts and these can be very easily achieved by replacing a few variables.
+The global styles of Cumulocity applications are authored in [SCSS](https://sass-lang.com/) and distributed via the npm package [@c8y/style](https://www.npmjs.com/package/@c8y/style) (entry point: `main.scss`). These styles are based on Bootstrap 3.
 
-To override the variables it is possible to use:
-- LESS variables at build time
-- Custom CSS properties (at build time or configurable at runtime)
+To customize colors, logos and fonts, use:
+
+- **CSS custom properties** — at build time or configurable at runtime (recommended)
+- **Branding editor** — in the Administration application, no code required
+
+> **Important:** LESS-based styling was removed in version 1024 (January 2026). Build-time
+> LESS variable overrides (`@import '~@c8y/style/extend.less'` followed by `@brand-primary: ...`)
+> no longer apply. Use CSS custom properties instead.
 
 ## CSS custom properties
 
-Exposed via CSS custom properties there is only a subset of the LESS variables available.
-Here is a list of the available variables.
+A subset of the styling is exposed via CSS custom properties. Here is a list of the most commonly used variables.
 
 ```css
 :root {
@@ -47,267 +50,35 @@ Here is a list of the available variables.
 }
 ```
 
-Note that these can be customized at runtime using [application options](https://cumulocity.com/guides/web/angular/#application-options) using the property `brandingCssVars`.
-The option is only available after version 9.22.0.
-
-## Using LESS
-
-### Prerequisites
-
-If you do not use the [@c8y/cli](https://www.npmjs.com/package/@c8y/cli) make sure that you install the base styles from npm with:
-
-```
-npm install @c8y/style
-```
-
-1. Create a LESS file called for instance ```branding.less```.
-2. Save it inside a new folder, which can have any name you like.
-3. Inside this folder, create a sub folder for images.
-
-```
-my-application
-│   app.modules.ts
-│   index.ts
-│   packages.json
-|   ...
-└───branding
-│   │   branding.less
-│   └───img
-│       │   favicon.ico
-│       │   main-logo.svg
-│       │   tenant-brand.svg
-│
-```
-
-The first line of code within the ```branding.less``` has to be:
-
- ```less
- @import '~@c8y/style/extend.less';
- ```
-
-
-## Example customizations
-
-At this point we are able to change the desired variables according to our needs.
-
-Let us change for example the most important color of your branding, the main color, called **brand-color**.
-
-This is done by setting the respective LESS variable to a new color.
-
- ```less
- @brand-color: red;
- ```
-
-User interface elements like buttons, active navigation nodes or even active tabs as well as also hover-states of buttons are red now.
-
-What about changing the main logo that is located at the top of the login dialog? Look at this:
-
- ```less
- @{logo-login} { background-image: url('./img/logo-main.svg')}
- @brand-logo-height: 48%;
- ```
-
-You can check the branding changes with the help of the [@c8y/cli](https://www.npmjs.com/package/@c8y/cli).
-
- ```
- c8ycli server --app.brandingEntry="<path-to-your-branding.less>"
- ```
-
-You can also take a look at our tutorial application which has an example branding applied:
-
- ```
- c8ycli new <appName> tutorial
- ```
-
-## More branding details
-
-There are three main areas of a branding that you can easily control.
-
-### Colors
-
-The colors that may be edited are separated in multiple categories, like:
-
-* brand colors
-* status colors
-* gray shades
-* component colors
-
-#### Brand colors
-
-```less
-@brand-color:                 #53cd61;
-@brand-primary:               @brand-color;
-@brand-complementary:         #a8b3b5;
-@brand-primary-light:         lighten(@brand-primary, 20%);
-```
-
-#### Status colors
-
-```less
-@status-success:               #5cb85c;
-@status-info:                  @brand-color;
-@status-warning:               #f0ad4e;
-@status-danger:                #d9534f;
-@danger:                      #D90000;
-@warning:                     #FDC000;
-@status-warning-dark:                #FF8000;
-@success:                     #5cb85c;
-```
-
-#### Gray shades
+These can be customized at runtime using [application options](https://cumulocity.com/codex/common-tasks/application-styles) via the property `brandingCssVars`. A branding always has to be applied to all of your applications, so it is recommended to set it through dynamic public options:
 
-```less
-@text-color:                   #444;
-@gray-30:                   #3b4748;
-@gray-40:            #49595B;
-@gray-40:                 #6D7A7C;
-@gray:                        #8A9596;
-@gray-80:                  #cacece;
-@gray-90:                #f8f8f8;
-@gray-100:                  #fcfcfc;
-@text-muted:                  @gray-50;
-```
-
-#### Component colors
-
-Two components are always visible to the user, the header and the navigator. Therefore you should determine the look & feel of these components with care.
-
-```less
-/* HEADER */
-@headerColor:                 white;
-@header-text-color:           @gray-40;
-@header-text-color-hover:     @brand-primary;
-@header-color-active:         darken(@gray-40, 15%);
-
-/* NAVIGATOR */
-@navColorHeader:              transparent;
-@navigator-title-color:       white;
-@navigator-text-color:        @gray-90;
-@navigator-separator-color:   fade(white, 5%);
-@navigator-font-family:       @headings-font-family;
-@navigator-font-size:         13px;
-@navigator-color-active:      white;
-@navigator-active-bg:         @brand-primary;
+```json
+{
+  "brandingCssVars": {
+    "brand-primary": "#1976d2",
+    "navigator-bg-color": "#1565c0"
+  }
+}
 ```
 
-As you can see, some variables re-use others. Be careful that these variables are all defined to avoid build errors.
-
-### Logos
-
-There is no branding without logos.
+For the full set of available design tokens, see the [design tokens documentation](https://cumulocity.com/codex/design-system/design-tokens/branding-tokens).
 
-You can change the logo at the top of the login dialog, the tenant brand logo and of course the favicon.
+## Branding editor
 
-To change the favicon, enter:
-```less
-// to be loaded by webpack
-.favicon-webpack-loader { background: url('./img/favicon.ico') }
-```
-
-To change the main logo, enter:
-```less
-@{logo-login} { background-image: url('./img/main-logo.svg') }
-@brand-logo-height: 48%;
-```
-
-To change the tenant brand logo inside the navigator, enter:
-```less
-@{logo-navigator} { background-image: url('./img/tenant-brand.svg') }
-@navigator-platform-logo-height: 100px;
-```
+The branding editor in the Administration application provides a form to configure brand colors, logos and typography without any code. See [Branding](https://cumulocity.com/docs/enterprise-tenant/customization/#branding).
 
-### Typography
+## Extending `@c8y/style` with SCSS
 
-The look and feel of an application is also driven by its typography. Of course you can change the font as well.
+For advanced use cases you can extend the SCSS sources directly. Install the base styles from npm (not needed when using the Web SDK CLI `c8ycli`):
 
-```less
-@font-family-sans-serif:      "Lato",Arial, Verdana, sans-serif;
-@font-family-base:            @font-family-sans-serif; @headings-font-family:        "Roboto",Arial, Verdana, sans-serif;
+```sh
+npm install @c8y/style
 ```
 
-## Example Branding
-
-Above we described the possible options for creating your custom branding in detail. If you do not want to start from scratch in every application use the following example branding as snippet. It defines the most important variables.
-
-```less
-@import '~@c8y/style/extend.less';
+The package exposes the following SCSS entry points:
 
-// Replace and uncomment each variable as you need them
-/* LOGOS */
-.favicon-webpack-loader { background: url('./img/favicon.ico') } // to be loaded by webpack
-@{logo-login} { background-image: url('./img/logo-main.svg') }
-@brand-logo-height: 48%; // percentage - height / width * 100
-@{logo-navigator} { background-image: url('./img/logo.svg') }
-@navigator-platform-logo-height: 100px;
+- `main.scss` — the complete application stylesheet
+- `branding.scss` — variables and exported styles, configurable via `@use ... with (...)`
+- `extend.scss` — variables only, for building a custom branding on top
 
-/* COLORS */
-@brand-color:                 #53cd61; // main color
-@brand-primary:               @brand-color;
-@brand-complementary:         #a8b3b5;
-@brand-primary-light:         lighten(@brand-primary, 20%);
-// status colors
-@status-success:               #5cb85c;
-@status-info:                  @brand-color;
-@status-warning:               #f0ad4e;
-@status-danger:                #d9534f;
-@danger:                      #D90000;
-@warning:                     #FDC000;
-@status-warning-dark:                #FF8000;
-@success:                     #5cb85c;
-// grays
-@text-color:                   #444;
-@gray-30:                   #3b4748;
-@gray-40:            #49595B;
-@gray-40:                 #6D7A7C;
-@gray:                        #8A9596;
-@gray-80:                  #cacece;
-@gray-90:                #f8f8f8;
-@gray-100:                  #fcfcfc;
-@text-muted:                  @gray-50;
-
-@body-background-color:       #f8f8f8; // page background color - always use a light background
-
-/* HEADER */
-@headerColor:                 white;
-@header-text-color:           @gray-40;
-@header-text-color-hover:     @brand-primary;
-@header-color-active:         darken(@gray-40, 15%);
-
-/* NAVIGATOR */
-@navColor:                    @gray-30;
-@navColorHeader:              transparent;
-@navigator-title-color:       white;
-@navigator-text-color:        @gray-90;
-@navigator-separator-color:   fade(white, 5%);
-@navigator-font-family:       @headings-font-family;
-@navigator-font-size:         13px;
-@navigator-color-active:      white;
-@navigator-active-bg:         @brand-primary;
-// when set adds a vertical gradient in the navigator background
-// @grad-top:                    "";
-// @grad-bottom:                 "";
-
-/* TYPOGRAPHY */
-// @font-family-sans-serif:      "Lato",Arial, Verdana, sans-serif;
-// @font-family-base:            @font-family-sans-serif;
-// @headings-font-family:        "Roboto",Arial, Verdana, sans-serif;
-
-/* BUTTONS */
-// @component-border-radius-base-base:      2px;
-// @component-border-radius-base-large:     @component-border-radius-base-base;
-// @component-border-radius-base-small:     @component-border-radius-base-base;
-// @btn-shadow:                  none;
-
-/* COMPONENTS */
-// @spinner-color:               lighten(@brand-primary, 30%);
-// @link-color:                  #337ab7;
-// @link-color-hover:            darken(@link-color, 15%);
-// @form-control-border-color-focus:           #66afe9;
-
-// @body-background-pattern:     "";
-// @darker-header:               @gray-30;
-// @appswitcher-background:      none;
-// @component-background-hover:              fade(black, 1.5%);
-// @header-app-name:             @header-text-color;
-// @image-path:                  'img/';
-```
+Refer to the styling documentation in the [Web SDK style guide](https://cumulocity.com/codex/common-tasks/application-styles) for details and examples.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@c8y/style",
-  "version": "1024.10.8",
+  "version": "1024.14.0",
   "license": "Apache-2.0",
   "author": "Cumulocity GmbH",
   "description": "Styles for Cumulocity IoT applications",
@@ -15,7 +15,7 @@
     "Branding",
     "Style",
     "CSS",
-    "less"
+    "SCSS"
   ],
   "dependencies": {
     "@fontsource/public-sans": "^5.2.7"

package/styles/core/overlays/_dropdowns.scss

@@ -122,15 +122,15 @@
   > li,
   > .d-contents > li {
     a:not(.btn):not(.c8y-asset-selector__btn):not(.btn-help),
-    button:not(.btn):not(.c8y-asset-selector__btn):not(.btn-help) {
+    button:not(.btn-default):not(.btn-primary):not(.c8y-asset-selector__btn):not(.btn-help) {
       &:not(.btn-add-block):not(.btn-clean):not(.collapse-btn.btn-dot) {
         display: flex;
         align-items: center;
         gap: $size-4;
-        padding: 9px 15px 10px;
+        padding: 9px 15px 10px!important;
         width: 100%;
         border: 0;
-        border-top: 1px solid var(--c8y-dropdown-border-color, $component-border-color);
+        border-top: 1px solid var(--c8y-dropdown-border-color, $component-border-color)!important;
         border-radius: 0;
         background-color: var(--c8y-dropdown-background-default, $component-background-default);
         background-image: none;