Skip to content

Commit 885b713

Browse files
kevin-sakemaerkevin-sakemaer
committed
feat: add CssTabSize, CssCaretColor, CssScrollSnapType, CssScrollSnapAlign, and CssScrollMargin property support
1 parent aadca7e commit 885b713

13 files changed

Lines changed: 677 additions & 0 deletions

‎packages/spark_css/CHANGELOG.md‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -36,6 +36,11 @@
3636
- **Feat**: Added `CssTouchAction` sealed class for `touch-action` property with `.auto`, `.none`, `.manipulation` standalone keywords, `.panX`, `.panLeft`, `.panRight`, `.panY`, `.panUp`, `.panDown`, `.pinchZoom` combinable keywords, and `.combine()` factory, plus `.variable()`, `.raw()`, and `.global()` escape hatches.
3737
- **Feat**: Added `CssUserSelect` sealed class for `user-select` property with `.none`, `.auto`, `.text`, `.all`, `.contain` keywords, plus `.variable()`, `.raw()`, and `.global()` escape hatches.
3838
- **Feat**: Added `CssHyphens` sealed class for `hyphens` property with `.none`, `.manual`, `.auto` keywords, plus `.variable()`, `.raw()`, and `.global()` escape hatches.
39+
- **Feat**: Added `CssTabSize` sealed class for `tab-size` property with `.number()`, `.length()` factories, plus `.variable()`, `.raw()`, and `.global()` escape hatches.
40+
- **Feat**: Added `CssCaretColor` sealed class for `caret-color` property with `.auto` keyword, `.color()` factory, plus `.variable()`, `.raw()`, and `.global()` escape hatches.
41+
- **Feat**: Added `CssScrollSnapType` sealed class for `scroll-snap-type` property with `.none` keyword, `.axis()` factory with optional strictness, plus `.variable()`, `.raw()`, and `.global()` escape hatches.
42+
- **Feat**: Added `CssScrollSnapAlign` sealed class for `scroll-snap-align` property with `.none`, `.start`, `.end`, `.center` keywords, `.pair()` for two-value syntax, plus `.variable()`, `.raw()`, and `.global()` escape hatches.
43+
- **Feat**: Added `CssScrollMargin` sealed class for `scroll-margin` property with `.all()`, `.symmetric()`, `.only()` factories, plus `.variable()`, `.raw()`, and `.global()` escape hatches.
3944

4045
### Changed
4146

‎packages/spark_css/lib/src/css_types/css_caret_color.dart‎

Lines changed: 61 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,61 @@
1+
import 'css_color.dart';
2+
import 'css_value.dart';
3+
4+
/// CSS caret-color property values.
5+
sealed class CssCaretColor implements CssValue {
6+
const CssCaretColor._();
7+
8+
static const CssCaretColor auto = _CssCaretColorKeyword('auto');
9+
10+
/// Caret color from a CssColor value.
11+
factory CssCaretColor.color(CssColor color) = _CssCaretColorValue;
12+
13+
/// CSS variable reference.
14+
factory CssCaretColor.variable(String varName) = _CssCaretColorVariable;
15+
16+
/// Raw CSS value escape hatch.
17+
factory CssCaretColor.raw(String value) = _CssCaretColorRaw;
18+
19+
/// Global keyword (inherit, initial, unset, revert).
20+
factory CssCaretColor.global(CssGlobal global) = _CssCaretColorGlobal;
21+
}
22+
23+
final class _CssCaretColorKeyword extends CssCaretColor {
24+
final String keyword;
25+
const _CssCaretColorKeyword(this.keyword) : super._();
26+
27+
@override
28+
String toCss() => keyword;
29+
}
30+
31+
final class _CssCaretColorValue extends CssCaretColor {
32+
final CssColor color;
33+
const _CssCaretColorValue(this.color) : super._();
34+
35+
@override
36+
String toCss() => color.toCss();
37+
}
38+
39+
final class _CssCaretColorVariable extends CssCaretColor {
40+
final String varName;
41+
const _CssCaretColorVariable(this.varName) : super._();
42+
43+
@override
44+
String toCss() => 'var(--$varName)';
45+
}
46+
47+
final class _CssCaretColorRaw extends CssCaretColor {
48+
final String value;
49+
const _CssCaretColorRaw(this.value) : super._();
50+
51+
@override
52+
String toCss() => value;
53+
}
54+
55+
final class _CssCaretColorGlobal extends CssCaretColor {
56+
final CssGlobal global;
57+
const _CssCaretColorGlobal(this.global) : super._();
58+
59+
@override
60+
String toCss() => global.toCss();
61+
}

