@trebired/frontend 13.37.1 → 13.39.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.
package/CHANGELOG.md
CHANGED
|
@@ -1,5 +1,14 @@
|
|
|
1
1
|
# Changelog
|
|
2
2
|
|
|
3
|
+
## 13.39.0
|
|
4
|
+
|
|
5
|
+
- Added the padding utilities `padding-xs2` through `padding-lg`, their `padding-block-*`, `padding-top-*` and `padding-bottom-*` forms, plus `width-full`, `radius-md` and `radius-sm`. The package had margin utilities (`mt-*`, `ml-*`) and gap utilities but no padding ones, so every consuming site wrote a class per padded box — and the package's own graph shell, code block, editor surface and file explorer already set `padding-sm`, `padding-xs`, `width-full` and `radius-md` on elements, class names that were defined nowhere and therefore did nothing.
|
|
6
|
+
|
|
7
|
+
## 13.38.0
|
|
8
|
+
|
|
9
|
+
- `text-outline` draws its outline with a ring of `text-shadow` offsets instead of `-webkit-text-stroke`. A stroke is applied to every contour of a glyph, including the internal ones a filled glyph hides, so in a display face whose letters are drawn as overlapping shapes — a bowl laid over a stem, a crossbar laid over two diagonals — the seams showed as stray strokes inside the letterform. The ring is painted behind the glyph and only the merged silhouette shows, which is what an outlined letter should look like.
|
|
10
|
+
- Because the ring is painted behind the text, the glyph interior is a colour rather than a hole. It defaults to the `page` token, which matches the background in the usual case and follows any surface that redefines that token, and `outline.fill` overrides it. `outline.fallback` is gone: `text-shadow` needs no capability guard, so there is nothing to fall back from.
|
|
11
|
+
|
|
3
12
|
## 13.37.1
|
|
4
13
|
|
|
5
14
|
- Fixed `text-outline` rendering nothing when `components.typography.outline.color` is left unset. The stroke colour defaulted to `currentColor`, but the same rule sets `color` to the transparent interior fill, and `currentcolor` resolves against the element's own computed `color` — so the stroke was transparent too and the text disappeared. The default is now the `text` semantic token.
|
|
@@ -58,3 +58,63 @@
|
|
|
58
58
|
.mb-lg {
|
|
59
59
|
margin-bottom: var(#{ns.css-var("gap-lg")});
|
|
60
60
|
}
|
|
61
|
+
|
|
62
|
+
.padding-xs2 {
|
|
63
|
+
padding: var(#{ns.css-var("gap-xs2")});
|
|
64
|
+
}
|
|
65
|
+
|
|
66
|
+
.padding-xs {
|
|
67
|
+
padding: var(#{ns.css-var("gap-xs")});
|
|
68
|
+
}
|
|
69
|
+
|
|
70
|
+
.padding-sm {
|
|
71
|
+
padding: var(#{ns.css-var("gap-sm")});
|
|
72
|
+
}
|
|
73
|
+
|
|
74
|
+
.padding-md {
|
|
75
|
+
padding: var(#{ns.css-var("gap-md")});
|
|
76
|
+
}
|
|
77
|
+
|
|
78
|
+
.padding-lg {
|
|
79
|
+
padding: var(#{ns.css-var("gap-lg")});
|
|
80
|
+
}
|
|
81
|
+
|
|
82
|
+
.padding-block-sm {
|
|
83
|
+
padding-block: var(#{ns.css-var("gap-sm")});
|
|
84
|
+
}
|
|
85
|
+
|
|
86
|
+
.padding-block-md {
|
|
87
|
+
padding-block: var(#{ns.css-var("gap-md")});
|
|
88
|
+
}
|
|
89
|
+
|
|
90
|
+
.padding-block-lg {
|
|
91
|
+
padding-block: var(#{ns.css-var("gap-lg")});
|
|
92
|
+
}
|
|
93
|
+
|
|
94
|
+
.padding-top-md {
|
|
95
|
+
padding-top: var(#{ns.css-var("gap-md")});
|
|
96
|
+
}
|
|
97
|
+
|
|
98
|
+
.padding-top-lg {
|
|
99
|
+
padding-top: var(#{ns.css-var("gap-lg")});
|
|
100
|
+
}
|
|
101
|
+
|
|
102
|
+
.padding-bottom-md {
|
|
103
|
+
padding-bottom: var(#{ns.css-var("gap-md")});
|
|
104
|
+
}
|
|
105
|
+
|
|
106
|
+
.padding-bottom-lg {
|
|
107
|
+
padding-bottom: var(#{ns.css-var("gap-lg")});
|
|
108
|
+
}
|
|
109
|
+
|
|
110
|
+
.width-full {
|
|
111
|
+
width: 100%;
|
|
112
|
+
}
|
|
113
|
+
|
|
114
|
+
.radius-md {
|
|
115
|
+
border-radius: var(#{ns.css-var("radius")}, 0);
|
|
116
|
+
}
|
|
117
|
+
|
|
118
|
+
.radius-sm {
|
|
119
|
+
border-radius: var(#{ns.css-var("radius-sm")}, 0);
|
|
120
|
+
}
|
|
@@ -1,3 +1,5 @@
|
|
|
1
|
+
@use "sass:list";
|
|
2
|
+
@use "sass:math";
|
|
1
3
|
@use "@trebired/bundler/namespace" as ns;
|
|
2
4
|
.width-max {
|
|
3
5
|
width: 100% !important;
|
|
@@ -50,15 +52,17 @@
|
|
|
50
52
|
}
|
|
51
53
|
|
|
52
54
|
.text-outline {
|
|
53
|
-
|
|
54
|
-
}
|
|
55
|
-
|
|
56
|
-
@
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
55
|
+
$width: var(#{ns.css-var("typography-outline-width")}, 2px);
|
|
56
|
+
$color: var(#{ns.css-var("typography-outline-color")}, var(#{ns.css-var("text")}, #000));
|
|
57
|
+
$ring: ();
|
|
58
|
+
@for $step from 0 through 11 {
|
|
59
|
+
$angle: math.div(360deg * $step, 12);
|
|
60
|
+
$ring: list.append(
|
|
61
|
+
$ring,
|
|
62
|
+
calc(#{math.cos($angle)} * #{$width}) calc(#{math.sin($angle)} * #{$width}) 0 $color,
|
|
63
|
+
comma
|
|
64
|
+
);
|
|
63
65
|
}
|
|
66
|
+
color: var(#{ns.css-var("typography-outline-fill")}, var(#{ns.css-var("page")}, #fff));
|
|
67
|
+
text-shadow: $ring;
|
|
64
68
|
}
|
package/package.json
CHANGED