@fkui/theme-default 6.47.0 → 6.49.0

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/fkui-css-variables.css +6 -4
  2. package/dist/fkui-css-variables.js +6 -4
  3. package/dist/metadata.mjs +28 -0
  4. package/dist/theme-auto.css +13 -9
  5. package/dist/theme-auto.js +1 -1
  6. package/dist/theme-dark.css +6 -4
  7. package/dist/theme-dark.js +6 -4
  8. package/dist/theme-light.css +6 -4
  9. package/dist/theme-light.js +6 -4
  10. package/package.json +3 -3
  11. package/src/_version.scss +1 -1
  12. package/src/dark/_variables.scss +4 -0
  13. package/src/light/_variables.scss +4 -0
  14. package/src/shared/_index.scss +5 -4
package/dist/fkui-css-variables.css CHANGED
@@ -8,7 +8,7 @@
8
8
  --f-icon-color-success:#35805b;
9
9
  --f-icon-color-success-background:#dbe9e2;
10
10
  --f-background-overlay:rgba(0,0,0,.75);
11
- --f-background-sidepanel-button-tertiary-hover:#e5e5f5;
11
+ --f-background-sidepanel-button-tertiary-hover:var(--fkds-color-action-background-secondary-hover);
12
12
  --f-box-modal-shadow:0 0 20px rgba(0,0,0,.3);
13
13
  --f-input-shadow-inset:inset 0 2px 3px rgba(0,0,0,.1);
14
14
  --f-font-family:"ExpFont", "NeueHass", "Helvetica Neue", "Helvetica", "Roboto", "Arial", sans-serif;
@@ -43,8 +43,8 @@
43
43
  --f-border-radius-medium:4px;
44
44
  --f-margin-component-bottom:1.5rem;
45
45
  --padding-input-fields:0 2.25rem 0 0.75rem;
46
- --f-color-focus:#1b1e23;
47
- --f-focus-box-shadow:0 0 0 2px #fff, 0 0 0 4px #1b1e23, 0 0 0 6px #fff;
46
+ --f-color-focus:var(--fkds-focus-indicator-color);
47
+ --f-focus-box-shadow:0 0 0 2px var(--fkds-focus-indicator-color-background), 0 0 0 4px var(--fkds-focus-indicator-color), 0 0 0 6px var(--fkds-focus-indicator-color-background);
48
48
  --f-animation-duration-short:150ms;
49
49
  --f-animation-duration-medium:350ms;
50
50
  --f-animation-duration-long:500ms;
@@ -178,5 +178,7 @@
178
178
  --fkds-color-navigation-background-selected:#35805b;
179
179
  --fkds-color-header-background-primary:#116a3e;
180
180
  --fkds-color-header-text-primary:#fff;
181
- --fkui-theme-default-version:"6.47.0";
181
+ --fkds-focus-indicator-color:#1b1e23;
182
+ --fkds-focus-indicator-color-background:#fff;
183
+ --fkui-theme-default-version:"6.49.0";
182
184
  }