‎packages/spark_css/lib/src/css_types/css_scroll_margin.dart‎

Lines changed: 96 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,96 @@
1+
import 'css_length.dart';
2+
import 'css_value.dart';
3+
4+
/// CSS scroll-margin property values.
5+
sealed class CssScrollMargin implements CssValue {
6+
const CssScrollMargin._();
7+
8+
/// Same value for all four sides.
9+
///
10+
/// Example: `CssScrollMargin.all(CssLength.px(10))` → `10px`
11+
factory CssScrollMargin.all(CssLength value) = _CssScrollMarginAll;
12+
13+
/// Symmetric scroll margin (vertical and horizontal).
14+
///
15+
/// Example: `CssScrollMargin.symmetric(CssLength.px(10), CssLength.px(20))` → `10px 20px`
16+
factory CssScrollMargin.symmetric(CssLength vertical, CssLength horizontal) =
17+
_CssScrollMarginSymmetric;
18+
19+
/// Individual sides.
20+
///
21+
/// Example: `CssScrollMargin.only(top: CssLength.px(10), right: CssLength.px(20), bottom: CssLength.px(30), left: CssLength.px(40))` → `10px 20px 30px 40px`
22+
factory CssScrollMargin.only({
23+
CssLength? top,
24+
CssLength? right,
25+
CssLength? bottom,
26+
CssLength? left,
27+
}) = _CssScrollMarginOnly;
28+
29+
/// CSS variable reference.
30+
factory CssScrollMargin.variable(String varName) = _CssScrollMarginVariable;
31+
32+
/// Raw CSS value escape hatch.
33+
factory CssScrollMargin.raw(String value) = _CssScrollMarginRaw;
34+
35+
/// Global keyword (inherit, initial, unset, revert).
36+
factory CssScrollMargin.global(CssGlobal global) = _CssScrollMarginGlobal;
37+
}
38+
39+
final class _CssScrollMarginAll extends CssScrollMargin {
40+
final CssLength value;
41+
const _CssScrollMarginAll(this.value) : super._();
42+
43+
@override
44+
String toCss() => value.toCss();
45+
}
46+
47+
final class _CssScrollMarginSymmetric extends CssScrollMargin {
48+
final CssLength vertical;
49+
final CssLength horizontal;
50+
const _CssScrollMarginSymmetric(this.vertical, this.horizontal) : super._();
51+
52+
@override
53+
String toCss() => '${vertical.toCss()} ${horizontal.toCss()}';
54+
}
55+
56+
final class _CssScrollMarginOnly extends CssScrollMargin {
57+
final CssLength? top;
58+
final CssLength? right;
59+
final CssLength? bottom;
60+
final CssLength? left;
61+
const _CssScrollMarginOnly({this.top, this.right, this.bottom, this.left})
62+
: super._();
63+
64+
@override
65+
String toCss() {
66+
final t = top ?? CssLength.zero;
67+
final r = right ?? CssLength.zero;
68+
final b = bottom ?? CssLength.zero;
69+
final l = left ?? CssLength.zero;
70+
return '${t.toCss()} ${r.toCss()} ${b.toCss()} ${l.toCss()}';
71+
}
72+
}
73+
74+
final class _CssScrollMarginVariable extends CssScrollMargin {
75+
final String varName;
76+
const _CssScrollMarginVariable(this.varName) : super._();
77+
78+
@override
79+
String toCss() => 'var(--$varName)';
80+
}
81+
82+
final class _CssScrollMarginRaw extends CssScrollMargin {
83+
final String value;
84+
const _CssScrollMarginRaw(this.value) : super._();
85+
86+
@override
87+
String toCss() => value;
88+
}
89+
90+
final class _CssScrollMarginGlobal extends CssScrollMargin {
91+
final CssGlobal global;
92+
const _CssScrollMarginGlobal(this.global) : super._();
93+
94+
@override
95+
String toCss() => global.toCss();
96+
}

‎packages/spark_css/lib/src/css_types/css_scroll_snap_align.dart‎

