@dynamic-framework/ui-react 2.3.0 → 2.4.0

package/package.json

@@ -3,7 +3,7 @@
   "sideEffects": [
     "*.css"
   ],
-  "version": "2.3.0",
+  "version": "2.4.0",
   "description": "React Dynamic Framework",
   "license": "https://github.com/dynamic-framework/dynamic-ui/blob/master/LICENSE.md",
   "repository": {
@@ -60,7 +60,7 @@
     "clean": "rimraf dist-transpiled && rimraf dist",
     "compile": "tsc -p . && rollup -c rollup.config.mjs",
     "storybook": "storybook dev -p 6006",
-    "build:storybook": "storybook build --docs -o docs",
+    "build:storybook": "storybook build --docs -o docs && node scripts/generate-props.mjs",
     "eslint": "npm run eslint:src && npm run eslint:stories && npm run eslint:test",
     "eslint:src": "eslint 'src/**/*.ts' 'src/**/*.tsx' --ignore-pattern '**/*.spec.tsx'",
     "eslint:stories": "eslint stories/**/*.stories.tsx",
@@ -152,6 +152,7 @@
     "playwright": "^1.58.2",
     "postcss-cli": "~10.1.0",
     "react": "~19.2.1",
+    "react-docgen-typescript": "^2.4.0",
     "react-dom": "~19.2.1",
     "react-hot-toast": "~2.6.0",
     "react-i18next": "~16.2.4",

package/src/style/abstracts/_utilities.scss

@@ -38,18 +38,6 @@ $utilities: map-merge(
         )
       )
     ),
-    "shadow": map-merge(
-      map-get($utilities, "shadow"),
-      (
-        responsive: true,
-        values: (
-          null: var(--#{$prefix}box-shadow),
-          sm: var(--#{$prefix}box-shadow-sm),
-          lg: var(--#{$prefix}box-shadow-lg),
-          none: none
-        )
-      )
-    ),
     "text-opacity": map-merge(
       map-get($utilities, "text-opacity"),
       (

package/src/style/abstracts/variables/_colors.scss

@@ -410,10 +410,10 @@ $dark-text-emphasis: var(--#{$prefix}gray-25) !default;
 // scss-docs-start theme-bg-subtle-variables
 $primary-bg-subtle: var(--#{$prefix}primary-100) !default;
 $secondary-bg-subtle: var(--#{$prefix}secondary-100) !default;
-$success-bg-subtle: var(--#{$prefix}success-100) !default;
-$info-bg-subtle: var(--#{$prefix}info-100) !default;
-$warning-bg-subtle: var(--#{$prefix}warning-100) !default;
-$danger-bg-subtle: var(--#{$prefix}danger-100) !default;
+$success-bg-subtle: var(--#{$prefix}success-25) !default;
+$info-bg-subtle: var(--#{$prefix}info-25) !default;
+$warning-bg-subtle: var(--#{$prefix}warning-25) !default;
+$danger-bg-subtle: var(--#{$prefix}danger-25) !default;
 $light-bg-subtle: var(--#{$prefix}gray-100) !default;
 $dark-bg-subtle: var(--#{$prefix}gray-400) !default;
 // scss-docs-end theme-bg-subtle-variables

package/src/style/components/_d-box.scss

@@ -1,13 +1,13 @@
 .d-box {
-  --#{$prefix}box-bg: #{var(--#{$prefix}white)};
-  --#{$prefix}box-border: 0;
-  --#{$prefix}box-border-radius: #{var(--#{$prefix}border-radius)};
-  --#{$prefix}box-padding: #{var(--#{$prefix}ref-spacer-4)};
-  --#{$prefix}box-shadow: #{var(--#{$prefix}box-shadow-lg)};
-  padding: var(--#{$prefix}box-padding);
+  --#{$prefix}box-component-bg: #{var(--#{$prefix}white)};
+  --#{$prefix}box-component-border: 0;
+  --#{$prefix}box-component-border-radius: #{var(--#{$prefix}border-radius)};
+  --#{$prefix}box-component-padding: #{var(--#{$prefix}ref-spacer-4)};
+  --#{$prefix}box-component-shadow: #{var(--#{$prefix}box-shadow-lg)};
 
-  background-color: var(--#{$prefix}box-bg);
-  border: var(--#{$prefix}box-border);
-  border-radius: var(--#{$prefix}box-border-radius);
-  box-shadow: var(--#{$prefix}box-shadow);
+  padding: var(--#{$prefix}box-component-padding);
+  background-color: var(--#{$prefix}box-component-bg);
+  border: var(--#{$prefix}box-component-border);
+  border-radius: var(--#{$prefix}box-component-border-radius);
+  box-shadow: var(--#{$prefix}box-component-shadow);
 }

package/src/style/root/_root.scss

@@ -63,17 +63,6 @@
     --#{$prefix}#{$color}-text-emphasis: #{$value};
   }
 
-  $theme-colors-bg-subtle: (
-    "primary": $primary-bg-subtle,
-    "secondary": $secondary-bg-subtle,
-    "success": $green-25,
-    "info": $blue-25,
-    "warning": $yellow-25,
-    "danger": $red-25,
-    "light": $light-bg-subtle,
-    "dark": $dark-bg-subtle,
-  );
-
   @each $color, $value in $theme-colors-bg-subtle {
     --#{$prefix}#{$color}-bg-subtle: #{$value};
   }
@@ -355,7 +344,7 @@
   --#{$prefix}default-accordion-body-padding-x: var(--#{$prefix}default-accordion-padding-x);
   --#{$prefix}default-accordion-body-padding-y: var(--#{$prefix}default-accordion-padding-y);
   --#{$prefix}default-accordion-active-color: var(--#{$prefix}body-color);
-  --#{$prefix}default-accordion-active-bg: var(--#{$prefix}secondary-soft);
+  --#{$prefix}default-accordion-active-bg: var(--#{$prefix}secondary-50);
 }
 
 @if $enable-dark-mode {