@myst-theme/styles 0.4.1 → 0.5.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.
Files changed (5) hide show
  1. package/.turbo/turbo-build.log +2 -2
  2. package/CHANGELOG.md +11 -0
  3. package/grid-system.css +12 -5
  4. package/index.js +15 -2
  5. package/package.json +1 -1
package/.turbo/turbo-build.log CHANGED
@@ -1,8 +1,8 @@
1
1
 
2
- > @myst-theme/styles@0.4.1 build
2
+ > @myst-theme/styles@0.5.0 build
3
3
  > tailwindcss -m -i ./app.css -o ../docs/public/tailwind.css
4
4
 
5
5
 
6
6
  Rebuilding...
7
7
 
8
- Done in 524ms.
8
+ Done in 9307ms.
package/CHANGELOG.md CHANGED
@@ -1,5 +1,16 @@
1
1
  # @myst-theme/styles
2
2
 
3
+ ## 0.5.0
4
+
5
+ ### Minor Changes
6
+
7
+ - 0536fa7: Rename styles to allow for additional grid systems:
8
+
9
+ - `article-grid-gap` to `grid-gap`
10
+ - `article-subgrid-gap` to `subgrid-gap`
11
+
12
+ ## 0.4.2
13
+
3
14
  ## 0.4.1
4
15
 
5
16
  ## 0.4.0
package/grid-system.css CHANGED
@@ -6,25 +6,32 @@
6
6
  .article-grid {
7
7
  @apply grid content-start grid-cols-article-sm md:grid-cols-article-md lg:grid-cols-article-lg xl:grid-cols-article-xl 2xl:grid-cols-article-2xl;
8
8
  }
