@dbcdk/react-components 0.0.98 → 0.0.102

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.
@@ -42,15 +42,15 @@ body {
42
42
  }
43
43
 
44
44
  h1 {
45
- font-size: var(--font-size-2xl);
45
+ font-size: var(--font-size-xl);
46
46
  }
47
47
 
48
48
  h2 {
49
- font-size: var(--font-size-xl);
49
+ font-size: var(--font-size-lg);
50
50
  }
51
51
 
52
52
  h3 {
53
- font-size: var(--font-size-lg);
53
+ font-size: var(--font-size-md);
54
54
  }
55
55
 
56
56
  h4 {
@@ -240,6 +240,10 @@ body.dbc-app {
240
240
  font-size: var(--font-size-xs);
241
241
  }
242
242
 
243
+ .dbc-md-text {
244
+ font-size: var(--font-size-md);
245
+ }
246
+
243
247
  .dbc-lg-text {
244
248
  font-size: var(--font-size-lg);
245
249
  }
@@ -126,22 +126,22 @@ html {
126
126
  /* Status */
127
127
  --color-status-success: var(--dbc-green-500);
128
128
  --color-status-success-bg: var(--dbc-green-100);
129
- --color-status-success-border: var(--dbc-green-300);
129
+ --color-status-success-border: color-mix(in srgb, var(--dbc-green-500) 24%, transparent);
130
130
  --color-status-success-fg: var(--dbc-green-700);
131
131
 
132
132
  --color-status-warning: var(--dbc-amber-700);
133
133
  --color-status-warning-bg: var(--dbc-amber-100);
134
- --color-status-warning-border: var(--dbc-amber-400);
134
+ --color-status-warning-border: color-mix(in srgb, var(--dbc-amber-700) 24%, transparent);
135
135
  --color-status-warning-fg: var(--dbc-amber-800);
136
136
 
137
137
  --color-status-error: var(--dbc-red-600);
138
138
  --color-status-error-bg: var(--dbc-red-100);
139
- --color-status-error-border: var(--dbc-red-300);
139
+ --color-status-error-border: color-mix(in srgb, var(--dbc-red-600) 24%, transparent);
140
140
  --color-status-error-fg: var(--dbc-red-800);
141
141
 
142
142
  --color-status-info: var(--dbc-info-500);
143
143
  --color-status-info-bg: var(--dbc-info-100);
144
- --color-status-info-border: var(--dbc-info-300);
144
+ --color-status-info-border: color-mix(in srgb, var(--dbc-info-500) 24%, transparent);
145
145
  --color-status-info-fg: var(--dbc-info-700);
146
146
 
147
147
  /* Chart colors */
@@ -223,11 +223,16 @@ html {
223
223
  --opac-bg-dark-invert: light-dark(rgba(255, 255, 255, 0.1), rgba(0, 0, 0, 0.15));
224
224
 
225
225
  /* Shadows */
226
- --shadow-xs: 0 1px 2px light-dark(rgba(0, 0, 0, 0.04), rgba(0, 0, 0, 0.18));
227
- --shadow-sm: 0 1px 3px light-dark(rgba(0, 0, 0, 0.06), rgba(0, 0, 0, 0.24));
228
- --shadow-md: 0 2px 6px light-dark(rgba(0, 0, 0, 0.08), rgba(0, 0, 0, 0.32));
229
- --shadow-lg: 0 4px 12px light-dark(rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.4));
230
- --shadow-xl: 0 8px 24px light-dark(rgba(0, 0, 0, 0.12), rgba(0, 0, 0, 0.48));
226
+
227
+ --shadow-xs: 0 1px 1px light-dark(rgba(0, 0, 0, 0.04), transparent);
228
+
229
+ --shadow-sm: 0 1px 2px light-dark(rgba(0, 0, 0, 0.06), transparent);
230
+
231
+ --shadow-md: 0 2px 6px light-dark(rgba(0, 0, 0, 0.08), transparent);
232
+
233
+ --shadow-lg: 0 4px 12px light-dark(rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.35));
234
+
235
+ --shadow-xl: 0 8px 24px light-dark(rgba(0, 0, 0, 0.12), rgba(0, 0, 0, 0.45));
231
236
 
232
237
  /* Skeletons */
233
238
  --skeleton-base: light-dark(#e5e7eb, #374151);
package/dist/styles.css CHANGED
@@ -42,15 +42,15 @@ body {
42
42
  }
43
43
 
44
44
  h1 {
45
- font-size: var(--font-size-2xl);
45
+ font-size: var(--font-size-xl);
46
46
  }
47
47
 
48
48
  h2 {
49
- font-size: var(--font-size-xl);
49
+ font-size: var(--font-size-lg);
50
50
  }
51
51
 
52
52
  h3 {
53
- font-size: var(--font-size-lg);
53
+ font-size: var(--font-size-md);
54
54
  }
55
55
 
56
56
  h4 {
@@ -240,6 +240,10 @@ body.dbc-app {
240
240
  font-size: var(--font-size-xs);
241
241
  }
242
242
 
243
+ .dbc-md-text {
244
+ font-size: var(--font-size-md);
245
+ }
246
+
243
247
  .dbc-lg-text {
244
248
  font-size: var(--font-size-lg);
245
249
  }