Lines changed: 69 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,69 @@
1+
import 'css_value.dart';
2+
3+
/// CSS scroll-snap-align property values.
4+
sealed class CssScrollSnapAlign implements CssValue {
5+
const CssScrollSnapAlign._();
6+
7+
static const CssScrollSnapAlign none = _CssScrollSnapAlignKeyword('none');
8+
static const CssScrollSnapAlign start = _CssScrollSnapAlignKeyword('start');
9+
static const CssScrollSnapAlign end = _CssScrollSnapAlignKeyword('end');
10+
static const CssScrollSnapAlign center = _CssScrollSnapAlignKeyword('center');
11+
12+
/// Two-value syntax: inline alignment and block alignment.
13+
///
14+
/// Example: `CssScrollSnapAlign.pair('start', 'end')` → `start end`
15+
factory CssScrollSnapAlign.pair(String align, String blockAlign) =
16+
_CssScrollSnapAlignPair;
17+
18+
/// CSS variable reference.
19+
factory CssScrollSnapAlign.variable(String varName) =
20+
_CssScrollSnapAlignVariable;
21+
22+
/// Raw CSS value escape hatch.
23+
factory CssScrollSnapAlign.raw(String value) = _CssScrollSnapAlignRaw;
24+
25+
/// Global keyword (inherit, initial, unset, revert).
26+
factory CssScrollSnapAlign.global(CssGlobal global) =
27+
_CssScrollSnapAlignGlobal;
28+
}
29+
30+
final class _CssScrollSnapAlignKeyword extends CssScrollSnapAlign {
31+
final String keyword;
32+
const _CssScrollSnapAlignKeyword(this.keyword) : super._();
33+
34+
@override
35+
String toCss() => keyword;
36+
}
37+
38+
final class _CssScrollSnapAlignPair extends CssScrollSnapAlign {
39+
final String align;
40+
final String blockAlign;
41+
const _CssScrollSnapAlignPair(this.align, this.blockAlign) : super._();
42+
43+
@override
44+
String toCss() => '$align $blockAlign';
45+
}
46+
47+
final class _CssScrollSnapAlignVariable extends CssScrollSnapAlign {
48+
final String varName;
49+
const _CssScrollSnapAlignVariable(this.varName) : super._();
50+
51+
@override
52+
String toCss() => 'var(--$varName)';
53+
}
54+
55+
final class _CssScrollSnapAlignRaw extends CssScrollSnapAlign {
56+
final String value;
57+
const _CssScrollSnapAlignRaw(this.value) : super._();
58+
59+
@override
60+
String toCss() => value;
61+
}
62+
63+
final class _CssScrollSnapAlignGlobal extends CssScrollSnapAlign {
64+
final CssGlobal global;
65+
const _CssScrollSnapAlignGlobal(this.global) : super._();
66+
67+
@override
68+
String toCss() => global.toCss();
69+
}

‎packages/spark_css/lib/src/css_types/css_scroll_snap_type.dart‎

Lines changed: 68 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,68 @@
1+
import 'css_value.dart';
2+
3+
/// CSS scroll-snap-type property values.
4+
sealed class CssScrollSnapType implements CssValue {
5+
const CssScrollSnapType._();
6+
7+
static const CssScrollSnapType none = _CssScrollSnapTypeKeyword('none');
8+
9+
/// Scroll snap type with axis and optional strictness.
10+
///
11+
/// [axis] must be one of: `x`, `y`, `block`, `inline`, `both`.
12+
/// [strictness] is optional: `mandatory` or `proximity`.
13+
///
14+
/// Example: `CssScrollSnapType.axis('x', 'mandatory')` → `x mandatory`
15+
factory CssScrollSnapType.axis(String axis, [String? strictness]) =
16+
_CssScrollSnapTypeAxis;
17+
18+
/// CSS variable reference.
19+
factory CssScrollSnapType.variable(String varName) =
20+
_CssScrollSnapTypeVariable;
21+
22+
/// Raw CSS value escape hatch.
23+
factory CssScrollSnapType.raw(String value) = _CssScrollSnapTypeRaw;
24+
25+
/// Global keyword (inherit, initial, unset, revert).
26+
factory CssScrollSnapType.global(CssGlobal global) = _CssScrollSnapTypeGlobal;
27+
}
28+
29+
final class _CssScrollSnapTypeKeyword extends CssScrollSnapType {
30+
final String keyword;
31+
const _CssScrollSnapTypeKeyword(this.keyword) : super._();
32+
33+
@override
34+
String toCss() => keyword;
35+
}
36+
37+
final class _CssScrollSnapTypeAxis extends CssScrollSnapType {
38+
final String axis;
39+
final String? strictness;
40+
const _CssScrollSnapTypeAxis(this.axis, [this.strictness]) : super._();
41+
42+
@override
43+
String toCss() => strictness != null ? '$axis $strictness' : axis;
44+
}
45+
46+
final class _CssScrollSnapTypeVariable extends CssScrollSnapType {
47+
final String varName;
48+
const _CssScrollSnapTypeVariable(this.varName) : super._();
49+
50+
@override
51+
String toCss() => 'var(--$varName)';
52+
}
53+
54+
final class _CssScrollSnapTypeRaw extends CssScrollSnapType {
55+
final String value;
56+
const _CssScrollSnapTypeRaw(this.value) : super._();
57+
58+
@override
59+
String toCss() => value;
60+
}
61+
62+
final class _CssScrollSnapTypeGlobal extends CssScrollSnapType {
63+
final CssGlobal global;
64+
const _CssScrollSnapTypeGlobal(this.global) : super._();
65+
66+
@override
67+
String toCss() => global.toCss();
68+
}