9
- .article-grid > * {
9
+ .article-left-grid {
10
+ @apply grid content-start grid-cols-article-sm md:grid-cols-article-left-md lg:grid-cols-article-left-lg xl:grid-cols-article-left-xl 2xl:grid-cols-article-left-2xl;
11
+ }
12
+ .article-grid > *,
13
+ .article-left-grid > * {
10
14
  /* The default is spanning the body for any child component */
11
15
  @apply col-body;
12
16
  /* Grids do not have margin-collapse, so each direct child needs to be addressed */
13
17
  margin-top: 0 !important;
14
18
  }
15
- .article-grid-gap {
19
+ .grid-gap {
16
20
  @apply gap-1 md:gap-2 xl:gap-3 2xl:gap-4;
17
21
  }
18
- .article-subgrid-gap {
22
+ .subgrid-gap {
19
23
  @apply gap-x-1 md:gap-x-2 xl:gap-x-3 2xl:gap-x-4;
20
24
  }
21
25
  /* These columns need more responsive design */
22
26
  .col-margin-left {
23
- @apply col-margin-left-sm xl:col-margin-left-lg;
27
+ @apply col-body xl:col-margin-left-lg;
24
28
  }
25
29
  .col-margin-right,
26
30
  .col-margin {
27
- @apply col-margin-right-sm lg:col-margin-right-lg;
31
+ @apply col-body lg:col-margin-right-lg;
32
+ }
33
+ .col-margin-right-inset {
34
+ @apply col-body lg:col-margin-right-inset-lg;
28
35
  }
29
36
  .col-gutter-page-right {
30
37
  @apply col-gutter-page-right-sm md:col-gutter-page-right-md lg:col-gutter-page-right-lg;
package/index.js CHANGED
@@ -28,6 +28,15 @@ const themeExtensions = {
28
28
  '[screen-start] 0.25rem [screen-inset-start] 1fr [page-start] 3rem [page-inset-start] minmax(4rem, 9rem) [body-outset-start] 3rem [body-start gutter-left-start] 1rem [body-inset-start] minmax(8ch, 10ch) [middle-start] minmax(8ch, 10ch) [gutter-left-end] minmax(8ch, 10ch) minmax(8ch, 10ch) [gutter-right-start] minmax(8ch, 10ch) [middle-end] minmax(8ch, 10ch) [body-inset-end] 1rem [body-end gutter-right-end] 3rem [body-outset-end] minmax(5rem, 13rem) [page-inset-end] 3rem [page-end] 1fr [screen-inset-end] 0.25rem [screen-end]',
29
29
  'article-2xl':
30
30
  '[screen-start] 0.5rem [screen-inset-start] 1fr [page-start] 3rem [page-inset-start] minmax(4rem, 9rem) [body-outset-start] 3rem [body-start gutter-left-start] 1rem [body-inset-start] minmax(8ch, 10ch) [middle-start] minmax(8ch, 10ch) [gutter-left-end] minmax(8ch, 10ch) minmax(8ch, 10ch) [gutter-right-start] minmax(8ch, 10ch) [middle-end] minmax(8ch, 10ch) [body-inset-end] 1rem [body-end gutter-right-end] 3rem [body-outset-end] minmax(5rem, 13rem) [page-inset-end] 3rem [page-end] 1fr [screen-inset-end] 0.5rem [screen-end]',
31
+ // article - left theme
32
+ 'article-left-md':
33
+ '[screen-start] 0.5rem [screen-inset-start page-start page-inset-start body-outset-start] 1rem [body-start gutter-left-start] 1rem [body-inset-start] minmax(5ch, 15ch) [middle-start] minmax(5ch, 15ch) [gutter-left-end] minmax(5ch, 15ch) minmax(5ch, 15ch) [gutter-right-start] minmax(5ch, 15ch) [middle-end] minmax(5ch, 15ch) [body-inset-end] 1rem [body-end gutter-right-end body-outset-end page-inset-end] 1rem [page-end screen-inset-end] 0.5rem [screen-end]',
34
+ 'article-left-lg':
35
+ '[screen-start] 0.5rem [screen-inset-start page-start page-inset-start body-outset-start] 1rem [body-start gutter-left-start] 1rem [body-inset-start] minmax(5ch, 12ch) [middle-start] minmax(5ch, 12ch) [gutter-left-end] minmax(5ch, 12ch) minmax(5ch, 12ch) [gutter-right-start] minmax(5ch, 12ch) [middle-end] minmax(5ch, 12ch) [body-inset-end] 1rem [body-end] 1fr [gutter-right-end] 1rem [body-outset-end] minmax(10rem, 18rem) [page-inset-end] 1rem [page-end] 1fr [screen-inset-end] 0.5rem [screen-end]',
36
+ 'article-left-xl':
37
+ '[screen-start] 0.5rem [screen-inset-start page-start page-inset-start body-outset-start] 3rem [body-start gutter-left-start] 1rem [body-inset-start] minmax(8ch, 12ch) [middle-start] minmax(8ch, 12ch) [gutter-left-end] minmax(8ch, 12ch) minmax(8ch, 12ch) [gutter-right-start] minmax(8ch, 12ch) [middle-end] minmax(8ch, 12ch) [body-inset-end] 1rem [body-end] 1fr [gutter-right-end] 1rem [body-outset-end] minmax(10rem, 18rem) [page-inset-end] 1rem [page-end] 1fr [screen-inset-end] 0.5rem [screen-end]',
38
+ 'article-left-2xl':
39
+ '[screen-start] 0.5rem [screen-inset-start] 1fr [page-start page-inset-start body-outset-start] 3rem [body-start gutter-left-start] 1rem [body-inset-start] minmax(8ch, 12ch) [middle-start] minmax(8ch, 12ch) [gutter-left-end] minmax(8ch, 12ch) minmax(8ch, 12ch) [gutter-right-start] minmax(8ch, 12ch) [middle-end] minmax(8ch, 12ch) [body-inset-end] 1rem [body-end] 1fr [gutter-right-end] 1rem [body-outset-end] minmax(10rem, 18rem) [page-inset-end] 1rem [page-end] 1fr [screen-inset-end] 0.5rem [screen-end]',
31
40
  },
32
41
  gridColumn: {
33
42
  screen: 'screen',
@@ -55,10 +64,9 @@ const themeExtensions = {
55
64
  'gutter-outset-left': 'body-outset / gutter-left',
56
65
  'gutter-right': 'gutter-right',
57
66
  'gutter-outset-right': 'gutter-right / body-outset',
58
- 'margin-left-sm': 'body',
59
67
  'margin-left-lg': 'page / body-start',
60
- 'margin-right-sm': 'body',
61
68
  'margin-right-lg': 'body-end / page-end',
69
+ 'margin-right-inset-lg': 'body-outset-end /page-inset',
62
70
  'body-outset-right': 'body / body-outset',
63
71
  'page-inset-right': 'body / page-inset',
64
72
  'page-right': 'body / page',
@@ -127,6 +135,10 @@ const themeExtensions = {
127
135
 
128
136
  const safeList = [
129
137
  'prose',
138
+ 'article-grid',
139
+ 'xl:article-grid',
140
+ 'article-left-grid',
141
+ 'xl:article-left-grid',
130
142
  'col-screen',
131
143
  'col-screen-inset',
132
144
  'col-page',
@@ -147,6 +159,7 @@ const safeList = [
147
159
  'col-gutter-outset-right',
148
160
  'col-margin-left',
149
161
  'col-margin-right',
162
+ 'col-margin-right-inset',
150
163
  'col-margin',
151
164
  'col-body-outset-right',
152
165
  'col-page-inset-right',
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@myst-theme/styles",
3
- "version": "0.4.1",
3
+ "version": "0.5.0",
4
4
  "main": "index.js",
5
5
  "style": "app.css",
6
6
  "scripts": {