@dynamic-framework/ui-react 2.0.0-dev.2 → 2.0.0-dev.21

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

@@ -0,0 +1,29 @@
+.d-voucher {
+  --#{$prefix}voucher-header-gap: var(--#{$prefix}ref-spacer-4);
+  --#{$prefix}voucher-amount-padding: var(--#{$prefix}ref-spacer-4);
+  --#{$prefix}voucher-amount-background: var(--#{$prefix}secondary-50);
+  --#{$prefix}voucher-amount-rounded: var(--#{$prefix}ref-spacer-4);
+  --#{$prefix}voucher-footer-gap: var(--#{$prefix}ref-spacer-4);
+  --#{$prefix}voucher-margin: 0 0 var(--#{$prefix}ref-spacer-4) 0;
+}
+
+.d-voucher-header {
+  display: flex;
+  flex-direction: column;
+  gap: var(--#{$prefix}voucher-header-gap);
+  align-items: center;
+  justify-content: center;
+  margin: var(--#{$prefix}voucher-margin);
+}
+
+.d-voucher-amount {
+  padding: var(--#{$prefix}voucher-amount-padding);
+  background: var(--#{$prefix}voucher-amount-background);
+  border-radius: var(--#{$prefix}voucher-amount-rounded);
+}
+
+.d-voucher-footer {
+  display: flex;
+  gap: var(--#{$prefix}voucher-footer-gap);
+  justify-content: flex-start;
+}

package/src/style/dynamic-ui-non-root.scss

@@ -10,4 +10,6 @@
 
 @import "node_modules/bootstrap/scss/utilities/api";
 
+@import "abstracts/utilities-hover";
+
 @import "shame";

package/src/style/dynamic-ui.scss

@@ -12,4 +12,6 @@
 
 @import "node_modules/bootstrap/scss/utilities/api";
 
+@import "abstracts/utilities-hover";
+
 @import "shame";

package/src/style/root/_root.scss

@@ -221,94 +221,100 @@
   --#{$prefix}btn-sm-border-radius: #{$btn-border-radius-sm};
 
   @each $color, $value in $theme-colors {
-    @if $color == "light" {
-      @include df-button-variant-variables(
-        "light",
-        $default-color: var(--#{$prefix}gray-25),
-        $default-text-color: color-contrast-var(map-get($all-colors, gray-100)),
-        $hover-color: var(--#{$prefix}gray-50),
-        $hover-text-color: color-contrast-var(map-get($all-colors, gray-200)),
-        $focus-color: var(--#{$prefix}gray-200),
-        $focus-text-color: color-contrast-var(map-get($all-colors, gray-200)),
-        $active-color: var(--#{$prefix}gray-300),
-        $active-text-color: color-contrast-var(map-get($all-colors, gray-300)),
-        $focus-shadow-rgb: var(--#{$prefix}gray-100-rgb),
-      );
-      @include df-button-outline-variant-variables(
-        "light",
-        $default-color: var(--#{$prefix}gray-100),
-        $hover-bg-color: var(--#{$prefix}gray-200),
-        $hover-text-color: color-contrast-var(map-get($all-colors, gray-200)),
-        $focus-bg-color: var(--#{$prefix}gray-200),
-        $focus-text-color: color-contrast-var(map-get($all-colors, gray-200)),
-        $active-bg-color: var(--#{$prefix}gray-300),
-        $active-text-color: color-contrast-var(map-get($all-colors, gray-300)),
-        $focus-shadow-rgb: var(--#{$prefix}gray-100-rgb),
-      );
-      @include df-button-link-variant-variables(
-        "light",
-        $default-color: var(--#{$prefix}gray-100),
-        $hover-text-color: var(--#{$prefix}gray-200),
-        $focus-text-color: var(--#{$prefix}gray-200),
-        $active-text-color: color-contrast-var(map-get($all-colors, gray-300)),
-        $active-bg-color: var(--#{$prefix}gray-300),
-        $focus-shadow-rgb: var(--#{$prefix}gray-100-rgb),
-      );
-    } @else if $color == "dark" {
-      @include df-button-variant-variables(
-        "dark",
-        $default-color: var(--#{$prefix}gray-900),
-        $default-text-color: color-contrast-var(map-get($all-colors, gray-900)),
-        $hover-color: var(--#{$prefix}gray-800),
-        $hover-text-color: color-contrast-var(map-get($all-colors, gray-800)),
-        $focus-color: var(--#{$prefix}gray-800),
-        $focus-text-color: color-contrast-var(map-get($all-colors, gray-800)),
-        $active-color: var(--#{$prefix}gray-700),
-        $active-text-color: color-contrast-var(map-get($all-colors, gray-700)),
-        $focus-shadow-rgb: var(--#{$prefix}gray-900-rgb),
-      );
-      @include df-button-outline-variant-variables(
-        "dark",
-        $default-color: var(--#{$prefix}gray-900),
-        $hover-bg-color: var(--#{$prefix}gray-800),
-        $hover-text-color: color-contrast-var(map-get($all-colors, gray-800)),
-        $focus-bg-color: var(--#{$prefix}gray-800),
-        $focus-text-color: color-contrast-var(map-get($all-colors, gray-800)),
-        $active-bg-color: var(--#{$prefix}gray-700),
-        $active-text-color: color-contrast-var(map-get($all-colors, gray-700)),
-        $focus-shadow-rgb: var(--#{$prefix}gray-900-rgb),
-      );
-      @include df-button-link-variant-variables(
-        "dark",
-        $default-color: var(--#{$prefix}gray-900),
-        $hover-text-color: var(--#{$prefix}gray-800),
-        $focus-text-color: var(--#{$prefix}gray-800),
-        $active-text-color: color-contrast-var(map-get($all-colors, gray-700)),
-        $active-bg-color: var(--#{$prefix}gray-700),
-        $focus-shadow-rgb: var(--#{$prefix}gray-900-rgb),
-      );
-
-    } @else if $color == "secondary" {
-      @include df-button-variant-variables(
-        "secondary",
-        $default-color: var(--#{$prefix}secondary-50),
-        $default-text-color: var(--#{$prefix}secondary-700),
-        $hover-color: var(--#{$prefix}secondary-100),
-        $hover-text-color: var(--#{$prefix}secondary-700),
-        $focus-color: var(--#{$prefix}secondary-100),
-        $focus-text-color: var(--#{$prefix}secondary-700),
-        $active-color: var(--#{$prefix}secondary-100),
-        $active-text-color: var(--#{$prefix}secondary-700),
-        $focus-shadow-rgb: var(--#{$prefix}secondary-100-rgb),
-      );
-      @include df-button-link-variant-variables(
-        "secondary",
-        $active-bg-color: var(--#{$prefix}secondary-100),
-      );
-    } @else {
-      @include df-button-variant-variables($color);
-      @include df-button-outline-variant-variables($color);
-      @include df-button-link-variant-variables($color);
+    @if not map-has-key($theme-colors-extra, $color) {
+      @if $color == "light" {
+        @include df-button-variant-variables(
+          "light",
+          $default-color: var(--#{$prefix}gray-25),
+          $default-text-color: color-contrast-var(map-get($all-colors, gray-100)),
+          $hover-color: var(--#{$prefix}gray-50),
+          $hover-text-color: color-contrast-var(map-get($all-colors, gray-200)),
+          $focus-color: var(--#{$prefix}gray-200),
+          $focus-text-color: color-contrast-var(map-get($all-colors, gray-200)),
+          $active-color: var(--#{$prefix}gray-300),
+          $active-text-color: color-contrast-var(map-get($all-colors, gray-300)),
+          $focus-shadow-rgb: var(--#{$prefix}gray-100-rgb),
+        );
+        @include df-button-outline-variant-variables(
+          "light",
+          $default-color: var(--#{$prefix}gray-100),
+          $hover-color: var(--#{$prefix}gray-200),
+          $focus-color: var(--#{$prefix}gray-200),
+          $active-color: var(--#{$prefix}gray-300),
+          $focus-shadow-rgb: var(--#{$prefix}gray-100-rgb),
+        );
+        @include df-button-link-variant-variables(
+          "light",
+          $default-color: var(--#{$prefix}gray-100),
+          $hover-text-color: var(--#{$prefix}gray-200),
+          $focus-text-color: var(--#{$prefix}gray-200),
+          $active-text-color: color-contrast-var(map-get($all-colors, gray-300)),
+          $active-bg-color: var(--#{$prefix}gray-300),
+          $focus-shadow-rgb: var(--#{$prefix}gray-100-rgb),
+        );
+      } @else if $color == "dark" {
+        @include df-button-variant-variables(
+          "dark",
+          $default-color: var(--#{$prefix}gray-900),
+          $default-text-color: color-contrast-var(map-get($all-colors, gray-900)),
+          $hover-color: var(--#{$prefix}gray-800),
+          $hover-text-color: color-contrast-var(map-get($all-colors, gray-800)),
+          $focus-color: var(--#{$prefix}gray-800),
+          $focus-text-color: color-contrast-var(map-get($all-colors, gray-800)),
+          $active-color: var(--#{$prefix}gray-700),
+          $active-text-color: color-contrast-var(map-get($all-colors, gray-700)),
+          $focus-shadow-rgb: var(--#{$prefix}gray-900-rgb),
+        );
+        @include df-button-outline-variant-variables(
+          "dark",
+          $default-color: var(--#{$prefix}gray-900),
+          $hover-color: var(--#{$prefix}gray-800),
+          $focus-color: var(--#{$prefix}gray-800),
+          $active-color: var(--#{$prefix}gray-700),
+          $focus-shadow-rgb: var(--#{$prefix}gray-900-rgb),
+        );
+        @include df-button-link-variant-variables(
+          "dark",
+          $default-color: var(--#{$prefix}gray-900),
+          $hover-text-color: var(--#{$prefix}gray-800),
+          $focus-text-color: var(--#{$prefix}gray-800),
+          $active-text-color: color-contrast-var(map-get($all-colors, gray-700)),
+          $active-bg-color: var(--#{$prefix}gray-700),
+          $focus-shadow-rgb: var(--#{$prefix}gray-900-rgb),
+        );
+
+      } @else if $color == "secondary" {
+        @include df-button-variant-variables(
+          "secondary",
+          $default-color: var(--#{$prefix}secondary-50),
+          $default-text-color: var(--#{$prefix}secondary-700),
+          $hover-color: var(--#{$prefix}secondary-100),
+          $hover-text-color: var(--#{$prefix}secondary-700),
+          $focus-color: var(--#{$prefix}secondary-100),
+          $focus-text-color: var(--#{$prefix}secondary-700),
+          $active-color: var(--#{$prefix}secondary-100),
+          $active-text-color: var(--#{$prefix}secondary-700),
+          $focus-shadow-rgb: var(--#{$prefix}secondary-100-rgb),
+        );
+        @include df-button-outline-variant-variables(
+          "secondary",
+          $default-color: var(--#{$prefix}secondary-500),
+          $default-border-color: var(--#{$prefix}secondary-200),
+          $hover-color: var(--#{$prefix}secondary-700),
+          $hover-border-color: var(--#{$prefix}secondary-400),
+          $focus-color: var(--#{$prefix}secondary-700),
+          $active-color: var(--#{$prefix}secondary-700),
+          $active-border-color: var(--#{$prefix}secondary-600),
+        );
+        @include df-button-link-variant-variables(
+          "secondary",
+          $active-bg-color: var(--#{$prefix}secondary-100),
+        );
+      } @else {
+        @include df-button-variant-variables($color);
+        @include df-button-outline-variant-variables($color);
+        @include df-button-link-variant-variables($color);
+      }
     }
   }
 

package/dist/types/components/DBarChart/DBarChart.d.ts

@@ -1,9 +0,0 @@
-type DBarChartProps = {
-    data: {
-        name: string;
-        value: number;
-    }[];
-    barColor?: string;
-};
-export default function DBarChart({ data, barColor, }: DBarChartProps): import("react/jsx-runtime").JSX.Element;
-export {};

package/dist/types/components/DMinimalLineChart/DMinimalLineChart.d.ts

@@ -1,9 +0,0 @@
-type DMinimalLineChartProps = {
-    data: {
-        time: string;
-        value: number;
-    }[];
-    lineColor?: string;
-};
-export default function DMinimalLineChart({ data, lineColor, }: DMinimalLineChartProps): import("react/jsx-runtime").JSX.Element;
-export {};

package/dist/types/components/DMultiLineChart/DMultiLineChart.d.ts

@@ -1,9 +0,0 @@
-type DMultiLineChartProps = {
-    data: unknown[];
-    lineConfigs: {
-        dataKey: string;
-        color: string;
-    }[];
-};
-export default function DMultiLineChart({ data, lineConfigs, }: DMultiLineChartProps): import("react/jsx-runtime").JSX.Element;
-export {};

package/dist/types/components/DPieChart/DPieChart.d.ts

@@ -1,9 +0,0 @@
-type DPieChartProps = {
-    data: {
-        name: string;
-        value: number;
-        color: string;
-    }[];
-};
-export default function DPieChart({ data, }: DPieChartProps): import("react/jsx-runtime").JSX.Element;
-export {};

package/dist/types/components/DRadialBarChart/DRadialBarChart.d.ts

@@ -1,6 +0,0 @@
-type DRadialBarChartProps = {
-    value: number;
-    color?: string;
-};
-export default function DRadialBarChart({ value, color, }: DRadialBarChartProps): import("react/jsx-runtime").JSX.Element;
-export {};

package/dist/types/components/DTableHead/DTableHead.d.ts

@@ -1,9 +0,0 @@
-import { BaseProps } from '../interface';
-type Props = BaseProps & {
-    field: string;
-    label: string;
-    value?: string;
-    onChange: (value: string) => void;
-};
-export default function DTableHead({ className, style, field, label, value, onChange, }: Props): import("react/jsx-runtime").JSX.Element;
-export {};

package/dist/types/components/DTableHead/index.d.ts

@@ -1,2 +0,0 @@
-import DTableHead from './DTableHead';
-export default DTableHead;