package/dist/fkui-css-variables.js CHANGED
@@ -8,7 +8,7 @@ const value = {
8
8
  "--f-icon-color-success": "#35805b",
9
9
  "--f-icon-color-success-background": "#dbe9e2",
10
10
  "--f-background-overlay": "rgba(0,0,0,.75)",
11
- "--f-background-sidepanel-button-tertiary-hover": "#e5e5f5",
11
+ "--f-background-sidepanel-button-tertiary-hover": "var(--fkds-color-action-background-secondary-hover)",
12
12
  "--f-box-modal-shadow": "0 0 20px rgba(0,0,0,.3)",
13
13
  "--f-input-shadow-inset": "inset 0 2px 3px rgba(0,0,0,.1)",
14
14
  "--f-font-family": "\"ExpFont\", \"NeueHass\", \"Helvetica Neue\", \"Helvetica\", \"Roboto\", \"Arial\", sans-serif",
@@ -43,8 +43,8 @@ const value = {
43
43
  "--f-border-radius-medium": "4px",
44
44
  "--f-margin-component-bottom": "1.5rem",
45
45
  "--padding-input-fields": "0 2.25rem 0 0.75rem",
46
- "--f-color-focus": "#1b1e23",
47
- "--f-focus-box-shadow": "0 0 0 2px #fff, 0 0 0 4px #1b1e23, 0 0 0 6px #fff",
46
+ "--f-color-focus": "var(--fkds-focus-indicator-color)",
47
+ "--f-focus-box-shadow": "0 0 0 2px var(--fkds-focus-indicator-color-background), 0 0 0 4px var(--fkds-focus-indicator-color), 0 0 0 6px var(--fkds-focus-indicator-color-background)",
48
48
  "--f-animation-duration-short": "150ms",
49
49
  "--f-animation-duration-medium": "350ms",
50
50
  "--f-animation-duration-long": "500ms",
@@ -178,6 +178,8 @@ const value = {
178
178
  "--fkds-color-navigation-background-selected": "#35805b",
179
179
  "--fkds-color-header-background-primary": "#116a3e",
180
180
  "--fkds-color-header-text-primary": "#fff",
181
- "--fkui-theme-default-version": "\"6.47.0\""
181
+ "--fkds-focus-indicator-color": "#1b1e23",
182
+ "--fkds-focus-indicator-color-background": "#fff",
183
+ "--fkui-theme-default-version": "\"6.49.0\""
182
184
  };
183
185
  module.exports = value;
package/dist/metadata.mjs CHANGED
@@ -1025,6 +1025,34 @@ export default {
1025
1025
  "palette": "fk-black-30"
1026
1026
  }
1027
1027
  }
1028
+ },
1029
+ {
1030
+ "name": "--fkds-focus-indicator-color",
1031
+ "comment": null,
1032
+ "values": {
1033
+ "light": {
1034
+ "value": "#1b1e23",
1035
+ "palette": "fk-black-100"
1036
+ },
1037
+ "dark": {
1038
+ "value": "#fff",
1039
+ "palette": null
1040
+ }
1041
+ }
1042
+ },
1043
+ {
1044
+ "name": "--fkds-focus-indicator-color-background",
1045
+ "comment": null,
1046
+ "values": {
1047
+ "light": {
1048
+ "value": "#fff",
1049
+ "palette": null
1050
+ },
1051
+ "dark": {
1052
+ "value": "#1b1e23",
1053
+ "palette": "fk-black-100"
1054
+ }
1055
+ }
1028
1056
  }
1029
1057
  ]
1030
1058
  }
package/dist/theme-auto.css CHANGED
@@ -12,7 +12,7 @@
12
12
  --f-icon-color-success:#35805b;
13
13
  --f-icon-color-success-background:#dbe9e2;
14
14
  --f-background-overlay:rgba(0,0,0,.75);
15
- --f-background-sidepanel-button-tertiary-hover:#e5e5f5;
15
+ --f-background-sidepanel-button-tertiary-hover:var(--fkds-color-action-background-secondary-hover);
16
16
  --f-box-modal-shadow:0 0 20px rgba(0,0,0,.3);
17
17
  --f-input-shadow-inset:inset 0 2px 3px rgba(0,0,0,.1);
18
18
  --f-font-family:"ExpFont", "NeueHass", "Helvetica Neue", "Helvetica", "Roboto", "Arial", sans-serif;
@@ -47,8 +47,8 @@
47
47
  --f-border-radius-medium:4px;
48
48
  --f-margin-component-bottom:1.5rem;
49
49
  --padding-input-fields:0 2.25rem 0 0.75rem;
50
- --f-color-focus:#1b1e23;
51
- --f-focus-box-shadow:0 0 0 2px #fff, 0 0 0 4px #1b1e23, 0 0 0 6px #fff;
50
+ --f-color-focus:var(--fkds-focus-indicator-color);
51
+ --f-focus-box-shadow:0 0 0 2px var(--fkds-focus-indicator-color-background), 0 0 0 4px var(--fkds-focus-indicator-color), 0 0 0 6px var(--fkds-focus-indicator-color-background);
52
52
  --f-animation-duration-short:150ms;
