feat: new color palette (#359)

.storybook/manager.js

@@ -11,6 +11,7 @@ const theme = create({
   fontBase: 'RubikVariable, sans-serif',
   fontCode:
     '"Operator Mono","Fira Code Retina","Fira Code","FiraCode-Retina","Andale Mono","Lucida Console",Consolas,Monaco,monospace',
+  textColor: '#273142',
 });
 
 addons.setConfig({ theme });

docs/design-system/colors.stories.mdx

@@ -1,4 +1,5 @@
 import { Meta, ColorPalette, ColorItem } from '@storybook/addon-docs';
+import { html } from 'lit';
 
 <Meta title="Design System/Colors" />
 
@@ -10,53 +11,35 @@ Baklava uses a list of defined color with some default values.
   <ColorItem
     title="--bl-color-primary"
     subtitle="Primary Color"
-    colors={{ '': '#F27A1A', '--hover': '#EF6114', '--background': '#FEF2E8' }}
-  />
-  <ColorItem
-    title="--bl-color-secondary"
-    subtitle="Secondary Color"
-    colors={{ '': '#273142', '--hover': '#0F131A', '--background': '#F1F2F7' }}
-  />
-  <ColorItem
-    title="--bl-color-tertiary"
-    subtitle="Tertiary Color"
-    colors={{ '': '#f1f2f7', '--hover': '#d5d9e1', '--background': '#F7F7FA' }}
+    colors={{ '': 'var(--bl-color-primary)', '--highlight': 'var(--bl-color-primary-highlight)', '--contrast': 'var(--bl-color-primary-contrast)' }}
   />
   <ColorItem
     title="--bl-color-success"
     subtitle="Success Color"
-    colors={{ '': '#0bc15c', '--hover': '#09a44e', '--background': '#E7F9EF' }}
+    colors={{ '': 'var(--bl-color-success)', '--highlight': 'var(--bl-color-success-highlight)', '--contrast': 'var(--bl-color-success-contrast)' }}
   />
   <ColorItem
     title="--bl-color-danger"
     subtitle="Danger Color"
-    colors={{ '': '#ff5043', '--hover': '#ff3028', '--background': '#FFEEEC' }}
+    colors={{ '': 'var(--bl-color-danger)', '--highlight': 'var(--bl-color-danger-highlight)', '--contrast': 'var(--bl-color-danger-contrast)' }}
   />
   <ColorItem
     title="--bl-color-warning"
     subtitle="Warning Color"
-    colors={{ '': '#FFB600', '--hover': '#FF9800', '--background': '#FFF8E6' }}
-  />
-  <ColorItem
-    title="--bl-color-alternative"
-    subtitle="Alternative Color"
-    colors={{ '': '#5794FF', '--hover': '#3469FF', '--background': '#EEF4FF' }}
-  />
-  <ColorItem
-    title="--bl-color-featured"
-    subtitle="Featured Color"
-    colors={{ '': '#8C4EFF', '--hover': '#5E2EFF', '--background': '#F4EDFF' }}
+    colors={{ '': 'var(--bl-color-warning)', '--highlight': 'var(--bl-color-warning-highlight)', '--contrast': 'var(--bl-color-warning-contrast)' }}
   />
   <ColorItem
-    title="--bl-color-content"
-    subtitle="Content Colors"
+    title="--bl-color-neutral"
+    subtitle="Neutral Colors"
     colors={{
-        '--primary': '#273142',
-        '--secondary': '#6E7787',
-        '--tertiary': '#95A1B5',
-        '--passive': '#AFBBCA',
-        '--primary-contrast' : '#FFF',
-        '--hover' : '#F27A1A'
+        '--none': 'var(--bl-color-neutral-none)',
+        '--darkest': 'var(--bl-color-neutral-darkest)',
+        '--darker': 'var(--bl-color-neutral-darker)',
+        '--dark': 'var(--bl-color-neutral-dark)',
+        '--light' : 'var(--bl-color-neutral-light)',
+        '--lighter' : 'var(--bl-color-neutral-lighter)',
+        '--lightest' : 'var(--bl-color-neutral-lightest)',
+        '--full' : 'var(--bl-color-neutral-full)',
     }}
   />
 </ColorPalette>

docs/how-to-customize-a-components-style.stories.mdx

@@ -41,7 +41,7 @@ Let's take a badge component as an example:
 
 .badge {
     /* Variable definition start */
-  --bg-color: var(--bl-badge-bg-color, var(--bl-color-accent-primary-background));
+  --bg-color: var(--bl-badge-bg-color, var(--bl-color-primary-contrast));
   --color: var(--bl-badge-color, var(--bl-color-primary));
   --font: var(--bl-font-title-4-medium);
   --padding-vertical: var(--bl-size-3xs);
@@ -68,7 +68,7 @@ By the __nature__ of this component, we let users to change background color and
 we define a default variables `--bl-badge-bg-color` and `--bl-badge-color` and fill it with our default definitions like this:
 
 ```css
---bg-color: var(--bl-badge-bg-color, var(--bl-color-accent-primary-background));
+--bg-color: var(--bl-badge-bg-color, var(--bl-color-primary-contrast));
 --color: var(--bl-badge-color, var(--bl-color-primary));
 ```
 

docs/using-baklava-in-react.stories.mdx

@@ -130,7 +130,7 @@ import { BlButton } from "@trendyol/baklava/dist/baklava-react";
 function MyComponent() {
   const buttonStyle = {
     "--bl-color-primary": "purple",
-    "--bl-color-primary-hover": "rebeccapurple",
+    "--bl-color-primary-highlight": "rebeccapurple",
   }
 
   return (

src/components/alert/bl-alert.css

@@ -5,14 +5,14 @@
 .alert {
   --padding: var(--bl-size-m);
   --main-color: var(--bl-color-primary);
-  --main-bg-color: var(--bl-color-accent-primary-background);
+  --main-bg-color: var(--bl-color-primary-contrast);
 
   position: relative;
   display: flex;
   align-items: flex-start;
   justify-content: space-between;
   background-color: var(--main-bg-color);
-  color: var(--bl-color-content-primary);
+  color: var(--bl-color-neutral-darker);
   box-shadow: inset 0 0 0 1px var(--main-color);
   border-radius: var(--bl-border-radius-s);
   padding: calc(var(--padding) / 2) var(--padding);
@@ -50,19 +50,19 @@
 }
 
 .caption {
-  color: var(--bl-color-content-primary);
+  color: var(--bl-color-neutral-darker);
   font: var(--bl-font-title-3-medium);
 }
 
 .actions {
   display: none;
   flex-wrap: wrap;
-  gap: 16px;
+  gap: var(--bl-size-m);
   padding: calc(var(--padding) / 2) 0;
 }
 
 .close {
-  --bl-color-secondary-background: transparent;
+  --bl-color-neutral-lightest: transparent;
 }
 
 .caption + .description {
@@ -75,15 +75,15 @@
 
 :host([variant='success']) .alert {
   --main-color: var(--bl-color-success);
-  --main-bg-color: var(--bl-color-success-background);
+  --main-bg-color: var(--bl-color-success-contrast);
 }
 
 :host([variant='warning']) .alert {
   --main-color: var(--bl-color-warning);
-  --main-bg-color: var(--bl-color-warning-background);
+  --main-bg-color: var(--bl-color-warning-contrast);
 }
 
 :host([variant='danger']) .alert {
   --main-color: var(--bl-color-danger);
-  --main-bg-color: var(--bl-color-danger-background);
+  --main-bg-color: var(--bl-color-danger-contrast);
 }

src/components/badge/bl-badge.css

@@ -4,7 +4,7 @@
 }
 
 .badge {
-  --bg-color: var(--bl-badge-bg-color, var(--bl-color-accent-primary-background));
+  --bg-color: var(--bl-badge-bg-color, var(--bl-color-primary-contrast));
   --color: var(--bl-badge-color, var(--bl-color-primary));
   --font: var(--bl-font-title-4-medium);
   --padding-vertical: var(--bl-size-4xs);

src/components/badge/bl-badge.stories.mdx

@@ -26,20 +26,20 @@ style=${ifDefined(args.styles ? styleMap(args.styles) : undefined)}
 
 export const VariantTemplate = (args) => html`
 ${BadgeTemplate({ content:'In Progress', styles: { '--bl-badge-bg-color' : 'rgb(254, 242, 232)', '--bl-badge-color': 'rgb(242, 122, 26)' },...args})}
-${BadgeTemplate({ content:'Approved', styles: { '--bl-badge-bg-color' : 'rgba(231, 249, 239, 1)', '--bl-badge-color': 'rgba(11, 193, 92, 1)' },...args})}
-${BadgeTemplate({ content:'Warning', styles: { '--bl-badge-bg-color' : '#FFF8E6', '--bl-badge-color': '#FFB600' },...args})}
-${BadgeTemplate({ content:'Denied', styles: { '--bl-badge-bg-color' : 'var(--bl-color-danger-background)', '--bl-badge-color': 'var(--bl-color-danger)' },...args})}
-${BadgeTemplate({ content:'Offer', styles: { '--bl-badge-bg-color' : 'var(--bl-color-alternative-background)', '--bl-badge-color': 'var(--bl-color-alternative)' },...args})}
-${BadgeTemplate({ content:'Winner', styles: { '--bl-badge-bg-color' : 'var(--bl-color-featured-background)', '--bl-badge-color': 'var(--bl-color-featured)' },...args})}
+${BadgeTemplate({ content:'Approved', styles: { '--bl-badge-bg-color' : 'var(--bl-color-success-contrast)', '--bl-badge-color': 'var(--bl-color-success)' },...args})}
+${BadgeTemplate({ content:'Warning', styles: { '--bl-badge-bg-color' : 'var(--bl-color-warning-contrast)', '--bl-badge-color': 'var(--bl-color-warning)' },...args})}
+${BadgeTemplate({ content:'Denied', styles: { '--bl-badge-bg-color' : 'var(--bl-color-danger-contrast)', '--bl-badge-color': 'var(--bl-color-danger)' },...args})}
+${BadgeTemplate({ content:'Offer', styles: { '--bl-badge-bg-color' : '#eef4ff', '--bl-badge-color': '#5794ff' },...args})}
+${BadgeTemplate({ content:'Winner', styles: { '--bl-badge-bg-color' : '#f4edff', '--bl-badge-color': '#8c4eff' },...args})}
 `;
 
 export const WithIconTemplate = (args) => html`
-${BadgeTemplate({ content:'In Progress', icon: 'waiting', styles: { '--bl-badge-bg-color' : 'var(--bl-color-accent-primary-background)', '--bl-badge-color': 'var(--bl-color-primary)' },...args})}
-${BadgeTemplate({ content:'Approved', icon: 'check_fill', styles: { '--bl-badge-bg-color' : 'var(--bl-color-success-background)', '--bl-badge-color': 'var(--bl-color-success)' },...args})}
-${BadgeTemplate({ content:'Warning', icon: 'warning', styles: { '--bl-badge-bg-color' : 'var(--bl-color-warning-background)', '--bl-badge-color': 'var(--bl-color-warning)' },...args})}
-${BadgeTemplate({ content:'Denied', icon: 'close_fill', styles: { '--bl-badge-bg-color' : 'var(--bl-color-danger-background)', '--bl-badge-color': 'var(--bl-color-danger)' },...args})}
-${BadgeTemplate({ content:'Offer', icon: 'my_offers', styles: { '--bl-badge-bg-color' : 'var(--bl-color-alternative-background)', '--bl-badge-color': 'var(--bl-color-alternative)' },...args})}
-${BadgeTemplate({ content:'Winner', icon: 'award', styles: { '--bl-badge-bg-color' : 'var(--bl-color-featured-background)', '--bl-badge-color': 'var(--bl-color-featured)' },...args})}
+${BadgeTemplate({ content:'In Progress', icon: 'clock', styles: { '--bl-badge-bg-color' : 'var(--bl-color-primary-contrast)', '--bl-badge-color': 'var(--bl-color-primary)' },...args})}
+${BadgeTemplate({ content:'Approved', icon: 'check_fill', styles: { '--bl-badge-bg-color' : 'var(--bl-color-success-contrast)', '--bl-badge-color': 'var(--bl-color-success)' },...args})}
+${BadgeTemplate({ content:'Warning', icon: 'warning', styles: { '--bl-badge-bg-color' : 'var(--bl-color-warning-contrast)', '--bl-badge-color': 'var(--bl-color-warning)' },...args})}
+${BadgeTemplate({ content:'Denied', icon: 'close_fill', styles: { '--bl-badge-bg-color' : 'var(--bl-color-danger-contrast)', '--bl-badge-color': 'var(--bl-color-danger)' },...args})}
+${BadgeTemplate({ content:'Offer', icon: 'offers', styles: { '--bl-badge-bg-color' : '#eef4ff', '--bl-badge-color': '#5794ff' },...args})}
+${BadgeTemplate({ content:'Winner', icon: 'award', styles: { '--bl-badge-bg-color' : '#f4edff', '--bl-badge-color': '#8c4eff' },...args})}
 `;
 
 export const SizeTemplate = (args) => html`
@@ -75,7 +75,7 @@ You can use the color model like this ways;
 * `hex`
 * `variables`
 
-Default background color is `--bl-color-accent-primary-background` and default color is `--bl-color-primary`.
+Default background color is `--bl-color-primary-contrast` and default color is `--bl-color-primary`.
 
 <Canvas>
 <Story name="Variants">

src/components/badge/bl-badge.ts

@@ -9,7 +9,7 @@ export type BadgeSize = 'small' | 'medium' | 'large';
  * @tag bl-badge
  * @summary Baklava Badge component
  *
- * @cssproperty [--bl-badge-bg-color=--bl-color-accent-primary-background] Sets the background color of badge
+ * @cssproperty [--bl-badge-bg-color=--bl-color-primary-contrast] Sets the background color of badge
  * @cssproperty [--bl-badge-color=--bl-color-primary] Sets the color of badge
  */
 

src/components/button/bl-button.css

@@ -16,9 +16,9 @@
 
 .button {
   --main-color: var(--bl-color-primary);
-  --main-hover-color: var(--bl-color-primary-hover);
-  --text-hover-color: var(--bl-color-secondary-background);
-  --content-color: var(--bl-color-content-primary-contrast);
+  --main-hover-color: var(--bl-color-primary-highlight);
+  --text-hover-color: var(--bl-color-neutral-lightest);
+  --content-color: var(--bl-color-neutral-full);
   --bg-color: var(--main-color);
   --border-color: var(--main-color);
   --padding-vertical: var(--bl-size-2xs);
@@ -121,18 +121,18 @@
 }
 
 :host([kind='neutral']) .button {
-  --main-color: var(--bl-color-secondary);
-  --main-hover-color: var(--bl-color-secondary-hover);
+  --main-color: var(--bl-color-neutral-darker);
+  --main-hover-color: var(--bl-color-neutral-darkest);
 }
 
 :host([kind='success']) .button {
   --main-color: var(--bl-color-success);
-  --main-hover-color: var(--bl-color-success-hover);
+  --main-hover-color: var(--bl-color-success-highlight);
 }
 
 :host([kind='danger']) .button {
   --main-color: var(--bl-color-danger);
-  --main-hover-color: var(--bl-color-danger-hover);
+  --main-hover-color: var(--bl-color-danger-highlight);
 }
 
 :host([disabled]) {
@@ -148,9 +148,9 @@
 }
 
 :host .button[aria-disabled='true'] {
-  --main-color: var(--bl-color-tertiary);
-  --main-hover-color: var(--bl-color-tertiary);
-  --content-color: var(--bl-color-content-passive);
+  --main-color: var(--bl-color-neutral-lightest);
+  --main-hover-color: var(--bl-color-neutral-lightest);
+  --content-color: var(--bl-color-neutral-lighter);
   --bg-color: var(--main-color);
 
   pointer-events: none;
@@ -162,7 +162,7 @@
 }
 
 :host([variant='secondary']:hover) .button[aria-disabled='false'] {
-  --content-color: var(--bl-color-content-primary-contrast);
+  --content-color: var(--bl-color-neutral-full);
   --bg-color: var(--main-hover-color);
 }
 
@@ -189,12 +189,12 @@
 }
 
 :host([variant='secondary']) .active.button {
-  --content-color: var(--bl-color-content-primary-contrast);
+  --content-color: var(--bl-color-neutral-full);
   --bg-color: var(--main-hover-color);
 }
 
 :host([variant='tertiary']) .active.button {
   --content-color: var(--main-color);
-  --bg-color: var(--bl-color-tertiary);
+  --bg-color: var(--bl-color-neutral-lightest);
   --border-color: transparent;
 }

src/components/checkbox-group/bl-checkbox-group.css

@@ -10,7 +10,7 @@ fieldset {
 
 legend {
   font: var(--bl-font-title-3-medium);
-  color: var(--bl-color-content-primary);
+  color: var(--bl-color-neutral-darker);
 }
 
 .options {

src/components/checkbox-group/checkbox/bl-checkbox.css

@@ -10,7 +10,7 @@
 label {
   display: flex;
   gap: var(--bl-size-2xs);
-  color: var(--bl-color-secondary);
+  color: var(--bl-color-neutral-darker);
   font: var(--bl-font-title-3);
   cursor: pointer;
   user-select: none;
@@ -36,12 +36,11 @@ input {
   min-height: var(--bl-size-m);
   max-width: var(--bl-size-m);
   max-height: var(--bl-size-m);
-  border: 1px solid var(--bl-color-border);
+  border: 1px solid var(--bl-color-neutral-lighter);
   border-radius: var(--bl-border-radius-xs);
-  color: var(--bl-color-content-primary-contrast);
+  color: var(--bl-color-neutral-full);
   font-size: var(--bl-font-size-2xs);
-  line-height: 100%;
-  background-color: var(--bl-color-primary-background);
+  background-color: var(--bl-color-neutral-full);
 }
 
 :host([checked]) .label,
@@ -61,11 +60,11 @@ input {
 
 :host([disabled]) .check-mark,
 :host([disabled]) .label {
-  color: var(--bl-color-content-passive);
+  color: var(--bl-color-neutral-light);
 }
 
 :host([disabled]) .check-mark {
-  background-color: var(--bl-color-secondary-background);
+  background-color: var(--bl-color-neutral-lightest);
 }
 
 :host(:not([disabled])) input:focus-visible + .check-mark {

src/components/checkbox-group/checkbox/bl-checkbox.stories.mdx

@@ -42,7 +42,7 @@ export const CheckboxLimitedWidthTemplate = (args) => html`<div style="max-width
   ${CheckboxTemplate(args)}
 </div>`;
 
-export const CheckboxDifferentBackgroundTemplate = (args) => html`<div style="padding: 20px; background-color: var(--bl-color-accent-primary-background);">
+export const CheckboxDifferentBackgroundTemplate = (args) => html`<div style="padding: 20px; background-color: var(--bl-color-primary-contrast);">
   ${CheckboxTemplate(args)}
 </div>`;