Merge pull request #246 from eccenca/feature/colorPalette-ECC-6637-CMEM-6442

Configure colors via palette & switch to CSS custom properties (ECC-6637 & CMEM-6442)

Author: haschek

.github/workflows/deployment-storybook.yml

@@ -24,6 +24,13 @@ jobs:
       - uses: actions/checkout@main
         with:
           fetch-depth: 0
+      - name: Workflow git state
+        run: |
+          echo github.ref: ${{ github.ref }}
+          echo github.event_name: ${{ github.event_name }}
+          echo github.actor: ${{ github.actor }}
+          git status
+          git log --oneline -1
       - uses: actions/setup-node@main
         with:
           node-version: "18"
@@ -32,7 +39,7 @@ jobs:
       - name: Create jest results
         run: yarn test:generate-output
       - name: Publish to Chromatic
-        uses: chromaui/action@v11
+        uses: chromaui/action@main
         with:
           token: ${{ secrets.GITHUB_TOKEN }}
           projectToken: ${{ secrets.CHROMATIC_PROJECT_TOKEN }}

.storybook/main.js

@@ -64,7 +64,12 @@ module.exports = {
     },
     webpackFinal: async (config, { configType }) => {
         // `configType` has a value of 'DEVELOPMENT' or 'PRODUCTION'
-
+        if (configType === "PRODUCTION") {
+            // remove source maps from production storybook
+            // this may lead to errors when it is created via github workers
+            // reason is currently not known
+            config.devtool = false;
+        }
         config.module.rules = [
             {
                 test: /\.(png|jpg|gif|svg)(\\?.*)?$/,

CHANGELOG.md

@@ -21,6 +21,18 @@ This is a major release, and it might be not compatible with your current usage
     -   component for React Flow v12, displaying new connection lines
 -   `<VisualTour />`
     -   component to display a visual tour multi-step tour of the current view
+-   new color palette that includes 4 sections with 20+ color tints in 5 weights each
+    -   indentity, semantic, layout, extra
+    -   managed via CSS custom properties
+    -   see `README.md` for inf about usage
+-   SCSS color functions
+    -   `eccgui-color-var`: returns a var of a custom property used for palette color
+    -   `eccgui-color-mix`: mix 2 colors in `srgb`, works with all types of color values and CSS custom properties
+    -   `eccgui-color-rgba`: like `rgba()` but it works also for CSS custom properties
+-   `colorCalculateDistance()`
+    -   function to calculate the difference between 2 colors using the simple CIE76 formula
+-   `textToColorHash()`
+    -   function to calculate a color from a text string
 
 ### Removed
 
@@ -37,12 +49,16 @@ This is a major release, and it might be not compatible with your current usage
     -   support now v9 and v12 of react flow
 -   `<ReactFlowExtended />`
     -   use `<EdgeNew />` by default for new connection lines, you can overwrite it by setting `connectionLineComponent` to `undefined`
+-   overrite the native SCSS `rgba()` function, so it now works for SCSS color values and CSS custom properties
+-   `getColorConfiguration()` works with CSS custom properties
 
 ### Deprecated
 
 -   support for React Flow v9 will be removed in v26
 -   `<EdgeDefs />`
     -   use `<ReactFlowMarkers />` or build it on single `<ReactFlowMarker />`
+-   property names returned by `getCOlorConfiguration` were changed to kebab case because they are originally defined via CSS custom properties
+    -   e.g. `graphNode` is now `eccgui-graph-node` and `graphNodeBright` is `eccgui-graph-node-bright`
 
 ## [24.4.1] - 2025-08-25
 

README.md

@@ -28,22 +28,69 @@ yarn add --dev @types/carbon-components-react
 
 ### Configuration
 
-All [configuration variables](https://github.com/eccenca/gui-elements/blob/develop/src/configuration/_variables.scss) can be set before importing the full library or the default configuration but for the main changes you should need to change only a few parameters:
-
--   Basic colors
-    -   `$eccgui-color-primary`: color for very important buttons and switches
-    -   `$eccgui-color-primary-contrast`: readable text color used on primary color areas
-    -   `$eccgui-color-accent`: color for most conformation buttons, links, etc
-    -   `$eccgui-color-accent-contrast`: readable text color used on accent color areas
-    -   `$eccgui-color-applicationheader-text`
-    -   `$eccgui-color-applicationheader-background`
-    -   `$eccgui-color-workspace-text`
-    -   `$eccgui-color-workspace-background`
--   Basic sizes
-    -   `$eccgui-size-typo-base`: size including absolute unit, currently only `px` is supported
-    -   `$eccgui-size-typo-base-lineheight`: only ratio to font size, no unit!
-    -   `$eccgui-size-type-levelratio`: ratio without unit! used to calculate different text sizes based on `$eccgui-size-typo-base`
-    -   `$eccgui-size-block-whitespace`: white space between block level elements, currently only `px` is supported
+All [configuration variables](https://github.com/eccenca/gui-elements/blob/develop/src/configuration/_variables.scss) can be set before importing the full library or the default configuration but for the main properties you should need to change only a few parameters
+
+#### Colors
+
+Since v25 we use a color palette as basic foundation for color configurations. The palette is defined in 4 sections containing various color tints, each tint includes 5 different weights from 100 (light color) to 900 (dark color).
+
+The default palette can be overwritten if it is defined before the configuration or full library is imported to your Sass styles. The palette need to be defined entirely, we currently don't support overwriting it partly.
+
+```
+$eccgui-color-palette-light: (
+    "identity": (
+        "brand": #fae1cc #f8cd99 #f6b966 #f4a533 #f29100,
+        "accent": #e5f4fb #aecfe3 #77abca #4186b2 #0a6199,
+        "text": #f8f8f8 #bcbcbc #818181 #434343 #090909,
+        "background": #fff #e8e8e8 #d6d6d6 #d4d4d4 #d3d3d3,
+    ),
+    "semantic": (
+        "info": #e5f4fb #aecfe3 #77aaca #4086b2 #096199,
+        "success": #e8f5e9 #b2c6b4 #7c967e #466749 #103713,
+        "warning": #fff3e0 #fad2b3 #f5b287 #f0915a #eb702d,
+        "danger": #fff5f6 #edbfc0 #db8989 #c95253 #b71c1c,
+    ),
+    "layout": (
+        "yellow": #fff6d5 #f1ecb5 #e3db79 #d4c93c #c1a500,
+        "purple": #f4ddf3 #c8a2d1 #9d6eb8 #71378f #480e75,
+        "magenta": #ffd8e8 #f5a6c3 #e276a4 #be4c80 #59122d,
+        "pink": #fde4f1 #e6b4ce #d08aae #bb5f8e #711c4d,
+        "violet": #f4e3f4 #d8b0d8 #b377b3 #904490 #570057,
+        "indigo": #efe4fb #b89ee0 #8f72c5 #6547aa #3b1e8f,
+        "cyan": #dff9fc #86d6e5 #5abfd4 #2da9c4 #0092b3,
+        "teal": #d4f2ec #a3ddd3 #6dc0b2 #479d8d #104c42,
+        "lime": #cde0d6 #bce3c2 #9dcd99 #7ba66c #87b347,
+        "amber": #ffe7b8 #ffe9c4 #f9cd8d #eeb757 #ef8f00,
+        "vermilion": #ffd8cc #e4c4ba #b27a6b #8c4b3a #651c09,
+        "grey": #f5f6f7 #b7b7b7 #808080 #484848 #1c2329,
+    ),
+    "extra": (
+        "gold": #fff7d5 #ebd893 #dfc670 #d3b44e #c7a22b,
+        "silver": #f0f0f0 #dedede #ccc #bababa #a8a8a8,
+        "bronze": #fbe9db #f2d6bc #eac29d #e1af7e #d89b5f,
+    ),
+);
+```
+
+All palette colors will be transformed into CSS custom properties automatically and can be referenced by name scheme `--eccgui-color-palette-{groupname}-{colortint}-{colorweight}`, e.g. `--eccgui-color-palette-identity-brand-100`.
+
+All other colors are based on the palette but it is still possible to set them before the default values are used by importing the configuration or the full library.
+
+-   `$eccgui-color-primary`: color for very important buttons and switches
+-   `$eccgui-color-primary-contrast`: readable text color used on primary color areas
+-   `$eccgui-color-accent`: color for most conformation buttons, links, etc
+-   `$eccgui-color-accent-contrast`: readable text color used on accent color areas
+-   `$eccgui-color-applicationheader-text`
+-   `$eccgui-color-applicationheader-background`
+-   `$eccgui-color-workspace-text`
+-   `$eccgui-color-workspace-background`
+
+#### Sizes
+
+-   `$eccgui-size-typo-base`: size including absolute unit, currently only `px` is supported
+-   `$eccgui-size-typo-base-lineheight`: only ratio to font size, no unit!
+-   `$eccgui-size-type-levelratio`: ratio without unit! used to calculate different text sizes based on `$eccgui-size-typo-base`
+-   `$eccgui-size-block-whitespace`: white space between block level elements, currently only `px` is supported
 
 ## Development
 
@@ -125,7 +172,7 @@ After you tested the GUI elements package locally you can Clean up your applicat
 3. Pull request from release branch into `main` need to be approved
     - then ["Publish: final release "](https://github.com/eccenca/gui-elements/actions/workflows/publish-final-release.yml) can be used on `main` (or `next` and `legacy`) to publish final release packages
     - another PR is automatically created for changes done during publishing process
- 
+
 ## License
 
 Apache License, Version 2.0, January 2004

src/_shame.scss

@@ -51,6 +51,6 @@ textarea:focus-visible {
 }
 
 :focus-visible {
-    outline: rgba($eccgui-color-accent, $eccgui-opacity-muted) solid 2px;
+    outline: eccgui-color-rgba($eccgui-color-accent, $eccgui-opacity-muted) solid 2px;
     outline-offset: 1px;
 }

src/cmem/markdown/Markdown.stories.tsx

@@ -1,5 +1,4 @@
 import React from "react";
-import { Blockquote } from "@blueprintjs/core";
 import { Meta, StoryFn } from "@storybook/react";
 
 import { Markdown } from "./../../../index";