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 76ece8ee87 BoxShadow should now work
76ece8ee87 is described below
commit 76ece8ee87e35eb34b4423a844b530efc63ebe78
Author: Harbs <[email protected]>
AuthorDate: Sun Jun 14 14:35:48 2026 +0300
BoxShadow should now work
---
.../royale/style/stylebeads/effects/BoxShadow.as | 100 ++++++++++++++++++---
.../royale/style/stylebeads/effects/BoxShadows.as | 11 ++-
.../royale/style/stylebeads/effects/RingEffect.as | 57 +++++++++++-
3 files changed, 152 insertions(+), 16 deletions(-)
diff --git
a/frameworks/projects/Style/src/main/royale/org/apache/royale/style/stylebeads/effects/BoxShadow.as
b/frameworks/projects/Style/src/main/royale/org/apache/royale/style/stylebeads/effects/BoxShadow.as
index e89e686d98..4925e2f326 100644
---
a/frameworks/projects/Style/src/main/royale/org/apache/royale/style/stylebeads/effects/BoxShadow.as
+++
b/frameworks/projects/Style/src/main/royale/org/apache/royale/style/stylebeads/effects/BoxShadow.as
@@ -20,6 +20,9 @@ package org.apache.royale.style.stylebeads.effects
{
import org.apache.royale.style.stylebeads.StyleBeadBase;
import org.apache.royale.style.stylebeads.LeafStyleBase;
+ import org.apache.royale.style.util.StyleData;
+ import org.apache.royale.style.util.StyleTheme;
+ import org.apache.royale.style.util.ThemeManager;
/**
* TODO: Figure this out. ring effects cannot be stacked in CSS.
@@ -30,18 +33,95 @@ package org.apache.royale.style.stylebeads.effects
*/
public class BoxShadow extends LeafStyleBase
{
- public function BoxShadow(value:* = null)
+ public function BoxShadow(value:* = null, color:* = null)
{
- super("shadow", "box-shadow", value);
+ super("shadow", "box-shadow");
+ this.color = color;
+ if(value != null)
+ this.value = value;
}
- /**
- * TODO: Figure this out
- * box-shadow:
var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow);
- */
- public var size:String;
-
- // none is special
- public var color:String;
+
+ public var color:*;
public var inset:Boolean;
+
+ [Inspectable(category="General",
enumeration="none,2xs,xs,sm,md,lg,xl,2xl,inset-2xs,inset-xs,inset-sm",
defaultValue="sm")]
+ override public function set value(value:*):void
+ {
+ calculatedSelector = _value = value;
+ if(isVar(value))
+ {
+ calculatedRuleValue = fromVar(value);
+ return;
+ }
+
+ var theme:StyleTheme =
ThemeManager.instance.activeTheme;
+ var shadowLookup:Object = {
+ "none": "none",
+ "2xs": theme.shadow2XS,
+ "xs": theme.shadowXS,
+ "sm": theme.shadowSM,
+ "md": theme.shadowMD,
+ "lg": theme.shadowLG,
+ "xl": theme.shadowXL,
+ "2xl": theme.shadow2XL,
+ "inset-2xs": theme.insetShadow2XS,
+ "inset-xs": theme.insetShadowXS,
+ "inset-sm": theme.insetShadowSM
+ };
+ if(shadowLookup[value] !== undefined)
+ calculatedRuleValue = shadowLookup[value];
+ else if(isColorValue(value))
+ {
+ var styleData:StyleData = validateColor(value,
false);
+ calculatedSelector = styleData.selector;
+ calculatedRuleValue = "0 0 0 1px " +
styleData.rule;
+ }
+ else
+ calculatedRuleValue = value;
+
+ if(inset && calculatedRuleValue != "none" &&
calculatedRuleValue.indexOf("inset") != 0)
+ {
+ calculatedRuleValue = "inset " +
calculatedRuleValue;
+ calculatedSelector = "inset-" +
calculatedSelector;
+ }
+ if(color != null && calculatedRuleValue != "none")
+ {
+ calculatedRuleValue =
applyColor(calculatedRuleValue, color);
+ calculatedSelector += "-" +
getColorSelector(color);
+ }
+ }
+
+ public function getShadowSelector():String
+ {
+ return selectorBase + "-" + calculatedSelector;
+ }
+
+ public function getShadowValue():String
+ {
+ return calculatedRuleValue;
+ }
+
+ private function applyColor(shadow:String, color:*):String
+ {
+ var styleData:StyleData = validateColor(color, false);
+ var ret:String = shadow.replace(/#[0-9a-fA-F]{3,8}\b/g,
styleData.rule);
+ return ret == shadow ? shadow + " " + styleData.rule :
ret;
+ }
+
+ private function getColorSelector(color:*):String
+ {
+ var styleData:StyleData = validateColor(color, false);
+ return styleData.selector;
+ }
+
+ private function isColorValue(value:*):Boolean
+ {
+ if(value == null || value == "none")
+ return false;
+ var stringValue:String = "" + value;
+ if(stringValue.indexOf(" ") != -1)
+ return false;
+ return stringValue.indexOf("#") == 0 ||
stringValue.indexOf("-") != -1 || stringValue == "black" || stringValue ==
"white" || stringValue == "transparent" || isVar(stringValue);
+ }
}
}
\ No newline at end of file
diff --git
a/frameworks/projects/Style/src/main/royale/org/apache/royale/style/stylebeads/effects/BoxShadows.as
b/frameworks/projects/Style/src/main/royale/org/apache/royale/style/stylebeads/effects/BoxShadows.as
index 6a1ac5d2fd..d0c6247450 100644
---
a/frameworks/projects/Style/src/main/royale/org/apache/royale/style/stylebeads/effects/BoxShadows.as
+++
b/frameworks/projects/Style/src/main/royale/org/apache/royale/style/stylebeads/effects/BoxShadows.as
@@ -47,7 +47,11 @@ package org.apache.royale.style.stylebeads.effects
var rules:Array = [];
for each(var shadow:LeafStyleBase in shadows)
{
- rules.push(shadow.getRule());
+ assert(shadow is BoxShadow || shadow is
RingEffect, "BoxShadows style bead only accepts BoxShadow or RingEffect style
beads");
+ if(shadow is BoxShadow)
+ rules.push((shadow as
BoxShadow).getShadowValue());
+ else
+ rules.push((shadow as
RingEffect).getShadowValue());
}
calculatedRuleValue = rules.join(", ");
return super.getRule();
@@ -59,7 +63,10 @@ package org.apache.royale.style.stylebeads.effects
for each(var shadow:LeafStyleBase in shadows)
{
assert(shadow is BoxShadow || shadow is
RingEffect, "BoxShadows style bead only accepts BoxShadow or RingEffect style
beads");
- selectors.push(shadow.getSelector());
+ if(shadow is BoxShadow)
+ selectors.push((shadow as
BoxShadow).getShadowSelector());
+ else
+ selectors.push((shadow as
RingEffect).getShadowSelector());
}
calculatedSelector = selectors.join("-");
return super.getSelector();
diff --git
a/frameworks/projects/Style/src/main/royale/org/apache/royale/style/stylebeads/effects/RingEffect.as
b/frameworks/projects/Style/src/main/royale/org/apache/royale/style/stylebeads/effects/RingEffect.as
index dd8882a2b9..6e97e8c864 100644
---
a/frameworks/projects/Style/src/main/royale/org/apache/royale/style/stylebeads/effects/RingEffect.as
+++
b/frameworks/projects/Style/src/main/royale/org/apache/royale/style/stylebeads/effects/RingEffect.as
@@ -20,6 +20,7 @@ package org.apache.royale.style.stylebeads.effects
{
import org.apache.royale.style.stylebeads.StyleBeadBase;
import org.apache.royale.style.stylebeads.LeafStyleBase;
+ import org.apache.royale.style.util.StyleData;
/**
* TODO: Figure this out. ring effects cannot be stacked in CSS.
* Tailwind uses @properties to create a single box-shadow
property that combines all the properties.
@@ -30,14 +31,62 @@ package org.apache.royale.style.stylebeads.effects
public class RingEffect extends LeafStyleBase
{
- public function RingEffect(value:* = null)
+ public function RingEffect(value:* = null, color:* = null)
{
- super("ring", "box-shadow", value);
+ super("ring", "box-shadow");
+ this.color = color;
+ if(value != null)
+ this.value = value;
}
- public var color:String;
+ public var color:*;
public var inset:Boolean;
- public var weight:Number;
+ public var weight:*;
+
+ [Inspectable(category="General", defaultValue="1")]
+ override public function set value(value:*):void
+ {
+ weight = value == null ? 1 : value;
+ calculatedSelector = _value = weight;
+ if(inset)
+ calculatedSelector = "inset-" +
calculatedSelector;
+ if(color != null)
+ calculatedSelector += "-" + getColorSelector();
+ calculatedRuleValue = (inset ? "inset " : "") + "0 0 0
" + getWeightRuleValue(weight) + " " + getColorRuleValue();
+ }
+
+ public function getShadowSelector():String
+ {
+ return selectorBase + "-" + calculatedSelector;
+ }
+
+ public function getShadowValue():String
+ {
+ return calculatedRuleValue;
+ }
+
+ private function getWeightRuleValue(value:*):String
+ {
+ if(isVar(value))
+ return fromVar(value);
+ if(isNum(value))
+ return value + "px";
+ return value;
+ }
+
+ private function getColorRuleValue():String
+ {
+ if(color == null)
+ return "currentColor";
+ var styleData:StyleData = validateColor(color, false);
+ return styleData.rule;
+ }
+
+ private function getColorSelector():String
+ {
+ var styleData:StyleData = validateColor(color, false);
+ return styleData.selector;
+ }
// --tw-ring-color:initial;
// --tw-ring-shadow:0 0 #0000;
// --tw-inset-ring-color:initial;
