@addev-be/ui 0.21.0 → 0.21.3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@addev-be/ui",
-  "version": "0.21.0",
+  "version": "0.21.3",
   "type": "module",
   "scripts": {
     "watch": "tsc -b --watch",
@@ -20,7 +20,7 @@
     "update-version": "../../node/update-version.mjs"
   },
   "devDependencies": {
-    "@addev-be/framework-utils": "^0.21.0",
+    "@addev-be/framework-utils": "^0.21.3",
     "@types/lodash": "^4",
     "@types/react": "^18.3.3",
     "@types/react-dom": "^18.3.0",

package/src/components/data/DataGrid/DataGridEditableCell/styles.ts

@@ -24,9 +24,9 @@ export const EditableCellContainer = styled.div<{
     border: 1px solid var(--color-base-300);
     padding: var(--space-1) var(--space-2);
 
-    color: var(--color-base-900);
+    color: var(--color-text-800);
     &::placeholder {
-      color: var(--color-base-400);
+      color: var(--color-text-400);
     }
 
     border: none;

package/src/components/data/DataGrid/styles.ts

@@ -97,7 +97,7 @@ export const DataGridHeaderCellContainer = styled.div<DataGridHeaderCellContaine
         `
       : css`
           background-color: var(--color-base-200);
-          color: var(--color-base-950);
+          color: var(--color-text-950);
           &:hover {
             background-color: var(--color-base-300);
           }
@@ -152,7 +152,7 @@ DataGridCell.displayName = 'DataGridCell';
 export const DataGridHeaderTitle = styled.div`
   white-space: normal;
   font-weight: var(--font-bold);
-  color: var(--color-base-900);
+  color: var(--color-text-800);
   height: auto;
 `;
 
@@ -262,6 +262,9 @@ export const DataGridContainer = styled.div<{
     grid-column-end: -1;
     grid-row: 2;
   }
+
+  scrollbar-color: var(--color-base-500) var(--color-base-100);
+  scrollbar-width: auto;
 `;
 DataGridContainer.displayName = 'DataGridContainer';
 
@@ -287,7 +290,7 @@ const dataGridHeaderOrFooterRowCss = css<DataGridHeaderOrFooterRowProps>`
         `
       : css`
           background-color: var(--color-base-200);
-          color: var(--color-base-900);
+          color: var(--color-text-800);
         `}
 
   ${DataGridHeaderCellContainer}:first-child {

package/src/components/forms/Form/styles.ts

@@ -43,7 +43,7 @@ export const FormGroupHeader = styled.div`
     margin: 0;
     font-size: var(--text-sm);
     font-weight: var(--font-normal);
-    color: var(--color-base-500);
+    color: var(--color-text-500);
   }
 
   & > svg {
@@ -57,7 +57,7 @@ export const inputCss = css`
   font-size: var(--text-lg);
 
   border: none;
-  color: var(--color-base-900);
+  color: var(--color-text-800);
   background: var(--color-base-0);
 
   box-sizing: border-box;
@@ -73,7 +73,7 @@ export const inputCss = css`
 `;
 
 export const FormRowLabel = styled.span`
-  color: var(--color-base-500);
+  color: var(--color-text-500);
   font-size: var(--text-base);
   padding: var(--space-1) 0;
   display: flex;
@@ -149,7 +149,7 @@ export const FormRowContainer = styled.label<{
     & > div > input,
     & > div > textarea {
       background: none;
-      color: var(--color-base-900);
+      color: var(--color-text-800);
     }
   }
 `;

package/src/components/forms/styles.ts

@@ -5,7 +5,7 @@ import { NumericFormat } from 'react-number-format';
 export const inputStyle = css`
   font-family: var(--font-sans);
   font-size: inherit;
-  color: var(--color-base-900);
+  color: var(--color-text-800);
   background-color: var(--color-base-50);
   border: 1px solid var(--color-base-300);
   border-radius: var(--rounded-md);

package/src/components/search/styles.ts

@@ -42,7 +42,7 @@ export const QuickSearchResultsTitle = styled.div.attrs({
   font-size: var(--text-sm);
   text-transform: uppercase;
   letter-spacing: 0.1em;
-  color: var(--color-base-500);
+  color: var(--color-text-500);
 `;
 
 export const QuickSearchResultsItem = styled.div.attrs({
@@ -92,5 +92,5 @@ export const QuickSearchResultsDetailsTerm = styled.dt.attrs({
   text-transform: uppercase;
   font-size: var(--text-sm);
   font-weight: bold;
-  color: var(--color-base-500);
+  color: var(--color-text-500);
 `;

package/src/components/ui/ContextMenu/styles.ts

@@ -4,7 +4,7 @@ import { ThemeColor } from '../../../providers/ThemeProvider/types';
 
 const menuContainerCss = css`
   position: absolute;
-  color: var(--color-base-900);
+  color: var(--color-text-800);
   border-radius: var(--rounded-md);
   padding: var(--space-1) 0;
   box-shadow: var(--shadow-lg);
@@ -63,14 +63,14 @@ export const MenuItemContainer = styled.div.attrs({
         top: 50%;
         transform: translateY(-50%);
         border: 4px solid transparent;
-        border-left-color: var(--color-base-600);
+        border-left-color: var(--color-text-600);
       }
     `}
 
   ${({ $color, disabled }) =>
     disabled
       ? css`
-          color: var(--color-base-300);
+          color: var(--color-text-300);
           background-color: var(--color-base-100);
           cursor: default;
         `
@@ -83,7 +83,7 @@ export const MenuItemContainer = styled.div.attrs({
           }
         `
       : css`
-          color: var(--color-base-900);
+          color: var(--color-text-800);
           background-color: var(--color-base-100);
           &:hover {
             background-color: var(--color-base-200);

package/src/components/ui/Label.tsx

@@ -23,7 +23,7 @@ export const StyledLabel = styled.span.withConfig({
         `
       : css`
           background-color: var(--color-base-100);
-          color: var(--color-base-700);
+          color: var(--color-text-700);
           svg {
             fill: var(--color-base-700);
           }

package/src/components/ui/TabsView/styles.ts

@@ -32,7 +32,7 @@ export const TabContainer = styled.div<{
   gap: var(--space-2);
   cursor: pointer;
   padding: 0 var(--space-2);
-  color: var(--color-base-800);
+  color: var(--color-text-800);
 
   svg {
     height: var(--space-4);

package/src/providers/ThemeProvider/defaultTheme.ts

@@ -1,3 +1,5 @@
+import { mapKeys, mapValues } from 'lodash';
+
 import { Theme } from './types';
 
 export const defaultTheme: Theme = {
@@ -348,7 +350,8 @@ export const defaultTheme: Theme = {
       1000: '#000000',
     },
 
-    base: 'slate',
+    base: 'neutral',
+    text: 'neutral',
     primary: 'sky',
     secondary: 'gray',
     success: 'emerald',
@@ -456,3 +459,12 @@ export const defaultTheme: Theme = {
     '2xl': '0 25px 50px -12px rgba(0, 0, 0, 0.25)',
   },
 };
+
+export const defaultDarkTheme: Theme = {
+  ...defaultTheme,
+  colors: mapValues(defaultTheme.colors, (color) =>
+    typeof color === 'string'
+      ? color
+      : mapKeys(color, (_, key) => `${1000 - Number(key)}`)
+  ),
+};

package/src/providers/ThemeProvider/helpers.ts

@@ -4,9 +4,9 @@ import {
   ThemeColorIntensity,
   ThemeColorWithIntensity,
 } from './types';
+import { defaultDarkTheme, defaultTheme } from './defaultTheme';
 
 import { DeepPartial } from '../../typings';
-import { defaultTheme } from './defaultTheme';
 import { defaultsDeep } from 'lodash';
 
 export const extendTheme = (
@@ -16,6 +16,8 @@ export const extendTheme = (
 
 export const extendDefaultTheme = (override?: DeepPartial<Theme>): Theme =>
   extendTheme(defaultTheme, override);
+export const extendDefaultDarkTheme = (override?: DeepPartial<Theme>): Theme =>
+  extendTheme(defaultDarkTheme, override);
 
 export const getColor = (
   colorWithIntensity: ThemeColorWithIntensity

package/src/providers/ThemeProvider/index.ts

@@ -2,3 +2,4 @@ export { ThemeProvider } from './ThemeProvider';
 
 export * from './types';
 export { defaultTheme } from './defaultTheme';
+export * from './helpers';

package/src/providers/ThemeProvider/types.ts

@@ -40,6 +40,7 @@ export type ThemeRawColor =
   | 'rose';
 export type ThemePredefinedColor =
   | 'base'
+  | 'text'
   | 'primary'
   | 'secondary'
   | 'success'

package/src/providers/UiProviders/styles.ts

@@ -4,7 +4,7 @@ export const Root = styled.div.attrs({ className: 'Root' })`
   position: relative;
   font-family: var(--font-sans);
   font-size: var(--text-base);
-  color: var(--color-base-900);
+  color: var(--color-text-800);
   width: 100%;
   height: 100%;
 `;