@dbcdk/react-components 0.0.174 → 0.0.175

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 (9) hide show
  1. package/dist/components/filter-field/FilterField.module.css +2 -2
  2. package/dist/components/forms/file-upload/FileUpload.module.css +3 -3
  3. package/dist/components/forms/form-select/FormSelect.module.css +1 -1
  4. package/dist/components/forms/input/Input.module.css +8 -8
  5. package/dist/components/forms/text-area/Textarea.module.css +2 -1
  6. package/dist/components/nav-bar/NavBar.module.css +1 -1
  7. package/dist/styles/themes/dbc/colors.css +1 -0
  8. package/dist/styles/themes/filmstriben/theme.css +63 -10
  9. package/package.json +1 -1
package/dist/components/filter-field/FilterField.module.css CHANGED
@@ -167,7 +167,7 @@
167
167
  z-index: 1;
168
168
  color: var(--color-fg-default);
169
169
  background: color-mix(in srgb, var(--color-bg-hover-subtle) 55%, transparent);
170
- box-shadow: inset 0 0 0 1px var(--color-border-selected);
170
+ box-shadow: inset 0 0 0 1px var(--color-field-focus);
171
171
  outline: none;
172
172
  }
173
173
 
@@ -198,7 +198,7 @@
198
198
  }
199
199
 
200
200
  .valueWrapper:focus-within {
201
- box-shadow: inset 0 0 0 1px var(--color-border-selected);
201
+ box-shadow: inset 0 0 0 1px var(--color-field-focus);
202
202
  }
203
203
 
204
204
  .invalid .valueWrapper:focus-within {
package/dist/components/forms/file-upload/FileUpload.module.css CHANGED
@@ -26,15 +26,15 @@
26
26
 
27
27
  .dropzone:hover:not(.disabled) {
28
28
  background-color: var(--color-bg-selected);
29
- border-color: var(--color-border-selected);
29
+ border-color: var(--color-field-focus);
30
30
  color: var(--color-fg-default);
31
31
  }
32
32
 
33
33
  .dragging {
34
34
  background-color: var(--color-bg-selected);
35
- border-color: var(--color-border-selected);
35
+ border-color: var(--color-field-focus);
36
36
  color: var(--color-fg-default);
37
- box-shadow: inset 0 0 0 1px var(--color-border-selected);
37
+ box-shadow: inset 0 0 0 1px var(--color-field-focus);
38
38
  }
39
39
 
40
40
  .hasError {
package/dist/components/forms/form-select/FormSelect.module.css CHANGED
@@ -30,7 +30,7 @@
30
30
  ========================================= */
31
31
 
32
32
  .container:focus-within {
33
- box-shadow: 0 0 0 2px var(--color-border-selected);
33
+ box-shadow: 0 0 0 2px var(--color-field-focus);
34
34
  z-index: 1;
35
35
  }
36
36
 
package/dist/components/forms/input/Input.module.css CHANGED
@@ -106,8 +106,8 @@
106
106
  }
107
107
 
108
108
  .outlined:focus-within:not([aria-disabled='true']) {
109
- border-color: var(--color-border-selected);
110
- box-shadow: inset 0 0 0 1px var(--color-border-selected);
109
+ border-color: var(--color-field-focus);
110
+ box-shadow: inset 0 0 0 1px var(--color-field-focus);
111
111
  }
112
112
 
113
113
  .surface {
@@ -122,8 +122,8 @@
122
122
  }
123
123
 
124
124
  .surface:focus-within:not([aria-disabled='true']) {
125
- border-color: var(--color-border-selected);
126
- box-shadow: inset 0 0 0 1px var(--color-border-selected);
125
+ border-color: var(--color-field-focus);
126
+ box-shadow: inset 0 0 0 1px var(--color-field-focus);
127
127
  }
128
128
 
129
129
  /* Old filled/tinted behavior, now renamed subtle */
@@ -138,8 +138,8 @@
138
138
  }
139
139
 
