jb-core 0.9.0 → 0.10.0

package/package.json

@@ -14,7 +14,7 @@
     "react component",
     "event"
   ],
-  "version": "0.9.0",
+  "version": "0.10.0",
   "bugs": "https://github.com/javadbat/jb-core/issues",
   "license": "MIT",
   "files": [

package/theme/colors.ts

@@ -9,14 +9,37 @@ export const colors = {
   primary:{
     main:'oklch(0.6 0.26 256)',
     hover:getHoverColor(0.6,0.26,256),
-    pressed:getPressedColor(0.6,0.26,256)
+    pressed:getPressedColor(0.6,0.26,256),
+    lighter:getLighterColor(0.6,0.26,256),
   },
   secondary:{
     main:'oklch(0.6 0.26 286)',
     hover:getHoverColor(0.6,0.26,286),
     pressed:getPressedColor(0.6,0.26,286),
-  }
+    lighter:getLighterColor(0.6,0.26,286),
+  },
+  neutral: [getNeutralColor(0),getNeutralColor(1),getNeutralColor(2),getNeutralColor(3),getNeutralColor(4),getNeutralColor(5),getNeutralColor(6),getNeutralColor(7),getNeutralColor(8),getNeutralColor(9),getNeutralColor(10)],
+  yellow:{
+    main:'oklch(0.75 0.18 70)',
+    hover:getHoverColor(0.75, 0.18, 70),
+    pressed:getPressedColor(0.75, 0.18, 70),
+    lighter:getLighterColor(0.75, 0.18, 70),
+  },
+  green:{
+    main:"oklch(0.68 0.1484 162.1)",
+    hover:getHoverColor(0.68,0.1484,162.1),
+    pressed:getPressedColor(0.68,0.1484,162.1),
+    lighter:getLighterColor(0.68,0.1484,162.1),
+  },
+  red:{
+    main:"oklch(0.6 0.22 23.21)",
+    hover:getHoverColor(0.6,0.22,23.21),
+    pressed:getPressedColor(0.6,0.22,23.21),
+    lighter:getLighterColor(0.6,0.22,23.21),
+  },
 } as const;
+export type JBThemeColors = typeof colors;
+
 export function defineColors() {
   defineColorCodes();
   defineTextColors();
@@ -58,17 +81,23 @@ function defineColorCodes(){
     inherits: true,
     initialValue: colors.single.highlight ,
   });
+  setCssProperty({
+    name: "--jb-yellow",
+    syntax: "<color>",
+    inherits: true,
+    initialValue: colors.yellow.main,
+  });
   setCssProperty({
     name: "--jb-green",
     syntax: "<color>",
     inherits: true,
-    initialValue: "oklch(0.68 0.1484 162.1)",
+    initialValue: colors.green.main,
   });
   setCssProperty({
     name: "--jb-red",
     syntax: "<color>",
     inherits: true,
-    initialValue: "oklch(0.6 0.22 23.21)",
+    initialValue: colors.red.main,
   });
   setCssProperty({
     name: `--jb-neutral`,
@@ -81,7 +110,7 @@ function defineColorCodes(){
       name: `--jb-neutral-${i}`,
       syntax: "<color>",
       inherits: true,
-      initialValue: getNeutralColor(i),
+      initialValue: colors.neutral[i],
     });
   }
 }
@@ -115,4 +144,15 @@ export function getHoverColor(lightness:number, chroma:number, hue:number){
 }
 export function getPressedColor(lightness:number, chroma:number, hue:number){
   return `oklch(${lightness - 0.1} ${chroma - 0.05} ${hue})`;
+}
+
+export function getLighterColor(lightness: number,chroma: number,hue: number) {
+  // Perceptual lightness increase (curved adjustment)
+  const newL = Math.min(lightness + 0.12 * (1 - lightness), 0.985);
+  
+  // Chroma preservation with gamut safety
+  const newC = chroma * (1 - 0.15 * (newL - lightness));
+  
+  // Hue preservation (no shift)
+  return `oklch(${newL.toFixed(3)} ${newC.toFixed(3)} ${hue})`;
 }

