You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@royale.apache.org by ca...@apache.org on 2018/03/27 08:32:10 UTC
[royale-asjs] 15/49: Decouple theme in JewelTheme and JewelBlueTheme
This is an automated email from the ASF dual-hosted git repository.
carlosrovira pushed a commit to branch feature/jewel-ui-set
in repository https://gitbox.apache.org/repos/asf/royale-asjs.git
commit f02b2311663bd9b2b190a9a333705781fbfd2045
Author: Carlos Rovira <ca...@apache.org>
AuthorDate: Thu Mar 15 17:13:45 2018 +0100
Decouple theme in JewelTheme and JewelBlueTheme
---
examples/royale/JewelExample/pom.xml | 7 ++
.../src/main/config/compile-app-config.xml | 2 +-
.../resources/jewel-example-index-template.html | 2 +-
frameworks/themes/JewelBlueTheme/asconfig.json | 34 ++++++
frameworks/themes/JewelBlueTheme/build.xml | 133 +++++++++++++++++++++
.../themes/{JewelTheme => JewelBlueTheme}/pom.xml | 6 +-
.../src/main/config/compile-swf-config.xml | 85 +++++++++++++
.../src/main/resources/assets/JewelButton2.svg | 44 +++++++
.../src/main/resources/assets/jewel-button.svg | 37 ++++++
.../src/main/resources/royale-jewel-blue.css | 1 -
.../src/main/royale/JewelBlueThemeClasses.as} | 21 ++--
.../src/main/sass}/_blue-color-palette.sass | 0
.../src/main/sass/_functions.sass} | 8 --
.../src/main/sass/_global.sass | 2 +-
.../src/main/sass/_mixins.sass} | 35 ++++--
.../src/main/sass/_variables.sass} | 20 ++--
.../src/main/sass/components/_button.sass | 73 +++++++++++
.../src/main/sass/components/_label.sass} | 15 +--
.../src/main/sass/components/_textbutton.sass} | 52 ++++++--
.../src/main/sass/components/_textfield.sass} | 55 +++++++--
.../src/main/sass/royale-jewel-blue.sass} | 2 +-
frameworks/themes/JewelTheme/pom.xml | 4 +-
.../{royale-jewel-red.css => defaults.css} | 66 +++++-----
...or-palette.sass => _default-color-palette.sass} | 12 +-
.../themes/JewelTheme/src/main/sass/_global.sass | 3 +-
.../sass/{royale-jewel-blue.sass => defaults.sass} | 2 +-
frameworks/themes/pom.xml | 1 +
27 files changed, 609 insertions(+), 113 deletions(-)
diff --git a/examples/royale/JewelExample/pom.xml b/examples/royale/JewelExample/pom.xml
index 5d0bcc6..19f1837 100644
--- a/examples/royale/JewelExample/pom.xml
+++ b/examples/royale/JewelExample/pom.xml
@@ -97,6 +97,13 @@
<type>swc</type>
<scope>theme</scope>
</dependency>
+ <dependency>
+ <groupId>org.apache.royale.framework</groupId>
+ <artifactId>JewelBlueTheme</artifactId>
+ <version>0.9.3-SNAPSHOT</version>
+ <type>swc</type>
+ <scope>theme</scope>
+ </dependency>
</dependencies>
</project>
diff --git a/examples/royale/JewelExample/src/main/config/compile-app-config.xml b/examples/royale/JewelExample/src/main/config/compile-app-config.xml
index d81fba3..ccb20e9 100644
--- a/examples/royale/JewelExample/src/main/config/compile-app-config.xml
+++ b/examples/royale/JewelExample/src/main/config/compile-app-config.xml
@@ -23,7 +23,7 @@
<compiler>
<theme>
<filename>../../../../../../frameworks/libs/JewelTheme.swc</filename>
- <filename>../../../../../../frameworks/themes/JewelTheme/src/main/resources/royale-jewel-blue.css</filename>
+ <filename>../../../../../../frameworks/themes/JewelTheme/src/main/resources/defaults.css</filename>
</theme>
</compiler>
</royale-config>
diff --git a/examples/royale/JewelExample/src/main/resources/jewel-example-index-template.html b/examples/royale/JewelExample/src/main/resources/jewel-example-index-template.html
index cf5ea3c..d98e4cf 100644
--- a/examples/royale/JewelExample/src/main/resources/jewel-example-index-template.html
+++ b/examples/royale/JewelExample/src/main/resources/jewel-example-index-template.html
@@ -22,7 +22,7 @@
<meta name="Custom Template for injecting custom style CSS">
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0">
<link rel="stylesheet" type="text/css" href="${application}.css">
- <link href="https://fonts.googleapis.com/css?family=Lato" rel="stylesheet">
+ <link href="https://fonts.googleapis.com/css?family=Lato:400,700" rel="stylesheet">
${head}
</head>
<body>
diff --git a/frameworks/themes/JewelBlueTheme/asconfig.json b/frameworks/themes/JewelBlueTheme/asconfig.json
new file mode 100644
index 0000000..b30f1fd
--- /dev/null
+++ b/frameworks/themes/JewelBlueTheme/asconfig.json
@@ -0,0 +1,34 @@
+/*
+ * 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.
+ */
+ {
+ "config": "royale",
+ "type": "lib",
+ "compilerOptions": {
+ "debug": true,
+ "targets": [
+ "JSRoyale",
+ "SWF"
+ ],
+ "include-classes": [
+ "JewelBlueThemeClasses"
+ ],
+ "include-sources": [
+ "src/main/royale"
+ ],
+ "output": "target/JewelBlueTheme.swc"
+ }
+}
diff --git a/frameworks/themes/JewelBlueTheme/build.xml b/frameworks/themes/JewelBlueTheme/build.xml
new file mode 100644
index 0000000..d809961
--- /dev/null
+++ b/frameworks/themes/JewelBlueTheme/build.xml
@@ -0,0 +1,133 @@
+<?xml version="1.0"?>
+<!--
+
+ 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.
+
+-->
+
+
+<project name="JewelBlueTheme" default="main" basedir=".">
+ <property name="ROYALE_HOME" location="../../.."/>
+
+ <property file="${ROYALE_HOME}/env.properties"/>
+ <property environment="env"/>
+ <property file="${ROYALE_HOME}/build.properties"/>
+ <property name="ROYALE_HOME" value="${ROYALE_HOME}"/>
+
+ <property name="target.name" value="${ant.project.name}.swc" />
+
+ <!-- doesn't contain compiled files so only need to compile JS version -->
+ <target name="main" depends="clean,check-compiler,compile,compile-js,copy-swc,test" description="Full build of ${ant.project.name}.swc">
+ </target>
+
+ <target name="compile-js">
+ <!-- doesn't contain compiled files so only need to compile JS version
+ <ant dir="${ROYALE_HOME}/frameworks/js/projects/${ant.project.name}JS/" inheritAll="false" >
+ <property name="ROYALE_SWF_COMPILER_HOME" value="${ROYALE_SWF_COMPILER_HOME}"/>
+ <property name="ROYALE_COMPILER_HOME" value="${ROYALE_COMPILER_HOME}"/>
+ <property name="ROYALE_HOME" value="${ROYALE_HOME}"/>
+ </ant>
+ -->
+ </target>
+
+ <target name="copy-swc" if="env.AIR_HOME">
+ <copy file="${basedir}/target/${target.name}" tofile="${ROYALE_HOME}/frameworks/libs/${target.name}" />
+ </target>
+
+ <target name="check-for-tests" >
+ <condition property="skip-tests" >
+ <not>
+ <available file="${basedir}/src/test/royale/build.xml" />
+ </not>
+ </condition>
+ </target>
+
+ <target name="test" depends="check-for-tests" unless="skip-tests">
+ <ant dir="src/test/royale" />
+ </target>
+
+ <target name="clean">
+ <delete failonerror="false">
+ <fileset dir="${ROYALE_HOME}/frameworks/libs">
+ <include name="${target.name}"/>
+ </fileset>
+ </delete>
+ <delete failonerror="false" includeemptydirs="true">
+ <fileset dir="${basedir}/target">
+ <include name="**/**"/>
+ </fileset>
+ </delete>
+ <antcall target="clean-tests" />
+ </target>
+
+ <target name="clean-tests" depends="check-for-tests" unless="skip-tests">
+ <ant dir="src/test/royale" target="clean"/>
+ </target>
+
+ <target name="compile" description="Compiles .as files into .swc" if="env.AIR_HOME">
+ <echo message="Compiling libs/${ant.project.name}.swc"/>
+ <echo message="ROYALE_HOME: ${ROYALE_HOME}"/>
+ <echo message="ROYALE_SWF_COMPILER_HOME: ${ROYALE_SWF_COMPILER_HOME}"/>
+ <echo message="ROYALE_COMPILER_HOME: ${ROYALE_COMPILER_HOME}"/>
+
+ <java jar="${ROYALE_COMPILER_HOME}/lib/compc.jar" fork="true" >
+ <jvmarg value="-Xmx384m" />
+ <jvmarg value="-Dsun.io.useCanonCaches=false" />
+ <jvmarg value="-Droyalelib=${ROYALE_HOME}/frameworks" />
+ <arg value="+royalelib=${ROYALE_HOME}/frameworks" />
+ <arg value="+playerglobal.version=${playerglobal.version}" />
+ <arg value="+env.AIR_HOME=${env.AIR_HOME}" />
+ <arg value="-compiler.strict-xml=true" />
+ <arg value="-compiler.targets=SWF,JSRoyale" />
+ <arg value="-output=${basedir}/target/${target.name}" />
+ <arg value="-load-config=${basedir}/src/main/config/compile-swf-config.xml" />
+ <arg value="-js-load-config=${ROYALE_HOME}/frameworks/js-config.xml" />
+ <arg value="-js-load-config+=${basedir}/../../js/themes/${ant.project.name}JS/src/main/config/compile-js-config.xml" />
+ </java>
+ </target>
+
+ <target name="check-compiler" depends="check-compiler-home,check-transpiler-home">
+ <path id="lib.path">
+ <fileset dir="${ROYALE_COMPILER_HOME}/lib" includes="compiler-royaleTasks.jar"/>
+ </path>
+ <taskdef resource="flexTasks.tasks" classpathref="lib.path"/>
+ </target>
+
+ <target name="check-compiler-home"
+ description="Set ROYALE_SWF_COMPILER_HOME to point at the compiler.">
+
+ <available file="${ROYALE_HOME}/lib/compiler-mxmlc.jar"
+ type="file"
+ property="ROYALE_SWF_COMPILER_HOME"
+ value="${ROYALE_HOME}"/>
+
+ <fail message="ROYALE_SWF_COMPILER_HOME must be set to a folder with a lib sub-folder containing compiler-mxmlc.jar such as the compiler folder in royale-compiler repo or the root of a Royale SDK"
+ unless="ROYALE_SWF_COMPILER_HOME"/>
+ </target>
+
+ <target name="check-transpiler-home"
+ description="Set ROYALE_COMPILER_HOME to point at the cross-compiler.">
+
+ <available file="${ROYALE_HOME}/js/lib/jsc.jar"
+ type="file"
+ property="ROYALE_COMPILER_HOME"
+ value="${ROYALE_HOME}/js"/>
+
+ <fail message="ROYALE_COMPILER_HOME must be set to a folder with a lib sub-folder containing jsc.jar such as the compiler-jx folder in royale-compiler repo or the js folder of a Royale SDK"
+ unless="ROYALE_COMPILER_HOME"/>
+ </target>
+
+</project>
diff --git a/frameworks/themes/JewelTheme/pom.xml b/frameworks/themes/JewelBlueTheme/pom.xml
similarity index 94%
copy from frameworks/themes/JewelTheme/pom.xml
copy to frameworks/themes/JewelBlueTheme/pom.xml
index 055a04d..30632ff 100644
--- a/frameworks/themes/JewelTheme/pom.xml
+++ b/frameworks/themes/JewelBlueTheme/pom.xml
@@ -26,11 +26,11 @@
<version>0.9.3-SNAPSHOT</version>
</parent>
- <artifactId>JewelTheme</artifactId>
+ <artifactId>JewelBlueTheme</artifactId>
<version>0.9.3-SNAPSHOT</version>
<packaging>swc</packaging>
- <name>Apache Royale: Framework: Themes: JewelTheme</name>
+ <name>Apache Royale: Framework: Themes: JewelBlueTheme</name>
<build>
<sourceDirectory>src/main/royale</sourceDirectory>
@@ -42,7 +42,7 @@
<extensions>true</extensions>
<configuration>
<includeClasses>
- <includeClass>JewelThemeClasses</includeClass>
+ <includeClass>JewelBlueThemeClasses</includeClass>
</includeClasses>
<includeFiles>
<include-file>
diff --git a/frameworks/themes/JewelBlueTheme/src/main/config/compile-swf-config.xml b/frameworks/themes/JewelBlueTheme/src/main/config/compile-swf-config.xml
new file mode 100644
index 0000000..221a32b
--- /dev/null
+++ b/frameworks/themes/JewelBlueTheme/src/main/config/compile-swf-config.xml
@@ -0,0 +1,85 @@
+<!--
+
+ 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.
+
+-->
+<royale-config>
+
+ <compiler>
+ <accessible>false</accessible>
+
+ <!-- build both SWF and JS. -->
+ <targets>
+ <target>JSRoyale</target>
+ </targets>
+ <strict-xml>true</strict-xml>
+
+ <external-library-path>
+ <path-element>${env.AIR_HOME}/frameworks/libs/air/airglobal.swc</path-element>
+ <path-element>../../../../../libs/Binding.swc</path-element>
+ <path-element>../../../../../libs/Core.swc</path-element>
+ <path-element>../../../../../libs/Graphics.swc</path-element>
+ <path-element>../../../../../libs/Basic.swc</path-element>
+ <path-element>../../../../../libs/Collections.swc</path-element>
+ <path-element>../../../../../libs/HTML.swc</path-element>
+ </external-library-path>
+
+ <allow-subclass-overrides>true</allow-subclass-overrides>
+ <mxml>
+ <children-as-data>true</children-as-data>
+ </mxml>
+ <binding-value-change-event>org.apache.royale.events.ValueChangeEvent</binding-value-change-event>
+ <binding-value-change-event-kind>org.apache.royale.events.ValueChangeEvent</binding-value-change-event-kind>
+ <binding-value-change-event-type>valueChange</binding-value-change-event-type>
+
+ <define>
+ <name>COMPILE::SWF</name>
+ <value>true</value>
+ </define>
+ <define>
+ <name>COMPILE::JS</name>
+ <value>true</value>
+ </define>
+
+ <keep-as3-metadata>
+ <name>Bindable</name>
+ <name>Managed</name>
+ <name>ChangeEvent</name>
+ <name>NonCommittingChangeEvent</name>
+ <name>Transient</name>
+ </keep-as3-metadata>
+
+ <locale/>
+
+ <library-path/>
+
+ <source-path>
+ <path-element>../royale</path-element>
+ </source-path>
+
+ <warn-no-constructor>false</warn-no-constructor>
+ </compiler>
+
+ <include-lookup-only>true</include-lookup-only>
+
+ <include-classes>
+ <class>JewelBlueThemeClasses</class>
+ </include-classes>
+
+ <target-player>${playerglobal.version}</target-player>
+
+
+</royale-config>
diff --git a/frameworks/themes/JewelBlueTheme/src/main/resources/assets/JewelButton2.svg b/frameworks/themes/JewelBlueTheme/src/main/resources/assets/JewelButton2.svg
new file mode 100644
index 0000000..ad0c128
--- /dev/null
+++ b/frameworks/themes/JewelBlueTheme/src/main/resources/assets/JewelButton2.svg
@@ -0,0 +1,44 @@
+
+<!--
+
+ 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.
+
+-->
+
+<svg width="152px" height="42px" viewBox="0 0 152 42" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+ <defs>
+ <linearGradient x1="50%" y1="3.10307717%" x2="50%" y2="98.2081246%" id="linearGradient-1">
+ <stop stop-color="#3BB0FF" offset="0%"></stop>
+ <stop stop-color="#1E36FA" offset="100%"></stop>
+ </linearGradient>
+ <rect id="path-2" x="0" y="0" width="150" height="40" rx="3"></rect>
+ <linearGradient x1="50%" y1="0%" x2="50%" y2="98.2362085%" id="linearGradient-3">
+ <stop stop-color="#8EDEFF" offset="0%"></stop>
+ <stop stop-color="#1D89E6" offset="100%"></stop>
+ </linearGradient>
+ </defs>
+ <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+ <g id="JewelButton">
+ <g id="Background" transform="translate(1.000000, 1.000000)">
+ <g>
+ <use fill="url(#linearGradient-1)" fill-rule="evenodd" xlink:href="#path-2"></use>
+ <rect stroke="#244084" stroke-width="1" x="-0.5" y="-0.5" width="151" height="41" rx="3"></rect>
+ </g>
+ <rect stroke="url(#linearGradient-3)" x="0.5" y="0.5" width="149" height="39" rx="3"></rect>
+ </g>
+ </g>
+ </g>
+</svg>
\ No newline at end of file
diff --git a/frameworks/themes/JewelBlueTheme/src/main/resources/assets/jewel-button.svg b/frameworks/themes/JewelBlueTheme/src/main/resources/assets/jewel-button.svg
new file mode 100644
index 0000000..63bfc72
--- /dev/null
+++ b/frameworks/themes/JewelBlueTheme/src/main/resources/assets/jewel-button.svg
@@ -0,0 +1,37 @@
+
+
+<!--
+
+ 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.
+
+-->
+<svg viewBox="0 0 126 48" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+ <defs>
+ <rect id="path-1" x="0" y="0" width="126" height="48" rx="4"></rect>
+ </defs>
+ <g id="Jewel" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+ <g id="button/large">
+ <mask id="mask-2" fill="white">
+ <use xlink:href="#path-1"></use>
+ </mask>
+ <use id="mask" fill="#009EF5" fill-rule="evenodd" xlink:href="#path-1"></use>
+ <g id="colors/primary" mask="url(#mask-2)" fill="#006CEB" fill-rule="evenodd">
+ <rect x="0" y="0" width="126" height="48"></rect>
+ </g>
+ <text id="CTA" mask="url(#mask-2)" font-family="Lato-Bold, Lato" font-size="18" font-weight="bold" line-spacing="24" letter-spacing="-0.225000009"></text>
+ </g>
+ </g>
+</svg>
\ No newline at end of file
diff --git a/frameworks/themes/JewelTheme/src/main/resources/royale-jewel-blue.css b/frameworks/themes/JewelBlueTheme/src/main/resources/royale-jewel-blue.css
similarity index 98%
rename from frameworks/themes/JewelTheme/src/main/resources/royale-jewel-blue.css
rename to frameworks/themes/JewelBlueTheme/src/main/resources/royale-jewel-blue.css
index 91f4512..32894c4 100644
--- a/frameworks/themes/JewelTheme/src/main/resources/royale-jewel-blue.css
+++ b/frameworks/themes/JewelBlueTheme/src/main/resources/royale-jewel-blue.css
@@ -20,7 +20,6 @@
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
- fonts: ClassReference("org.apache.royale.jewel.JewelThemeFontInject")
}
.royale {
diff --git a/frameworks/themes/JewelTheme/src/main/sass/colors/_red-color-palette.sass b/frameworks/themes/JewelBlueTheme/src/main/royale/JewelBlueThemeClasses.as
similarity index 76%
copy from frameworks/themes/JewelTheme/src/main/sass/colors/_red-color-palette.sass
copy to frameworks/themes/JewelBlueTheme/src/main/royale/JewelBlueThemeClasses.as
index b564176..fddadba 100644
--- a/frameworks/themes/JewelTheme/src/main/sass/colors/_red-color-palette.sass
+++ b/frameworks/themes/JewelBlueTheme/src/main/royale/JewelBlueThemeClasses.as
@@ -16,11 +16,18 @@
// limitations under the License.
//
////////////////////////////////////////////////////////////////////////////////
-// Color Themes
-$default-color: rgba(0,0,0,0.20)
-$primary-color: #FF0000
-$secondary-color: #342F30
-$emphasized-color: #016936
+package
+{
-$default-font-color: rgba(0, 0, 0, .5)
-$font-color: white
\ No newline at end of file
+ /**
+ * @private
+ * This class is used to link additional classes into JewelBlueTheme.swc
+ * beyond those that are found by dependecy analysis starting
+ * from the classes specified in manifest.xml.
+ */
+ internal class JewelBlueThemeClasses
+ {
+
+ }
+
+}
\ No newline at end of file
diff --git a/frameworks/themes/JewelTheme/src/main/sass/colors/_blue-color-palette.sass b/frameworks/themes/JewelBlueTheme/src/main/sass/_blue-color-palette.sass
similarity index 100%
copy from frameworks/themes/JewelTheme/src/main/sass/colors/_blue-color-palette.sass
copy to frameworks/themes/JewelBlueTheme/src/main/sass/_blue-color-palette.sass
diff --git a/frameworks/themes/JewelTheme/src/main/sass/colors/_blue-color-palette.sass b/frameworks/themes/JewelBlueTheme/src/main/sass/_functions.sass
similarity index 84%
copy from frameworks/themes/JewelTheme/src/main/sass/colors/_blue-color-palette.sass
copy to frameworks/themes/JewelBlueTheme/src/main/sass/_functions.sass
index 3bdf08e..0c6fb82 100644
--- a/frameworks/themes/JewelTheme/src/main/sass/colors/_blue-color-palette.sass
+++ b/frameworks/themes/JewelBlueTheme/src/main/sass/_functions.sass
@@ -16,11 +16,3 @@
// limitations under the License.
//
////////////////////////////////////////////////////////////////////////////////
-// Color Themes
-$default-color: rgba(0,0,0,.3)
-$primary-color: #006CEB
-$secondary-color: #011833
-$emphasized-color: #1FD348
-
-$default-font-color: rgba(0, 0, 0, .4)
-$font-color: white
\ No newline at end of file
diff --git a/frameworks/themes/JewelTheme/src/main/sass/_global.sass b/frameworks/themes/JewelBlueTheme/src/main/sass/_global.sass
similarity index 94%
copy from frameworks/themes/JewelTheme/src/main/sass/_global.sass
copy to frameworks/themes/JewelBlueTheme/src/main/sass/_global.sass
index 3a8a0ef..febf662 100644
--- a/frameworks/themes/JewelTheme/src/main/sass/_global.sass
+++ b/frameworks/themes/JewelBlueTheme/src/main/sass/_global.sass
@@ -25,7 +25,7 @@
-moz-box-sizing: border-box
-webkit-box-sizing: border-box
box-sizing: border-box
- //fonts: ClassReference("org.apache.royale.jewel.JewelThemeFontInject")
+ //fonts: ClassReference("org.apache.royale.jewel.JewelBlueThemeFontInject")
.royale
padding: 10px
diff --git a/frameworks/themes/JewelTheme/src/main/sass/_global.sass b/frameworks/themes/JewelBlueTheme/src/main/sass/_mixins.sass
similarity index 55%
copy from frameworks/themes/JewelTheme/src/main/sass/_global.sass
copy to frameworks/themes/JewelBlueTheme/src/main/sass/_mixins.sass
index 3a8a0ef..f4e7302 100644
--- a/frameworks/themes/JewelTheme/src/main/sass/_global.sass
+++ b/frameworks/themes/JewelBlueTheme/src/main/sass/_mixins.sass
@@ -17,16 +17,27 @@
//
////////////////////////////////////////////////////////////////////////////////
-@namespace j "library://ns.apache.org/royale/jewel"
-@namespace "http://www.w3.org/1999/xhtml"
+=button-theme($button-color, $text-color)
+ //border-color: darken($button-color, 20%)
+ background-color: $button-color
+ transition:
+ duration: 0.4s
+ color: $text-color
+ &:hover
+ background-color: lighten($button-color, 6%)
+ //box-shadow: 0 .125em $off-wht, inset 0 .063em $off-wht, inset 0 -.188em lighten($btn-color, 2%)
+ &:active
+ background-color: darken($button-color, 6%)
+ //box-shadow: 0 .063em $off-wht, inset 0 0 1.094em darken($btn-color, 40%), inset 0 .063em darken($btn-color, 20%),inset 0 -0.188em darken($btn-color, 20%)
+ &:focus
+ outline: 0
+ &[disabled]
+ background-color: $disabled-color
+ color: $font-disabled-color
+ cursor: unset
-
-.royale *, .royale *:before, .royale *:after
- -moz-box-sizing: border-box
- -webkit-box-sizing: border-box
- box-sizing: border-box
- //fonts: ClassReference("org.apache.royale.jewel.JewelThemeFontInject")
-
-.royale
- padding: 10px
- margin: 10px
+//=trans($val...)
+// -webkit-transition: $val
+// -moz-transition: $val
+// -o-transition: $val
+// transition: $val
diff --git a/frameworks/themes/JewelTheme/src/main/sass/colors/_red-color-palette.sass b/frameworks/themes/JewelBlueTheme/src/main/sass/_variables.sass
similarity index 82%
copy from frameworks/themes/JewelTheme/src/main/sass/colors/_red-color-palette.sass
copy to frameworks/themes/JewelBlueTheme/src/main/sass/_variables.sass
index b564176..3a6b64b 100644
--- a/frameworks/themes/JewelTheme/src/main/sass/colors/_red-color-palette.sass
+++ b/frameworks/themes/JewelBlueTheme/src/main/sass/_variables.sass
@@ -16,11 +16,17 @@
// limitations under the License.
//
////////////////////////////////////////////////////////////////////////////////
-// Color Themes
-$default-color: rgba(0,0,0,0.20)
-$primary-color: #FF0000
-$secondary-color: #342F30
-$emphasized-color: #016936
-$default-font-color: rgba(0, 0, 0, .5)
-$font-color: white
\ No newline at end of file
+$font-stack: 'Lato', sans-serif
+$font-size: 0.75rem
+
+// Common Colors
+$white: rgba(white,.9)
+$disabled-color: #CCCCCC
+$font-disabled-color: #888888
+
+// Button variables
+$button-min-width: 74px !default
+
+
+
diff --git a/frameworks/themes/JewelBlueTheme/src/main/sass/components/_button.sass b/frameworks/themes/JewelBlueTheme/src/main/sass/components/_button.sass
new file mode 100644
index 0000000..d04d186
--- /dev/null
+++ b/frameworks/themes/JewelBlueTheme/src/main/sass/components/_button.sass
@@ -0,0 +1,73 @@
+////////////////////////////////////////////////////////////////////////////////
+//
+// 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.
+//
+////////////////////////////////////////////////////////////////////////////////
+
+/**
+ * Jewel Button
+ */
+%button-def
+ cursor: pointer
+
+ display: inline-block
+ margin: 0 //1rem
+ padding: 10px 16px //.938em 1.875em
+ min-width: $button-min-width
+ min-height: 34px
+
+ /* Background: */
+ border: none // .094em solid
+ border-radius: 3px //.625em
+ //box-shadow: 0 .375em .313em -.313em rgba(black,.8), inset 0 .063em $off-wht, inset 0 -.188em rgba(black,.15)
+
+.jewel.button, .jewel.button:hover
+ @extend %button-def
+
+.jewel.button
+ +button-theme($default-color, $default-font-color)
+
+.jewel.button.primary
+ +button-theme($primary-color, $font-color)
+
+.jewel.button.secondary
+ +button-theme($secondary-color, $font-color)
+
+.jewel.button.emphasized
+ +button-theme($emphasized-color, $font-color)
+
+
+//SVGs
+//border:1px; /*without this svg shows scaled and bigger*/
+//border-image-source: url(assets/jewel-button.svg) ;
+//border-image-slice: 4;
+//border-image-width: 4;
+
+//background-image: linear-gradient(#3BB0FF, #1E36FA);
+
+//background-color: #006CEB;
+//background-size: cover;
+//background-repeat: no-repeat;
+//background-clip: padding-box;
+
+//background: url(assets/4slicewithpattern.svg);
+//background-size: cover;
+//width: fit-content;
+//height: fit-content;
+
+//.button:active
+//box-shadow: #E6431D 0 1px 0 inset;
+//text-shadow: 0 -1px 0 #5F3A29;
\ No newline at end of file
diff --git a/frameworks/themes/JewelTheme/src/main/sass/colors/_blue-color-palette.sass b/frameworks/themes/JewelBlueTheme/src/main/sass/components/_label.sass
similarity index 84%
rename from frameworks/themes/JewelTheme/src/main/sass/colors/_blue-color-palette.sass
rename to frameworks/themes/JewelBlueTheme/src/main/sass/components/_label.sass
index 3bdf08e..63b60c9 100644
--- a/frameworks/themes/JewelTheme/src/main/sass/colors/_blue-color-palette.sass
+++ b/frameworks/themes/JewelBlueTheme/src/main/sass/components/_label.sass
@@ -16,11 +16,12 @@
// limitations under the License.
//
////////////////////////////////////////////////////////////////////////////////
-// Color Themes
-$default-color: rgba(0,0,0,.3)
-$primary-color: #006CEB
-$secondary-color: #011833
-$emphasized-color: #1FD348
-$default-font-color: rgba(0, 0, 0, .4)
-$font-color: white
\ No newline at end of file
+/**
+ * Jewel Label
+ */
+.jewel.label
+ //IBeadView: ClassReference("org.apache.royale.html.beads.TextFieldView")
+ font:
+ family: $font-stack
+ size: $font-size
\ No newline at end of file
diff --git a/frameworks/themes/JewelTheme/src/main/sass/_global.sass b/frameworks/themes/JewelBlueTheme/src/main/sass/components/_textbutton.sass
similarity index 52%
copy from frameworks/themes/JewelTheme/src/main/sass/_global.sass
copy to frameworks/themes/JewelBlueTheme/src/main/sass/components/_textbutton.sass
index 3a8a0ef..b02123a 100644
--- a/frameworks/themes/JewelTheme/src/main/sass/_global.sass
+++ b/frameworks/themes/JewelBlueTheme/src/main/sass/components/_textbutton.sass
@@ -16,17 +16,49 @@
// limitations under the License.
//
////////////////////////////////////////////////////////////////////////////////
+
+/**
+ * Jewel TextButton
+ */
+%textbutton-def
+ @extend %button-def
+ /* TextField */
+ font:
+ family: $font-stack
+ style: bold
+ size: $font-size
+ //+trans(0.2s ease-in-out)
+ text:
+ transform: uppercase
+ decoration: none
+ //shadow: 0 .063em rgba(black,.3)
+ [disabled]
+ text:
+ shadow: unset
-@namespace j "library://ns.apache.org/royale/jewel"
-@namespace "http://www.w3.org/1999/xhtml"
+.jewel.textbutton, .jewel.textbutton:hover
+ @extend %textbutton-def
+.jewel.textbutton
+ +button-theme($default-color, $default-font-color)
-.royale *, .royale *:before, .royale *:after
- -moz-box-sizing: border-box
- -webkit-box-sizing: border-box
- box-sizing: border-box
- //fonts: ClassReference("org.apache.royale.jewel.JewelThemeFontInject")
+.jewel.textbutton.primary
+ +button-theme($primary-color, $font-color)
+
+.jewel.textbutton.secondary
+ +button-theme($secondary-color, $font-color)
+
+.jewel.textbutton.emphasized
+ +button-theme($emphasized-color, $font-color)
+
+// /* TextField: */
+// font-family: $font-stack
+// font-size: 14px
+// font-weight: bold
+// color: $font-normal-color
+// text-shadow: 0 1px 0 #555
+
+// padding: 10px 0px
+// display: inline-block
+// min-width: 80px
-.royale
- padding: 10px
- margin: 10px
diff --git a/frameworks/themes/JewelTheme/src/main/sass/_global.sass b/frameworks/themes/JewelBlueTheme/src/main/sass/components/_textfield.sass
similarity index 56%
copy from frameworks/themes/JewelTheme/src/main/sass/_global.sass
copy to frameworks/themes/JewelBlueTheme/src/main/sass/components/_textfield.sass
index 3a8a0ef..84b696c 100644
--- a/frameworks/themes/JewelTheme/src/main/sass/_global.sass
+++ b/frameworks/themes/JewelBlueTheme/src/main/sass/components/_textfield.sass
@@ -17,16 +17,51 @@
//
////////////////////////////////////////////////////////////////////////////////
-@namespace j "library://ns.apache.org/royale/jewel"
-@namespace "http://www.w3.org/1999/xhtml"
+/**
+ * Jewel TextField
+ */
+TextField
+ position: relative
+ display: inline-block
+ box-sizing: border-box
+ width: 300px
+ max-width: 100%
+ margin: 0
+.vTextField--input
+ font-size: 16px
+ font-family: 'Lato', sans-serif
-.royale *, .royale *:before, .royale *:after
- -moz-box-sizing: border-box
- -webkit-box-sizing: border-box
- box-sizing: border-box
- //fonts: ClassReference("org.apache.royale.jewel.JewelThemeFontInject")
+ border: none
+ border-bottom: 2px solid
+ border-bottom-color: #ff0000
+ display: block
+ margin: 0
+ padding: 4 0
+ width: 100px
+ background: transparent
+ text-align: left
+ color: inherit
+ outline: none
+
+.vTextField--label
+ bottom: 0
+ color: #ff0000
+ font-size: 13px
+ left: 0
+ right: 0
+ pointer-events: none
+ position: absolute
+ display: block
+ width: 100%
+ overflow: hidden
+ white-space: nowrap
+ text-align: left
-.royale
- padding: 10px
- margin: 10px
+// padding: 5px;
+// border: solid 1px #666666;
+// border-radius: 6px;
+// color: #333333;
+//:hover
+// padding: 5px;
+// background-color: #DFDFDF;
diff --git a/frameworks/themes/JewelTheme/src/main/sass/royale-jewel-red.sass b/frameworks/themes/JewelBlueTheme/src/main/sass/royale-jewel-blue.sass
similarity index 96%
rename from frameworks/themes/JewelTheme/src/main/sass/royale-jewel-red.sass
rename to frameworks/themes/JewelBlueTheme/src/main/sass/royale-jewel-blue.sass
index 2ecaa8c..f92a6ae 100644
--- a/frameworks/themes/JewelTheme/src/main/sass/royale-jewel-red.sass
+++ b/frameworks/themes/JewelBlueTheme/src/main/sass/royale-jewel-blue.sass
@@ -16,7 +16,7 @@
*/
// Variables
-@import "colors/red-color-palette"
+@import "blue-color-palette"
@import "variables"
@import "mixins"
@import "functions"
diff --git a/frameworks/themes/JewelTheme/pom.xml b/frameworks/themes/JewelTheme/pom.xml
index 055a04d..6370b58 100644
--- a/frameworks/themes/JewelTheme/pom.xml
+++ b/frameworks/themes/JewelTheme/pom.xml
@@ -50,8 +50,8 @@
<path>../src/main/resources/assets/*</path>
</include-file>
<include-file>
- <name>royale-jewel-blue.css</name>
- <path>../src/main/resources/royale-jewel-blue.css</path>
+ <name>defaults.css</name>
+ <path>../src/main/resources/defaults.css</path>
</include-file>
</includeFiles>
</configuration>
diff --git a/frameworks/themes/JewelTheme/src/main/resources/royale-jewel-red.css b/frameworks/themes/JewelTheme/src/main/resources/defaults.css
similarity index 82%
rename from frameworks/themes/JewelTheme/src/main/resources/royale-jewel-red.css
rename to frameworks/themes/JewelTheme/src/main/resources/defaults.css
index f6d83dd..423dc09 100644
--- a/frameworks/themes/JewelTheme/src/main/resources/royale-jewel-red.css
+++ b/frameworks/themes/JewelTheme/src/main/resources/defaults.css
@@ -43,15 +43,15 @@
}
.jewel.button {
- background-color: rgba(0, 0, 0, 0.2);
+ background-color: rgba(0, 0, 0, 0.3);
transition-duration: 0.4s;
- color: rgba(0, 0, 0, 0.5);
+ color: rgba(0, 0, 0, 0.4);
}
.jewel.button:hover {
- background-color: rgba(15, 15, 15, 0.2);
+ background-color: rgba(15, 15, 15, 0.3);
}
.jewel.button:active {
- background-color: rgba(0, 0, 0, 0.2);
+ background-color: rgba(0, 0, 0, 0.3);
}
.jewel.button:focus {
outline: 0;
@@ -63,15 +63,15 @@
}
.jewel.button.primary {
- background-color: #FF0000;
+ background-color: #dedede;
transition-duration: 0.4s;
- color: white;
+ color: black;
}
.jewel.button.primary:hover {
- background-color: #ff1f1f;
+ background-color: #ededed;
}
.jewel.button.primary:active {
- background-color: #e00000;
+ background-color: #cfcfcf;
}
.jewel.button.primary:focus {
outline: 0;
@@ -83,15 +83,15 @@
}
.jewel.button.secondary {
- background-color: #342F30;
+ background-color: #011833;
transition-duration: 0.4s;
- color: white;
+ color: black;
}
.jewel.button.secondary:hover {
- background-color: #443e3f;
+ background-color: #022651;
}
.jewel.button.secondary:active {
- background-color: #242021;
+ background-color: #000a15;
}
.jewel.button.secondary:focus {
outline: 0;
@@ -103,15 +103,15 @@
}
.jewel.button.emphasized {
- background-color: #016936;
+ background-color: #1FD348;
transition-duration: 0.4s;
- color: white;
+ color: black;
}
.jewel.button.emphasized:hover {
- background-color: #018746;
+ background-color: #30e158;
}
.jewel.button.emphasized:active {
- background-color: #014b26;
+ background-color: #1bb83f;
}
.jewel.button.emphasized:focus {
outline: 0;
@@ -138,15 +138,15 @@
}
.jewel.textbutton {
- background-color: rgba(0, 0, 0, 0.2);
+ background-color: rgba(0, 0, 0, 0.3);
transition-duration: 0.4s;
- color: rgba(0, 0, 0, 0.5);
+ color: rgba(0, 0, 0, 0.4);
}
.jewel.textbutton:hover {
- background-color: rgba(15, 15, 15, 0.2);
+ background-color: rgba(15, 15, 15, 0.3);
}
.jewel.textbutton:active {
- background-color: rgba(0, 0, 0, 0.2);
+ background-color: rgba(0, 0, 0, 0.3);
}
.jewel.textbutton:focus {
outline: 0;
@@ -158,15 +158,15 @@
}
.jewel.textbutton.primary {
- background-color: #FF0000;
+ background-color: #dedede;
transition-duration: 0.4s;
- color: white;
+ color: black;
}
.jewel.textbutton.primary:hover {
- background-color: #ff1f1f;
+ background-color: #ededed;
}
.jewel.textbutton.primary:active {
- background-color: #e00000;
+ background-color: #cfcfcf;
}
.jewel.textbutton.primary:focus {
outline: 0;
@@ -178,15 +178,15 @@
}
.jewel.textbutton.secondary {
- background-color: #342F30;
+ background-color: #011833;
transition-duration: 0.4s;
- color: white;
+ color: black;
}
.jewel.textbutton.secondary:hover {
- background-color: #443e3f;
+ background-color: #022651;
}
.jewel.textbutton.secondary:active {
- background-color: #242021;
+ background-color: #000a15;
}
.jewel.textbutton.secondary:focus {
outline: 0;
@@ -198,15 +198,15 @@
}
.jewel.textbutton.emphasized {
- background-color: #016936;
+ background-color: #1FD348;
transition-duration: 0.4s;
- color: white;
+ color: black;
}
.jewel.textbutton.emphasized:hover {
- background-color: #018746;
+ background-color: #30e158;
}
.jewel.textbutton.emphasized:active {
- background-color: #014b26;
+ background-color: #1bb83f;
}
.jewel.textbutton.emphasized:focus {
outline: 0;
@@ -268,4 +268,4 @@ TextField {
text-align: left;
}
-/*# sourceMappingURL=royale-jewel-red.css.map */
+/*# sourceMappingURL=defaults.css.map */
diff --git a/frameworks/themes/JewelTheme/src/main/sass/colors/_red-color-palette.sass b/frameworks/themes/JewelTheme/src/main/sass/_default-color-palette.sass
similarity index 85%
rename from frameworks/themes/JewelTheme/src/main/sass/colors/_red-color-palette.sass
rename to frameworks/themes/JewelTheme/src/main/sass/_default-color-palette.sass
index b564176..1b331d7 100644
--- a/frameworks/themes/JewelTheme/src/main/sass/colors/_red-color-palette.sass
+++ b/frameworks/themes/JewelTheme/src/main/sass/_default-color-palette.sass
@@ -17,10 +17,10 @@
//
////////////////////////////////////////////////////////////////////////////////
// Color Themes
-$default-color: rgba(0,0,0,0.20)
-$primary-color: #FF0000
-$secondary-color: #342F30
-$emphasized-color: #016936
+$default-color: rgba(0,0,0,.3)
+$primary-color: #dedede
+$secondary-color: #011833
+$emphasized-color: #1FD348
-$default-font-color: rgba(0, 0, 0, .5)
-$font-color: white
\ No newline at end of file
+$default-font-color: rgba(0, 0, 0, .4)
+$font-color: #000000
\ No newline at end of file
diff --git a/frameworks/themes/JewelTheme/src/main/sass/_global.sass b/frameworks/themes/JewelTheme/src/main/sass/_global.sass
index 3a8a0ef..23fa5ea 100644
--- a/frameworks/themes/JewelTheme/src/main/sass/_global.sass
+++ b/frameworks/themes/JewelTheme/src/main/sass/_global.sass
@@ -25,8 +25,7 @@
-moz-box-sizing: border-box
-webkit-box-sizing: border-box
box-sizing: border-box
- //fonts: ClassReference("org.apache.royale.jewel.JewelThemeFontInject")
-
+
.royale
padding: 10px
margin: 10px
diff --git a/frameworks/themes/JewelTheme/src/main/sass/royale-jewel-blue.sass b/frameworks/themes/JewelTheme/src/main/sass/defaults.sass
similarity index 96%
rename from frameworks/themes/JewelTheme/src/main/sass/royale-jewel-blue.sass
rename to frameworks/themes/JewelTheme/src/main/sass/defaults.sass
index 2a9526d..b3bd62e 100644
--- a/frameworks/themes/JewelTheme/src/main/sass/royale-jewel-blue.sass
+++ b/frameworks/themes/JewelTheme/src/main/sass/defaults.sass
@@ -16,7 +16,7 @@
*/
// Variables
-@import "colors/blue-color-palette"
+@import "default-color-palette"
@import "variables"
@import "mixins"
@import "functions"
diff --git a/frameworks/themes/pom.xml b/frameworks/themes/pom.xml
index 19fbbe6..a30c613 100644
--- a/frameworks/themes/pom.xml
+++ b/frameworks/themes/pom.xml
@@ -35,6 +35,7 @@
<modules>
<module>Basic</module>
<module>JewelTheme</module>
+ <module>JewelBlueTheme</module>
</modules>
<dependencies>
--
To stop receiving notification emails like this one, please contact
carlosrovira@apache.org.