140
140
  .subtle:focus-within:not([aria-disabled='true']) {
141
- border-color: var(--color-border-selected);
142
- box-shadow: inset 0 0 0 1px var(--color-border-selected);
141
+ border-color: var(--color-field-focus);
142
+ box-shadow: inset 0 0 0 1px var(--color-field-focus);
143
143
  }
144
144
 
145
145
  .embedded {
@@ -176,11 +176,11 @@
176
176
  }
177
177
 
178
178
  .standalone:focus-within:not([aria-disabled='true']) {
179
- border-color: var(--color-border-selected);
179
+ border-color: var(--color-field-focus);
180
180
  box-shadow:
181
181
  var(--shadow-xs),
182
182
  var(--shadow-md),
183
- inset 0 0 0 1px var(--color-border-selected);
183
+ inset 0 0 0 1px var(--color-field-focus);
184
184
  }
185
185
 
186
186
  /* Ghost field for use inside/near AppHeader — only meaningful there */
package/dist/components/forms/text-area/Textarea.module.css CHANGED
@@ -66,5 +66,6 @@
66
66
 
67
67
  .container textarea:focus-visible {
68
68
  outline: none;
69
- border-color: var(--color-border-selected);
69
+ border-color: var(--color-field-focus);
70
+ box-shadow: inset 0 0 0 1px var(--color-field-focus);
70
71
  }
package/dist/components/nav-bar/NavBar.module.css CHANGED
@@ -206,7 +206,7 @@
206
206
  inset-block-end: 0;
207
207
  inline-size: 0;
208
208
  block-size: 2px;
209
- background-color: var(--color-navbar-fg);
209
+ background-color: var(--color-navbar-brand);
210
210
  transition: inline-size var(--transition-fast) var(--ease-standard);
211
211
  }
212
212
 