‎packages/spark_css/lib/src/css_types/css_tab_size.dart‎

Lines changed: 62 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,62 @@
1+
import 'css_length.dart';
2+
import 'css_value.dart';
3+
4+
/// CSS tab-size property values.
5+
sealed class CssTabSize implements CssValue {
6+
const CssTabSize._();
7+
8+
/// Tab size as a number (number of spaces).
9+
factory CssTabSize.number(int value) = _CssTabSizeNumber;
10+
11+
/// Tab size as a length.
12+
factory CssTabSize.length(CssLength value) = _CssTabSizeLength;
13+
14+
/// CSS variable reference.
15+
factory CssTabSize.variable(String varName) = _CssTabSizeVariable;
16+
17+
/// Raw CSS value escape hatch.
18+
factory CssTabSize.raw(String value) = _CssTabSizeRaw;
19+
20+
/// Global keyword (inherit, initial, unset, revert).
21+
factory CssTabSize.global(CssGlobal global) = _CssTabSizeGlobal;
22+
}
23+
24+
final class _CssTabSizeNumber extends CssTabSize {
25+
final int value;
26+
const _CssTabSizeNumber(this.value) : super._();
27+
28+
@override
29+
String toCss() => '$value';
30+
}
31+
32+
final class _CssTabSizeLength extends CssTabSize {
33+
final CssLength value;
34+
const _CssTabSizeLength(this.value) : super._();
35+
36+
@override
37+
String toCss() => value.toCss();
38+
}
39+
40+
final class _CssTabSizeVariable extends CssTabSize {
41+
final String varName;
42+
const _CssTabSizeVariable(this.varName) : super._();
43+
44+
@override
45+
String toCss() => 'var(--$varName)';
46+
}
47+
48+
final class _CssTabSizeRaw extends CssTabSize {
49+
final String value;
50+
const _CssTabSizeRaw(this.value) : super._();
51+
52+
@override
53+
String toCss() => value;
54+
}
55+
56+
final class _CssTabSizeGlobal extends CssTabSize {
57+
final CssGlobal global;
58+
const _CssTabSizeGlobal(this.global) : super._();
59+
60+
@override
61+
String toCss() => global.toCss();
62+
}

‎packages/spark_css/lib/src/css_types/css_types.dart‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -18,6 +18,7 @@ export 'css_border_collapse.dart';
1818
export 'css_border_radius.dart';
1919
export 'css_box_shadow.dart';
2020
export 'css_box_sizing.dart';
21+
export 'css_caret_color.dart';
2122
export 'css_color.dart';
2223
export 'css_contain.dart';
2324
export 'css_content.dart';
@@ -49,7 +50,11 @@ export 'css_radial_shape.dart';
4950
export 'css_radial_size.dart';
5051
export 'css_resize.dart';
5152
export 'css_scroll_behavior.dart';
53+
export 'css_scroll_margin.dart';
54+
export 'css_scroll_snap_align.dart';
55+
export 'css_scroll_snap_type.dart';
5256
export 'css_spacing.dart';
57+
export 'css_tab_size.dart';
5358
export 'css_text.dart';
5459
export 'css_text_overflow.dart';
5560
export 'css_text_shadow.dart';

0 commit comments

Comments
 (0)