refactor: color to use jb-design-system color

Author: javadbat

CHANGELOG.md

@@ -1,5 +1,9 @@
 # changelog
 
+## [5.7.0] - 2025-04-16
+### Breaking changes:
+- use jb-design-system color palette colors instead of internal color codes
+
 ## [5.6.0] - 2025-03-26
 ### new features:
 - add `error` prop/attribute to show custom error message.

README.md

@@ -308,6 +308,8 @@ more than above here is the css variable that we use in jb-date-input itself:
 | --jb-date-input-calendar-trigger-display      | set it no none to hide calendar icon                                      |
 | --jb-date-input-calendar-trigger-width        | set calendar icon width                                                   |
 | --jb-date-input-calendar-trigger-height       | set calendar icon height                                                  |
+| --jb-date-input-calendar-icon-color           | calendar icon color                                                       |
+| --jb-date-input-calendar-icon-color-active    | calendar icon color when calendar is open                                 |
 
 ## add custom element in input box
 

lib/jb-date-input.scss

@@ -1,3 +1,5 @@
+@use './variables.css';
+
 :host(:focus),
 :host(:focus-visible) {
     outline: none;
@@ -20,7 +22,7 @@
         &.--active {
             svg {
                 .cls-1 {
-                    fill: #1f1735;
+                    fill: var(--calendar-icon-color-active);
                 }
             }
         }
@@ -30,7 +32,7 @@
             height: 100%;
 
             .cls-1 {
-                fill: #bbb;
+                fill: var(--calendar-icon-color);
 
             }
         }

lib/jb-date-input.ts

@@ -15,6 +15,7 @@ import { requiredValidation } from './validations';
 // eslint-disable-next-line no-duplicate-imports
 import { JBInputWebComponent } from 'jb-input';
 import { createInputEvent, createKeyboardEvent, createFocusEvent, listenAndSilentEvent, isMobile, enToFaDigits, faToEnDigits } from 'jb-core';
+import {defineColors} from 'jb-core/theme';
 export * from "./types.js";
 
 if (HTMLElement == undefined) {
@@ -368,6 +369,7 @@ export class JBDateInputWebComponent extends HTMLElement implements WithValidati
       mode: 'open',
       delegatesFocus: true
     });
+    defineColors();
     const html = `<style>${CSS}</style>` + '\n' + HTML;
     const element = document.createElement('template');
     element.innerHTML = html;

lib/variables.css

@@ -0,0 +1,4 @@
+:host{
+  --calendar-icon-color: var(--jb-date-input-calendar-icon-color, var(--jb-neutral-6));
+  --calendar-icon-color-active: var(--jb-date-input-calendar-icon-color-active, var(--jb-neutral));
+}

package.json

@@ -30,7 +30,7 @@
     "jalali web-component",
     "jalali web component"
   ],
-  "version": "5.6.0",
+  "version": "5.7.0",
   "bugs": "https://github.com/javadbat/jb-date-input/issues",
   "license": "MIT",
   "files": [
@@ -52,11 +52,11 @@
   "dependencies": {
     "date-fns": "^4.1.0",
     "date-fns-jalali": "^4.1.0-0",
-    "jb-calendar": ">=4.2.4",
+    "jb-calendar": ">=4.3.0",
     "jb-popover":">=1.1.1",
     "jb-validation":">=0.4.0",
-    "jb-input":">=3.8.0",
-    "jb-core":"0.4.0"
+    "jb-input":">=3.10.0",
+    "jb-core":"0.9.0"
   },
   "devDependencies": {
     "jb-form":">=0.6.10"