53
53
  --f-animation-duration-medium:350ms;
54
54
  --f-animation-duration-long:500ms;
@@ -182,7 +182,9 @@
182
182
  --fkds-color-navigation-background-selected:#35805b;
183
183
  --fkds-color-header-background-primary:#116a3e;
184
184
  --fkds-color-header-text-primary:#fff;
185
- --fkui-theme-default-version:"6.47.0";
185
+ --fkds-focus-indicator-color:#1b1e23;
186
+ --fkds-focus-indicator-color-background:#fff;
187
+ --fkui-theme-default-version:"6.49.0";
186
188
  }
187
189
  }
188
190
  @media (prefers-color-scheme:dark){
@@ -196,7 +198,7 @@
196
198
  --f-icon-color-success:#35805b;
197
199
  --f-icon-color-success-background:#dbe9e2;
198
200
  --f-background-overlay:rgba(0,0,0,.75);
199
- --f-background-sidepanel-button-tertiary-hover:#e5e5f5;
201
+ --f-background-sidepanel-button-tertiary-hover:var(--fkds-color-action-background-secondary-hover);
200
202
  --f-box-modal-shadow:0 0 20px rgba(0,0,0,.3);
201
203
  --f-input-shadow-inset:inset 0 2px 3px rgba(0,0,0,.1);
202
204
  --f-font-family:"ExpFont", "NeueHass", "Helvetica Neue", "Helvetica", "Roboto", "Arial", sans-serif;
@@ -231,8 +233,8 @@
231
233
  --f-border-radius-medium:4px;
232
234
  --f-margin-component-bottom:1.5rem;
233
235
  --padding-input-fields:0 2.25rem 0 0.75rem;
234
- --f-color-focus:#1b1e23;
235
- --f-focus-box-shadow:0 0 0 2px #fff, 0 0 0 4px #1b1e23, 0 0 0 6px #fff;
236
+ --f-color-focus:var(--fkds-focus-indicator-color);
237
+ --f-focus-box-shadow:0 0 0 2px var(--fkds-focus-indicator-color-background), 0 0 0 4px var(--fkds-focus-indicator-color), 0 0 0 6px var(--fkds-focus-indicator-color-background);
236
238
  --f-animation-duration-short:150ms;
237
239
  --f-animation-duration-medium:350ms;
238
240
  --f-animation-duration-long:500ms;
@@ -366,9 +368,11 @@
366
368
  --fkds-color-navigation-background-selected:#35805b;
367
369
  --fkds-color-header-background-primary:#35805b;
368
370
  --fkds-color-header-text-primary:#fff;
369
- --fkui-theme-default-version:"6.47.0";
371
+ --fkds-focus-indicator-color:#fff;
372
+ --fkds-focus-indicator-color-background:#1b1e23;
373
+ --fkui-theme-default-version:"6.49.0";
370
374
  }
371
375
  }
372
376
  :root{
373
- --fkui-theme-default-version:"6.47.0";
377
+ --fkui-theme-default-version:"6.49.0";
374
378
  }
package/dist/theme-auto.js CHANGED
@@ -1,4 +1,4 @@
1
1
  const value = {
2
- "--fkui-theme-default-version": "\"6.47.0\""
2
+ "--fkui-theme-default-version": "\"6.49.0\""
3
3
  };
4
4
  module.exports = value;
package/dist/theme-dark.css CHANGED
@@ -8,7 +8,7 @@
8
8
  --f-icon-color-success:#35805b;
9
9
  --f-icon-color-success-background:#dbe9e2;
10
10
  --f-background-overlay:rgba(0,0,0,.75);
11
- --f-background-sidepanel-button-tertiary-hover:#e5e5f5;
11
+ --f-background-sidepanel-button-tertiary-hover:var(--fkds-color-action-background-secondary-hover);
12
12
  --f-box-modal-shadow:0 0 20px rgba(0,0,0,.3);
13
13
  --f-input-shadow-inset:inset 0 2px 3px rgba(0,0,0,.1);
