@stackoverflow/stacks 3.0.0-beta.3 → 3.0.0-beta.5

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/css/stacks.css +382 -430
  2. package/dist/css/stacks.min.css +1 -1
  3. package/lib/components/button/button.less +214 -375
  4. package/lib/components/menu/menu.less +100 -21
  5. package/lib/components/navigation/navigation.less +60 -36
  6. package/lib/components/pagination/pagination.less +44 -43
  7. package/lib/components/popover/popover.less +3 -5
  8. package/lib/exports/color-sets.less +6 -6
  9. package/package.json +1 -1
package/lib/components/menu/menu.less CHANGED
@@ -1,39 +1,118 @@
1
1
  .s-menu {
2
- --_me-divider-bg: var(--bc-light);
3
- --_me-label-btc: var(--bc-light);
4
- --_me-label-cursor: pointer;
5
-
6
- // CONTEXTUAL STYLES
7
- .dark-mode({
8
- --_me-divider-bg: var(--bc-light);
9
- --_me-label-btc: var(--bc-light);
10
- });
2
+ --_me-action-bg: unset;
3
+ --_me-action-fc: var(--black-500);
4
+ --_me-item-p: var(--su8);
5
+ --_me-after-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='m14 3.88-.44.44-7.34 7.35-.44.44-.44-.44-2.9-2.9L2 8.34l.89-.88.44.44 2.45 2.45 6.9-6.9.44-.44z'/%3E%3C/svg%3E"); // check16
11
6
 
12
7
  // CHILD ELEMENTS
13
8
  & &--divider {
14
- background-color: var(--_me-divider-bg);
9
+ background-color: var(--black-200);
15
10
  height: var(--su-static1);
16
11
  margin: var(--su8) 0;
17
12
  }
18
13
 
19
- & &--label {
20
- &.is-disabled {
21
- --_me-label-cursor: not-allowed;
14
+ & &--icon {
15
+ color: inherit;
16
+ margin-right: var(--su8);
17
+ }
18
+
19
+ & &--item {
20
+ &:has(> .s-menu--action){
21
+ --_me-item-p: 0;
22
+ }
23
+
24
+ &.s-check-control {
25
+ --_me-item-p: var(--su6) var(--su8);
26
+
27
+ .s-radio,
28
+ .s-checkbox {
29
+ margin-top: var(--su4);
30
+ }
31
+
32
+ align-items: flex-start;
33
+ }
34
+
35
+ &:not(.s-check-control) {
36
+ .s-radio,
37
+ .s-checkbox {
38
+ height: 0;
39
+ pointer-events: none;
40
+ position: absolute;
41
+ opacity: 0;
42
+ width: 0;
43
+ }
44
+ }
45
+
46
+ color: var(--_me-action-fc);
47
+ padding: var(--_me-item-p);
48
+
49
+ align-items: center;
50
+ display: flex;
51
+ width: 100%;
52
+ }
53
+
54
+ & &--action {
55
+ &:focus-visible,
56
+ &:has(> input:focus-visible) {
57
+ .focus-styles(true, false);
58
+ }
59
+
60
+ &:focus-visible,
61
+ &:has(> input:focus-visible),
62
+ &:hover {
63
+ --_me-action-bg: var(--black-150);
64
+ --_me-action-fc: var(--black-600);
65
+ }
66
+
67
+ &__danger {
68
+ --_me-action-fc: var(--red-400);
69
+
70
+ &:focus-visible,
71
+ &:hover {
72
+ --_me-action-fc: var(--red-500);
73
+ }
22
74
  }
23
75
 
24
- border-top: var(--su-static1) solid var(--_me-label-btc);
25
- cursor: var(--_me-label-cursor);
26
- padding: var(--su12);
76
+ &.is-selected,
77
+ &:has(input:checked) {
78
+ &:after {
79
+ background-color: var(--_me-action-fc);
80
+ content: "";
81
+ height: var(--su16);
82
+ margin-left: auto;
83
+ width: var(--su16);
84
+ mask-image: var(--_me-after-mask);
85
+ mask-size: contain;
86
+ mask-repeat: no-repeat;
87
+ }
88
+
89
+ }
90
+
91
+ background-color: var(--_me-action-bg);
92
+ color: var(--_me-action-fc);
93
+
94
+ align-items: center;
95
+ border-radius: var(--br-md);
96
+ cursor: pointer;
97
+ display: flex;
98
+ padding: var(--su8);
99
+ width: 100%;
100
+ }
101
+
102
+ & button&--action { // Normalize for when applying to a button
103
+ border: none;
104
+ font-family: inherit;
105
+ line-height: inherit;
106
+ text-align: left;
27
107
  }
28
108
 
29
109
  & &--title {
30
- color: var(--black-500);
31
- font-size: var(--fs-fine);
32
- padding: var(--su8) var(--su12);
33
- text-transform: uppercase;
110
+ color: var(--black-600);
111
+ font-weight: 700;
112
+ padding: var(--su6) var(--su8);
34
113
  }
35
114
 
36
- & li + &--title {
115
+ & &--item + &--title {
37
116
  margin-top: var(--su12);
38
117
  }
39
118
 
package/lib/components/navigation/navigation.less CHANGED
@@ -4,18 +4,20 @@
4
4
  --_na-p: var(--su2) 0;
5
5
  --_na-gap: var(--su4);
6
6
  --_na-item-bg: none;
7
- --_na-item-fc: var(--black-500);
7
+ --_na-item-fc: var(--black-400);
8
8
  --_na-item-fs: unset;
9
- --_na-item-p: var(--su6) var(--su12);
10
- --_na-item-py: var(--su12);
9
+ --_na-item-p: calc(var(--su12) - var(--su1)) var(--su16);
11
10
  --_na-item-ws: nowrap;
12
- --_na-item-bg-hover: var(--black-200);
11
+ --_na-item-bg-hover: var(--black-150);
13
12
  --_na-item-fc-hover: var(--_na-item-fc);
14
- --_na-item-selected-bg: var(--theme-primary);
15
- --_na-item-selected-fc: var(--white);
16
- --_na-item-selected-bg-hover: var(--theme-primary-500);
13
+ --_na-item-selected-bg: none;
14
+ --_na-item-selected-fc: var(--black-600);
15
+ --_na-item-selected-bg-hover: var(--_na-item-bg-hover);
16
+ --_na-item-selected-h: var(--su-static2);
17
17
  --_na-item-text-ta: center;
18
18
  --_na-title-mt: var(--su16);
19
+ --_na-after-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M11.35 4.35 6 9.71.65 4.35l.7-.7L6 8.29l4.65-4.64z'/%3E%3C/svg%3E");
20
+ --_na-after-bg-color: var(--black-400);
19
21
 
20
22
  // CONTEXTUAL STYLES
21
23
  .highcontrast-mode({
@@ -33,7 +35,7 @@
33
35
 
34
36
  &&__sm {
35
37
  --_na-item-fs: var(--fs-caption);
36
- --_na-item-p: var(--su4) var(--su12);
38
+ --_na-item-p: var(--su6) var(--su4);
37
39
  }
38
40
 
39
41
  &&__vertical {
@@ -42,19 +44,20 @@
42
44
  --_na-p: 0;
43
45
  --_na-item-text-ta: unset;
44
46
  --_na-item-ws: normal;
45
- }
47
+ --_na-item-selected-h: 0;
48
+ --_na-item-p: var(--su6) var(--su8);
49
+ & .s-navigation--item {
50
+ &.is-selected {
51
+ --_na-item-bg: var(--black-150);
52
+ }
46
53
 
47
- // VARIANTS
48
- &&__muted {
49
- --_na-item-selected-bg: var(--black-150);
50
- --_na-item-selected-fc: var(--black-600);
51
- --_na-item-selected-bg-hover: var(--_na-item-bg);
52
-
53
- .highcontrast-mode({
54
- --_na-item-selected-bg: var(--black-600);
55
- --_na-item-selected-fc: var(--black-150);
56
- --_na-item-selected-bg-hover: var(--black-600);
57
- });
54
+ &:has(.s-navigation--icon) {
55
+ --_na-item-p: calc(var(--su12) - var(--su1)) var(--su8);
56
+ }
57
+ &:has(.s-navigation--avatar) {
58
+ --_na-item-p: var(--su12) var(--su8);
59
+ }
60
+ }
58
61
  }
59
62
 
60
63
  // CHILD ELEMENTS
@@ -65,8 +68,22 @@
65
68
  --_na-item-fc-hover: var(--_na-item-fc);
66
69
  --_na-item-bg-hover: var(--_na-item-selected-bg-hover);
67
70
 
71
+ &:before {
72
+ .highcontrast-mode({
73
+ height: 0;
74
+ });
75
+ content: "";
76
+ position: absolute;
77
+ bottom: 0;
78
+ left: 0;
79
+ right: 0;
80
+ height: var(--_na-item-selected-h);
81
+ background-color: var(--_na-item-selected-fc);
82
+ }
83
+
68
84
  .highcontrast-mode({
69
- text-decoration: none;
85
+ --_na-item-fc-hover: var(--white);
86
+ box-shadow: inset 0 0 0 var(--su-static1) var(--black-500);
70
87
  });
71
88
 
72
89
  font-weight: bold;
@@ -75,22 +92,22 @@
75
92
  // TODO: include child component class (without variant) on selector
76
93
  &__dropdown {
77
94
  &:after {
78
- border-style: solid;
79
- border-width: var(--su-static4) var(--su-static4) 0 var(--su-static4);
80
- border-color: currentColor transparent;
95
+ mask-image: var(--_na-after-mask);
96
+ mask-size: contain;
97
+ mask-repeat: no-repeat;
98
+ background-color: var(--_na-after-bg-color);
81
99
  content: "";
82
- pointer-events: none;
83
- position: absolute;
84
- right: 0.9em;
85
- top: calc(50% - var(--su-static2)); // 50% - 2px
86
- z-index: var(--zi-active);
100
+ height: var(--su12);
101
+ width: var(--su12);
102
+ margin-left: var(--su8);
87
103
  }
88
-
89
- padding-right: 2em;
90
104
  }
91
105
 
92
106
  &:hover,
93
107
  &:active {
108
+ .highcontrast-mode({
109
+ --_na-after-bg-color: var(--white);
110
+ });
94
111
  background-color: var(--_na-item-bg-hover);
95
112
  color: var(--_na-item-fc-hover);
96
113
  }
@@ -108,7 +125,7 @@
108
125
 
109
126
  align-items: center;
110
127
  border: none; // Reset some things for when the navigation item is also a button
111
- border-radius: 1000px;
128
+ border-radius: var(--br-md);
112
129
  box-shadow: none;
113
130
  cursor: pointer;
114
131
  display: flex;
@@ -137,11 +154,18 @@
137
154
  }
138
155
 
139
156
  margin-top: var(--_na-title-mt);
140
-
141
157
  font-size: var(--fs-fine);
142
- font-weight: bold;
143
- padding: var(--su6) var(--su12);
144
- text-transform: uppercase;
158
+ color: var(--black-400);
159
+ padding: var(--su16) var(--su8);
160
+ }
161
+
162
+ & &--icon {
163
+ color: inherit;
164
+ margin-right: var(--su4);
165
+ }
166
+
167
+ & &--avatar {
168
+ margin-right: var(--su8);
145
169
  }
146
170
 
147
171
  flex-direction: var(--_na-fd);
package/lib/components/pagination/pagination.less CHANGED
@@ -8,70 +8,71 @@
8
8
  }
9
9
 
10
10
  & &--item {
11
- --_pa-item-bg: transparent;
12
- --_pa-item-bc: var(--bc-darker);
13
- --_pa-item-fc: var(--fc-medium);
14
- --_pa-item-bg-focus: var(--black-400);
15
- --_pa-item-fc-focus: var(--white);
16
- --_pa-item-bg-hover: var(--black-225);
17
- --_pa-item-bc-hover: var(--bc-darker);
18
- --_pa-item-fc-hover: var(--fc-dark);
19
-
20
- // CONTEXTUAL STYLES
21
- .highcontrast-mode({ text-decoration: none; });
11
+ --_pa-item-bg: unset;
12
+ --_pa-item-br: unset;
13
+ --_pa-item-fc: var(--black-400);
14
+ --_pa-item-p: var(--su-static4);
22
15
 
23
16
  // MODIFIERS
24
17
  &.is-selected {
25
- --_pa-item-bg: var(--theme-primary);
26
- --_pa-item-bc: transparent;
27
- --_pa-item-fc: var(--white);
28
- --_pa-item-bg-focus: var(--theme-primary-400);
29
- }
30
- &.s-pagination--item__clear {
31
- --_pa-item-bg: transparent;
32
- --_pa-item-bc: transparent;
33
- --_pa-item-fc: inherit;
18
+ --_pa-item-fc: var(--black-600);
19
+
20
+ &:not(:hover):not(:focus-visible):before {
21
+ background-color: var(--black-600);
22
+ content: "";
23
+ height: var(--su-static2);
24
+ left: 0;
25
+ position: absolute;
26
+ right: 0;
27
+ top: 100%;
28
+ }
34
29
  }
35
- // override hover styles to match base styles
36
- &.is-selected,
37
- &.s-pagination--item__clear {
38
- --_pa-item-bc-hover: var(--_pa-item-bc);
39
- --_pa-item-bg-hover: var(--_pa-item-bg);
40
- --_pa-item-fc-hover: var(--_pa-item-fc);
30
+ &.s-pagination--item__nav {
31
+ --_pa-item-bg: var(--black-150);
32
+ --_pa-item-br: var(--br-circle);
33
+ --_pa-item-fc: var(--black-600);
34
+ --_pa-item-p: var(--su-static6);
35
+
36
+ aspect-ratio: 1 / 1;
37
+
38
+ &:hover {
39
+ --_pa-item-bg: var(--black-200);
40
+ }
41
41
  }
42
42
 
43
43
  // INTERACTION
44
- &:hover {
45
- background-color: var(--_pa-item-bg-hover);
46
- border-color: var(--_pa-item-bc-hover);
47
- color: var(--_pa-item-fc-hover);
44
+ &[href]:hover:not(&__nav) {
45
+ --_pa-item-bg: var(--black-150);
46
+ --_pa-item-br: var(--br-pill);
47
+ --_pa-item-fc: var(--black-600);
48
48
  }
49
-
50
49
  &:focus-visible {
51
- .focus-styles(true, true);
50
+ --_pa-item-bg: var(--black-150);
51
+ --_pa-item-fc: var(--black-600);
52
+ .focus-styles(false, true);
52
53
  }
53
-
54
- &:focus-visible,
54
+ &:focus-visible:not(&__nav),
55
55
  &.focus-inset-bordered {
56
- background-color: var(--_pa-item-bg-focus);
57
- color: var(--_pa-item-fc-focus);
56
+ --_pa-item-br: var(--br-md);
58
57
  }
59
58
 
60
59
  background-color: var(--_pa-item-bg);
61
- border: 1px solid var(--_pa-item-bc);
60
+ border-radius: var(--_pa-item-br);
62
61
  color: var(--_pa-item-fc);
62
+ padding: var(--_pa-item-p);
63
63
 
64
- border-radius: var(--br-md);
65
- display: inline-block;
66
- font-size: var(--fs-body1);
67
- line-height: var(--lh-xl);
68
- padding: 0 var(--su8);
64
+ display: inline-flex;
65
+ align-items: center;
66
+ justify-content: center;
67
+ margin: var(--su-static1);
68
+ position: relative;
69
69
  }
70
70
 
71
71
  &,
72
72
  ul {
73
73
  display: flex;
74
+ align-items: center;
74
75
  flex-wrap: wrap;
75
- gap: var(--su4);
76
+ gap: var(--su2);
76
77
  }
77
78
  }
package/lib/components/popover/popover.less CHANGED
@@ -12,9 +12,7 @@
12
12
 
13
13
  // CONTEXTUAL STYLES
14
14
  .dark-mode({
15
- --_po-bg: var(--black-200);
16
- --_po-bc: var(--bc-light);
17
- --_po-bs: var(--bs-lg);
15
+ --_po-bg: var(--black-100);
18
16
  });
19
17
 
20
18
  // MODIFIERS
@@ -33,7 +31,7 @@
33
31
  float: right; // Use floats for title wrapping
34
32
  top: calc(var(--su8) * -1); // Compensate for s-popover's padding
35
33
  right: calc(var(--su8) * -1); // Compensate for s-popover's padding
36
- padding: var(--su8) !important;
34
+ padding: var(--su6) !important;
37
35
  }
38
36
 
39
37
  & &--content {
@@ -44,7 +42,7 @@
44
42
  }
45
43
 
46
44
  background-color: var(--_po-bg);
47
- border: 1px solid var(--_po-bc);
45
+ border: var(--su-static1) solid var(--_po-bc);
48
46
  box-shadow: var(--_po-bs);
49
47
  display: var(--_po-d);
50
48
  min-width: var(--_po-wmn);
package/lib/exports/color-sets.less CHANGED
@@ -94,12 +94,12 @@
94
94
  600: hsv(22, 95%, 44%);
95
95
  }
96
96
  .set-orange-dark() {
97
- 100: hsl(22, 80%, 25%);
98
- 200: hsl(22, 75%, 45%);
99
- 300: hsl(22, 47%, 78%);
100
- 400: hsl(22, 40%, 90%);
101
- 500: hsl(22, 30%, 99%);
102
- 600: hsl(22, 20%, 98%);
97
+ 100: hsv(22, 80%, 25%);
98
+ 200: hsv(22, 75%, 45%);
99
+ 300: hsv(22, 47%, 78%);
100
+ 400: hsv(22, 40%, 90%);
101
+ 500: hsv(22, 30%, 99%);
102
+ 600: hsv(22, 20%, 98%);
103
103
  }
104
104
  .set-orange-hc() {
105
105
  100: hsv(22, 5%, 100%);
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@stackoverflow/stacks",
3
3
  "description": "Stack Overflow’s CSS and Design Pattern Library. Stacks is an atomic CSS library with classes and components for rapidly building Stack Overflow.",
4
- "version": "3.0.0-beta.3",
4
+ "version": "3.0.0-beta.5",
5
5
  "files": [
6
6
  "dist",
7
7
  "lib",