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

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (14) hide show
  1. package/dist/css/dynamic-ui-non-root.css +22 -118
  2. package/dist/css/dynamic-ui-non-root.min.css +2 -2
  3. package/dist/css/dynamic-ui-root.css +1 -1
  4. package/dist/css/dynamic-ui-root.min.css +1 -1
  5. package/dist/css/dynamic-ui.css +22 -118
  6. package/dist/css/dynamic-ui.min.css +2 -2
  7. package/dist/index.esm.js +10 -3
  8. package/dist/index.esm.js.map +1 -1
  9. package/dist/index.js +10 -3
  10. package/dist/index.js.map +1 -1
  11. package/dist/types/components/DLayout/DLayout.d.ts +12 -2
  12. package/package.json +1 -1
  13. package/src/style/abstracts/_mixins.scss +0 -4
  14. package/src/style/base/_buttons.scss +22 -16
package/dist/types/components/DLayout/DLayout.d.ts CHANGED
@@ -1,10 +1,20 @@
1
1
  import type { PropsWithChildren } from 'react';
2
2
  import DLayoutPane from './components/DLayoutPane';
3
3
  import type { BaseProps } from '../interface';
4
+ /**
5
+ * Define the spacing (gap) on a scale from 0 to 30.
6
+ * @type {number}
7
+ */
8
+ type Gap = number;
4
9
  type Props = PropsWithChildren<BaseProps & {
5
- gap?: string | number;
10
+ gap?: Gap;
11
+ gapSm?: Gap;
12
+ gapMd?: Gap;
13
+ gapLg?: Gap;
14
+ gapXl?: Gap;
15
+ gapXxl?: Gap;
6
16
  }>;
7
- declare function DLayout({ className, style, children, gap, dataAttributes, }: Props): import("react/jsx-runtime").JSX.Element;
17
+ declare function DLayout({ className, style, children, gap, gapSm, gapMd, gapLg, gapXl, gapXxl, dataAttributes, }: Props): import("react/jsx-runtime").JSX.Element;
8
18
  declare const _default: typeof DLayout & {
9
19
  Pane: typeof DLayoutPane;
10
20
  };
package/package.json CHANGED
@@ -3,7 +3,7 @@
3
3
  "sideEffects": [
4
4
  "*.css"
5
5
  ],
6
- "version": "2.0.0-dev.2",
6
+ "version": "2.0.0-dev.3",
7
7
  "description": "React Dynamic Framework",
8
8
  "license": "https://github.com/dynamic-framework/dynamic-ui/blob/master/libraries/dynamic-ui-react/LICENSE.md",
9
9
  "repository": {
package/src/style/abstracts/_mixins.scss CHANGED
@@ -149,10 +149,6 @@
149
149
  --#{$prefix}btn-disabled-bg: var(--#{$prefix}btn-#{$variant-name}#{$color-name}-disabled-bg);
150
150
  --#{$prefix}btn-disabled-border-color: var(--#{$prefix}btn-#{$variant-name}#{$color-name}-disabled-border-color);
151
151
  --#{$prefix}btn-disabled-opacity: var(--#{$prefix}btn-#{$variant-name}#{$color-name}-disabled-opacity);
152
-
153
- &.loading {
154
- --#{$prefix}btn-disabled-color: var(--#{$prefix}btn-#{$variant-name}#{$color-name}-active-color);
155
- }
156
152
  }
157
153
  // scss-docs-end df-btn-variant-mixin
158
154
 
package/src/style/base/_buttons.scss CHANGED
@@ -53,7 +53,7 @@
53
53
  // hover selectors
54
54
  &.hover,