package/dist/styles/themes/dbc/colors.css CHANGED
@@ -215,6 +215,7 @@ html {
215
215
  /* Focus */
216
216
  --color-focus-ring: var(--dbc-blue-300);
217
217
  --focus-ring: 0 0 0 3px light-dark(rgba(12, 62, 227, 0.25), rgba(59, 130, 246, 0.35));
218
+ --color-field-focus: var(--color-brand);
218
219
 
219
220
  /* Syntax (JSON viewer) */
220
221
  --color-syntax-accent: var(--dbc-blue-300);
package/dist/styles/themes/filmstriben/theme.css CHANGED
@@ -18,16 +18,12 @@
18
18
  * flipping that attribute, without re-declaring or clobbering the whole dbc
19
19
  * palette a second time.
20
20
  *
21
- * Only overrides the navbar/header identity (fixed dark bar + logo lockup).
22
- * General-purpose brand tokens (--color-brand and everything derived from it
23
- * — buttons, links, tabs, chips, alerts, focus rings, charts) are
24
- * deliberately left on the shared DBC blue: #ffc107 doesn't have a value
25
- * that works well both as flat text/borders on white AND as a vivid identity
26
- * color (see TASK_filmstriben_theme.md for the contrast math and the
27
- * earlier, abandoned attempt at a mixed "text-safe gold"). Scoping the
28
- * yellow to the navbar/logo — where it always sits on its own guaranteed
29
- * background — sidesteps that tradeoff entirely instead of picking a
30
- * compromise shade.
21
+ * Uses a split brand strategy:
22
+ * - light theme: semantic UI primary stays on blue for contrast and clarity
23
+ * - dark theme: the real Filmstriben yellow, which has enough contrast there
24
+ *
25
+ * Navbar/header identity still uses the raw yellow directly because it always
26
+ * sits on its own guaranteed dark background.
31
27
  */
32
28
 
33
29
  :root[data-product-theme='filmstriben'] {
@@ -52,4 +48,61 @@
52
48
  --color-logo: var(--filmstriben-yellow);
53
49
  --color-logo-bg: color-mix(in srgb, var(--color-logo) 10%, var(--color-bg-surface));
54
50
  --color-logo-fg: var(--filmstriben-black);
51
+
52
+ /* Light-theme UI primary stays semantic and high-contrast; Filmstriben's
53
+ real yellow remains available for identity-bearing accents instead. */
54
+ --color-brand: var(--dbc-blue-500);
55
+ --color-brand-hover: var(--dbc-blue-600);
56
+ --color-brand-strong: var(--dbc-blue-600);
57
+ --color-fg-on-brand: #ffffff;
58
+ --color-border-selected: var(--color-brand);
59
+ --color-field-focus: var(--dbc-blue-500);
60
+ --color-focus-ring: var(--dbc-blue-300);
61
+ --focus-ring: 0 0 0 3px rgba(12, 62, 227, 0.25);
62
+ --color-link: var(--dbc-blue-500);
63
+ --color-link-hover: var(--dbc-blue-600);
64
+ --color-bg-selected: var(--dbc-blue-100);
65
+ --color-bg-selected-hover: var(--dbc-blue-150);
66
+ --color-chart-primary: color-mix(in srgb, var(--color-brand) 75%, rgb(255 255 255 / 0));
67
+ }
68
+
69
+ :root[data-product-theme='filmstriben'][data-theme='dark'] {
70
+ /* Dark surfaces tuned to the navbar's grey-black identity instead of dbc's cooler blue darks. */
71
+ --filmstriben-surface-page: #212529;
72
+ --filmstriben-surface-subtle: #2a2f34;
73
+ --filmstriben-surface-strong: #161a1d;
74
+ --filmstriben-surface-hover: #343a40;
75
+ --filmstriben-surface-inverse: #34393f;
76
+ --filmstriben-table-row-alt: #1c2024;
77
+ --filmstriben-yellow-hover: #ffca2c;
78
+ --filmstriben-yellow-strong: #ffcd39;
79
+ --filmstriben-yellow-soft: #4a3a06;
80
+ --filmstriben-yellow-soft-hover: #5b4707;
81
+
82
+ --color-bg-page: var(--filmstriben-surface-page);
83
+ --color-bg-surface: var(--filmstriben-surface-page);
84
+ --color-bg-surface-subtle: var(--filmstriben-surface-subtle);
85
+ --color-bg-surface-strong: var(--filmstriben-surface-strong);
86
+ --color-bg-inverse: var(--filmstriben-surface-inverse);
87
+ --color-bg-toolbar: var(--filmstriben-surface-subtle);
88
+ --color-bg-toolbar-hover: var(--filmstriben-surface-hover);
89
+
90
+ --table-header-bg: var(--filmstriben-surface-subtle);
91
+ --table-row-bg: var(--filmstriben-surface-page);
92
+ --table-row-bg-alt: var(--filmstriben-table-row-alt);
93
+ --table-row-bg-hover: var(--filmstriben-surface-subtle);
94
+
95
+ /* In dark mode the Filmstriben yellow has enough contrast to become the primary brand color. */
96
+ --color-brand: var(--filmstriben-yellow);
97
+ --color-brand-hover: var(--filmstriben-yellow-hover);
98
+ --color-brand-strong: var(--filmstriben-yellow-strong);
99
+ --color-fg-on-brand: var(--filmstriben-black);
100
+ --color-border-selected: var(--color-brand);
101
+ --color-field-focus: var(--dbc-blue-300);
102
+ --color-focus-ring: var(--filmstriben-yellow);
103
+ --focus-ring: 0 0 0 3px color-mix(in srgb, var(--filmstriben-yellow) 35%, transparent);
104
+
105
+ --color-bg-selected: var(--filmstriben-yellow-soft);
106
+ --color-bg-selected-hover: var(--filmstriben-yellow-soft-hover);
107
+ --color-chart-primary: color-mix(in srgb, var(--color-brand) 75%, rgb(255 255 255 / 0));
55
108
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@dbcdk/react-components",
3
- "version": "0.0.174",
3
+ "version": "0.0.175",
4
4
  "description": "Reusable React components for DBC projects",
5
5
  "license": "ISC",
6
6
  "author": "",