shelving 1.259.0 → 1.260.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 (7) hide show
  1. package/package.json +1 -1
  2. package/ui/block/Heading.md +1 -1
  3. package/ui/misc/Icon.module.css +3 -2
  4. package/ui/style/Typography.d.ts +1 -1
  5. package/ui/style/Typography.module.css +34 -0
  6. package/ui/style/Typography.tsx +19 -1
  7. package/ui/style/getTypographyClass.md +1 -0
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "shelving",
3
- "version": "1.259.0",
3
+ "version": "1.260.0",
4
4
  "author": "Dave Houlbrooke <dave@shax.com>",
5
5
  "repository": {
6
6
  "type": "git",
package/ui/block/Heading.md CHANGED
@@ -59,6 +59,6 @@ import { Heading } from "shelving/ui";
59
59
  /* Theme: serif headings, a touch larger. */
60
60
  :root {
61
61
  --heading-font: var(--font-serif);
62
- --heading-size: var(--size-xxxlarge);
62
+ --heading-size: 3rem;
63
63
  }
64
64
  ```
package/ui/misc/Icon.module.css CHANGED
@@ -4,8 +4,9 @@
4
4
 
5
5
  @layer defaults {
6
6
  .icon {
7
- width: var(--icon-size, var(--size-icon));
8
- height: var(--icon-size, var(--size-icon));
7
+ font-size: var(--icon-size, var(--size-icon));
8
+ width: 1em;
9
+ height: 1em;
9
10
  color: var(--icon-color, var(--tint-50));
10
11
  }
11
12
  }
package/ui/style/Typography.d.ts CHANGED
@@ -4,7 +4,7 @@ import type { TintVariant } from "./Tint.js";
4
4
  *
5
5
  * @see https://shelving.cc/ui/SizeVariant
6
6
  */
7
- export type SizeVariant = "xxsmall" | "xsmall" | "small" | "normal" | "large" | "xlarge" | "xxlarge";
7
+ export type SizeVariant = "xxsmall" | "xsmall" | "small" | "normal" | "large" | "xlarge" | "xxlarge" | "xxxlarge" | "1x" | "2x" | "3x" | "4x" | "5x" | "6x" | "7x" | "8x" | "9x" | "10x";
8
8
  /**
9
9
  * Allowed values for font weight for components that support `TypographyVariants`
10
10
  *
package/ui/style/Typography.module.css CHANGED
@@ -98,6 +98,40 @@
98
98
  font-size: var(--size-xxlarge);
99
99
  line-height: var(--leading);
100
100
  }
101
+ .size-xxxlarge {
102
+ font-size: var(--size-xxxlarge);
103
+ line-height: var(--leading);
104
+ }
105
+ .size-1x {
106
+ margin-block: calc(var(--size-normal) * 1);
107
+ }
108
+ .size-2x {
109
+ margin-block: calc(var(--size-normal) * 2);
110
+ }
111
+ .size-3x {
112
+ margin-block: calc(var(--size-normal) * 3);
113
+ }
114
+ .size-4x {
115
+ margin-block: calc(var(--size-normal) * 4);
116
+ }
117
+ .size-5x {
118
+ margin-block: calc(var(--size-normal) * 5);
119
+ }
120
+ .size-6x {
121
+ margin-block: calc(var(--size-normal) * 6);
122
+ }
123
+ .size-7x {
124
+ margin-block: calc(var(--size-normal) * 7);
125
+ }
126
+ .size-8x {
127
+ margin-block: calc(var(--size-normal) * 8);
128
+ }
129
+ .size-9x {
130
+ margin-block: calc(var(--size-normal) * 9);
131
+ }
132
+ .size-10x {
133
+ margin-block: calc(var(--size-normal) * 10);
134
+ }
101
135
 
102
136
  /* Font-family variants. */
103
137
  .font-title {
package/ui/style/Typography.tsx CHANGED
@@ -7,7 +7,25 @@ import TYPOGRAPHY_CSS from "./Typography.module.css";
7
7
  *
8
8
  * @see https://shelving.cc/ui/SizeVariant
9
9
  */
10
- export type SizeVariant = "xxsmall" | "xsmall" | "small" | "normal" | "large" | "xlarge" | "xxlarge";
10
+ export type SizeVariant =
11
+ | "xxsmall"
12
+ | "xsmall"
13
+ | "small"
14
+ | "normal"
15
+ | "large"
16
+ | "xlarge"
17
+ | "xxlarge"
18
+ | "xxxlarge"
19
+ | "1x"
20
+ | "2x"
21
+ | "3x"
22
+ | "4x"
23
+ | "5x"
24
+ | "6x"
25
+ | "7x"
26
+ | "8x"
27
+ | "9x"
28
+ | "10x";
11
29
 
12
30
  /**
13
31
  * Allowed values for font weight for components that support `TypographyVariants`
package/ui/style/getTypographyClass.md CHANGED
@@ -40,6 +40,7 @@ The following `:root` variables are defined by this module and can be overridden
40
40
  | `--size-scale` | `1.25` | Ratio between steps. |
41
41
  | `--size-normal` | `1rem` | Base size — the root of the modular scale. |
42
42
  | `--size-xxsmall` … `--size-xxxlarge` | `calc(var(--size-normal) * pow(var(--size-scale), n))` | Each step is the base scaled by a power of the ratio. |
43
+ | `--size-1x` … `--size-10x` | `calc(var(--size-normal) * n)` | Direct multiples of normal size. |
43
44
  | `--size-icon` | `1.5rem` | Icon box size. |
44
45
  | `--size-label` | `var(--size-small)` | Label text size. |
45
46
  | `--size-smaller` | `0.875em` | Relative (em) shrink — e.g. inline `<Small>`. |