This is an automated email from the ASF dual-hosted git repository.
harbs pushed a commit to branch develop
in repository https://gitbox.apache.org/repos/asf/royale-asjs.git
The following commit(s) were added to refs/heads/develop by this push:
new 9629655ec8 margin, padding and started on theme
9629655ec8 is described below
commit 9629655ec859423d90a918ac214fb4faa6586b1a
Author: Harbs <[email protected]>
AuthorDate: Mon Feb 23 12:55:05 2026 +0200
margin, padding and started on theme
---
frameworks/projects/Style/README.md | 5 +
.../Style/src/main/resources/basic-manifest.xml | 4 +
.../projects/Style/src/main/royale/StyleClasses.as | 1 +
.../royale/org/apache/royale/style/IStyleUIBase.as | 1 +
.../royale/org/apache/royale/style/StyleUIBase.as | 9 +
.../{StyleBeadBase.as => MarginBlock.as} | 22 ++-
.../{StyleBeadBase.as => MarginInline.as} | 20 +-
.../{StyleBeadBase.as => MarginStyle.as} | 30 ++-
.../{StyleBeadBase.as => PaddingStyle.as} | 29 ++-
.../apache/royale/style/stylebeads/SpacingBase.as | 216 +++++++++++++++++++++
.../royale/style/stylebeads/StyleBeadBase.as | 14 ++
.../org/apache/royale/style/util/StyleTheme.as | 158 +++++++++++++++
.../org/apache/royale/style/util/ThemeManager.as | 101 ++++++++++
13 files changed, 588 insertions(+), 22 deletions(-)
diff --git a/frameworks/projects/Style/README.md
b/frameworks/projects/Style/README.md
index b87c63a964..cd1d189f28 100644
--- a/frameworks/projects/Style/README.md
+++ b/frameworks/projects/Style/README.md
@@ -154,3 +154,8 @@ Button {
This project is under active development. APIs and naming may evolve as style
beads, runtime class composition, and asset generation are expanded.
+
+### To work on later:
+- (min/max-)inline-size
+- (min/max-)block-size
+- Add support for normal rgb for browsers which don't support oklch (i.e. CEP)
Maybe?
\ No newline at end of file
diff --git a/frameworks/projects/Style/src/main/resources/basic-manifest.xml
b/frameworks/projects/Style/src/main/resources/basic-manifest.xml
index 5d1357bbc5..95e7330617 100644
--- a/frameworks/projects/Style/src/main/resources/basic-manifest.xml
+++ b/frameworks/projects/Style/src/main/resources/basic-manifest.xml
@@ -23,11 +23,15 @@
<component id="FlexContainerStyle"
class="org.apache.royale.style.stylebeads.FlexContainerStyle"/>
<component id="FlexItemStyle"
class="org.apache.royale.style.stylebeads.FlexItemStyle"/>
<component id="HeightStyle"
class="org.apache.royale.style.stylebeads.HeightStyle"/>
+ <component id="MarginBlock"
class="org.apache.royale.style.stylebeads.MarginBlock"/>
+ <component id="MarginInline"
class="org.apache.royale.style.stylebeads.MarginInline"/>
+ <component id="MarginStyle"
class="org.apache.royale.style.stylebeads.MarginStyle"/>
<component id="MaxHeight"
class="org.apache.royale.style.stylebeads.MaxHeight"/>
<component id="MaxWidth"
class="org.apache.royale.style.stylebeads.MaxWidth"/>
<component id="MinHeight"
class="org.apache.royale.style.stylebeads.MinHeight"/>
<component id="MinWidth"
class="org.apache.royale.style.stylebeads.MinWidth"/>
<component id="OverflowStyle"
class="org.apache.royale.style.stylebeads.OverflowStyle"/>
+ <component id="PaddingStyle"
class="org.apache.royale.style.stylebeads.PaddingStyle"/>
<component id="PositionStyle"
class="org.apache.royale.style.stylebeads.PositionStyle"/>
<component id="SizeStyle"
class="org.apache.royale.style.stylebeads.SizeStyle"/>
<component id="WidthStyle"
class="org.apache.royale.style.stylebeads.WidthStyle"/>
diff --git a/frameworks/projects/Style/src/main/royale/StyleClasses.as
b/frameworks/projects/Style/src/main/royale/StyleClasses.as
index 9c934a3be3..5464cbe3aa 100644
--- a/frameworks/projects/Style/src/main/royale/StyleClasses.as
+++ b/frameworks/projects/Style/src/main/royale/StyleClasses.as
@@ -54,6 +54,7 @@ package
import org.apache.royale.style.colors.YellowSwatch;
YellowSwatch;
import org.apache.royale.style.colors.ZincSwatch; ZincSwatch;
import org.apache.royale.style.util.StyleManager; StyleManager;
+ import org.apache.royale.style.util.ThemeManager; ThemeManager;
}
diff --git
a/frameworks/projects/Style/src/main/royale/org/apache/royale/style/IStyleUIBase.as
b/frameworks/projects/Style/src/main/royale/org/apache/royale/style/IStyleUIBase.as
index a50c03a156..15a39d35a4 100644
---
a/frameworks/projects/Style/src/main/royale/org/apache/royale/style/IStyleUIBase.as
+++
b/frameworks/projects/Style/src/main/royale/org/apache/royale/style/IStyleUIBase.as
@@ -31,5 +31,6 @@ package org.apache.royale.style
public interface IStyleUIBase extends IUIBase
{
function toggleClass(classNameVal:String,add:Boolean):void;
+ function get theme():String;
}
}
\ No newline at end of file
diff --git
a/frameworks/projects/Style/src/main/royale/org/apache/royale/style/StyleUIBase.as
b/frameworks/projects/Style/src/main/royale/org/apache/royale/style/StyleUIBase.as
index 9de4f276a9..50a1eaf8ae 100644
---
a/frameworks/projects/Style/src/main/royale/org/apache/royale/style/StyleUIBase.as
+++
b/frameworks/projects/Style/src/main/royale/org/apache/royale/style/StyleUIBase.as
@@ -28,6 +28,7 @@ package org.apache.royale.style
{
import org.apache.royale.html.util.addElementToWrapper;
import org.apache.royale.core.WrappedHTMLElement;
+ import org.apache.royale.style.util.ThemeManager;
}
/**
@@ -57,6 +58,14 @@ package org.apache.royale.style
protected var utilityList:CSSClassList;
protected var styleBeads:Array = [];
+ /**
+ * TODO: Add support for cascading theming.
+ */
+ public function get theme():String
+ {
+ return ThemeManager.instance.current;
+ }
+
/**
* @royaleignorecoercion
org.apache.royale.style.stylebeads.IStyleBead
*/
diff --git
a/frameworks/projects/Style/src/main/royale/org/apache/royale/style/stylebeads/StyleBeadBase.as
b/frameworks/projects/Style/src/main/royale/org/apache/royale/style/stylebeads/MarginBlock.as
similarity index 78%
copy from
frameworks/projects/Style/src/main/royale/org/apache/royale/style/stylebeads/StyleBeadBase.as
copy to
frameworks/projects/Style/src/main/royale/org/apache/royale/style/stylebeads/MarginBlock.as
index e2bab90133..0cf50f022b 100644
---
a/frameworks/projects/Style/src/main/royale/org/apache/royale/style/stylebeads/StyleBeadBase.as
+++
b/frameworks/projects/Style/src/main/royale/org/apache/royale/style/stylebeads/MarginBlock.as
@@ -18,15 +18,25 @@
////////////////////////////////////////////////////////////////////////////////
package org.apache.royale.style.stylebeads
{
- import org.apache.royale.core.Bead;
-
- abstract public class StyleBeadBase extends Bead implements IStyleBead
+ public class MarginBlock extends MeasurementStyleBase
{
- public function StyleBeadBase()
+ public function MarginBlock()
{
super();
+
+ }
+
+ //TODO https://tailwindcss.com/docs/margin
+
+ override public function get selectors():Array
+ {
+ return [];
+ }
+
+ override public function get rules():Array
+ {
+ return [];
}
- abstract public function get selectors():Array;
- abstract public function get rules():Array;
+
}
}
\ No newline at end of file
diff --git
a/frameworks/projects/Style/src/main/royale/org/apache/royale/style/stylebeads/StyleBeadBase.as
b/frameworks/projects/Style/src/main/royale/org/apache/royale/style/stylebeads/MarginInline.as
similarity index 78%
copy from
frameworks/projects/Style/src/main/royale/org/apache/royale/style/stylebeads/StyleBeadBase.as
copy to
frameworks/projects/Style/src/main/royale/org/apache/royale/style/stylebeads/MarginInline.as
index e2bab90133..81736a923c 100644
---
a/frameworks/projects/Style/src/main/royale/org/apache/royale/style/stylebeads/StyleBeadBase.as
+++
b/frameworks/projects/Style/src/main/royale/org/apache/royale/style/stylebeads/MarginInline.as
@@ -18,15 +18,23 @@
////////////////////////////////////////////////////////////////////////////////
package org.apache.royale.style.stylebeads
{
- import org.apache.royale.core.Bead;
-
- abstract public class StyleBeadBase extends Bead implements IStyleBead
+ public class MarginInline extends MeasurementStyleBase
{
- public function StyleBeadBase()
+ public function MarginInline()
{
super();
+
+ }
+ //TODO https://tailwindcss.com/docs/margin
+ override public function get selectors():Array
+ {
+ return [];
}
- abstract public function get selectors():Array;
- abstract public function get rules():Array;
+
+ override public function get rules():Array
+ {
+ return [];
+ }
+
}
}
\ No newline at end of file
diff --git
a/frameworks/projects/Style/src/main/royale/org/apache/royale/style/stylebeads/StyleBeadBase.as
b/frameworks/projects/Style/src/main/royale/org/apache/royale/style/stylebeads/MarginStyle.as
similarity index 59%
copy from
frameworks/projects/Style/src/main/royale/org/apache/royale/style/stylebeads/StyleBeadBase.as
copy to
frameworks/projects/Style/src/main/royale/org/apache/royale/style/stylebeads/MarginStyle.as
index e2bab90133..a7600deeb3 100644
---
a/frameworks/projects/Style/src/main/royale/org/apache/royale/style/stylebeads/StyleBeadBase.as
+++
b/frameworks/projects/Style/src/main/royale/org/apache/royale/style/stylebeads/MarginStyle.as
@@ -18,15 +18,35 @@
////////////////////////////////////////////////////////////////////////////////
package org.apache.royale.style.stylebeads
{
- import org.apache.royale.core.Bead;
+ import org.apache.royale.style.util.ThemeManager;
+ import org.apache.royale.style.util.CSSUnit;
- abstract public class StyleBeadBase extends Bead implements IStyleBead
+ public class MarginStyle extends SpacingBase
{
- public function StyleBeadBase()
+ public function MarginStyle()
{
super();
+
+ }
+
+
+ override public function get selectors():Array
+ {
+ var items:Array = stringify();
+ if(items.length > 1)
+ return [".mt" + items[0], ".mr" + items[1],
".mb" + items[2], ".ml" + items[3]];
+
+ return [".m" + items[0]];
+ }
+
+ override public function get rules():Array
+ {
+ var items:Array = stringify();
+ if(items.length > 1)
+ return ["margin-top:" + items[0] + ";",
"margin-right:" + items[1] + ";", "margin-bottom:" + items[2] + ";",
"margin-left:" + items[3] + ";"];
+
+ return ["margin:" + items[0] + ";"];
}
- abstract public function get selectors():Array;
- abstract public function get rules():Array;
+
}
}
\ No newline at end of file
diff --git
a/frameworks/projects/Style/src/main/royale/org/apache/royale/style/stylebeads/StyleBeadBase.as
b/frameworks/projects/Style/src/main/royale/org/apache/royale/style/stylebeads/PaddingStyle.as
similarity index 59%
copy from
frameworks/projects/Style/src/main/royale/org/apache/royale/style/stylebeads/StyleBeadBase.as
copy to
frameworks/projects/Style/src/main/royale/org/apache/royale/style/stylebeads/PaddingStyle.as
index e2bab90133..cb9f70161f 100644
---
a/frameworks/projects/Style/src/main/royale/org/apache/royale/style/stylebeads/StyleBeadBase.as
+++
b/frameworks/projects/Style/src/main/royale/org/apache/royale/style/stylebeads/PaddingStyle.as
@@ -18,15 +18,34 @@
////////////////////////////////////////////////////////////////////////////////
package org.apache.royale.style.stylebeads
{
- import org.apache.royale.core.Bead;
+ import org.apache.royale.style.util.ThemeManager;
+ import org.apache.royale.style.util.CSSUnit;
- abstract public class StyleBeadBase extends Bead implements IStyleBead
+ public class PaddingStyle extends SpacingBase
{
- public function StyleBeadBase()
+ public function PaddingStyle()
{
super();
+
+ }
+
+ override public function get selectors():Array
+ {
+ var items:Array = stringify();
+ if(items.length > 1)
+ return [".pt" + items[0], ".pr" + items[1],
".pb" + items[2], ".pl" + items[3]];
+
+ return [".p" + items[0]];
}
- abstract public function get selectors():Array;
- abstract public function get rules():Array;
+
+ override public function get rules():Array
+ {
+ var items:Array = stringify();
+ if(items.length > 1)
+ return ["padding-top:" + items[0] + ";",
"padding-right:" + items[1] + ";", "padding-bottom:" + items[2] + ";",
"padding-left:" + items[3] + ";"];
+
+ return ["padding:" + items[0] + ";"];
+ }
+
}
}
\ No newline at end of file
diff --git
a/frameworks/projects/Style/src/main/royale/org/apache/royale/style/stylebeads/SpacingBase.as
b/frameworks/projects/Style/src/main/royale/org/apache/royale/style/stylebeads/SpacingBase.as
new file mode 100644
index 0000000000..34dc2f09f5
--- /dev/null
+++
b/frameworks/projects/Style/src/main/royale/org/apache/royale/style/stylebeads/SpacingBase.as
@@ -0,0 +1,216 @@
+////////////////////////////////////////////////////////////////////////////////
+//
+// Licensed to the Apache Software Foundation (ASF) under one or more
+// contributor license agreements. See the NOTICE file distributed with
+// this work for additional information regarding copyright ownership.
+// The ASF licenses this file to You under the Apache License, Version 2.0
+// (the "License"); you may not use this file except in compliance with
+// the License. You may obtain a copy of the License at
+//
+// http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+//
+////////////////////////////////////////////////////////////////////////////////
+package org.apache.royale.style.stylebeads
+{
+ import org.apache.royale.style.util.ThemeManager;
+ import org.apache.royale.style.util.CSSUnit;
+
+ abstract public class SpacingBase extends StyleBeadBase
+ {
+ public function SpacingBase()
+ {
+ super();
+
+ }
+
+ private var _unit:String;
+
+ public function get unit():String
+ {
+ return _unit || CSSUnit.PX;
+ }
+
+ public function set unit(value:String):void
+ {
+ _unit = value;
+ }
+
+ private var _spacing:Number;
+
+ [[Inspectable(category="General", defaultValue="0")]]
+ public function get spacing():Number
+ {
+ return isNaN(_spacing) ?
ThemeManager.instance.activeTheme.spacing : _spacing;
+ }
+
+ public function set spacing(value:Number):void
+ {
+ _spacing = value;
+ }
+
+ private var _leftValue:Number;
+ public function get leftValue():Number
+ {
+ return _leftValue;
+ }
+ public function set leftValue(value:Number):void
+ {
+ _leftValue = value;
+ }
+
+ private var _rightValue:Number;
+ public function get rightValue():Number
+ {
+ return _rightValue;
+ }
+ public function set rightValue(value:Number):void
+ {
+ _rightValue = value;
+ }
+
+ private var _topValue:Number;
+ public function get topValue():Number
+ {
+ return _topValue;
+ }
+ public function set topValue(value:Number):void
+ {
+ _topValue = value;
+ }
+
+ private var _bottomValue:Number;
+ public function get bottomValue():Number
+ {
+ return _bottomValue;
+ }
+ public function set bottomValue(value:Number):void
+ {
+ _bottomValue = value;
+ }
+
+ private var _leftStep:Number;
+ public function get leftStep():Number
+ {
+ return _leftStep;
+ }
+ public function set leftStep(value:Number):void
+ {
+ _leftStep = value;
+ }
+
+ private var _rightStep:Number;
+ public function get rightStep():Number
+ {
+ return _rightStep;
+ }
+ public function set rightStep(value:Number):void
+ {
+ _rightStep = value;
+ }
+
+ private var _topStep:Number;
+ public function get topStep():Number
+ {
+ return _topStep;
+ }
+ public function set topStep(value:Number):void
+ {
+ _topStep = value;
+ }
+ private var _bottomStep:Number;
+
+ public function get bottomStep():Number
+ {
+ return _bottomStep;
+ }
+
+ public function set bottomStep(value:Number):void
+ {
+ _bottomStep = value;
+ }
+
+ private var _left:String;
+
+ public function get left():String
+ {
+ return _left;
+ }
+
+ public function set left(value:String):void
+ {
+ _left = value;
+ }
+ private var _right:String;
+
+ public function get right():String
+ {
+ return _right;
+ }
+
+ public function set right(value:String):void
+ {
+ _right = value;
+ }
+ private var _top:String;
+
+ public function get top():String
+ {
+ return _top;
+ }
+
+ public function set top(value:String):void
+ {
+ _top = value;
+ }
+ private var _bottom:String;
+
+ public function get bottom():String
+ {
+ return _bottom;
+ }
+
+ public function set bottom(value:String):void
+ {
+ _bottom = value;
+ }
+
+ public var auto:Boolean;
+
+ private function computeVal(str:String, value:Number,
step:Number):String
+ {
+ if (str)
+ return str;
+ if (!isNaN(value))
+ return value + unit;
+
+ if (!isNaN(step))
+ {
+ var s:Number = unit == CSSUnit.REM ? spacing /
16 : spacing;
+ return (step * s) + unit;
+ }
+ return "";
+ }
+
+ protected function stringify():Array
+ {
+ if(auto)
+ return ["auto"];
+
+ var left:String = computeVal(_left, _leftValue,
_leftStep);
+ var right:String = computeVal(_right, _rightValue,
_rightStep);
+ var top:String = computeVal(_top, _topValue, _topStep);
+ var bottom:String = computeVal(_bottom, _bottomValue,
_bottomStep);
+ if(left == right && right == top && top == bottom)
+ return [left];
+
+ return [top, right, bottom, left];
+ }
+
+ }
+}
\ No newline at end of file
diff --git
a/frameworks/projects/Style/src/main/royale/org/apache/royale/style/stylebeads/StyleBeadBase.as
b/frameworks/projects/Style/src/main/royale/org/apache/royale/style/stylebeads/StyleBeadBase.as
index e2bab90133..c4e4efaf7c 100644
---
a/frameworks/projects/Style/src/main/royale/org/apache/royale/style/stylebeads/StyleBeadBase.as
+++
b/frameworks/projects/Style/src/main/royale/org/apache/royale/style/stylebeads/StyleBeadBase.as
@@ -19,6 +19,8 @@
package org.apache.royale.style.stylebeads
{
import org.apache.royale.core.Bead;
+ import org.apache.royale.style.IStyleUIBase;
+ import org.apache.royale.core.IStrand;
abstract public class StyleBeadBase extends Bead implements IStyleBead
{
@@ -28,5 +30,17 @@ package org.apache.royale.style.stylebeads
}
abstract public function get selectors():Array;
abstract public function get rules():Array;
+ protected var _theme:String;
+ protected function findTheme():String
+ {
+ var parent:IStrand = _strand;
+ while(parent is IStyleBead)
+ parent = (parent as StyleBeadBase)._strand;
+
+ if(parent is IStyleUIBase)
+ return (parent as IStyleUIBase).theme;
+
+ return null;
+ }
}
}
\ No newline at end of file
diff --git
a/frameworks/projects/Style/src/main/royale/org/apache/royale/style/util/StyleTheme.as
b/frameworks/projects/Style/src/main/royale/org/apache/royale/style/util/StyleTheme.as
new file mode 100644
index 0000000000..e3e10507c1
--- /dev/null
+++
b/frameworks/projects/Style/src/main/royale/org/apache/royale/style/util/StyleTheme.as
@@ -0,0 +1,158 @@
+////////////////////////////////////////////////////////////////////////////////
+//
+// Licensed to the Apache Software Foundation (ASF) under one or more
+// contributor license agreements. See the NOTICE file distributed with
+// this work for additional information regarding copyright ownership.
+// The ASF licenses this file to You under the Apache License, Version 2.0
+// (the "License"); you may not use this file except in compliance with
+// the License. You may obtain a copy of the License at
+//
+// http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+//
+////////////////////////////////////////////////////////////////////////////////
+package org.apache.royale.style.util
+{
+ /**
+ * @royalesuppressexport
+ */
+ public class StyleTheme
+ {
+ public function StyleTheme(name:String)
+ {
+ themeName = name;
+ }
+ public var themeName:String = "default";
+
+ public var spacing:Number = 4;
+ public var breakpointSM:String = "40rem";
+ public var breakpointMD:String = "48rem";
+ public var breakpointLG:String = "64rem";
+ public var breakpointXL:String = "80rem";
+ public var breakpoint2XL:String = "96rem";
+ public var container3XS:String = "16rem";
+ public var container2XS:String = "18rem";
+ public var containerXS:String = "20rem";
+ public var containerSM:String = "24rem";
+ public var containerMD:String = "28rem";
+ public var containerLG:String = "32rem";
+ public var containerXL:String = "36rem";
+ public var container2XL:String = "42rem";
+ public var container3XL:String = "48rem";
+ public var container4XL:String = "56rem";
+ public var container5XL:String = "64rem";
+ public var container6XL:String = "72rem";
+ public var container7XL:String = "80rem";
+ public var textXS:String = ".75rem";
+ public var textXSLineHeight:Number = 1/.75;
+ public var textSM:String = ".875rem";
+ public var textSMLineHeight:Number = 1.25/.875;
+ public var textBase:String = "1rem";
+ public var textBaseLineHeight:Number = 1.5/1;
+ public var textLG:String = "1.125rem";
+ public var textLGLineHeight:Number = 1.75/1.125;
+ public var textXL:String = "1.25rem";
+ public var textXLLineHeight:Number = 1.75/1.25;
+ public var text2XL:String = "1.5rem";
+ public var text2XLLineHeight:Number = 2/1.5;
+ public var text3XL:String = "1.875rem";
+ public var text3XLLineHeight:Number = 2.25/1.875;
+ public var text4XL:String = "2.25rem";
+ public var text4XLLineHeight:Number = 2.5/2.25;
+ public var text5XL:String = "3rem";
+ public var text5XLLineHeight:Number = 1;
+ public var text6XL:String = "3.75rem";
+ public var text6XLLineHeight:Number = 1;
+ public var text7XL:String = "4.5rem";
+ public var text7XLLineHeight:Number = 1;
+ public var text8XL:String = "6rem";
+ public var text8XLLineHeight:Number = 1;
+ public var text9XL:String = "8rem";
+ public var text9XLLineHeight:Number = 1;
+ public var fontWeightThin:String = "100";
+ public var fontWeightExtraLight:String = "200";
+ public var fontWeightLight:String = "300";
+ public var fontWeightNormal:String = "400";
+ public var fontWeightMedium:String = "500";
+ public var fontWeightSemiBold:String = "600";
+ public var fontWeightBold:String = "700";
+ public var fontWeightExtraBold:String = "800";
+ public var fontWeightBlack:String = "900";
+ public var trackingTighter:String = "-.05em";
+ public var trackingTight:String = "-.025em";
+ public var trackingNormal:String = "0";
+ public var trackingWide:String = ".025em";
+ public var trackingWider:String = ".05em";
+ public var trackingWidest:String = ".1em";
+ public var leadingTight:String = "1.25";
+ public var leadingSnug:String = "1.375";
+ public var leadingNormal:String = "1.5";
+ public var leadingRelaxed:String = "1.625";
+ public var leadingLoose:String = "2";
+ public var radiusXS:String = ".125rem";
+ public var radiusSM:String = ".25rem";
+ public var radiusMD:String = ".375rem";
+ public var radiusLG:String = ".5rem";
+ public var radiusXL:String = ".75rem";
+ public var radius2XL:String = "1rem";
+ public var radius3XL:String = "1.5rem";
+ public var radius4XL:String = "2rem";
+ public var shadow2XS:String = "0 1px #0000000d";
+ public var shadowXS:String = "0 1px 2px 0 #0000000d";
+ public var shadowSM:String = "0 1px 3px 0 #0000001a,0 1px 2px
-1px #0000001a";
+ public var shadowMD:String = "0 4px 6px -1px #0000001a,0 2px
4px -2px #0000001a";
+ public var shadowLG:String = "0 10px 15px -3px #0000001a,0 4px
6px -4px #0000001a";
+ public var shadowXL:String = "0 20px 25px -5px #0000001a,0 10px
10px -5px #0000001a";
+ public var shadow2XL:String = "0 25px 50px -12px #0000001a";
+ public var insetShadow2XS:String = "inset 0 1px #0000000d";
+ public var insetShadowXS:String = "inset 0 1px 1px #0000000d";
+ public var insetShadowSM:String = "inset 0 2px 4px #0000000d";
+ public var dropShadowXS:String = "0 1px 1px #0000000d";
+ public var dropShadowSM:String = "0 1px 2px #00000026";
+ public var dropShadowMD:String = "0 3px 3px #0000001f";
+ public var dropShadowLG:String = "0 4px 4px #00000026";
+ public var dropShadowXL:String = "0 9px 9px #0000001a";
+ public var dropShadow2XL:String = "0 25px 25px #00000026";
+ public var textShadow2XS:String = "0 1px 0px #00000026";
+ public var textShadowXS:String = "0 1px 1px #0003";
+ public var textShadowSM:String = "0px 1px 0px #00000013,0px 1px
1px #00000013,0px 2px 2px #00000013";
+ public var textShadowMD:String = "0px 1px 1px #0000001a,0px 1px
2px #0000001a,0px 2px 4px #0000001a";
+ public var textShadowLG:String = "0px 1px 2px #0000001a,0px 3px
2px #0000001a,0px 4px 8px #0000001a";
+ public var easeIn:String = "cubic-bezier(.4,0,1,1)";
+ public var easeOut:String = "cubic-bezier(0,0,.2,1)";
+ public var easeInOut:String = "cubic-bezier(.4,0,.2,1)";
+
+ // TODO: Add keyframes for these animations.
+ public var animateSpin:String = "spin 1s linear infinite"
+ public var animatePing:String = "ping 1s cubic-bezier(0,0,.2,1)
infinite";
+ public var animatePulse:String = "pulse 2s cubic-bezier(0.4, 0,
0.6, 1) infinite";
+ public var animateBounce:String = "bounce 1s infinite";
+
+ public var blurXS:String = "4px";
+ public var blurSM:String = "8px";
+ public var blurMD:String = "12px";
+ public var blurLG:String = "16px";
+ public var blurXL:String = "24px";
+ public var blur2XL:String = "40px";
+ public var blur3XL:String = "64px";
+ public var perspectiveDramatic:String = "100px";
+ public var perspectiveNear:String = "300px";
+ public var perspectiveNormal:String = "500px";
+ public var perspectiveMidrange:String = "800px";
+ public var perspectiveDistant:String = "1200px";
+ public var aspectVideo:String = "16/9";
+ public var defaultTransitionDuration:String = ".15s";
+ public var defaultTransitionTimingFunction:String =
"cubic-bezier(.4,0,.2,1)";
+ public var defaultFontFamily:String;
+ public var defaultFontFeatureSettings:String;
+ public var defaultMonoFontFamily:String;
+ public var defaultMonoFontFeatureSettings:String;
+ public var fontUbuntuMono:String;
+ public var animateFlashCode:String = "flash-code 2s forwards";
+ }
+}
diff --git
a/frameworks/projects/Style/src/main/royale/org/apache/royale/style/util/ThemeManager.as
b/frameworks/projects/Style/src/main/royale/org/apache/royale/style/util/ThemeManager.as
new file mode 100644
index 0000000000..af7a27ce8e
--- /dev/null
+++
b/frameworks/projects/Style/src/main/royale/org/apache/royale/style/util/ThemeManager.as
@@ -0,0 +1,101 @@
+////////////////////////////////////////////////////////////////////////////////
+//
+// Licensed to the Apache Software Foundation (ASF) under one or more
+// contributor license agreements. See the NOTICE file distributed with
+// this work for additional information regarding copyright ownership.
+// The ASF licenses this file to You under the Apache License, Version 2.0
+// (the "License"); you may not use this file except in compliance with
+// the License. You may obtain a copy of the License at
+//
+// http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+//
+////////////////////////////////////////////////////////////////////////////////
+package org.apache.royale.style.util
+{
+ import org.apache.royale.debugging.assert;
+
+ /**
+ * @royalesuppressexport
+ */
+ public class ThemeManager
+ {
+ public function ThemeManager()
+ {
+
+ }
+ private static var _instance:ThemeManager;
+ public static function get instance():ThemeManager
+ {
+ if(!_instance)
+ _instance = new ThemeManager();
+
+ return _instance;
+ }
+ private var _current:String;
+ public function get current():String
+ {
+ return _current;
+ }
+ public function set current(value:String):void
+ {
+ _current = value;
+ }
+ COMPILE::JS
+ private var themeSet:Map = new Map();
+ private var themes:Vector.<StyleTheme> = new
Vector.<StyleTheme>();
+ public function registerTheme(theme:StyleTheme):void
+ {
+ COMPILE::JS
+ {
+ if(themeSet.has(theme.themeName))
+ return;
+ themeSet.set(theme.themeName, theme);
+ themes.push(theme);
+ }
+ }
+
+ public function get activeTheme():StyleTheme
+ {
+ COMPILE::JS
+ {
+ if(!_activeTheme)
+ _activeTheme = themeSet.get(current);
+
+ assert(_activeTheme, "Active theme not found: "
+ current);
+ }
+ return _activeTheme;
+ }
+
+ public function getTheme(themeName:String):StyleTheme
+ {
+ var theme:StyleTheme;
+ COMPILE::JS
+ {
+ theme = themeSet.get(themeName);
+ assert(theme, "Theme " + themeName + " not
found");
+ }
+ return theme;
+ }
+ private var _activeTheme:StyleTheme;
+ public function setTheme(themeName:String):void
+ {
+ COMPILE::JS
+ {
+ if(_current == themeName)
+ return;
+ var theme:StyleTheme = themeSet.get(themeName);
+ assert(theme, "Theme " + themeName + " not
found");
+ _activeTheme = theme;
+ _current = themeName;
+ }
+ }
+
+ }
+}
+
