@stackoverflow/stacks 2.0.0-rc.5 → 2.0.0-rc.7
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/css/stacks.css +118 -213
- package/dist/css/stacks.min.css +1 -1
- package/lib/base/body.less +2 -2
- package/lib/components/anchor/anchor.less +3 -3
- package/lib/components/banner/banner.less +2 -2
- package/lib/components/button/button.less +31 -31
- package/lib/components/link/link.less +6 -6
- package/lib/components/link-preview/link-preview.less +3 -3
- package/lib/components/post-summary/post-summary.less +8 -8
- package/lib/components/prose/prose.less +1 -1
- package/lib/components/tag/tag.less +6 -6
- package/lib/components/topbar/topbar.less +44 -44
- package/lib/exports/__snapshots__/color-mixins.less.test.ts.snap +1 -0
- package/lib/exports/__snapshots__/color.less.test.ts.snap +3 -98
- package/lib/exports/color-mixins.less +1 -1
- package/lib/exports/color.less +1 -23
- package/lib/exports/v1/__snapshots__/constants-colors.less.test.ts.snap +3 -3
- package/lib/exports/v1/constants-colors.less +2 -2
- package/package.json +1 -1
- package/lib/exports/theme.less +0 -85
package/lib/exports/color.less
CHANGED
|
@@ -5,29 +5,7 @@ body {
|
|
|
5
5
|
--_o-disabled-static: 0.5;
|
|
6
6
|
--_black-static: .set-black()[default];
|
|
7
7
|
--_white-static: .set-white()[default];
|
|
8
|
-
|
|
9
|
-
&,
|
|
10
|
-
&.themed,
|
|
11
|
-
& .themed {
|
|
12
|
-
color: var(--theme-body-font-color, var(--black-600));
|
|
13
|
-
}
|
|
14
|
-
}
|
|
15
|
-
|
|
16
|
-
// Create aliased utility variables, theme variables
|
|
17
|
-
body:not(.theme-highcontrast),
|
|
18
|
-
body.theme-highcontrast {
|
|
19
|
-
&:not(.theme-dark),
|
|
20
|
-
&.theme-dark .theme-light__forced,
|
|
21
|
-
&.theme-system .theme-light__forced,
|
|
22
|
-
&.theme-dark,
|
|
23
|
-
&:not(.theme-dark) .theme-dark__forced {
|
|
24
|
-
&,
|
|
25
|
-
&.themed,
|
|
26
|
-
& .themed {
|
|
27
|
-
.theme-variables();
|
|
28
|
-
.create-colors(.sets-aliased-utility-variables());
|
|
29
|
-
}
|
|
30
|
-
}
|
|
8
|
+
.create-colors(.sets-aliased-utility-variables());
|
|
31
9
|
}
|
|
32
10
|
|
|
33
11
|
// Light, dark mode
|
|
@@ -134,7 +134,7 @@ body.theme-system .theme-light__forced,
|
|
|
134
134
|
body:not(.theme-dark) .themed,
|
|
135
135
|
body.theme-dark .theme-light__forced .themed,
|
|
136
136
|
body.theme-system .theme-light__forced .themed {
|
|
137
|
-
color: var(--theme-body-font-color);
|
|
137
|
+
color: var(--theme-body-font-color, var(--black-600));
|
|
138
138
|
--theme-primary-color-legacy-h: var(--theme-light-primary-color-legacy-h, var(--theme-base-primary-color-legacy-h));
|
|
139
139
|
--theme-primary-color-legacy-s: var(--theme-light-primary-color-legacy-s, var(--theme-base-primary-color-legacy-s));
|
|
140
140
|
--theme-primary-color-legacy-l: var(--theme-light-primary-color-legacy-l, var(--theme-base-primary-color-legacy-l));
|
|
@@ -289,7 +289,7 @@ body.theme-dark,
|
|
|
289
289
|
body:not(.theme-dark) .theme-dark__forced,
|
|
290
290
|
body.theme-dark .themed,
|
|
291
291
|
body:not(.theme-dark) .theme-dark__forced .themed {
|
|
292
|
-
color: var(--theme-body-font-color);
|
|
292
|
+
color: var(--theme-body-font-color, var(--black-600));
|
|
293
293
|
--theme-primary-color-legacy-h: var(--theme-dark-primary-color-legacy-h, var(--theme-base-primary-color-legacy-h));
|
|
294
294
|
--theme-primary-color-legacy-s: var(--theme-dark-primary-color-legacy-s, var(--theme-base-primary-color-legacy-s));
|
|
295
295
|
--theme-primary-color-legacy-l: var(--theme-dark-primary-color-legacy-l, var(--theme-base-primary-color-legacy-l));
|
|
@@ -442,7 +442,7 @@ body:not(.theme-dark) .theme-dark__forced .themed {
|
|
|
442
442
|
|
|
443
443
|
body.theme-system,
|
|
444
444
|
body.theme-system .themed {
|
|
445
|
-
color: var(--theme-body-font-color);
|
|
445
|
+
color: var(--theme-body-font-color, var(--black-600));
|
|
446
446
|
--theme-primary-color-legacy-h: var(--theme-dark-primary-color-legacy-h, var(--theme-base-primary-color-legacy-h));
|
|
447
447
|
--theme-primary-color-legacy-s: var(--theme-dark-primary-color-legacy-s, var(--theme-base-primary-color-legacy-s));
|
|
448
448
|
--theme-primary-color-legacy-l: var(--theme-dark-primary-color-legacy-l, var(--theme-base-primary-color-legacy-l));
|
|
@@ -528,7 +528,7 @@
|
|
|
528
528
|
|
|
529
529
|
&,
|
|
530
530
|
& .themed {
|
|
531
|
-
color: var(--theme-body-font-color);
|
|
531
|
+
color: var(--theme-body-font-color, var(--black-600));
|
|
532
532
|
.generate-themed-variables(theme-dark);
|
|
533
533
|
// add in the themed "native mixins", making sure to scope to the child .themed elements so they don't use the parent's values
|
|
534
534
|
.dark-themed-colors();
|
|
@@ -856,7 +856,7 @@ body.theme-system .theme-light__forced {
|
|
|
856
856
|
|
|
857
857
|
&,
|
|
858
858
|
& .themed {
|
|
859
|
-
color: var(--theme-body-font-color);
|
|
859
|
+
color: var(--theme-body-font-color, var(--black-600));
|
|
860
860
|
.generate-themed-variables(theme-light);
|
|
861
861
|
// add in the themed "native mixins", making sure to scope to the child .themed elements so they don't use the parent's values
|
|
862
862
|
.light-themed-colors();
|
package/package.json
CHANGED
package/lib/exports/theme.less
DELETED
|
@@ -1,85 +0,0 @@
|
|
|
1
|
-
.theme-variables() {
|
|
2
|
-
--theme-body-font-color: var(--black-600);
|
|
3
|
-
--theme-background-color: var(--white);
|
|
4
|
-
// Links
|
|
5
|
-
--theme-link-color: var(--theme-secondary-400);
|
|
6
|
-
--theme-link-color-hover: var(--theme-secondary-400); // TODO was 350, now same as base link color
|
|
7
|
-
--theme-link-color-visited: var(--theme-secondary-500);
|
|
8
|
-
|
|
9
|
-
// Button Default (Secondary)
|
|
10
|
-
--theme-button-color: var(--theme-secondary-400);
|
|
11
|
-
--theme-button-background-color: transparent;
|
|
12
|
-
--theme-button-hover-color: var(--theme-secondary-500);
|
|
13
|
-
--theme-button-hover-background-color: var(--theme-secondary-200);
|
|
14
|
-
--theme-button-active-background-color: var(--theme-secondary-300);
|
|
15
|
-
--theme-button-selected-color: var(--theme-secondary-600);
|
|
16
|
-
--theme-button-selected-background-color: var(--theme-secondary-300);
|
|
17
|
-
|
|
18
|
-
// Button Primary
|
|
19
|
-
--theme-button-primary-color: var(--white);
|
|
20
|
-
--theme-button-primary-background-color: var(--theme-secondary-400);
|
|
21
|
-
--theme-button-primary-hover-color: var(--white);
|
|
22
|
-
--theme-button-primary-hover-background-color: var(--theme-secondary-500);
|
|
23
|
-
--theme-button-primary-active-background-color: var(--theme-secondary-600);
|
|
24
|
-
--theme-button-primary-selected-color: var(--white);
|
|
25
|
-
--theme-button-primary-selected-background-color: var(--theme-secondary-500);
|
|
26
|
-
--theme-button-primary-number-color: var(--theme-secondary-600);
|
|
27
|
-
|
|
28
|
-
// Button Filled
|
|
29
|
-
--theme-button-filled-color: var(--theme-secondary-500);
|
|
30
|
-
--theme-button-filled-background-color: var(--theme-secondary-200);
|
|
31
|
-
--theme-button-filled-border-color: var(--theme-secondary-400);
|
|
32
|
-
--theme-button-filled-hover-color: var(--theme-secondary-600);
|
|
33
|
-
--theme-button-filled-hover-background-color: var(--theme-secondary-300);
|
|
34
|
-
--theme-button-filled-active-background-color: var(--theme-secondary-300); // TODO was 150, now same as hover bg color
|
|
35
|
-
--theme-button-filled-active-border-color: var(--theme-secondary-400);
|
|
36
|
-
--theme-button-filled-selected-color: var(--theme-secondary-600);
|
|
37
|
-
--theme-button-filled-selected-background-color: var(--theme-secondary-400);
|
|
38
|
-
--theme-button-filled-selected-border-color: var(--theme-secondary-400); // TODO was 500, now same as selected bg color
|
|
39
|
-
|
|
40
|
-
// Button Outline
|
|
41
|
-
--theme-button-outlined-border-color: var(--theme-secondary-400);
|
|
42
|
-
--theme-button-outlined-selected-border-color: var(--theme-secondary-400); // TODO now same as unselected border-color above (above was 350)
|
|
43
|
-
|
|
44
|
-
// Tags
|
|
45
|
-
--theme-tag-color: var(--theme-secondary-500);
|
|
46
|
-
--theme-tag-background-color: var(--theme-secondary-100);
|
|
47
|
-
--theme-tag-border-color: transparent;
|
|
48
|
-
--theme-tag-hover-color: var(--theme-secondary-600);
|
|
49
|
-
--theme-tag-hover-background-color: var(--theme-secondary-200);
|
|
50
|
-
--theme-tag-hover-border-color: transparent;
|
|
51
|
-
|
|
52
|
-
// Topbar
|
|
53
|
-
--theme-topbar-height: calc(var(--su-static48) + var(--su-static8)); // 56px
|
|
54
|
-
--theme-topbar-background-color: var(--white);
|
|
55
|
-
|
|
56
|
-
// Topbar Search input
|
|
57
|
-
--theme-topbar-search-color: var(--black-500);
|
|
58
|
-
--theme-topbar-search-background: var(--white);
|
|
59
|
-
--theme-topbar-search-placeholder: var(--black-400);
|
|
60
|
-
--theme-topbar-search-border: var(--black-300);
|
|
61
|
-
--theme-topbar-search-border-focus: var(--blue-400);
|
|
62
|
-
--theme-topbar-search-shadow-focus: 0 0 0 var(--su-static4) var(--focus-ring);
|
|
63
|
-
|
|
64
|
-
// Topbar Search switcher
|
|
65
|
-
--theme-topbar-select-color: var(--black-500);
|
|
66
|
-
--theme-topbar-select-background: var(--black-200);
|
|
67
|
-
|
|
68
|
-
// Topbar items
|
|
69
|
-
--theme-topbar-item-color: var(--black-500);
|
|
70
|
-
--theme-topbar-item-color-hover: var(--black-600);
|
|
71
|
-
--theme-topbar-item-background-hover: var(--black-200);
|
|
72
|
-
--theme-topbar-item-color-current: var(--black);
|
|
73
|
-
--theme-topbar-item-border-current: var(--theme-primary);
|
|
74
|
-
|
|
75
|
-
// Topbar themed border accent
|
|
76
|
-
--theme-topbar-accent-border: 3px solid var(--theme-primary);
|
|
77
|
-
--theme-topbar-bottom-border: 1px solid var(--black-225);
|
|
78
|
-
|
|
79
|
-
// Post summary
|
|
80
|
-
--theme-post-title-color: var(--theme-link-color);
|
|
81
|
-
--theme-post-title-color-hover: var(--theme-link-color-hover);
|
|
82
|
-
--theme-post-title-color-visited: var(--theme-link-color-visited);
|
|
83
|
-
--theme-post-title-font-family: var(--theme-body-font-family);
|
|
84
|
-
--theme-post-body-font-family: var(--theme-body-font-family);
|
|
85
|
-
}
|