From cf48123bcc8e509c9eb840d6d43ef1136a965af1 Mon Sep 17 00:00:00 2001 From: Kiarokh Moattar Date: Thu, 13 Jun 2024 13:57:12 +0200 Subject: [PATCH] docs(design-guidelines): update color examples to adapt to the new brand 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. --- .../color-system/color-system.md | 4 +- .../examples/extended-color-palette.tsx | 21 +--------- .../examples/primary-color-palette.tsx | 21 +--------- .../color-system/examples/shared-styles.scss | 40 ------------------- 4 files changed, 7 insertions(+), 79 deletions(-) diff --git a/src/design-guidelines/color-system/color-system.md b/src/design-guidelines/color-system/color-system.md index e37b1e2832..11efa6308b 100644 --- a/src/design-guidelines/color-system/color-system.md +++ b/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: diff --git a/src/design-guidelines/color-system/examples/extended-color-palette.tsx b/src/design-guidelines/color-system/examples/extended-color-palette.tsx index fb940b2849..064697c990 100644 --- a/src/design-guidelines/color-system/examples/extended-color-palette.tsx +++ b/src/design-guidelines/color-system/examples/extended-color-palette.tsx @@ -1,4 +1,4 @@ -import { Component, h, State } from '@stencil/core'; +import { Component, h } from '@stencil/core'; @Component({ tag: 'limel-example-extended-color-palette', @@ -6,9 +6,6 @@ import { Component, h, State } from '@stencil/core'; 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 ( -
+
{this.renderSwatches()}
lighter
@@ -43,16 +40,6 @@ export class PaletteExample {
dark
darker
- -
- Most of the brand colors are included in the subset for " - dark mode". Switch between dark & light mode to see - all of them. -
); } @@ -69,8 +56,4 @@ export class PaletteExample { ]; }); }; - - private toggleMode = () => { - this.brandColors = !this.brandColors; - }; } diff --git a/src/design-guidelines/color-system/examples/primary-color-palette.tsx b/src/design-guidelines/color-system/examples/primary-color-palette.tsx index 391a88b66c..9c2e162ffe 100644 --- a/src/design-guidelines/color-system/examples/primary-color-palette.tsx +++ b/src/design-guidelines/color-system/examples/primary-color-palette.tsx @@ -1,4 +1,4 @@ -import { Component, h, State } from '@stencil/core'; +import { Component, h } from '@stencil/core'; @Component({ tag: 'limel-example-primary-color-palette', @@ -6,9 +6,6 @@ import { Component, h, State } from '@stencil/core'; 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 ( -
+
{this.renderSwatches()}
light
default
- -
- Most of the brand colors are included in the subset for " - dark mode". Switch between dark & light mode to see - all of them. -
); } @@ -63,8 +50,4 @@ export class PaletteExample { ]; }); }; - - private toggleMode = () => { - this.brandColors = !this.brandColors; - }; } diff --git a/src/design-guidelines/color-system/examples/shared-styles.scss b/src/design-guidelines/color-system/examples/shared-styles.scss index 36aba33d1d..0cd8ea25c8 100644 --- a/src/design-guidelines/color-system/examples/shared-styles.scss +++ b/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)); }