@semcore/core 16.0.3 → 16.0.4-prerelease.1

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 (11) hide show
  1. package/CHANGELOG.md +7 -1
  2. package/lib/theme/dark.json +81 -1
  3. package/lib/theme/themes/highlights-dark.css +24 -0
  4. package/lib/theme/themes/highlights-dark.d.ts +14 -0
  5. package/lib/theme/themes/highlights-dark.js +20 -0
  6. package/lib/theme/themes/highlights-dark.js.map +1 -0
  7. package/lib/theme/themes/highlights-dark.mjs +14 -0
  8. package/lib/theme/themes/highlights-dark.mjs.map +1 -0
  9. package/lib/utils/injectStyle.js +1 -1
  10. package/lib/utils/injectStyle.mjs +1 -1
  11. package/package.json +1 -1
package/CHANGELOG.md CHANGED
@@ -2,6 +2,12 @@
2
2
 
3
3
  CHANGELOG.md standards are inspired by [keepachangelog.com](https://keepachangelog.com/en/1.0.0/).
4
4
 
5
+ ## [16.0.4] - 2025-07-07
6
+
7
+ ### Added
8
+
9
+ - `featureHighlight` tokens to dark.json.
10
+
5
11
  ## [16.0.3] - 2025-07-02
6
12
 
7
13
  ### Added
@@ -19,7 +25,7 @@ CHANGELOG.md standards are inspired by [keepachangelog.com](https://keepachangel
19
25
 
20
26
  ### Added
21
27
 
22
- - Tokens form basic palette to themed .css files.
28
+ - Tokens from basic palette to themed .css files.
23
29
 
24
30
  ### Changed
25
31
 
package/lib/theme/dark.json CHANGED
@@ -2503,5 +2503,85 @@
2503
2503
  }
2504
2504
  }
2505
2505
  },
2506
- "featureHighlight": {}
2506
+ "featureHighlight": {
2507
+ "bg": {
2508
+ "primary": {
2509
+ "feature-highlight": {
2510
+ "value": "rgba(30, 34, 49, 1)",
2511
+ "type": "color",
2512
+ "description": "Primary background for highlighted controls."
2513
+ },
2514
+ "feature-highlight-hover-active": {
2515
+ "value": "linear-gradient(90deg, {violet.50}, {blue.50})",
2516
+ "type": "color",
2517
+ "description": "Primary background for hover and active (selected) state of highlighted controls."
2518
+ }
2519
+ },
2520
+ "secondary": {
2521
+ "feature-highlight": {
2522
+ "value": "linear-gradient(90deg, {violet.50}, {blue.50})",
2523
+ "type": "color",
2524
+ "description": "Secondary background for the highlighted message."
2525
+ }
2526
+ }
2527
+ },
2528
+ "border": {
2529
+ "feature-highlight": {
2530
+ "value": "linear-gradient(90deg, {violet.300}, {blue.300})",
2531
+ "type": "color",
2532
+ "description": "Border for highlighted controls."
2533
+ },
2534
+ "feature-highlight-active": {
2535
+ "value": "linear-gradient(90deg, {violet.400}, {blue.400})",
2536
+ "type": "color",
2537
+ "description": "Border for the active state of highlighted controls."
2538
+ }
2539
+ },
2540
+ "control": {
2541
+ "primary": {
2542
+ "feature-highlight": {
2543
+ "value": "linear-gradient(90deg, {violet.400}, {blue.400})",
2544
+ "type": "color",
2545
+ "description": "Background of the highlighted primary control."
2546
+ },
2547
+ "feature-highlight-hover": {
2548
+ "value": "linear-gradient(90deg, {violet.500}, {blue.500})",
2549
+ "type": "color",
2550
+ "description": "Hover state of the highlighted primary control."
2551
+ },
2552
+ "feature-highlight-active": {
2553
+ "value": "linear-gradient(90deg, {violet.600}, {blue.600})",
2554
+ "type": "color",
2555
+ "description": "Active (selected) state of the highlighted primary control."
2556
+ }
2557
+ }
2558
+ },
2559
+ "icon": {
2560
+ "primary": {
2561
+ "feature-highlight": {
2562
+ "value": "{violet.500}",
2563
+ "type": "color",
2564
+ "description": "Primary highlighted icon."
2565
+ },
2566
+ "feature-highlight-hover-active": {
2567
+ "value": "#6B3AB4",
2568
+ "type": "color",
2569
+ "description": "Violet background color for the hover and active states of the primary highlighted icon. It’s created using a CSS filter with a brightness(0.8), applied to the violet-500 color."
2570
+ }
2571
+ }
2572
+ },
2573
+ "keyboard-focus-feature-highlight": {
2574
+ "value": {
2575
+ "width": "3px",
2576
+ "color": "{keyboard-focus-feature-highlight.outline}"
2577
+ },
2578
+ "type": "border",
2579
+ "description": "Keyboard focus styles for highlighted controls.",
2580
+ "outline": {
2581
+ "value": "linear-gradient(90deg, rgba({violet.400}, 0.5), rgba({blue.400}, 0.5))",
2582
+ "type": "color",
2583
+ "description": "Color for keyboard focus outline styles for highlighted controls."
2584
+ }
2585
+ }
2586
+ }
2507
2587
  }
