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 <[email protected]> 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 [email protected].