14
14
  --f-font-family:"ExpFont", "NeueHass", "Helvetica Neue", "Helvetica", "Roboto", "Arial", sans-serif;
@@ -43,8 +43,8 @@
43
43
  --f-border-radius-medium:4px;
44
44
  --f-margin-component-bottom:1.5rem;
45
45
  --padding-input-fields:0 2.25rem 0 0.75rem;
46
- --f-color-focus:#1b1e23;
47
- --f-focus-box-shadow:0 0 0 2px #fff, 0 0 0 4px #1b1e23, 0 0 0 6px #fff;
46
+ --f-color-focus:var(--fkds-focus-indicator-color);
47
+ --f-focus-box-shadow:0 0 0 2px var(--fkds-focus-indicator-color-background), 0 0 0 4px var(--fkds-focus-indicator-color), 0 0 0 6px var(--fkds-focus-indicator-color-background);
48
48
  --f-animation-duration-short:150ms;
49
49
  --f-animation-duration-medium:350ms;
50
50
  --f-animation-duration-long:500ms;
@@ -178,5 +178,7 @@
178
178
  --fkds-color-navigation-background-selected:#35805b;
179
179
  --fkds-color-header-background-primary:#35805b;
180
180
  --fkds-color-header-text-primary:#fff;
181
- --fkui-theme-default-version:"6.47.0";
181
+ --fkds-focus-indicator-color:#fff;
182
+ --fkds-focus-indicator-color-background:#1b1e23;
183
+ --fkui-theme-default-version:"6.49.0";
182
184
  }
