@stackoverflow/stacks 3.0.0-beta.13 → 3.0.0-beta.15

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 (24) hide show
  1. package/dist/css/stacks.css +659 -535
  2. package/dist/css/stacks.min.css +1 -1
  3. package/lib/base/body.less +1 -1
  4. package/lib/components/checkbox_radio/checkbox_radio.less +195 -113
  5. package/lib/components/description/description.less +15 -1
  6. package/lib/components/empty-state/empty-state.less +17 -6
  7. package/lib/components/form-group/form-group.less +25 -0
  8. package/lib/components/input_textarea/input_textarea.less +13 -12
  9. package/lib/components/menu/menu.less +5 -22
  10. package/lib/components/notice/notice.less +82 -73
  11. package/lib/components/popover/popover.less +2 -2
  12. package/lib/components/post-summary/post-summary.less +2 -2
  13. package/lib/components/prose/prose.less +5 -5
  14. package/lib/components/table/table.less +0 -8
  15. package/lib/components/toast/toast.less +1 -2
  16. package/lib/components/user-card/user-card.less +88 -96
  17. package/lib/components/vote/vote.less +134 -0
  18. package/lib/exports/constants-helpers.less +1 -1
  19. package/lib/exports/constants-type.less +18 -36
  20. package/lib/stacks-static.less +2 -2
  21. package/lib/tsconfig.json +1 -1
  22. package/package.json +1 -1
  23. package/lib/components/check-control/check-control.less +0 -17
  24. package/lib/components/check-group/check-group.less +0 -19
package/lib/exports/constants-helpers.less CHANGED
@@ -52,7 +52,7 @@ body {
52
52
  --transition-time: var(--default-transition-duration);
53
53
 
54
54
  // Sizing
55
- --s-full: 97.2307692rem; // Based on a pixel size of 1264px;
55
+ --s-full: 79rem; // Based on a pixel size of 1264px;
56
56
  --s-step: calc(var(--s-full) / 12);
57
57
  }
58
58
 
package/lib/exports/constants-type.less CHANGED
@@ -88,48 +88,30 @@
88
88
  Menlo, Monaco, Consolas, // A few sensible system font choices
89
89
  monospace; // The final fallback for rendering in monospace.
90
90
 