55
55
  &:hover {
56
- // color: var(--#{$prefix}btn-hover-color);
56
+ color: var(--#{$prefix}btn-hover-color);
57
57
  text-decoration: none;
58
58
  background-color: var(--#{$prefix}btn-hover-bg);
59
59
  border-color: var(--#{$prefix}btn-hover-border-color);
@@ -157,11 +157,11 @@
157
157
 
158
158
  .btn-outline-primary {
159
159
  --#{$prefix}btn-color: var(--#{$prefix}primary-500);
160
- --#{$prefix}btn-hover-border-color: var(--#{$prefix}primary-600);
160
+ --#{$prefix}btn-hover-border-color: var(--#{$prefix}primary-700);
161
161
  --#{$prefix}btn-border-color: var(--#{$prefix}primary-500);
162
162
  --#{$prefix}btn-active-color: var(--#{$prefix}primary-500);
163
163
  --#{$prefix}btn-active-border-color: var(--#{$prefix}primary-600);
164
- --#{$prefix}btn-hover-color: var(--#{$prefix}primary-600);
164
+ --#{$prefix}btn-hover-color: var(--#{$prefix}primary-700);
165
165
  --#{$prefix}btn-focus-color: var(--#{$prefix}primary-600);
166
166
  --#{$prefix}btn-active-color: var(--#{$prefix}primary-600);
167
167
  --#{$prefix}btn-box-shadow: #{$btn-box-shadow};
@@ -174,19 +174,19 @@
174
174
  }
175
175
 
176
176
  .btn-outline-secondary {
177
- --#{$prefix}btn-color: var(--#{$prefix}gray-700);
178
- --#{$prefix}btn-hover-border-color: var(--#{$prefix}gray-400);
179
- --#{$prefix}btn-border-color: var(--#{$prefix}gray-200);
180
- --#{$prefix}btn-active-border-color: var(--#{$prefix}gray-400);
181
- --#{$prefix}btn-active-color: var(--#{$prefix}gray-700);
182
- --#{$prefix}btn-hover-color: var(--#{$prefix}gray-700);
183
- --#{$prefix}btn-focus-color: var(--#{$prefix}gray-700);
177
+ --#{$prefix}btn-color: var(--#{$prefix}secondary-700);
178
+ --#{$prefix}btn-hover-border-color: var(--#{$prefix}secondary-400);
179
+ --#{$prefix}btn-border-color: var(--#{$prefix}secondary-200);
180
+ --#{$prefix}btn-active-border-color: var(--#{$prefix}secondary-400);
181
+ --#{$prefix}btn-active-color: var(--#{$prefix}secondary-700);
182
+ --#{$prefix}btn-hover-color: var(--#{$prefix}secondary-700);
183
+ --#{$prefix}btn-focus-color: var(--#{$prefix}secondary-700);
184
184
  --#{$prefix}btn-box-shadow: #{$btn-box-shadow};
185
185
  --#{$prefix}btn-focus-shadow-rgb: var(--#{$prefix}btn-secondary-focus-shadow-rgb);
186
186
  &:disabled,
187
187
  &.disabled {
188
- --#{$prefix}btn-disabled-border-color: var(--#{$prefix}gray-700);
189
- --#{$prefix}btn-disabled-color: var(--#{$prefix}gray-700);
188
+ --#{$prefix}btn-disabled-border-color: var(--#{$prefix}secondary-200);
189
+ --#{$prefix}btn-disabled-color: var(--#{$prefix}secondary-600);
190
190
  }
191
191
  }
192
192
 
@@ -200,11 +200,17 @@
200
200
  --#{$prefix}btn-focus-color: var(--#{$prefix}gray-50);
201
201
  --#{$prefix}btn-box-shadow: #{$btn-box-shadow};
202
202
  --#{$prefix}btn-focus-shadow-rgb: var(--#{$prefix}btn-light-focus-shadow-rgb);
203
+ &:disabled,
204
+ &.disabled {
205
+ --#{$prefix}btn-disabled-border-color: var(--#{$prefix}gray-25);
206
+ --#{$prefix}btn-disabled-color: var(--#{$prefix}gray-25);
207
+ opacity: var(--#{$prefix}btn-disabled-opacity);
208
+ }
203
209
  }
204
210
 
205
211
  .btn-outline-success {
206
212
  --#{$prefix}btn-color: var(--#{$prefix}success-500);
207
- --#{$prefix}btn-hover-border-color: var(--#{$prefix}success-600);
213
+ --#{$prefix}btn-hover-border-color: var(--#{$prefix}success-700);
208
214
  --#{$prefix}btn-border-color: var(--#{$prefix}success-500);
209
215
  --#{$prefix}btn-active-border-color: var(--#{$prefix}success-600);
210
216
  --#{$prefix}btn-active-color: var(--#{$prefix}success-700);
@@ -221,7 +227,7 @@
221
227
 
222
228
  .btn-outline-danger {
223
229
  --#{$prefix}btn-color: var(--#{$prefix}danger-500);
224
- --#{$prefix}btn-hover-border-color: var(--#{$prefix}danger-600);
230
+ --#{$prefix}btn-hover-border-color: var(--#{$prefix}danger-700);
225
231
  --#{$prefix}btn-border-color: var(--#{$prefix}danger-500);
226
232
  --#{$prefix}btn-active-border-color: var(--#{$prefix}danger-600);
227
233
  --#{$prefix}btn-active-color: var(--#{$prefix}danger-700);
@@ -238,7 +244,7 @@
238
244
 
239
245
  .btn-outline-info {
240
246
  --#{$prefix}btn-color: var(--#{$prefix}info-500);
241
- --#{$prefix}btn-hover-border-color: var(--#{$prefix}info-600);
247
+ --#{$prefix}btn-hover-border-color: var(--#{$prefix}info-700);
242
248
  --#{$prefix}btn-border-color: var(--#{$prefix}info-500);
243
249
  --#{$prefix}btn-active-border-color: var(--#{$prefix}info-600);
244
250
  --#{$prefix}btn-active-color: var(--#{$prefix}info-700);
@@ -255,7 +261,7 @@
255
261
 
256
262
  .btn-outline-warning {
257
263
  --#{$prefix}btn-color: var(--#{$prefix}warning-600);
258
- --#{$prefix}btn-hover-border-color: var(--#{$prefix}warning-600);
264
+ --#{$prefix}btn-hover-border-color: var(--#{$prefix}warning-700);
259
265
  --#{$prefix}btn-border-color: var(--#{$prefix}warning-500);
260
266
  --#{$prefix}btn-active-border-color: var(--#{$prefix}warning-600);
261
267
  --#{$prefix}btn-active-color: var(--#{$prefix}warning-700);