package/dist/theme-dark.js CHANGED
@@ -8,7 +8,7 @@ const value = {
8
8
  "--f-icon-color-success": "#35805b",
9
9
  "--f-icon-color-success-background": "#dbe9e2",
10
10
  "--f-background-overlay": "rgba(0,0,0,.75)",
11
- "--f-background-sidepanel-button-tertiary-hover": "#e5e5f5",
11
+ "--f-background-sidepanel-button-tertiary-hover": "var(--fkds-color-action-background-secondary-hover)",
12
12
  "--f-box-modal-shadow": "0 0 20px rgba(0,0,0,.3)",
13
13
  "--f-input-shadow-inset": "inset 0 2px 3px rgba(0,0,0,.1)",
14
14
  "--f-font-family": "\"ExpFont\", \"NeueHass\", \"Helvetica Neue\", \"Helvetica\", \"Roboto\", \"Arial\", sans-serif",
@@ -43,8 +43,8 @@ const value = {
43
43
  "--f-border-radius-medium": "4px",
44
44
  "--f-margin-component-bottom": "1.5rem",
45
45
  "--padding-input-fields": "0 2.25rem 0 0.75rem",
46
- "--f-color-focus": "#1b1e23",
47
- "--f-focus-box-shadow": "0 0 0 2px #fff, 0 0 0 4px #1b1e23, 0 0 0 6px #fff",
46
+ "--f-color-focus": "var(--fkds-focus-indicator-color)",
47
+ "--f-focus-box-shadow": "0 0 0 2px var(--fkds-focus-indicator-color-background), 0 0 0 4px var(--fkds-focus-indicator-color), 0 0 0 6px var(--fkds-focus-indicator-color-background)",
48
48
  "--f-animation-duration-short": "150ms",
49
49
  "--f-animation-duration-medium": "350ms",
50
50
  "--f-animation-duration-long": "500ms",
@@ -178,6 +178,8 @@ const value = {
178
178
  "--fkds-color-navigation-background-selected": "#35805b",
179
179
  "--fkds-color-header-background-primary": "#35805b",
180
180
  "--fkds-color-header-text-primary": "#fff",
181
- "--fkui-theme-default-version": "\"6.47.0\""
181
+ "--fkds-focus-indicator-color": "#fff",
182
+ "--fkds-focus-indicator-color-background": "#1b1e23",
183
+ "--fkui-theme-default-version": "\"6.49.0\""
182
184
  };
183
185
  module.exports = value;
package/dist/theme-light.css CHANGED
@@ -8,7 +8,7 @@
8
8
  --f-icon-color-success:#35805b;
9
9
  --f-icon-color-success-background:#dbe9e2;
10
10
  --f-background-overlay:rgba(0,0,0,.75);
11
- --f-background-sidepanel-button-tertiary-hover:#e5e5f5;
11
+ --f-background-sidepanel-button-tertiary-hover:var(--fkds-color-action-background-secondary-hover);
12
12
  --f-box-modal-shadow:0 0 20px rgba(0,0,0,.3);
13
13
  --f-input-shadow-inset:inset 0 2px 3px rgba(0,0,0,.1);
14
14
  --f-font-family:"ExpFont", "NeueHass", "Helvetica Neue", "Helvetica", "Roboto", "Arial", sans-serif;
@@ -43,8 +43,8 @@
43
43
  --f-border-radius-medium:4px;
44
44
  --f-margin-component-bottom:1.5rem;
45
45
  --padding-input-fields:0 2.25rem 0 0.75rem;
46
- --f-color-focus:#1b1e23;
47
- --f-focus-box-shadow:0 0 0 2px #fff, 0 0 0 4px #1b1e23, 0 0 0 6px #fff;
46
+ --f-color-focus:var(--fkds-focus-indicator-color);
47
+ --f-focus-box-shadow:0 0 0 2px var(--fkds-focus-indicator-color-background), 0 0 0 4px var(--fkds-focus-indicator-color), 0 0 0 6px var(--fkds-focus-indicator-color-background);
48
48
  --f-animation-duration-short:150ms;
49
49
  --f-animation-duration-medium:350ms;
50
50
  --f-animation-duration-long:500ms;
@@ -178,5 +178,7 @@
178
178
  --fkds-color-navigation-background-selected:#35805b;
179
179
  --fkds-color-header-background-primary:#116a3e;
180
180
  --fkds-color-header-text-primary:#fff;
181
- --fkui-theme-default-version:"6.47.0";
181
+ --fkds-focus-indicator-color:#1b1e23;
182
+ --fkds-focus-indicator-color-background:#fff;
183
+ --fkui-theme-default-version:"6.49.0";
182
184
  }
package/dist/theme-light.js CHANGED
@@ -8,7 +8,7 @@ const value = {
8
8
  "--f-icon-color-success": "#35805b",
9
9
  "--f-icon-color-success-background": "#dbe9e2",
10
10
  "--f-background-overlay": "rgba(0,0,0,.75)",
11
- "--f-background-sidepanel-button-tertiary-hover": "#e5e5f5",
11
+ "--f-background-sidepanel-button-tertiary-hover": "var(--fkds-color-action-background-secondary-hover)",
12
12
  "--f-box-modal-shadow": "0 0 20px rgba(0,0,0,.3)",
13
13
  "--f-input-shadow-inset": "inset 0 2px 3px rgba(0,0,0,.1)",
14
14
  "--f-font-family": "\"ExpFont\", \"NeueHass\", \"Helvetica Neue\", \"Helvetica\", \"Roboto\", \"Arial\", sans-serif",
@@ -43,8 +43,8 @@ const value = {
43
43
  "--f-border-radius-medium": "4px",
44
44
  "--f-margin-component-bottom": "1.5rem",
45
45
  "--padding-input-fields": "0 2.25rem 0 0.75rem",
46
- "--f-color-focus": "#1b1e23",
47
- "--f-focus-box-shadow": "0 0 0 2px #fff, 0 0 0 4px #1b1e23, 0 0 0 6px #fff",
46
+ "--f-color-focus": "var(--fkds-focus-indicator-color)",
47
+ "--f-focus-box-shadow": "0 0 0 2px var(--fkds-focus-indicator-color-background), 0 0 0 4px var(--fkds-focus-indicator-color), 0 0 0 6px var(--fkds-focus-indicator-color-background)",
48
48
  "--f-animation-duration-short": "150ms",
49
49
  "--f-animation-duration-medium": "350ms",
50
50
  "--f-animation-duration-long": "500ms",
@@ -178,6 +178,8 @@ const value = {
178
178
  "--fkds-color-navigation-background-selected": "#35805b",
179
179
  "--fkds-color-header-background-primary": "#116a3e",
180
180
  "--fkds-color-header-text-primary": "#fff",
181
- "--fkui-theme-default-version": "\"6.47.0\""
181
+ "--fkds-focus-indicator-color": "#1b1e23",
182
+ "--fkds-focus-indicator-color-background": "#fff",
183
+ "--fkui-theme-default-version": "\"6.49.0\""
182
184
  };
183
185
  module.exports = value;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@fkui/theme-default",
3
- "version": "6.47.0",
3
+ "version": "6.49.0",
4
4
  "description": "FK Themes",
5
5
  "keywords": [
6
6
  "fkui",
@@ -32,12 +32,12 @@
32
32
  "prepack": "npm run build"
33
33
  },
34
34
  "devDependencies": {
35
- "@fkui/theme-builder": "6.47.0"
35
+ "@fkui/theme-builder": "6.49.0"
36
36
  },
37
37
  "engines": {
38
38
  "node": "^22.16 || >= 24",
39
39
  "npm": ">= 7"
40
40
  },
41
41
  "sass": "./src/_default.scss",
42
- "gitHead": "e3bf77abe4fe99b433bc62d2f6118c0776fa5898"
42
+ "gitHead": "898025dacd95f7c1aba2e08de8f9f36ee148b62e"
43
43
  }
package/src/_version.scss CHANGED
@@ -1,2 +1,2 @@
1
1
  // This is a generated file. See @fkui/theme-builder
2
- $version: "6.47.0";
2
+ $version: "6.49.0";
package/src/dark/_variables.scss CHANGED
@@ -103,4 +103,8 @@
103
103
 
104
104
  // HEADER - TEXT
105
105
  --fkds-color-header-text-primary: #{$palette-color-white-100};
106
+
107
+ // FOCUS INDICATOR
108
+ --fkds-focus-indicator-color: #{$palette-color-white-100};
109
+ --fkds-focus-indicator-color-background: #{$palette-color-fk-black-100};
106
110
  }
package/src/light/_variables.scss CHANGED
@@ -103,4 +103,8 @@
103
103
 
104
104
  // HEADER - TEXT
105
105
  --fkds-color-header-text-primary: #{$palette-color-white-100};
106
+
107
+ // FOCUS INDICATOR
108
+ --fkds-focus-indicator-color: #{$palette-color-fk-black-100};
109
+ --fkds-focus-indicator-color-background: #{$palette-color-white-100};
106
110
  }
