Merge pull request #288 from mjablecnik/main

Add variable support

packages/jaspr/CHANGELOG.md

@@ -1,3 +1,6 @@
+## Unreleased minor
+- Added css variable for Unit, Color, Angle and FontFamily.
+
 ## 0.15.0
 
 - Added support for using `@css` and `@encoder`/`@decoder` across other packages.

packages/jaspr/lib/src/foundation/styles/properties/angle.dart

@@ -18,6 +18,9 @@ abstract class Angle {
   /// Constructs an [Angle] in the form '1turn'
   const factory Angle.turn(double value) = _TurnAngle;
 
+  /// Represents a css variable
+  const factory Angle.variable(String value) = _VariableAngle;
+
   /// The css value
   String get value;
 }
@@ -35,6 +38,21 @@ class _ZeroAngle implements Angle {
   int get hashCode => 0;
 }
 
+class _VariableAngle implements Angle {
+  final String _value;
+
+  const _VariableAngle(this._value);
+
+  @override
+  String get value => 'var($_value)';
+
+  @override
+  bool operator ==(Object other) => identical(this, other) || other is _VariableAngle && other._value == _value;
+
+  @override
+  int get hashCode => _value.hashCode;
+}
+
 class _Angle implements Angle {
   final String _unit;
   final double _value;

packages/jaspr/lib/src/foundation/styles/properties/color.dart

@@ -20,6 +20,9 @@ abstract class Color {
   /// Constructs a [Color] from hue, saturation, lightness and alpha values
   const factory Color.hsla(int hue, int saturation, int lightness, double alpha) = _HSLAColor;
 
+  /// Constructs a variable containing color.
+  const factory Color.variable(String value) = _VariableColor;
+
   static const Color inherit = Color.named('inherit');
   static const Color initial = Color.named('initial');
   static const Color revert = Color.named('revert');
@@ -95,6 +98,15 @@ class _HSLAColor extends _HSLColor {
   String get value => 'hsla($hue, $saturation%, $lightness%, $alpha)';
 }
 
+class _VariableColor implements Color {
+  final String _value;
+
+  const _VariableColor(this._value);
+
+  @override
+  String get value => 'var($_value)';
+}
+
 class Colors {
   static const Color aliceBlue = Color.named('aliceBlue');
   static const Color antiqueWhite = Color.named('antiqueWhite');

packages/jaspr/lib/src/foundation/styles/properties/text.dart

@@ -33,6 +33,9 @@ class FontFamily {
   /// Constructs a [FontFamily] value from a list of families
   const factory FontFamily.list(List<FontFamily> families) = _ListFontFamily;
 
+  /// Constructs a css variable with FontFamily
+  const factory FontFamily.variable(String value) = _VariableFontFamily;
+
   static const FontFamily inherit = FontFamily._generic('inherit');
   static const FontFamily initial = FontFamily._generic('initial');
   static const FontFamily revert = FontFamily._generic('revert');
@@ -48,6 +51,15 @@ class _ListFontFamily implements FontFamily {
   String get value => families.map((f) => f.value).join(', ');
 }
 
+class _VariableFontFamily implements FontFamily {
+  final String _value;
+
+  const _VariableFontFamily(this._value);
+
+  @override
+  String get value => 'var($_value)';
+}
+
 class FontFamilies {
   // generic families
   static const FontFamily serif = FontFamily._generic('serif');

packages/jaspr/lib/src/foundation/styles/properties/unit.dart

@@ -51,6 +51,9 @@ abstract class Unit {
   ///auto represents the style attribute unit 'auto'
   static const Unit auto = _AutoUnit();
 
+  /// Represents a css variable
+  const factory Unit.variable(String value) = _VariableUnit;
+
   /// Constructs a [Unit] in the form '100%'
   const factory Unit.percent(double value) = _PercentUnit;
 
@@ -103,6 +106,21 @@ class _AutoUnit implements Unit {
   int get hashCode => 0;
 }
 
+class _VariableUnit implements Unit {
+  final String _value;
+
+  const _VariableUnit(this._value);
+
+  @override
+  String get value => 'var($_value)';
+
+  @override
+  bool operator ==(Object other) => identical(this, other) || other is _VariableUnit && other._value == _value;
+
+  @override
+  int get hashCode => _value.hashCode;
+}
+
 class _Unit implements Unit {
   final String _unit;
   final double _value;