91
- html,
91
+ html {
92
+ font-size: 100%;
93
+ }
94
+
92
95
  body {
93
96
  --ff-sans: @ff-sans;
94
97
  --ff-serif: @ff-serif;
95
98
  --ff-mono: @ff-mono;
96
99
  --theme-body-font-family: var(--ff-sans);
97
100
 
98
- // ============================================================================
99
- // $ FONT SIZES (fs-)
100
- // Base font-size is 13px.
101
- // ----------------------------------------------------------------------------
102
- --fs-fine: 12px;
103
- --fs-caption: 13px;
104
- --fs-body1: 14px;
105
-
106
- // Relative to the root element
107
- --fs-body2: 1.143rem; // 16px
108
- --fs-body3: 1.286rem; // 18px
109
- --fs-subheading: 1.429rem; // 20px
110
- --fs-title: 1.571rem; // 22px
111
- --fs-headline1: 2rem; // 28px
112
- --fs-headline2: 2.571rem; // 36px
113
- --fs-display1: 3.286rem; // 46px
114
- --fs-display2: 4.143rem; // 58px
115
- --fs-display3: 5.143rem; // 72px
116
- --fs-display4: 7.143rem; // 100px
117
-
118
- // Relative to the parent
119
- --fs-body2-relative: 1.143rem; // 16px
120
- --fs-body3-relative: 1.286rem; // 18px
121
- --fs-subheading-relative: 1.429rem; // 20px
122
- --fs-title-relative: 1.571rem; // 22px
123
- --fs-headline1-relative: 2rem; // 28px
124
- --fs-headline2-relative: 2.571rem; // 36px
125
- --fs-display1-relative: 3.286rem; // 46px
126
- --fs-display2-relative: 4.143rem; // 58px
127
- --fs-display3-relative: 5.143rem; // 72px
128
- --fs-display4-relative: 7.143rem; // 100px
129
-
130
- // this value is not using spacing units because the calc involved results
131
- // in unexpected sizing. I'm not sure why, honestly.
132
- --fs-base: 14px;
101
+ // All rem values are relative to the font size applied to <html> (16px by default).
102
+ --fs-fine: 0.75rem; // 12px
103
+ --fs-caption: 0.8125rem; // 13px
104
+ --fs-body1: 0.875rem; // 14px (base font size applied to <body>)
105
+ --fs-body2: 1rem; // 16px
106
+ --fs-body3: 1.125rem; // 18px
107
+ --fs-subheading: 1.25rem; // 20px
108
+ --fs-title: 1.375rem; // 22px
109
+ --fs-headline1: 1.75rem; // 28px
110
+ --fs-headline2: 2.25rem; // 36px
111
+ --fs-display1: 2.875rem; // 46px
112
+ --fs-display2: 3.625rem; // 58px
113
+ --fs-display3: 4.5rem; // 72px
114
+ --fs-display4: 6.25rem; // 100px
133
115
 
134
116
  // ============================================================================
135
117
  // $ LINE HEIGHT (lh-)
package/lib/stacks-static.less CHANGED
@@ -17,9 +17,8 @@
17
17
  @import "components/button/button.less";
18
18
  @import "components/button-group/button-group.less";
19
19
  @import "components/card/card.less";
20
- @import "components/check-control/check-control.less";
21
- @import "components/check-group/check-group.less";
22
20
  @import "components/checkbox_radio/checkbox_radio.less";
21
+ @import "components/form-group/form-group.less";
23
22
  @import "components/code-block/code-block.less";
24
23
  @import "components/description/description.less";
25
24
  @import "components/empty-state/empty-state.less";
@@ -53,6 +52,7 @@
53
52
  @import "components/topbar/topbar.less";
54
53
  @import "components/uploader/uploader.less";
55
54
  @import "components/user-card/user-card.less";
55
+ @import "components/vote/vote.less";
56
56
 
57
57
  // LESS CONSTANTS AND MIXINS
58
58
  @import "exports/exports.less";
package/lib/tsconfig.json CHANGED
@@ -5,7 +5,7 @@
5
5
  "lib": ["dom", "es6", "dom.iterable", "scripthost"],
6
6
  "outDir": "../dist",
7
7
  "sourceMap": true,
8
- "moduleResolution": "node",
8
+ "moduleResolution": "bundler",
9
9
  "skipLibCheck": true,
10
10
  "declaration": true,
11
11
  "allowSyntheticDefaultImports": true,
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.13",
4
+ "version": "3.0.0-beta.15",
5
5
  "files": [
6
6
  "dist",
7
7
  "lib",
package/lib/components/check-control/check-control.less DELETED
@@ -1,17 +0,0 @@
1
- .s-check-control { // TODO would _love_ to use .s-check instead, with no class on the input itself
2
- --_cc-ai: center;
3
-
4
- // CONTEXTUAL STYLES
5
- .s-check-group & {
6
- --_cc-ai: flex-start; // manually align the checkboxes and radios to the top of the group
7
- }
8
-
9
- // CHILD ELEMENTS
10
- .s-label {
11
- font-weight: normal;
12
- }
13
-
14
- align-items: var(--_cc-ai);
15
- display: flex;
16
- gap: var(--su8);
17
- }
package/lib/components/check-group/check-group.less DELETED
@@ -1,19 +0,0 @@
1
- .s-check-group {
2
- --_cg-fd: column;
3
-
4
- // MODIFIERS
5
- &&__horizontal {
6
- --_cg-fd: row;
7
- }
8
-
9
- // CHILD ELEMENTS
10
- // TODO HACK? <legend> isn't respecting gap...
11
- legend.s-label {
12
- margin-bottom: var(--su8);
13
- }
14
-
15
- flex-direction: var(--_cg-fd);
16
-
17
- display: flex;
18
- gap: var(--su8);
19
- }