package/src/shared/_index.scss CHANGED
@@ -24,7 +24,7 @@
24
24
  // BACKGROUND COLORS
25
25
  // *****************
26
26
  --f-background-overlay: rgba(0, 0, 0, 0.75); // modal, loader
27
- --f-background-sidepanel-button-tertiary-hover: #{$palette-color-bluebell-15}; // FLeftPanel and FRightPanel
27
+ --f-background-sidepanel-button-tertiary-hover: var(--fkds-color-action-background-secondary-hover); // FLeftPanel and FRightPanel
28
28
 
29
29
  // *******************
30
30
  // COLOR VARIABLES END
@@ -95,9 +95,10 @@
95
95
  --padding-input-fields: 0 2.25rem 0 0.75rem;
96
96
 
97
97
  /// Focus related
98
- $_f-color-focus: $palette-color-fk-black-100;
99
- --f-color-focus: #{$_f-color-focus};
100
- --f-focus-box-shadow: 0 0 0 2px #{$palette-color-white-100}, 0 0 0 4px #{$_f-color-focus}, 0 0 0 6px #{$palette-color-white-100};
98
+ --f-color-focus: var(--fkds-focus-indicator-color);
99
+ --f-focus-box-shadow:
100
+ 0 0 0 2px var(--fkds-focus-indicator-color-background), 0 0 0 4px var(--fkds-focus-indicator-color),
101
+ 0 0 0 6px var(--fkds-focus-indicator-color-background);
101
102
 
102
103
  // Effect related variables
103
104
  --f-animation-duration-short: 150ms;