docs(design-guidelines): update color examples to adapt to the new br…

…and colors

We do not reflect the new brand colors in the color palettes anymore.
Since brand colors have independent CSS variables now.
Therefore, we have just updated the examples which used to
visualize which swatches represent a brand color.

src/design-guidelines/color-system/color-system.md

@@ -102,7 +102,9 @@ But when you do your own add-ons, integrations, and apps, keep in mind that the
 Colors should be used to communicate meaning, and attract attention to things that are functionally important, not to scream your brand throughout the entire product. Different sections of the app should be distinct, but also blend together well. Extensive color usage will be placing the emphasis on an app’s UI structure, instead of its content.
 :::
 
-Use only one accent color (product color) and use it for all Lime Elements components in your product. Define this accent color by setting the CSS variable `--lime-primary-color`. We don't recommend using the Lime brand color CSS variables directly in this case, but instead suggest using their equivalent swatch from the color palette. This will ensure that your UI will automatically benefit from dark mode adjustments, while users do not notice the difference.
+Use only one accent color (product color) and use it for all Lime Elements components in your product. Define this accent color by setting the CSS variable `--lime-primary-color`.
+
+We don't recommend using the Lime brand color CSS variables for accent colors!
 
 Things that can be affected by the accent color:
 

src/design-guidelines/color-system/examples/extended-color-palette.tsx

@@ -1,14 +1,11 @@
-import { Component, h, State } from '@stencil/core';
+import { Component, h } from '@stencil/core';
 
 @Component({
     tag: 'limel-example-extended-color-palette',
     shadow: true,
     styleUrl: 'extended-color-palette.scss',
 })
 export class PaletteExample {
-    @State()
-    private brandColors: boolean = false;
-
     private colors = [
         'red',
         'pink',
@@ -34,7 +31,7 @@ export class PaletteExample {
 
     public render() {
         return (
-            <div class={{ 'brand-colors': this.brandColors }}>
+            <div>
                 <div class="color-palette">
                     {this.renderSwatches()}
                     <div class="brightness-label">lighter</div>
@@ -43,16 +40,6 @@ export class PaletteExample {
                     <div class="brightness-label">dark</div>
                     <div class="brightness-label">darker</div>
                 </div>
-                <limel-checkbox
-                    label="Highlight Lime's brand colors"
-                    onChange={this.toggleMode}
-                    checked={this.brandColors}
-                />
-                <div class="brand-colors-tips">
-                    Most of the brand colors are included in the subset for "
-                    <b>dark mode</b>". Switch between dark & light mode to see
-                    all of them.
-                </div>
             </div>
         );
     }
@@ -69,8 +56,4 @@ export class PaletteExample {
             ];
         });
     };
-
-    private toggleMode = () => {
-        this.brandColors = !this.brandColors;
-    };
 }

src/design-guidelines/color-system/examples/primary-color-palette.tsx

@@ -1,14 +1,11 @@
-import { Component, h, State } from '@stencil/core';
+import { Component, h } from '@stencil/core';
 
 @Component({
     tag: 'limel-example-primary-color-palette',
     shadow: true,
     styleUrl: 'primary-color-palette.scss',
 })
 export class PaletteExample {
-    @State()
-    private brandColors: boolean = false;
-
     private colors = [
         'red',
         'pink',
@@ -34,22 +31,12 @@ export class PaletteExample {
 
     public render() {
         return (
-            <div class={{ 'brand-colors': this.brandColors }}>
+            <div>
                 <div class="color-palette">
                     {this.renderSwatches()}
                     <div class="brightness-label">light</div>
                     <div class="brightness-label">default</div>
                 </div>
-                <limel-checkbox
-                    label="Highlight Lime's brand colors"
-                    onChange={this.toggleMode}
-                    checked={this.brandColors}
-                />
-                <div class="brand-colors-tips">
-                    Most of the brand colors are included in the subset for "
-                    <b>dark mode</b>". Switch between dark & light mode to see
-                    all of them.
-                </div>
             </div>
         );
     }
@@ -63,8 +50,4 @@ export class PaletteExample {
             ];
         });
     };
-
-    private toggleMode = () => {
-        this.brandColors = !this.brandColors;
-    };
 }

src/design-guidelines/color-system/examples/shared-styles.scss

@@ -18,7 +18,6 @@
 }
 
 .swatch {
-    transition: border-radius 0.2s ease;
     border-radius: 3px;
     justify-content: center;
     color: rgba(var(--kompendium-color-white), 0.4);
@@ -50,45 +49,6 @@
     justify-content: start;
 }
 
-.brand-colors-tips {
-    transition: opacity 0.2s ease 0.4s;
-    opacity: 0;
-    font-size: functions.pxToRem(14);
-    padding-left: functions.pxToRem(44);
-    margin-bottom: functions.pxToRem(40);
-}
-
-.brand-colors {
-    .brand-colors-tips {
-        opacity: 1;
-    }
-}
-
-@media (prefers-color-scheme: light) {
-    .brand-colors {
-        .--color-glaucous-default,
-        .--color-gray-dark {
-            border-radius: 50%;
-        }
-    }
-}
-
-@media (prefers-color-scheme: dark) {
-    .brand-colors {
-        .--color-red-light,
-        .--color-magenta-default,
-        .--color-sky-light,
-        .--color-teal-light,
-        .--color-green-light,
-        .--color-amber-light,
-        .--color-amber-default,
-        .--color-coral-light,
-        .--color-gray-light {
-            border-radius: 50%;
-        }
-    }
-}
-
 .--color-red-lighter {
     background-color: rgb(var(--color-red-lighter));
 }