package/lib/theme/themes/highlights-dark.css ADDED
@@ -0,0 +1,24 @@
1
+ :root {
2
+ /* Primary background for highlighted controls. */
3
+ --intergalactic-bg-primary-feature-highlight: rgba(30, 34, 49, 1);
4
+ /* Primary background for hover and active (selected) state of highlighted controls. */
5
+ --intergalactic-bg-primary-feature-highlight-hover-active: linear-gradient(90deg, #f9f2ff, #e9f7ff);
6
+ /* Secondary background for the highlighted message. */
7
+ --intergalactic-bg-secondary-feature-highlight: linear-gradient(90deg, #f9f2ff, #e9f7ff);
8
+ /* Border for highlighted controls. */
9
+ --intergalactic-border-feature-highlight: linear-gradient(90deg, #c695ff, #2bb3ff);
10
+ /* Border for the active state of highlighted controls. */
11
+ --intergalactic-border-feature-highlight-active: linear-gradient(90deg, #ab6cfe, #008ff8);
12
+ /* Background of the highlighted primary control. */
13
+ --intergalactic-control-primary-feature-highlight: linear-gradient(90deg, #ab6cfe, #008ff8);
14
+ /* Hover state of the highlighted primary control. */
15
+ --intergalactic-control-primary-feature-highlight-hover: linear-gradient(90deg, #8649e1, #006dca);
16
+ /* Active (selected) state of the highlighted primary control. */
17
+ --intergalactic-control-primary-feature-highlight-active: linear-gradient(90deg, #5925ab, #044792);
18
+ /* Primary highlighted icon. */
19
+ --intergalactic-icon-primary-feature-highlight: #8649e1;
20
+ /* Violet background color for the hover and active states of the primary highlighted icon. It’s created using a CSS filter with a brightness(0.8), applied to the violet-500 color. */
21
+ --intergalactic-icon-primary-feature-highlight-hover-active: #6B3AB4;
22
+ /* Color for keyboard focus outline styles for highlighted controls. */
23
+ --intergalactic-keyboard-focus-feature-highlight-outline: linear-gradient(90deg, rgba(171, 108, 254, 0.5), rgba(0, 143, 248, 0.5));
24
+ }
package/lib/theme/themes/highlights-dark.d.ts ADDED
@@ -0,0 +1,14 @@
1
+ declare const _default: {
2
+ '--intergalactic-bg-primary-feature-highlight': string;
3
+ '--intergalactic-bg-primary-feature-highlight-hover-active': string;
4
+ '--intergalactic-bg-secondary-feature-highlight': string;
5
+ '--intergalactic-border-feature-highlight': string;
6
+ '--intergalactic-border-feature-highlight-active': string;
7
+ '--intergalactic-control-primary-feature-highlight': string;
8
+ '--intergalactic-control-primary-feature-highlight-hover': string;
9
+ '--intergalactic-control-primary-feature-highlight-active': string;
10
+ '--intergalactic-icon-primary-feature-highlight': string;
11
+ '--intergalactic-icon-primary-feature-highlight-hover-active': string;
12
+ '--intergalactic-keyboard-focus-feature-highlight-outline': string;
13
+ };
14
+ export default _default;
package/lib/theme/themes/highlights-dark.js ADDED
@@ -0,0 +1,20 @@
1
+ "use strict";
2
+
3
+ Object.defineProperty(exports, "__esModule", {
4
+ value: true
5
+ });
6
+ exports["default"] = void 0;
7
+ var _default = exports["default"] = {
8
+ '--intergalactic-bg-primary-feature-highlight': 'rgba(30, 34, 49, 1)',
9
+ '--intergalactic-bg-primary-feature-highlight-hover-active': 'linear-gradient(90deg, #f9f2ff, #e9f7ff)',
10
+ '--intergalactic-bg-secondary-feature-highlight': 'linear-gradient(90deg, #f9f2ff, #e9f7ff)',
11
+ '--intergalactic-border-feature-highlight': 'linear-gradient(90deg, #c695ff, #2bb3ff)',
12
+ '--intergalactic-border-feature-highlight-active': 'linear-gradient(90deg, #ab6cfe, #008ff8)',
13
+ '--intergalactic-control-primary-feature-highlight': 'linear-gradient(90deg, #ab6cfe, #008ff8)',
14
+ '--intergalactic-control-primary-feature-highlight-hover': 'linear-gradient(90deg, #8649e1, #006dca)',
15
+ '--intergalactic-control-primary-feature-highlight-active': 'linear-gradient(90deg, #5925ab, #044792)',
16
+ '--intergalactic-icon-primary-feature-highlight': '#8649e1',
17
+ '--intergalactic-icon-primary-feature-highlight-hover-active': '#6B3AB4',
18
+ '--intergalactic-keyboard-focus-feature-highlight-outline': 'linear-gradient(90deg, rgba(171, 108, 254, 0.5), rgba(0, 143, 248, 0.5))'
19
+ };
20
+ //# sourceMappingURL=highlights-dark.js.map
package/lib/theme/themes/highlights-dark.js.map ADDED
@@ -0,0 +1 @@
1
+ {"version":3,"file":"highlights-dark.js","names":[],"sources":["../../../src/theme/themes/highlights-dark.ts"],"sourcesContent":["export default {\n '--intergalactic-bg-primary-feature-highlight': 'rgba(30, 34, 49, 1)',\n '--intergalactic-bg-primary-feature-highlight-hover-active': 'linear-gradient(90deg, #f9f2ff, #e9f7ff)',\n '--intergalactic-bg-secondary-feature-highlight': 'linear-gradient(90deg, #f9f2ff, #e9f7ff)',\n '--intergalactic-border-feature-highlight': 'linear-gradient(90deg, #c695ff, #2bb3ff)',\n '--intergalactic-border-feature-highlight-active': 'linear-gradient(90deg, #ab6cfe, #008ff8)',\n '--intergalactic-control-primary-feature-highlight': 'linear-gradient(90deg, #ab6cfe, #008ff8)',\n '--intergalactic-control-primary-feature-highlight-hover': 'linear-gradient(90deg, #8649e1, #006dca)',\n '--intergalactic-control-primary-feature-highlight-active': 'linear-gradient(90deg, #5925ab, #044792)',\n '--intergalactic-icon-primary-feature-highlight': '#8649e1',\n '--intergalactic-icon-primary-feature-highlight-hover-active': '#6B3AB4',\n '--intergalactic-keyboard-focus-feature-highlight-outline': 'linear-gradient(90deg, rgba(171, 108, 254, 0.5), rgba(0, 143, 248, 0.5))',\n};\n"],"mappings":";;;;;;oCAAe;EACb,8CAA8C,EAAE,qBAAqB;EACrE,2DAA2D,EAAE,0CAA0C;EACvG,gDAAgD,EAAE,0CAA0C;EAC5F,0CAA0C,EAAE,0CAA0C;EACtF,iDAAiD,EAAE,0CAA0C;EAC7F,mDAAmD,EAAE,0CAA0C;EAC/F,yDAAyD,EAAE,0CAA0C;EACrG,0DAA0D,EAAE,0CAA0C;EACtG,gDAAgD,EAAE,SAAS;EAC3D,6DAA6D,EAAE,SAAS;EACxE,0DAA0D,EAAE;AAC9D,CAAC","ignoreList":[]}
package/lib/theme/themes/highlights-dark.mjs ADDED
@@ -0,0 +1,14 @@
1
+ export default {
2
+ '--intergalactic-bg-primary-feature-highlight': 'rgba(30, 34, 49, 1)',
3
+ '--intergalactic-bg-primary-feature-highlight-hover-active': 'linear-gradient(90deg, #f9f2ff, #e9f7ff)',
4
+ '--intergalactic-bg-secondary-feature-highlight': 'linear-gradient(90deg, #f9f2ff, #e9f7ff)',
5
+ '--intergalactic-border-feature-highlight': 'linear-gradient(90deg, #c695ff, #2bb3ff)',
6
+ '--intergalactic-border-feature-highlight-active': 'linear-gradient(90deg, #ab6cfe, #008ff8)',
7
+ '--intergalactic-control-primary-feature-highlight': 'linear-gradient(90deg, #ab6cfe, #008ff8)',
8
+ '--intergalactic-control-primary-feature-highlight-hover': 'linear-gradient(90deg, #8649e1, #006dca)',
9
+ '--intergalactic-control-primary-feature-highlight-active': 'linear-gradient(90deg, #5925ab, #044792)',
10
+ '--intergalactic-icon-primary-feature-highlight': '#8649e1',
11
+ '--intergalactic-icon-primary-feature-highlight-hover-active': '#6B3AB4',
12
+ '--intergalactic-keyboard-focus-feature-highlight-outline': 'linear-gradient(90deg, rgba(171, 108, 254, 0.5), rgba(0, 143, 248, 0.5))'
13
+ };
14
+ //# sourceMappingURL=highlights-dark.mjs.map
package/lib/theme/themes/highlights-dark.mjs.map ADDED
@@ -0,0 +1 @@
1
+ {"version":3,"file":"highlights-dark.mjs","names":[],"sources":["../../../src/theme/themes/highlights-dark.ts"],"sourcesContent":["export default {\n '--intergalactic-bg-primary-feature-highlight': 'rgba(30, 34, 49, 1)',\n '--intergalactic-bg-primary-feature-highlight-hover-active': 'linear-gradient(90deg, #f9f2ff, #e9f7ff)',\n '--intergalactic-bg-secondary-feature-highlight': 'linear-gradient(90deg, #f9f2ff, #e9f7ff)',\n '--intergalactic-border-feature-highlight': 'linear-gradient(90deg, #c695ff, #2bb3ff)',\n '--intergalactic-border-feature-highlight-active': 'linear-gradient(90deg, #ab6cfe, #008ff8)',\n '--intergalactic-control-primary-feature-highlight': 'linear-gradient(90deg, #ab6cfe, #008ff8)',\n '--intergalactic-control-primary-feature-highlight-hover': 'linear-gradient(90deg, #8649e1, #006dca)',\n '--intergalactic-control-primary-feature-highlight-active': 'linear-gradient(90deg, #5925ab, #044792)',\n '--intergalactic-icon-primary-feature-highlight': '#8649e1',\n '--intergalactic-icon-primary-feature-highlight-hover-active': '#6B3AB4',\n '--intergalactic-keyboard-focus-feature-highlight-outline': 'linear-gradient(90deg, rgba(171, 108, 254, 0.5), rgba(0, 143, 248, 0.5))',\n};\n"],"mappings":"AAAA,eAAe;EACb,8CAA8C,EAAE,qBAAqB;EACrE,2DAA2D,EAAE,0CAA0C;EACvG,gDAAgD,EAAE,0CAA0C;EAC5F,0CAA0C,EAAE,0CAA0C;EACtF,iDAAiD,EAAE,0CAA0C;EAC7F,mDAAmD,EAAE,0CAA0C;EAC/F,yDAAyD,EAAE,0CAA0C;EACrG,0DAA0D,EAAE,0CAA0C;EACtG,gDAAgD,EAAE,SAAS;EAC3D,6DAA6D,EAAE,SAAS;EACxE,0DAA0D,EAAE;AAC9D,CAAC","ignoreList":[]}
package/lib/utils/injectStyle.js CHANGED
@@ -29,7 +29,7 @@ function injectStyle(css) {
29
29
  sh = prevSh;
30
30
  } else {
31
31
  // @ts-ignore
32
- var version = "16.0.3";
32
+ var version = "16.0.4";
33
33
  sh = document.createElement('style');
34
34
  sh.setAttribute('data-ui-v', version);
35
35
  sh.classList.add(selectorClass);
package/lib/utils/injectStyle.mjs CHANGED
@@ -22,7 +22,7 @@ function injectStyle(css) {
22
22
  sh = prevSh;
23
23
  } else {
24
24
  // @ts-ignore
25
- var version = "16.0.3";
25
+ var version = "16.0.4";
26
26
  sh = document.createElement('style');
27
27
  sh.setAttribute('data-ui-v', version);
28
28
  sh.classList.add(selectorClass);
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@semcore/core",
3
3
  "description": "Semrush Core Component",
4
- "version": "16.0.3",
4
+ "version": "16.0.4-prerelease.1",
5
5
  "main": "lib/index.js",
6
6
  "module": "lib/index.mjs",
7
7
  "typings": "lib/index.d.ts",