package/theme/stories/colors.mdx

@@ -0,0 +1,42 @@
+import {Meta,ColorPalette,ColorItem, Heading, Subheading, } from '@storybook/blocks'
+import {getNeutralColor, colors} from 'jb-core/theme/colors.ts';
+
+<Meta title="Theme/Colors" />
+<Heading>Color Palette</Heading>
+<Subheading >all color are based on oklch() color space</Subheading>
+<br/>
+<ColorPalette>
+  <ColorItem title="single" description="" colors={{'black': colors.single.black,'white':colors.single.white}}/>
+  <ColorItem title="neutral" description="" colors={{'main':getNeutralColor(0),'d1':getNeutralColor(1),'d2':getNeutralColor(2),'d3':getNeutralColor(3),'d4':getNeutralColor(4),'d5':getNeutralColor(5),'d6':getNeutralColor(6),'d7':getNeutralColor(7),'d8':getNeutralColor(8),'d9':getNeutralColor(9),'d10':getNeutralColor(10)}}/>
+  <ColorItem title="primary" description="" colors={{'main':colors.primary.main,'lighter':colors.primary.lighter ,'hover':colors.primary.hover,'pressed':colors.primary.pressed}}/>
+  <ColorItem title="secondary" description="" colors={{'main':colors.secondary.main, 'lighter':colors.secondary.lighter,'hover':colors.secondary.hover,'pressed':colors.secondary.pressed}}/>
+  <ColorItem title="success" description="" colors={{'main':colors.green.main,'lighter':colors.green.lighter,'hover':colors.green.hover,'pressed':colors.green.pressed, 'subtle backgrounds':'oklch(0.87 0.116 171.77)', 'darker(text/icon)':'oklch(0.58 0.1227 163.94)', 'deep accents':'oklch(0.46 0.096255 165.0871)'}}/>
+  <ColorItem title="error" description="" colors={{'main':colors.red.main,"lighter":colors.red.lighter,'hover':colors.red.hover, 'pressed':colors.red.pressed, 'soft warnings':'#FF5C75', 'hover/backgrounds':'#FFA3B3','critical errors':'#D90026','dark mode':'#A3001D'}}/>
+  <ColorItem title="warning" description="" colors={{'main':colors.yellow.main, 'lighter':colors.yellow.lighter,'hover':colors.yellow.hover, 'pressed':colors.yellow.pressed}}/>
+</ColorPalette>
+
+<Subheading>Color Rules</Subheading>
+
+we use `oklch()` color space for all colors in our design system. This allows us to create a consistent and harmonious color palette that is easy to use and understand.
+<p>
+for example primary color is `oklch(0.6 0.26 256)` which is a blue color with a lightness of 60%, chroma of 0.26, and hue of 256 degrees.
+for hover state we add `0.07` to lightness and `0.07` to chroma so it gets a little lighter and brighter.
+for pressed state we subtract `0.1` to lightness and `0.05` to chroma so it gets a little darker and dimmer.
+</p>
+<br/>
+<Subheading>Define custom colors</Subheading>
+<br/>
+<p>
+you can define your own colors by using `jb-core/theme` functions.
+</p>
+<p>
+  there are several function that will give you the color you want:
+  - `getNeutralColor(lightness:number)` will give you a neutral color based on the lightness value you provide. it will return a color that is in the range of 0 to 10.
+  - `getHoverColor(l:number,c:number,h:number)` will give you a hover color based on the color you provide. it will return a color that is a little lighter and brighter than the original color.
+  - `getPressedColor(l:number,c:number,h:number)` will give you a pressed color based on the color you provide. it will return a color that is a little darker and dimmer than the original color.
+  - `getLighterColor(l:number,c:number,h:number)` will give you a lighter color based on the color you provide. it will return a color that is a little lighter than the original color.
+</p>
+<br/>
+<p>
+  after you define your colors you can define them in your components by using the `jb-core/theme` `defineColors` function by providing `JBThemeColors` object.
+</p>