finsignal-feed-explore 3.3.1 → 3.4.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.
- package/dist/FeedList.css +3 -3
- package/dist/components/FilterButton.d.ts +1 -2
- package/dist/components/FilterButton.d.ts.map +1 -1
- package/dist/components/FilterButton.js +5 -3
- package/dist/components/FilterButton.js.map +1 -1
- package/dist/components/SearchButton.d.ts +1 -1
- package/dist/components/SearchButton.d.ts.map +1 -1
- package/dist/components/SearchButton.js +3 -2
- package/dist/components/SearchButton.js.map +1 -1
- package/dist/filters/FiltersOverlay.css +41 -4
- package/dist/filters/FiltersOverlay.css.map +1 -1
- package/dist/newsfeed.css +3 -3
- package/dist/snippets/NewsSnippet.css +5 -5
- package/dist/styles/globals.css +2 -2
- package/package.json +1 -1
package/dist/FeedList.css
CHANGED
|
@@ -5,7 +5,7 @@
|
|
|
5
5
|
/* CSS Variables for theming - Global for all components */
|
|
6
6
|
:root {
|
|
7
7
|
/* Light theme colors */
|
|
8
|
-
--
|
|
8
|
+
--base-bg: #ffffff;
|
|
9
9
|
--news-text-primary: #242429;
|
|
10
10
|
--news-text-secondary: rgba(4, 4, 5, 0.56);
|
|
11
11
|
--news-text-tertiary: rgba(4, 4, 5, 0.36);
|
|
@@ -21,7 +21,7 @@
|
|
|
21
21
|
|
|
22
22
|
.dark {
|
|
23
23
|
/* Dark theme colors */
|
|
24
|
-
--
|
|
24
|
+
--base-bg: #1C1C1F;
|
|
25
25
|
--news-text-primary: #ffffff;
|
|
26
26
|
--news-text-secondary: rgba(255, 255, 255, 0.7);
|
|
27
27
|
--news-text-tertiary: rgba(255, 255, 255, 0.5);
|
|
@@ -103,7 +103,7 @@
|
|
|
103
103
|
display: flex;
|
|
104
104
|
flex-direction: column;
|
|
105
105
|
gap: 0;
|
|
106
|
-
background-color: var(--
|
|
106
|
+
background-color: var(--base-bg);
|
|
107
107
|
scrollbar-width: none;
|
|
108
108
|
-ms-overflow-style: none;
|
|
109
109
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"FilterButton.d.ts","sourceRoot":"","sources":["../../src/components/FilterButton.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAG1B,MAAM,WAAW,iBAAiB;IAIhC,aAAa,EAAE,OAAO,CAAC;IAKvB,WAAW,EAAE,MAAM,CAAC;IAKpB,OAAO,EAAE,MAAM,IAAI,CAAC;IAKpB,SAAS,CAAC,EAAE,MAAM,CAAC;IAMnB,
|
|
1
|
+
{"version":3,"file":"FilterButton.d.ts","sourceRoot":"","sources":["../../src/components/FilterButton.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAG1B,MAAM,WAAW,iBAAiB;IAIhC,aAAa,EAAE,OAAO,CAAC;IAKvB,WAAW,EAAE,MAAM,CAAC;IAKpB,OAAO,EAAE,MAAM,IAAI,CAAC;IAKpB,SAAS,CAAC,EAAE,MAAM,CAAC;IAMnB,KAAK,CAAC,EAAE,OAAO,GAAG,MAAM,CAAC;IAMzB,oBAAoB,CAAC,EAAE,MAAM,CAAC;IAM9B,cAAc,CAAC,EAAE,MAAM,CAAC;CACzB;AA4BD,eAAO,MAAM,YAAY,EAAE,KAAK,CAAC,EAAE,CAAC,iBAAiB,CAoEpD,CAAC"}
|
|
@@ -1,6 +1,8 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
2
|
import { FilterIcon } from './icons';
|
|
3
|
-
export const FilterButton = ({ isFiltersOpen, filterCount, onClick, className = '',
|
|
3
|
+
export const FilterButton = ({ isFiltersOpen, filterCount, onClick, className = '', theme = 'light', badgeBackgroundColor = '#2d3339', badgeTextColor = '#ffffff' }) => {
|
|
4
|
+
const iconColor = theme === 'light' ? 'rgba(255, 255, 255, 0.6)' : 'rgba(4, 4, 5, 0.56)';
|
|
5
|
+
const closeIconColor = '#7863F6';
|
|
4
6
|
if (isFiltersOpen) {
|
|
5
7
|
return (React.createElement("button", { onClick: onClick, className: `header-icon filter-button ${className}`, "aria-label": "Close filters" },
|
|
6
8
|
React.createElement("svg", { width: "20", height: "20", viewBox: "0 0 20 20", fill: "none", xmlns: "http://www.w3.org/2000/svg" },
|
|
@@ -8,7 +10,7 @@ export const FilterButton = ({ isFiltersOpen, filterCount, onClick, className =
|
|
|
8
10
|
}
|
|
9
11
|
if (filterCount > 0) {
|
|
10
12
|
return (React.createElement("button", { onClick: onClick, className: `header-icon filter-button filter-button--with-badge ${className}`, "aria-label": `Open filters (${filterCount} applied)` },
|
|
11
|
-
React.createElement(FilterIcon, { size: 15, color:
|
|
13
|
+
React.createElement(FilterIcon, { size: 15, color: iconColor }),
|
|
12
14
|
React.createElement("div", { className: "filter-button__badge", style: {
|
|
13
15
|
backgroundColor: badgeBackgroundColor,
|
|
14
16
|
color: badgeTextColor
|
|
@@ -16,6 +18,6 @@ export const FilterButton = ({ isFiltersOpen, filterCount, onClick, className =
|
|
|
16
18
|
React.createElement("span", { className: "filter-button__badge-text" }, filterCount))));
|
|
17
19
|
}
|
|
18
20
|
return (React.createElement("button", { onClick: onClick, className: `header-icon filter-button ${className}`, "aria-label": "Open filters" },
|
|
19
|
-
React.createElement(FilterIcon, { size: 15, color:
|
|
21
|
+
React.createElement(FilterIcon, { size: 15, color: iconColor })));
|
|
20
22
|
};
|
|
21
23
|
//# sourceMappingURL=FilterButton.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"FilterButton.js","sourceRoot":"","sources":["../../src/components/FilterButton.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,UAAU,EAAE,MAAM,SAAS,CAAC;
|
|
1
|
+
{"version":3,"file":"FilterButton.js","sourceRoot":"","sources":["../../src/components/FilterButton.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,UAAU,EAAE,MAAM,SAAS,CAAC;AAoErC,MAAM,CAAC,MAAM,YAAY,GAAgC,CAAC,EACxD,aAAa,EACb,WAAW,EACX,OAAO,EACP,SAAS,GAAG,EAAE,EACd,KAAK,GAAG,OAAO,EACf,oBAAoB,GAAG,SAAS,EAChC,cAAc,GAAG,SAAS,EAC3B,EAAE,EAAE;IAEH,MAAM,SAAS,GAAG,KAAK,KAAK,OAAO,CAAC,CAAC,CAAC,0BAA0B,CAAC,CAAC,CAAC,qBAAqB,CAAC;IACzF,MAAM,cAAc,GAAG,SAAS,CAAC;IAGjC,IAAI,aAAa,EAAE,CAAC;QAClB,OAAO,CACL,gCACE,OAAO,EAAE,OAAO,EAChB,SAAS,EAAE,6BAA6B,SAAS,EAAE,gBACxC,eAAe;YAE1B,6BAAK,KAAK,EAAC,IAAI,EAAC,MAAM,EAAC,IAAI,EAAC,OAAO,EAAC,WAAW,EAAC,IAAI,EAAC,MAAM,EAAC,KAAK,EAAC,4BAA4B;gBAC5F,8BACE,CAAC,EAAC,sBAAsB,EACxB,MAAM,EAAE,cAAc,EACtB,WAAW,EAAC,KAAK,EACjB,aAAa,EAAC,OAAO,EACrB,cAAc,EAAC,OAAO,GACtB,CACE,CACC,CACV,CAAC;IACJ,CAAC;IAGD,IAAI,WAAW,GAAG,CAAC,EAAE,CAAC;QACpB,OAAO,CACL,gCACE,OAAO,EAAE,OAAO,EAChB,SAAS,EAAE,uDAAuD,SAAS,EAAE,gBACjE,iBAAiB,WAAW,WAAW;YAEnD,oBAAC,UAAU,IAAC,IAAI,EAAE,EAAE,EAAE,KAAK,EAAE,SAAS,GAAI;YAC1C,6BACE,SAAS,EAAC,sBAAsB,EAChC,KAAK,EAAE;oBACL,eAAe,EAAE,oBAAoB;oBACrC,KAAK,EAAE,cAAc;iBACtB;gBAED,8BAAM,SAAS,EAAC,2BAA2B,IACxC,WAAW,CACP,CACH,CACC,CACV,CAAC;IACJ,CAAC;IAGD,OAAO,CACL,gCACE,OAAO,EAAE,OAAO,EAChB,SAAS,EAAE,6BAA6B,SAAS,EAAE,gBACxC,cAAc;QAEzB,oBAAC,UAAU,IAAC,IAAI,EAAE,EAAE,EAAE,KAAK,EAAE,SAAS,GAAI,CACnC,CACV,CAAC;AACJ,CAAC,CAAC"}
|
|
@@ -2,7 +2,7 @@ import React from 'react';
|
|
|
2
2
|
export interface SearchButtonProps {
|
|
3
3
|
onClick: () => void;
|
|
4
4
|
className?: string;
|
|
5
|
-
|
|
5
|
+
theme?: 'light' | 'dark';
|
|
6
6
|
}
|
|
7
7
|
export declare const SearchButton: React.FC<SearchButtonProps>;
|
|
8
8
|
//# sourceMappingURL=SearchButton.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"SearchButton.d.ts","sourceRoot":"","sources":["../../src/components/SearchButton.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,MAAM,WAAW,iBAAiB;IAIhC,OAAO,EAAE,MAAM,IAAI,CAAC;IAKpB,SAAS,CAAC,EAAE,MAAM,CAAC;IAMnB,
|
|
1
|
+
{"version":3,"file":"SearchButton.d.ts","sourceRoot":"","sources":["../../src/components/SearchButton.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,MAAM,WAAW,iBAAiB;IAIhC,OAAO,EAAE,MAAM,IAAI,CAAC;IAKpB,SAAS,CAAC,EAAE,MAAM,CAAC;IAMnB,KAAK,CAAC,EAAE,OAAO,GAAG,MAAM,CAAC;CAC1B;AAeD,eAAO,MAAM,YAAY,EAAE,KAAK,CAAC,EAAE,CAAC,iBAAiB,CAyBpD,CAAC"}
|
|
@@ -1,7 +1,8 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
|
-
export const SearchButton = ({ onClick, className = '',
|
|
2
|
+
export const SearchButton = ({ onClick, className = '', theme = 'light' }) => {
|
|
3
|
+
const iconColor = theme === 'light' ? 'rgba(255, 255, 255, 0.6)' : 'rgba(4, 4, 5, 0.56)';
|
|
3
4
|
return (React.createElement("button", { onClick: onClick, className: `header-icon search-button ${className}`, "aria-label": "Search" },
|
|
4
5
|
React.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", width: "15", height: "15", viewBox: "0 0 15 15", fill: "none" },
|
|
5
|
-
React.createElement("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M6.375 0C9.89582 0 12.75 2.85418 12.75 6.375C12.75 7.86509 12.237 9.23438 11.3804 10.3198L14.7803 13.7197L14.8315 13.7769C15.0718 14.0714 15.0549 14.5057 14.7803 14.7803C14.5057 15.0549 14.0714 15.0718 13.7769 14.8315L13.7197 14.7803L10.3198 11.3804C9.23438 12.237 7.86509 12.75 6.375 12.75C2.85418 12.75 0 9.89581 0 6.375C0 2.85418 2.85418 0 6.375 0ZM6.375 1.5C3.68261 1.5 1.5 3.68261 1.5 6.375C1.5 9.06739 3.68261 11.25 6.375 11.25C9.06739 11.25 11.25 9.06739 11.25 6.375C11.25 3.68261 9.06739 1.5 6.375 1.5Z", fill: iconColor, fillOpacity: "
|
|
6
|
+
React.createElement("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M6.375 0C9.89582 0 12.75 2.85418 12.75 6.375C12.75 7.86509 12.237 9.23438 11.3804 10.3198L14.7803 13.7197L14.8315 13.7769C15.0718 14.0714 15.0549 14.5057 14.7803 14.7803C14.5057 15.0549 14.0714 15.0718 13.7769 14.8315L13.7197 14.7803L10.3198 11.3804C9.23438 12.237 7.86509 12.75 6.375 12.75C2.85418 12.75 0 9.89581 0 6.375C0 2.85418 2.85418 0 6.375 0ZM6.375 1.5C3.68261 1.5 1.5 3.68261 1.5 6.375C1.5 9.06739 3.68261 11.25 6.375 11.25C9.06739 11.25 11.25 9.06739 11.25 6.375C11.25 3.68261 9.06739 1.5 6.375 1.5Z", fill: iconColor, fillOpacity: "1" }))));
|
|
6
7
|
};
|
|
7
8
|
//# sourceMappingURL=SearchButton.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"SearchButton.js","sourceRoot":"","sources":["../../src/components/SearchButton.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;
|
|
1
|
+
{"version":3,"file":"SearchButton.js","sourceRoot":"","sources":["../../src/components/SearchButton.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAiC1B,MAAM,CAAC,MAAM,YAAY,GAAgC,CAAC,EACxD,OAAO,EACP,SAAS,GAAG,EAAE,EACd,KAAK,GAAG,OAAO,EAChB,EAAE,EAAE;IAEH,MAAM,SAAS,GAAG,KAAK,KAAK,OAAO,CAAC,CAAC,CAAC,0BAA0B,CAAC,CAAC,CAAC,qBAAqB,CAAC;IAEzF,OAAO,CACL,gCACE,OAAO,EAAE,OAAO,EAChB,SAAS,EAAE,6BAA6B,SAAS,EAAE,gBACxC,QAAQ;QAEnB,6BAAK,KAAK,EAAC,4BAA4B,EAAC,KAAK,EAAC,IAAI,EAAC,MAAM,EAAC,IAAI,EAAC,OAAO,EAAC,WAAW,EAAC,IAAI,EAAC,MAAM;YAC5F,8BACE,QAAQ,EAAC,SAAS,EAClB,QAAQ,EAAC,SAAS,EAClB,CAAC,EAAC,ggBAAggB,EAClgB,IAAI,EAAE,SAAS,EACf,WAAW,EAAC,GAAG,GACf,CACE,CACC,CACV,CAAC;AACJ,CAAC,CAAC"}
|
|
@@ -1,7 +1,40 @@
|
|
|
1
|
+
/* Import global variables */
|
|
2
|
+
/* CSS Variables for theming - Global for all components */
|
|
3
|
+
:root {
|
|
4
|
+
/* Light theme colors */
|
|
5
|
+
--base-bg: #ffffff;
|
|
6
|
+
--news-text-primary: #242429;
|
|
7
|
+
--news-text-secondary: rgba(4, 4, 5, 0.56);
|
|
8
|
+
--news-text-tertiary: rgba(4, 4, 5, 0.36);
|
|
9
|
+
--news-border: rgba(36, 36, 41, 0.08);
|
|
10
|
+
--news-hover-overlay: rgba(0, 0, 0, 0.04);
|
|
11
|
+
--news-ai-summary-bg: rgba(120, 99, 246, 0.12);
|
|
12
|
+
--news-ai-summary-text: rgba(4, 4, 5, 0.88);
|
|
13
|
+
--news-stock-card-bg: rgba(4, 4, 5, 0.04);
|
|
14
|
+
--news-stock-positive: #10b981;
|
|
15
|
+
--news-stock-negative: #ef4444;
|
|
16
|
+
--news-action-hover: rgba(4, 4, 5, 0.06);
|
|
17
|
+
}
|
|
18
|
+
|
|
19
|
+
.dark {
|
|
20
|
+
/* Dark theme colors */
|
|
21
|
+
--base-bg: #1C1C1F;
|
|
22
|
+
--news-text-primary: #ffffff;
|
|
23
|
+
--news-text-secondary: rgba(255, 255, 255, 0.7);
|
|
24
|
+
--news-text-tertiary: rgba(255, 255, 255, 0.5);
|
|
25
|
+
--news-border: rgba(255, 255, 255, 0.12);
|
|
26
|
+
--news-hover-overlay: rgba(255, 255, 255, 0.06);
|
|
27
|
+
--news-ai-summary-bg: rgba(120, 99, 246, 0.12);
|
|
28
|
+
--news-ai-summary-text: rgba(255, 255, 255, 0.88);
|
|
29
|
+
--news-stock-card-bg: rgba(255, 255, 255, 0.08);
|
|
30
|
+
--news-stock-positive: #34d399;
|
|
31
|
+
--news-stock-negative: #f87171;
|
|
32
|
+
--news-action-hover: rgba(255, 255, 255, 0.06);
|
|
33
|
+
}
|
|
34
|
+
|
|
1
35
|
/* CSS Variables for theming */
|
|
2
36
|
:root {
|
|
3
37
|
/* Light theme colors */
|
|
4
|
-
--filters-bg: #ffffff;
|
|
5
38
|
--filters-text-primary: #242429;
|
|
6
39
|
--filters-text-secondary: rgba(4, 4, 5, 0.56);
|
|
7
40
|
--filters-btn-reset-bg: #E8E9EA;
|
|
@@ -15,7 +48,6 @@
|
|
|
15
48
|
|
|
16
49
|
.dark {
|
|
17
50
|
/* Dark theme colors */
|
|
18
|
-
--filters-bg: #1a1a1e;
|
|
19
51
|
--filters-text-primary: #ffffff;
|
|
20
52
|
--filters-text-secondary: rgba(255, 255, 255, 0.6);
|
|
21
53
|
--filters-btn-reset-bg: rgba(255, 255, 255, 0.12);
|
|
@@ -32,7 +64,7 @@
|
|
|
32
64
|
flex-direction: column;
|
|
33
65
|
height: 100%;
|
|
34
66
|
width: 100%;
|
|
35
|
-
background: var(--
|
|
67
|
+
background: var(--base-bg);
|
|
36
68
|
}
|
|
37
69
|
|
|
38
70
|
.filters-overlay__content {
|
|
@@ -42,6 +74,11 @@
|
|
|
42
74
|
display: flex;
|
|
43
75
|
flex-direction: column;
|
|
44
76
|
gap: 24px;
|
|
77
|
+
scrollbar-width: none;
|
|
78
|
+
-ms-overflow-style: none;
|
|
79
|
+
}
|
|
80
|
+
.filters-overlay__content::-webkit-scrollbar {
|
|
81
|
+
display: none;
|
|
45
82
|
}
|
|
46
83
|
|
|
47
84
|
.filters-overlay__category {
|
|
@@ -71,7 +108,7 @@
|
|
|
71
108
|
display: flex;
|
|
72
109
|
gap: 12px;
|
|
73
110
|
padding: 16px;
|
|
74
|
-
background: var(--
|
|
111
|
+
background: var(--base-bg);
|
|
75
112
|
flex-shrink: 0;
|
|
76
113
|
z-index: 10;
|
|
77
114
|
box-shadow: 0 -2px 8px var(--filters-shadow);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sourceRoot":"","sources":["../../src/filters/FiltersOverlay.scss"],"names":[],"mappings":"AAAA;AACA;AACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGF;AACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;;;
|
|
1
|
+
{"version":3,"sourceRoot":"","sources":["../../src/filters/FiltersOverlay.scss","../../src/styles/globals.scss"],"names":[],"mappings":"AAAA;ACAA;AACA;AACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGF;AACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AD3BF;AACA;AACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGF;AACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;;;AAIJ;EACE;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;;AAEA;EACE;;AAIJ;EACE;EACA;;AAEA;EACE;;AAGF;EACE","file":"FiltersOverlay.css"}
|
package/dist/newsfeed.css
CHANGED
|
@@ -5,7 +5,7 @@
|
|
|
5
5
|
/* CSS Variables for theming - Global for all components */
|
|
6
6
|
:root {
|
|
7
7
|
/* Light theme colors */
|
|
8
|
-
--
|
|
8
|
+
--base-bg: #ffffff;
|
|
9
9
|
--news-text-primary: #242429;
|
|
10
10
|
--news-text-secondary: rgba(4, 4, 5, 0.56);
|
|
11
11
|
--news-text-tertiary: rgba(4, 4, 5, 0.36);
|
|
@@ -21,7 +21,7 @@
|
|
|
21
21
|
|
|
22
22
|
.dark {
|
|
23
23
|
/* Dark theme colors */
|
|
24
|
-
--
|
|
24
|
+
--base-bg: #1C1C1F;
|
|
25
25
|
--news-text-primary: #ffffff;
|
|
26
26
|
--news-text-secondary: rgba(255, 255, 255, 0.7);
|
|
27
27
|
--news-text-tertiary: rgba(255, 255, 255, 0.5);
|
|
@@ -103,7 +103,7 @@
|
|
|
103
103
|
display: flex;
|
|
104
104
|
flex-direction: column;
|
|
105
105
|
gap: 0;
|
|
106
|
-
background-color: var(--
|
|
106
|
+
background-color: var(--base-bg);
|
|
107
107
|
scrollbar-width: none;
|
|
108
108
|
-ms-overflow-style: none;
|
|
109
109
|
}
|
|
@@ -3,7 +3,7 @@
|
|
|
3
3
|
/* CSS Variables for theming - Global for all components */
|
|
4
4
|
:root {
|
|
5
5
|
/* Light theme colors */
|
|
6
|
-
--
|
|
6
|
+
--base-bg: #ffffff;
|
|
7
7
|
--news-text-primary: #242429;
|
|
8
8
|
--news-text-secondary: rgba(4, 4, 5, 0.56);
|
|
9
9
|
--news-text-tertiary: rgba(4, 4, 5, 0.36);
|
|
@@ -19,7 +19,7 @@
|
|
|
19
19
|
|
|
20
20
|
.dark {
|
|
21
21
|
/* Dark theme colors */
|
|
22
|
-
--
|
|
22
|
+
--base-bg: #1C1C1F;
|
|
23
23
|
--news-text-primary: #ffffff;
|
|
24
24
|
--news-text-secondary: rgba(255, 255, 255, 0.7);
|
|
25
25
|
--news-text-tertiary: rgba(255, 255, 255, 0.5);
|
|
@@ -43,7 +43,7 @@
|
|
|
43
43
|
cursor: poInter Variable;
|
|
44
44
|
transition: background-color 0.2s ease;
|
|
45
45
|
position: relative;
|
|
46
|
-
background-color: var(--
|
|
46
|
+
background-color: var(--base-bg);
|
|
47
47
|
/* Hover overlay effect */
|
|
48
48
|
}
|
|
49
49
|
.news-snippet::before {
|
|
@@ -165,7 +165,7 @@
|
|
|
165
165
|
align-items: center;
|
|
166
166
|
justify-content: center;
|
|
167
167
|
background: var(--news-text-tertiary);
|
|
168
|
-
color: var(--
|
|
168
|
+
color: var(--base-bg);
|
|
169
169
|
font-size: 10px;
|
|
170
170
|
font-weight: 600;
|
|
171
171
|
}
|
|
@@ -262,7 +262,7 @@
|
|
|
262
262
|
align-items: center;
|
|
263
263
|
justify-content: center;
|
|
264
264
|
background: var(--news-text-tertiary);
|
|
265
|
-
color: var(--
|
|
265
|
+
color: var(--base-bg);
|
|
266
266
|
font-size: 10px;
|
|
267
267
|
font-weight: 600;
|
|
268
268
|
}
|
package/dist/styles/globals.css
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
/* CSS Variables for theming - Global for all components */
|
|
2
2
|
:root {
|
|
3
3
|
/* Light theme colors */
|
|
4
|
-
--
|
|
4
|
+
--base-bg: #ffffff;
|
|
5
5
|
--news-text-primary: #242429;
|
|
6
6
|
--news-text-secondary: rgba(4, 4, 5, 0.56);
|
|
7
7
|
--news-text-tertiary: rgba(4, 4, 5, 0.36);
|
|
@@ -17,7 +17,7 @@
|
|
|
17
17
|
|
|
18
18
|
.dark {
|
|
19
19
|
/* Dark theme colors */
|
|
20
|
-
--
|
|
20
|
+
--base-bg: #1C1C1F;
|
|
21
21
|
--news-text-primary: #ffffff;
|
|
22
22
|
--news-text-secondary: rgba(255, 255, 255, 0.7);
|
|
23
23
|
--news-text-tertiary: rgba(255, 255, 255, 0.5);
|