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 0b2b632ef5 Basically works
0b2b632ef5 is described below
commit 0b2b632ef5c4ba28fa3f209e536197d009677bf8
Author: Harbs <[email protected]>
AuthorDate: Wed Mar 18 13:54:16 2026 +0200
Basically works
---
frameworks/projects/Style/README.md | 252 ++++++++++++++++++++-
.../projects/Style/src/main/resources/defaults.css | 11 +
.../royale/org/apache/royale/style/StyleSkin.as | 2 +-
.../org/apache/royale/style/skins/CheckBoxSkin.as | 7 +-
.../stylebeads/flexgrid/GridTemplateColumns.as | 2 +-
.../org/apache/royale/style/util/ThemeManager.as | 11 +
6 files changed, 279 insertions(+), 6 deletions(-)
diff --git a/frameworks/projects/Style/README.md
b/frameworks/projects/Style/README.md
index 4e5e25042b..a51834fc21 100644
--- a/frameworks/projects/Style/README.md
+++ b/frameworks/projects/Style/README.md
@@ -203,6 +203,9 @@ This project is under active development. APIs and naming
may evolve as style be
}
}
```
+- [hidden
preflight](https://tailwindcss.com/docs/preflight#elements-with-a-hidden-attribute-stay-hidden)
+- [Deal with list
defaults](https://tailwindcss.com/docs/preflight#lists-are-unstyled)
+- [Deal with form heading
defaults](https://tailwindcss.com/docs/preflight#headings-are-unstyled)
### Internal notes
- It does not look like we need ContainerBase
@@ -282,4 +285,251 @@ This project is under active development. APIs and naming
may evolve as style be
- `:stalled`: applies to media elements that are stalled (e.g., waiting for
data).
- `:muted`: applies to media elements that are muted.
- `:volume-locked`: applies to media elements that have a locked volume state.
-- `:scope`: applies to the element that is the scope of a query (e.g., the
element that is the context for a `:has()` selector).
\ No newline at end of file
+- `:scope`: applies to the element that is the scope of a query (e.g., the
element that is the context for a `:has()` selector).
+
+
+Review all these preflight rules and fiugre out how to make them as PAYG as
possible:
+
+```css
+*,
+::after,
+::before {
+ box-sizing: border-box;
+ border-width: 0;
+ border-style: solid;
+ border-color: #e5e7eb
+}
+
+::after,
+::before {
+ --tw-content: ''
+}
+
+:host,
+html {
+ line-height: 1.5;
+ -webkit-text-size-adjust: 100%;
+ -moz-tab-size: 4;
+ tab-size: 4;
+ font-family: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji",
"Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
+ font-feature-settings: normal;
+ font-variation-settings: normal;
+ -webkit-tap-highlight-color: transparent
+}
+
+body {
+ margin: 0;
+ line-height: inherit
+}
+
+hr {
+ height: 0;
+ color: inherit;
+ border-top-width: 1px
+}
+
+abbr:where([title]) {
+ -webkit-text-decoration: underline dotted;
+ text-decoration: underline dotted
+}
+
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+ font-size: inherit;
+ font-weight: inherit
+}
+
+a {
+ color: inherit;
+ text-decoration: inherit
+}
+
+b,
+strong {
+ font-weight: bolder
+}
+
+code,
+kbd,
+pre,
+samp {
+ font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas,
"Liberation Mono", "Courier New", monospace;
+ font-feature-settings: normal;
+ font-variation-settings: normal;
+ font-size: 1em
+}
+
+small {
+ font-size: 80%
+}
+
+sub,
+sup {
+ font-size: 75%;
+ line-height: 0;
+ position: relative;
+ vertical-align: baseline
+}
+
+sub {
+ bottom: -.25em
+}
+
+sup {
+ top: -.5em
+}
+
+table {
+ text-indent: 0;
+ border-color: inherit;
+ border-collapse: collapse
+}
+
+button,
+input,
+optgroup,
+select,
+textarea {
+ font-family: inherit;
+ font-feature-settings: inherit;
+ font-variation-settings: inherit;
+ font-size: 100%;
+ font-weight: inherit;
+ line-height: inherit;
+ letter-spacing: inherit;
+ color: inherit;
+ margin: 0;
+ padding: 0
+}
+
+button,
+select {
+ text-transform: none
+}
+
+button,
+input:where([type=button]),
+input:where([type=reset]),
+input:where([type=submit]) {
+ -webkit-appearance: button;
+ background-color: transparent;
+ background-image: none
+}
+
+:-moz-focusring {
+ outline: auto
+}
+
+:-moz-ui-invalid {
+ box-shadow: none
+}
+
+progress {
+ vertical-align: baseline
+}
+
+::-webkit-inner-spin-button,
+::-webkit-outer-spin-button {
+ height: auto
+}
+
+[type=search] {
+ -webkit-appearance: textfield;
+ outline-offset: -2px
+}
+
+::-webkit-search-decoration {
+ -webkit-appearance: none
+}
+
+::-webkit-file-upload-button {
+ -webkit-appearance: button;
+ font: inherit
+}
+
+summary {
+ display: list-item
+}
+
+blockquote,
+dd,
+dl,
+figure,
+h1,
+h2,
+h3,
+h4,
+h5,
+h6,
+hr,
+p,
+pre {
+ margin: 0
+}
+
+fieldset {
+ margin: 0;
+ padding: 0
+}
+
+legend {
+ padding: 0
+}
+
+menu,
+ol,
+ul {
+ list-style: none;
+ margin: 0;
+ padding: 0
+}
+
+dialog {
+ padding: 0
+}
+
+textarea {
+ resize: vertical
+}
+
+input::placeholder,
+textarea::placeholder {
+ opacity: 1;
+ color: #9ca3af
+}
+
+[role=button],
+button {
+ cursor: pointer
+}
+
+:disabled {
+ cursor: default
+}
+
+audio,
+canvas,
+embed,
+iframe,
+img,
+object,
+svg,
+video {
+ display: block;
+ vertical-align: middle
+}
+
+img,
+video {
+ max-width: 100%;
+ height: auto
+}
+
+[hidden]:where(:not([hidden=until-found])) {
+ display: none
+}
+```
\ No newline at end of file
diff --git a/frameworks/projects/Style/src/main/resources/defaults.css
b/frameworks/projects/Style/src/main/resources/defaults.css
index f3416bb35a..eafeb98dd3 100644
--- a/frameworks/projects/Style/src/main/resources/defaults.css
+++ b/frameworks/projects/Style/src/main/resources/defaults.css
@@ -19,6 +19,17 @@
*/
@namespace "library://ns.apache.org/royale/style";
+/*** https://tailwindcss.com/docs/preflight */
+*,
+::after,
+::before,
+::backdrop,
+::file-selector-button {
+ margin: 0;
+ padding: 0;
+ box-sizing: border-box;
+ border: 0 solid;
+}
View
{
diff --git
a/frameworks/projects/Style/src/main/royale/org/apache/royale/style/StyleSkin.as
b/frameworks/projects/Style/src/main/royale/org/apache/royale/style/StyleSkin.as
index f76da31831..51d46fa2a5 100644
---
a/frameworks/projects/Style/src/main/royale/org/apache/royale/style/StyleSkin.as
+++
b/frameworks/projects/Style/src/main/royale/org/apache/royale/style/StyleSkin.as
@@ -73,7 +73,7 @@ package org.apache.royale.style
}
protected function computeSize(value:Number,unit:String):String
{
- var pixelValue:Number =
ThemeManager.instance.activeTheme.spacing * value;
+ var pixelValue:Number = value;
return CSSUnit.convert(pixelValue, CSSUnit.PX, unit) +
unit;
}
}
diff --git
a/frameworks/projects/Style/src/main/royale/org/apache/royale/style/skins/CheckBoxSkin.as
b/frameworks/projects/Style/src/main/royale/org/apache/royale/style/skins/CheckBoxSkin.as
index 5cf9d7c1f0..33400c8f98 100644
---
a/frameworks/projects/Style/src/main/royale/org/apache/royale/style/skins/CheckBoxSkin.as
+++
b/frameworks/projects/Style/src/main/royale/org/apache/royale/style/skins/CheckBoxSkin.as
@@ -57,6 +57,8 @@ package org.apache.royale.style.skins
import org.apache.royale.style.stylebeads.border.Border;
import org.apache.royale.style.stylebeads.transform.Transform;
import org.apache.royale.style.stylebeads.effects.OpacityStyle;
+ import org.apache.royale.style.stylebeads.flexgrid.GridTemplateColumns;
+ import org.apache.royale.style.stylebeads.flexgrid.ColumnGap;
public class CheckBoxSkin extends StyleSkin implements ICheckBoxSkin
{
@@ -106,9 +108,9 @@ package org.apache.royale.style.skins
_styles = [
new Display("inline-grid"),
new Cursor("pointer"),
- new GridAutoColumns(box + " auto"),
+ new GridTemplateColumns(box + " auto"),
new AlignItems("center"),
- new RowGap(gap),
+ new ColumnGap(gap),
new UserSelect("none"),
disabledStyle
];
@@ -144,7 +146,6 @@ package org.apache.royale.style.skins
{
var size:Number = 16 * getMultiplier();
var box:String = computeSize(size * 1.25, host.unit);
- var gap:String = computeSize(size * 0.75, host.unit);
_boxStyles = [
new GridColumnStart("1"),
new GridRowStart("1"),
diff --git
a/frameworks/projects/Style/src/main/royale/org/apache/royale/style/stylebeads/flexgrid/GridTemplateColumns.as
b/frameworks/projects/Style/src/main/royale/org/apache/royale/style/stylebeads/flexgrid/GridTemplateColumns.as
index d2cab7e656..47e486eb4b 100644
---
a/frameworks/projects/Style/src/main/royale/org/apache/royale/style/stylebeads/flexgrid/GridTemplateColumns.as
+++
b/frameworks/projects/Style/src/main/royale/org/apache/royale/style/stylebeads/flexgrid/GridTemplateColumns.as
@@ -39,7 +39,7 @@ package org.apache.royale.style.stylebeads.flexgrid
ruleValue = "repeat(" + value + ", minmax(0,
1fr))";
}
assert(selectorValue.indexOf("--") != 0, "css variables
for grid-template-columns not yet supported: " + value);
- assert(selectorValue.indexOf(" ") == -1, "values with
spaces for grid-template-columns not yet supported: " + value);
+ // assert(selectorValue.indexOf(" ") == -1, "values
with spaces for grid-template-columns not yet supported: " + value);
calculatedRuleValue = ruleValue;
calculatedSelector = selectorValue;
_value = value;
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
index f8753f85a0..2f1b408bd1 100644
---
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
@@ -33,7 +33,18 @@ package org.apache.royale.style.util
public static function get instance():ThemeManager
{
if(!_instance)
+ {
_instance = new ThemeManager();
+ // Set css preflight defaults. These are the
same as Tailwind's preflight defaults.
+ // See https://tailwindcss.com/docs/preflight
for more details.
+ //TODO make this more PAYG
+ StyleManager.addStyle("img, svg, video, canvas,
audio, iframe, embed, object", "display: block; vertical-align: middle;")
+ StyleManager.addStyle("img, video", "max-width:
100%; height: auto;");
+ StyleManager.addStyle(":host, html",
'line-height: 1.5; -webkit-text-size-adjust: 100%; -moz-tab-size: 4; tab-size:
4; font-family: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji",
"Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; font-feature-settings:
normal; font-variation-settings: normal; -webkit-tap-highlight-color:
transparent');
+ StyleManager.addStyle("body", 'margin: 0;
line-height: inherit;');
+ StyleManager.addStyle("code, kbd, pre, samp",
'font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas,
"Liberation Mono", "Courier New", monospace; font-feature-settings: normal;
font-variation-settings: normal; font-size: 1em');
+
+ }
return _instance;
}
