1 line
51 KiB
JSON
1 line
51 KiB
JSON
{"config":{"indexing":"full","lang":["en"],"min_search_length":3,"prebuild_index":false,"separator":"[\\s\\-]+"},"docs":[{"location":"","text":"Overview Modern JavaFX CSS theme collection with additional controls. Flat interface inspired by the variety of Web component frameworks. CSS first! It works with existing JavaFX controls. Two themes in both light and dark variants. Simple and intuitive color system based on the GitHub Primer guidelines . Fully customizable. Easily change global accent (brand) color or individual control via looked-up color variables. Written in modular SASS . No more digging in 3,500 lines of CSS code. Custom themes support . Compile your own theme from existing SASS sources. Additional controls for modern GUI development. Beautiful demo app: Preview all supported themes. Test every feature of each existing control and check source code directly in the app to learn how to implement it. Check color palette and modify theme color contrast. Hot reload. Play with control styles without restarting the whole app. Showcases to demonstrate real-world project usage. Try It Out Grab a self-updating download of the Sampler app for Windows, macOS and Linux, packaged with Conveyor . Or download the latest build on the releases page . Related Links Source Code Bug Tracker Sample Theme (find more info in Theming section) Themes Primer Light Primer Dark Nord Light Nord Dark Cupertino Light Cupertino Dark Dracula","title":"Overview"},{"location":"#overview","text":"Modern JavaFX CSS theme collection with additional controls. Flat interface inspired by the variety of Web component frameworks. CSS first! It works with existing JavaFX controls. Two themes in both light and dark variants. Simple and intuitive color system based on the GitHub Primer guidelines . Fully customizable. Easily change global accent (brand) color or individual control via looked-up color variables. Written in modular SASS . No more digging in 3,500 lines of CSS code. Custom themes support . Compile your own theme from existing SASS sources. Additional controls for modern GUI development. Beautiful demo app: Preview all supported themes. Test every feature of each existing control and check source code directly in the app to learn how to implement it. Check color palette and modify theme color contrast. Hot reload. Play with control styles without restarting the whole app. Showcases to demonstrate real-world project usage.","title":"Overview"},{"location":"#try-it-out","text":"Grab a self-updating download of the Sampler app for Windows, macOS and Linux, packaged with Conveyor . Or download the latest build on the releases page .","title":"Try It Out"},{"location":"#related-links","text":"Source Code Bug Tracker Sample Theme (find more info in Theming section)","title":"Related Links"},{"location":"#themes","text":"Primer Light Primer Dark Nord Light Nord Dark Cupertino Light Cupertino Dark Dracula","title":"Themes"},{"location":"build/","text":"Project structure Directory Description .github GitHub Actions workflows base additional controls and Java API docs GitHub Pages project website sampler Sampler application styles theme sources (SASS) Instructions To build and run the whole project, including packaged Sampler app image : mvn install mvn javafx:run -pl sampler If you want to use hot reload (update CSS without restarting the Sampler app), you have to start app in development mode: # start watching for SASS source code changes mvn compile -pl styles -Pdev # run sampler in dev mode mvn javafx:run -pl sampler -Pdev You can also build each Maven module individually: mvn install -N mvn install -pl styles mvn install -pl base mvn javafx:run -pl sampler Contributing If you want to contribute some Java code, you should be aware of two additional checks. Maven Checkstyle analysis will be performed automatically. You just need to read Maven output warnings, if any. Installing checkstyle plugin , which is supported by any IDE, makes it event simpler. Import checkstyle.xml to your code style settings to auto-configure project's code formatting and linting. To perform Maven ErrorProne plugin analysis, use the corresponding profile. mvn compile -Plint Docs Project documentation is made with MkDocs . If you want to serve the docs locally to preview some significant changes, you need Python installed. Otherwise, don't worry and just edit the corresponding markdown file(s). GitHub Pages are updated automatically by the GitHub action on each push to the master branch. pip install mkdocs-material cd docs mkdocs serve","title":"Build"},{"location":"build/#project-structure","text":"Directory Description .github GitHub Actions workflows base additional controls and Java API docs GitHub Pages project website sampler Sampler application styles theme sources (SASS)","title":"Project structure"},{"location":"build/#instructions","text":"To build and run the whole project, including packaged Sampler app image : mvn install mvn javafx:run -pl sampler If you want to use hot reload (update CSS without restarting the Sampler app), you have to start app in development mode: # start watching for SASS source code changes mvn compile -pl styles -Pdev # run sampler in dev mode mvn javafx:run -pl sampler -Pdev You can also build each Maven module individually: mvn install -N mvn install -pl styles mvn install -pl base mvn javafx:run -pl sampler","title":"Instructions"},{"location":"build/#contributing","text":"If you want to contribute some Java code, you should be aware of two additional checks. Maven Checkstyle analysis will be performed automatically. You just need to read Maven output warnings, if any. Installing checkstyle plugin , which is supported by any IDE, makes it event simpler. Import checkstyle.xml to your code style settings to auto-configure project's code formatting and linting. To perform Maven ErrorProne plugin analysis, use the corresponding profile. mvn compile -Plint","title":"Contributing"},{"location":"build/#docs","text":"Project documentation is made with MkDocs . If you want to serve the docs locally to preview some significant changes, you need Python installed. Otherwise, don't worry and just edit the corresponding markdown file(s). GitHub Pages are updated automatically by the GitHub action on each push to the master branch. pip install mkdocs-material cd docs mkdocs serve","title":"Docs"},{"location":"fxml/","text":"FXML AtlantaFX theme is just a user-agent stylesheet, specifically a set of CSS rules that applies to all UI controls. So, nothing prevents it from work with FXML. But RAD tools support is different and sadly SceneBuilder themes (user-agent stylesheets) are hard-coded. SceneBuilder Integration See the corresponding issue . While SceneBuilder does not support adding custom themes, it is possible to overwrite looked-up CSS paths to make the existing buttons load custom CSS files . (not yet released) Manual Run mvn package -pl styles to generate theme package. You can also download it on the Releases page. Copy styles/target/AtlantaFX-${version}-scenebuilder.zip to the SceneBuilder app/ directory (e.g. %HOMEPATH%/Local/SceneBuilder/app/ on Windows) or another directory depending on where you installed SceneBuilder application on your PC. Open SceneBuilder.cfg in the SceneBuilder app directory and add the ZIP file to the beginning of the app.classpath variable, e.g.: # beware about file separator (slash or backslash) depending on your OS app.classpath=$APPDIR\\AtlantaFX-${version}-scenebuilder.zip:$APPDIR\\scenebuilder-18.0.0-all.jar Restart SceneBuilder. Then you can select AtlantaFX themes in the menu Preview -> Themes -> Caspian Embedded (FX2) . The themes are mapped as follows: SceneBuilder Caspian High Contrast (FX2) AtlantaFX Theme Caspian Embedded (FX2) disabled Primer Light Caspian Embedded (FX2) enabled Primer Dark Caspian Embedded QVGA (FX2) disabled Nord Light Caspian Embedded QVGA (FX2) enabled Nord Dark","title":"FXML"},{"location":"fxml/#fxml","text":"AtlantaFX theme is just a user-agent stylesheet, specifically a set of CSS rules that applies to all UI controls. So, nothing prevents it from work with FXML. But RAD tools support is different and sadly SceneBuilder themes (user-agent stylesheets) are hard-coded.","title":"FXML"},{"location":"fxml/#scenebuilder-integration","text":"See the corresponding issue . While SceneBuilder does not support adding custom themes, it is possible to overwrite looked-up CSS paths to make the existing buttons load custom CSS files . (not yet released)","title":"SceneBuilder Integration"},{"location":"fxml/#manual","text":"Run mvn package -pl styles to generate theme package. You can also download it on the Releases page. Copy styles/target/AtlantaFX-${version}-scenebuilder.zip to the SceneBuilder app/ directory (e.g. %HOMEPATH%/Local/SceneBuilder/app/ on Windows) or another directory depending on where you installed SceneBuilder application on your PC. Open SceneBuilder.cfg in the SceneBuilder app directory and add the ZIP file to the beginning of the app.classpath variable, e.g.: # beware about file separator (slash or backslash) depending on your OS app.classpath=$APPDIR\\AtlantaFX-${version}-scenebuilder.zip:$APPDIR\\scenebuilder-18.0.0-all.jar Restart SceneBuilder. Then you can select AtlantaFX themes in the menu Preview -> Themes -> Caspian Embedded (FX2) . The themes are mapped as follows: SceneBuilder Caspian High Contrast (FX2) AtlantaFX Theme Caspian Embedded (FX2) disabled Primer Light Caspian Embedded (FX2) enabled Primer Dark Caspian Embedded QVGA (FX2) disabled Nord Light Caspian Embedded QVGA (FX2) enabled Nord Dark","title":"Manual"},{"location":"getting-started/","text":"Getting Started AtlantaFX has no dependencies . If you want to use additional controls it provides, continue with Maven installation. If you just need to style standard JavaFX controls, you can also use the local installation, but in that case you'll have to download and update CSS files manually. Info Any AtlantaFX theme is compiled to a user-agent stylesheet. It's a single CSS file that is used to provide default styling for all UI controls. It completely replaces default JavaFX stylesheet, namely Modena theme. Installing Add project to the dependencies. Maven: <dependency> <groupId> io.github.mkpaz </groupId> <artifactId> atlantafx-base </artifactId> <version> 2.0.0 </version> </dependency> Gradle: repositories { mavenCentral () } dependencies { implementation 'io.github.mkpaz:atlantafx-base:2.0.0' } Set a theme: public class Launcher extends Application { public static void main ( String [] args ) { launch ( args ); } @Override public void start ( Stage stage ) { // find more themes in 'atlantafx.base.theme' package Application . setUserAgentStylesheet ( new PrimerLight (). getUserAgentStylesheet ()); Application . setUserAgentStylesheet ( new PrimerDark (). getUserAgentStylesheet ()); // the rest of the code ... } } Local Installation If you don't want to use additional dependencies, you can download compiled CSS themes from the GitHub Releases . Unpack AtlantaFX-*-themes.zip and place it to your project's classpath. Set CSS theme: Application . setUserAgentStylesheet ( /* path to the CSS file */ ); Or use Java property: -Djavafx.userAgentStylesheetUrl=[URL]","title":"Getting Started"},{"location":"getting-started/#getting-started","text":"AtlantaFX has no dependencies . If you want to use additional controls it provides, continue with Maven installation. If you just need to style standard JavaFX controls, you can also use the local installation, but in that case you'll have to download and update CSS files manually. Info Any AtlantaFX theme is compiled to a user-agent stylesheet. It's a single CSS file that is used to provide default styling for all UI controls. It completely replaces default JavaFX stylesheet, namely Modena theme.","title":"Getting Started"},{"location":"getting-started/#installing","text":"Add project to the dependencies. Maven: <dependency> <groupId> io.github.mkpaz </groupId> <artifactId> atlantafx-base </artifactId> <version> 2.0.0 </version> </dependency> Gradle: repositories { mavenCentral () } dependencies { implementation 'io.github.mkpaz:atlantafx-base:2.0.0' } Set a theme: public class Launcher extends Application { public static void main ( String [] args ) { launch ( args ); } @Override public void start ( Stage stage ) { // find more themes in 'atlantafx.base.theme' package Application . setUserAgentStylesheet ( new PrimerLight (). getUserAgentStylesheet ()); Application . setUserAgentStylesheet ( new PrimerDark (). getUserAgentStylesheet ()); // the rest of the code ... } }","title":"Installing"},{"location":"getting-started/#local-installation","text":"If you don't want to use additional dependencies, you can download compiled CSS themes from the GitHub Releases . Unpack AtlantaFX-*-themes.zip and place it to your project's classpath. Set CSS theme: Application . setUserAgentStylesheet ( /* path to the CSS file */ ); Or use Java property: -Djavafx.userAgentStylesheetUrl=[URL]","title":"Local Installation"},{"location":"theming/","text":"Theming AtlantaFX uses looked-up colors . Each color property starts with -color-* prefix. There're global colors , that are defined at the Scene root level and individual controls colors (check the corresponding control reference for the info). What's looked-up color? TL;DR : It's a color variable . As any other CSS property looked-up colors resolved according to CSS specificity rules. If you imagine the following hierarchy: Scene [class = root] Region [class = r1] Region [class = r2] Region [class = r3] We can manipulate the background color of each descending node with the following CSS rules (most specific wins): . root { -color-background : transparent ; } . r1 , . r2 , . r3 { -fx-background-color : - color - background ; } . r2 { -color-background : red ; } /* applied to the r2 and below */ . r2 > . r3 { -color-background : green ;} JavaFX will try to resolve color variable value starting from the most to the least specific rule, which is always the root of the Scene hierarchy. Result: r1 - transparent r2 - red r3 - green All stylesheets are written in SASS and compiled to CSS by using a very handy sass-cli-maven-plugin . You don't have to learn SASS, though it's a very simple language if you're already familiar with CSS. Tip Theme is not limited by colors. If you only want to change global colors, all you need is to override default looked-up color variables. The easiest way is to utilize pseudo-class, so you can always return to the default color scheme. . root : custom-theme { -color-bg-default : #123456 ; /* ... and so on */ } // declare pseudo-class private static PseudoClass CUSTOM_THEME = PseudoClass . getPseudoClass ( \"custom-theme\" ); // then apply it to the root node getScene (). getRoot (). pseudoClassStateChanged ( CUSTOM_THEME , true ); Compilation You can find ready to use custom theme template in the atlantafx-sample-theme repository. Clone the sample repository. git clone https://github.com/mkpaz/atlantafx-sample-theme Compile it. cd atlantafx-sample-theme mvn compile [ -Pwatch ] # (optionally) watch for changes Grab resulting CSS from dist/ directory and connect it to your application. Application . setUserAgentStylesheet ( /* path to the CSS file */ ); Modification Each SCSS file in the source directory is nothing but a separate SASS module that can be imported by other files. You can find a bunch of SASS variables at the top of a file. If variable is marked as !default , it can be changed during theme compilation. In fact, any AtlantaFX theme can be used as an example. They all share the common sources and use SASS variable modification to compile the different stylesheets. Tip If you want to customize a style property that is not exposed as SASS variable, don't hesitate to open an issue or send a PR . Warning Note that SASS is only loading any module (file) just once, so customization order does matter . E.g. if A module imports B and B imports C then we have to override C variables first, then B, then A. Otherwise, there will be an exception that we are attempting to change a variable in a module that has been already loaded. Example: // Color customization. @for ward \"relative/path/to/settings/color-vars\" with ( // ... ); // Shared property customization. @for ward \"relative/path/to/settings/config\" with ( // ... ); // This should precede controls customization, as it guarantees // that .root styles precede components styles. @use \"general\" ; // Individual component property customization. // Use \"as name-*\" to avoid conflicts if two or more SASS modules // contain variables with the same name. @for ward \"relative/path/to/components/split-pane\" as split-pane- * with ( // ... ); Color Contrast If you want to develop a good theme, there are some accessibility rules. Color contrast between text and its background must meet required WCAG standards . The contrast requirements are: 4.5:1 for normal text 3:1 for large text (>24px) 3:1 for UI elements and graphics No contrast requirement for decorative and disabled elements You can check and modify color contrast directly in the Sampler app. Click on any block to run contrast checker and get more detailed info. Testing You can use Sampler app to test and develop your custom theme. Including hot reload, of course. Start Sampler app in development mode (check build instructions for more info). If you downloaded packaged Sampler app, you can do that by setting ATLANTAFX_MODE=dev env variable. Go to the Theme page and add your CSS file.","title":"Theming"},{"location":"theming/#theming","text":"AtlantaFX uses looked-up colors . Each color property starts with -color-* prefix. There're global colors , that are defined at the Scene root level and individual controls colors (check the corresponding control reference for the info). What's looked-up color? TL;DR : It's a color variable . As any other CSS property looked-up colors resolved according to CSS specificity rules. If you imagine the following hierarchy: Scene [class = root] Region [class = r1] Region [class = r2] Region [class = r3] We can manipulate the background color of each descending node with the following CSS rules (most specific wins): . root { -color-background : transparent ; } . r1 , . r2 , . r3 { -fx-background-color : - color - background ; } . r2 { -color-background : red ; } /* applied to the r2 and below */ . r2 > . r3 { -color-background : green ;} JavaFX will try to resolve color variable value starting from the most to the least specific rule, which is always the root of the Scene hierarchy. Result: r1 - transparent r2 - red r3 - green All stylesheets are written in SASS and compiled to CSS by using a very handy sass-cli-maven-plugin . You don't have to learn SASS, though it's a very simple language if you're already familiar with CSS. Tip Theme is not limited by colors. If you only want to change global colors, all you need is to override default looked-up color variables. The easiest way is to utilize pseudo-class, so you can always return to the default color scheme. . root : custom-theme { -color-bg-default : #123456 ; /* ... and so on */ } // declare pseudo-class private static PseudoClass CUSTOM_THEME = PseudoClass . getPseudoClass ( \"custom-theme\" ); // then apply it to the root node getScene (). getRoot (). pseudoClassStateChanged ( CUSTOM_THEME , true );","title":"Theming"},{"location":"theming/#compilation","text":"You can find ready to use custom theme template in the atlantafx-sample-theme repository. Clone the sample repository. git clone https://github.com/mkpaz/atlantafx-sample-theme Compile it. cd atlantafx-sample-theme mvn compile [ -Pwatch ] # (optionally) watch for changes Grab resulting CSS from dist/ directory and connect it to your application. Application . setUserAgentStylesheet ( /* path to the CSS file */ );","title":"Compilation"},{"location":"theming/#modification","text":"Each SCSS file in the source directory is nothing but a separate SASS module that can be imported by other files. You can find a bunch of SASS variables at the top of a file. If variable is marked as !default , it can be changed during theme compilation. In fact, any AtlantaFX theme can be used as an example. They all share the common sources and use SASS variable modification to compile the different stylesheets. Tip If you want to customize a style property that is not exposed as SASS variable, don't hesitate to open an issue or send a PR . Warning Note that SASS is only loading any module (file) just once, so customization order does matter . E.g. if A module imports B and B imports C then we have to override C variables first, then B, then A. Otherwise, there will be an exception that we are attempting to change a variable in a module that has been already loaded. Example: // Color customization. @for ward \"relative/path/to/settings/color-vars\" with ( // ... ); // Shared property customization. @for ward \"relative/path/to/settings/config\" with ( // ... ); // This should precede controls customization, as it guarantees // that .root styles precede components styles. @use \"general\" ; // Individual component property customization. // Use \"as name-*\" to avoid conflicts if two or more SASS modules // contain variables with the same name. @for ward \"relative/path/to/components/split-pane\" as split-pane- * with ( // ... );","title":"Modification"},{"location":"theming/#color-contrast","text":"If you want to develop a good theme, there are some accessibility rules. Color contrast between text and its background must meet required WCAG standards . The contrast requirements are: 4.5:1 for normal text 3:1 for large text (>24px) 3:1 for UI elements and graphics No contrast requirement for decorative and disabled elements You can check and modify color contrast directly in the Sampler app. Click on any block to run contrast checker and get more detailed info.","title":"Color Contrast"},{"location":"theming/#testing","text":"You can use Sampler app to test and develop your custom theme. Including hot reload, of course. Start Sampler app in development mode (check build instructions for more info). If you downloaded packaged Sampler app, you can do that by setting ATLANTAFX_MODE=dev env variable. Go to the Theme page and add your CSS file.","title":"Testing"},{"location":"apidocs/legal/jquery/","text":"jQuery v3.6.0 jQuery License jQuery v 3.6.0 Copyright OpenJS Foundation and other contributors, https://openjsf.org/ Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the \"Software\"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions: The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE. ****************************************** The jQuery JavaScript Library v3.6.0 also includes Sizzle.js Sizzle.js includes the following license: Copyright JS Foundation and other contributors, https://js.foundation/ This software consists of voluntary contributions made by many individuals. For exact contribution history, see the revision history available at https://github.com/jquery/sizzle The following license applies to all parts of this software except as documented below: ==== Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the \"Software\"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions: The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE. ==== All files located in the node_modules and external directories are externally maintained libraries used by this software which have their own licenses; we recommend you read them, as their terms may differ from the terms above. *********************","title":"Jquery"},{"location":"apidocs/legal/jquery/#jquery-v360","text":"","title":"jQuery v3.6.0"},{"location":"apidocs/legal/jquery/#jquery-license","text":"jQuery v 3.6.0 Copyright OpenJS Foundation and other contributors, https://openjsf.org/ Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the \"Software\"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions: The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE. ****************************************** The jQuery JavaScript Library v3.6.0 also includes Sizzle.js Sizzle.js includes the following license: Copyright JS Foundation and other contributors, https://js.foundation/ This software consists of voluntary contributions made by many individuals. For exact contribution history, see the revision history available at https://github.com/jquery/sizzle The following license applies to all parts of this software except as documented below: ==== Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the \"Software\"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions: The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE. ==== All files located in the node_modules and external directories are externally maintained libraries used by this software which have their own licenses; we recommend you read them, as their terms may differ from the terms above. *********************","title":"jQuery License"},{"location":"apidocs/legal/jqueryUI/","text":"jQuery UI v1.12.1 jQuery UI License Copyright jQuery Foundation and other contributors, https://jquery.org/ This software consists of voluntary contributions made by many individuals. For exact contribution history, see the revision history available at https://github.com/jquery/jquery-ui The following license applies to all parts of this software except as documented below: ==== Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the \"Software\"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions: The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE. ==== Copyright and related rights for sample code are waived via CC0. Sample code is defined as all source code contained within the demos directory. CC0: http://creativecommons.org/publicdomain/zero/1.0/ ==== All files located in the node_modules and external directories are externally maintained libraries used by this software which have their own licenses; we recommend you read them, as their terms may differ from the terms above.","title":"jqueryUI"},{"location":"apidocs/legal/jqueryUI/#jquery-ui-v1121","text":"","title":"jQuery UI v1.12.1"},{"location":"apidocs/legal/jqueryUI/#jquery-ui-license","text":"Copyright jQuery Foundation and other contributors, https://jquery.org/ This software consists of voluntary contributions made by many individuals. For exact contribution history, see the revision history available at https://github.com/jquery/jquery-ui The following license applies to all parts of this software except as documented below: ==== Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the \"Software\"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions: The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE. ==== Copyright and related rights for sample code are waived via CC0. Sample code is defined as all source code contained within the demos directory. CC0: http://creativecommons.org/publicdomain/zero/1.0/ ==== All files located in the node_modules and external directories are externally maintained libraries used by this software which have their own licenses; we recommend you read them, as their terms may differ from the terms above.","title":"jQuery UI License"},{"location":"reference/controls/","text":"Controls This reference lists all supported custom CSS classes and color variables. Standard options are described in the JavaFX CSS Reference . Button CSS classes: accent , success , danger (accent color support) button-circle button-icon button-outlined flat left-pill , center-pill , right-pill (input group support) rounded small , large (size support) Color variables: -color-button-bg -color-button-fg -color-button-border -color-button-bg-hover -color-button-fg-hover -color-button-border-hover -color-button-bg-focused -color-button-fg-focused -color-button-border-focused -color-button-bg-pressed -color-button-fg-pressed -color-button-border-pressed ChoiceBox CSS classes: .alt-icon (tweak) left-pill , center-pill , right-pill (input group support) Pseudo-classes: :success , :danger ComboBox The same as ChoiceBox . Data Iterators This includes all virtualized controls such as ListView, TreeView, TableView and TreeTableView. Common CSS classes: .dense .edge-to-edge (tweak) Color variables: -color-cell-bg -color-cell-fg -color-cell-bg-selected -color-cell-fg-selected -color-cell-bg-selected-focused -color-cell-fg-selected-focused -color-cell-bg-odd -color-cell-border TableView CSS classes: align-left , align-center , align-right (column alignment must be applied to the TableColumn) .bordered .striped Color variables: -color-header-bg -color-header-fg TreeView CSS classes: .alt-icon (tweak) Color variables: -color-disclosure TreeTableView Inherits all TableView and TreeView CSS classes and variables DatePicker Color variables: -color-date-bg -color-date-border -color-date-month-year-bg -color-date-month-year-fg -color-date-day-bg -color-date-day-bg-hover -color-date-day-bg-selected -color-date-day-fg -color-date-day-fg-hover -color-date-day-fg-selected -color-date-week-bg -color-date-week-fg -color-date-today-bg -color-date-today-fg -color-date-other-month-fg -color-date-chrono-fg Hyperlink Color variables: -color-link-fg -color-link-fg-visited -color-link-fg-armed Label CSS classes: accent , success , warning , danger , text-muted , text-subtle (text color support) left-pill , center-pill , right-pill (input group support) small , large (size support) Pseudo-classes: :accent , :success , :warning , :danger (text color support) MenuButton CSS classes: accent , success , danger (accent color support) button-icon button-outlined flat left-pill , center-pill , right-pill (input group support) no-arrow (tweak) Color variables: -color-button-bg -color-button-fg -color-button-border -color-button-bg-hover -color-button-fg-hover -color-button-border-hover -color-button-bg-focused -color-button-fg-focused -color-button-border-focused -color-button-bg-pressed -color-button-fg-pressed -color-button-border-pressed Pagination CSS classes: .bullet ( Pagination.STYLE_CLASS_BULLET ) ProgressBar Color variables: -color-progress-bar-track -color-progress-bar-fill RingProgressIndicator Color variables: -color-progress-indicator-track -color-progress-indicator-fill Separator Color variables: -color-separator Slider CSS classes small , large (size support) Color variables: -color-slider-thumb -color-slider-thumb-border -color-slider-track -color-slider-track-progress -color-slider-tick SplitMenuButton The same as MenuButton . SplitPane Color variables: -color-split-divider -color-split-divider-pressed -color-split-grabber -color-split-grabber-pressed TextInput This includes all text controls such as TextField, TextArea, PasswordField and CustomTextField. CSS classes: left-pill , center-pill , right-pill (input group support) rounded small , large (size support) Pseudo-classes: :success , :danger Color variables: -color-input-bg -color-input-fg -color-input-border -color-input-bg-focused -color-input-border-focused -color-input-bg-highlight -color-input-fg-highlight TabPane CSS classes: .dense .floating ( TabPane.STYLE_CLASS_FLOATING or Styles.TABS_FLOATING ) .classic ( Styles.TABS_CLASSIC ) Floating and classic styles are mutually exclusive. Color variables: -color-tab-bg-selected -color-tab-fg-selected -color-tab-border-selected To apply these variables ensure that your custom CSS rule has more specificity, e.g.: . my-tab-pane . floating { -color-tab-fg-selected : red ; } Titled Pane Also applied to the Accordion. CSS classes: .alt-icon (tweak) .dense .elevated-1 , .elevated-2 , .elevated-3 , .elevated-4 , .interactive (elevation support) Toggle Button Color variables: -color-button-bg-selected -color-button-fg-selected Toggle Switch Pseudo-classes: :success , :danger","title":"Controls"},{"location":"reference/controls/#controls","text":"This reference lists all supported custom CSS classes and color variables. Standard options are described in the JavaFX CSS Reference .","title":"Controls"},{"location":"reference/controls/#button","text":"CSS classes: accent , success , danger (accent color support) button-circle button-icon button-outlined flat left-pill , center-pill , right-pill (input group support) rounded small , large (size support) Color variables: -color-button-bg -color-button-fg -color-button-border -color-button-bg-hover -color-button-fg-hover -color-button-border-hover -color-button-bg-focused -color-button-fg-focused -color-button-border-focused -color-button-bg-pressed -color-button-fg-pressed -color-button-border-pressed","title":"Button"},{"location":"reference/controls/#choicebox","text":"CSS classes: .alt-icon (tweak) left-pill , center-pill , right-pill (input group support) Pseudo-classes: :success , :danger","title":"ChoiceBox"},{"location":"reference/controls/#combobox","text":"The same as ChoiceBox .","title":"ComboBox"},{"location":"reference/controls/#data-iterators","text":"This includes all virtualized controls such as ListView, TreeView, TableView and TreeTableView.","title":"Data Iterators"},{"location":"reference/controls/#common","text":"CSS classes: .dense .edge-to-edge (tweak) Color variables: -color-cell-bg -color-cell-fg -color-cell-bg-selected -color-cell-fg-selected -color-cell-bg-selected-focused -color-cell-fg-selected-focused -color-cell-bg-odd -color-cell-border","title":"Common"},{"location":"reference/controls/#tableview","text":"CSS classes: align-left , align-center , align-right (column alignment must be applied to the TableColumn) .bordered .striped Color variables: -color-header-bg -color-header-fg","title":"TableView"},{"location":"reference/controls/#treeview","text":"CSS classes: .alt-icon (tweak) Color variables: -color-disclosure","title":"TreeView"},{"location":"reference/controls/#treetableview","text":"Inherits all TableView and TreeView CSS classes and variables","title":"TreeTableView"},{"location":"reference/controls/#datepicker","text":"Color variables: -color-date-bg -color-date-border -color-date-month-year-bg -color-date-month-year-fg -color-date-day-bg -color-date-day-bg-hover -color-date-day-bg-selected -color-date-day-fg -color-date-day-fg-hover -color-date-day-fg-selected -color-date-week-bg -color-date-week-fg -color-date-today-bg -color-date-today-fg -color-date-other-month-fg -color-date-chrono-fg","title":"DatePicker"},{"location":"reference/controls/#hyperlink","text":"Color variables: -color-link-fg -color-link-fg-visited -color-link-fg-armed","title":"Hyperlink"},{"location":"reference/controls/#label","text":"CSS classes: accent , success , warning , danger , text-muted , text-subtle (text color support) left-pill , center-pill , right-pill (input group support) small , large (size support) Pseudo-classes: :accent , :success , :warning , :danger (text color support)","title":"Label"},{"location":"reference/controls/#menubutton","text":"CSS classes: accent , success , danger (accent color support) button-icon button-outlined flat left-pill , center-pill , right-pill (input group support) no-arrow (tweak) Color variables: -color-button-bg -color-button-fg -color-button-border -color-button-bg-hover -color-button-fg-hover -color-button-border-hover -color-button-bg-focused -color-button-fg-focused -color-button-border-focused -color-button-bg-pressed -color-button-fg-pressed -color-button-border-pressed","title":"MenuButton"},{"location":"reference/controls/#pagination","text":"CSS classes: .bullet ( Pagination.STYLE_CLASS_BULLET )","title":"Pagination"},{"location":"reference/controls/#progressbar","text":"Color variables: -color-progress-bar-track -color-progress-bar-fill","title":"ProgressBar"},{"location":"reference/controls/#ringprogressindicator","text":"Color variables: -color-progress-indicator-track -color-progress-indicator-fill","title":"RingProgressIndicator"},{"location":"reference/controls/#separator","text":"Color variables: -color-separator","title":"Separator"},{"location":"reference/controls/#slider","text":"CSS classes small , large (size support) Color variables: -color-slider-thumb -color-slider-thumb-border -color-slider-track -color-slider-track-progress -color-slider-tick","title":"Slider"},{"location":"reference/controls/#splitmenubutton","text":"The same as MenuButton .","title":"SplitMenuButton"},{"location":"reference/controls/#splitpane","text":"Color variables: -color-split-divider -color-split-divider-pressed -color-split-grabber -color-split-grabber-pressed","title":"SplitPane"},{"location":"reference/controls/#textinput","text":"This includes all text controls such as TextField, TextArea, PasswordField and CustomTextField. CSS classes: left-pill , center-pill , right-pill (input group support) rounded small , large (size support) Pseudo-classes: :success , :danger Color variables: -color-input-bg -color-input-fg -color-input-border -color-input-bg-focused -color-input-border-focused -color-input-bg-highlight -color-input-fg-highlight","title":"TextInput"},{"location":"reference/controls/#tabpane","text":"CSS classes: .dense .floating ( TabPane.STYLE_CLASS_FLOATING or Styles.TABS_FLOATING ) .classic ( Styles.TABS_CLASSIC ) Floating and classic styles are mutually exclusive. Color variables: -color-tab-bg-selected -color-tab-fg-selected -color-tab-border-selected To apply these variables ensure that your custom CSS rule has more specificity, e.g.: . my-tab-pane . floating { -color-tab-fg-selected : red ; }","title":"TabPane"},{"location":"reference/controls/#titled-pane","text":"Also applied to the Accordion. CSS classes: .alt-icon (tweak) .dense .elevated-1 , .elevated-2 , .elevated-3 , .elevated-4 , .interactive (elevation support)","title":"Titled Pane"},{"location":"reference/controls/#toggle-button","text":"Color variables: -color-button-bg-selected -color-button-fg-selected","title":"Toggle Button"},{"location":"reference/controls/#toggle-switch","text":"Pseudo-classes: :success , :danger","title":"Toggle Switch"},{"location":"reference/global-colors/","text":"Global Colors Global variables are defined at the Scene root level. You can preview all of them in the Sampler app on Theme page. AtlantaFX is based on GitHub Primer color system. You can check GitHub Primer interface guidelines for more detailed instructions. There are functional color variables and color scale variables. Functional Colors Foreground Colors Color Usage -color-fg-default Primary color for text and icons. It should be used for body content, titles and labels. -color-fg-muted For content that is secondary or that provides additional context but is not critical to understanding the flow of an interface. -color-fg-subtle For placeholders or decorative foregrounds. -color-fg-emphasis The text color designed to combine with *-emphasis backgrounds for optimal contrast. Background Colors Color Usage -color-bg-default Primary background color. -color-bg-overlay Background color for popup controls such as popovers and tooltips. -color-bg-subtle Provides visual rest and contrast against the default background. -color-bg-inset For a focal point, such as in conversations or activity feeds. Border Colors Color Usage -color-border-default Default color to create bounds around content. -color-border-muted For dividers to emphasize the separation between items, columns or sections. -color-border-subtle Faint border color. -color-shadow-default Color for creating shadow effects around controls. Accent Colors The below colors are all accent colors. Use them according to their role. The variable names are self-explaining. Neutral colors. Use to highlight content without any added meaning. -color-neutral-emphasis-plus -color-neutral-emphasis -color-neutral-muted -color-neutral-subtle Accent (or primary/brand) color. Use to draw attention to the particular area or component. -color-accent-fg -color-accent-emphasis -color-accent-muted -color-accent-subtle Success colors. Use to express the completion or positive outcome of a task. -color-success-fg -color-success-emphasis -color-success-muted -color-success-subtle Attention colors. Use to warn of pending tasks or highlight active content. -color-warning-fg -color-warning-emphasis -color-warning-muted -color-warning-subtle Danger colors. Use to inform of error or another negative message. -color-danger-fg -color-danger-emphasis -color-danger-muted -color-danger-subtle Note that functional color values are not always picked from the color palette. They can have its own unique value, e.g. to add opacity. Chart Colors Chart colors are named as -color-chart-[1-8] and are used, well, for charts. The reason they are defined as global variables is to allow them to be used in controls that do not have .chart class, e.g. for drawing or diagrams. Color Scale Generally, scale variables only supposed to be used by theme devs as a replacement of dynamic brightness calculation functions. Avoid referencing them directly when building UI that needs to adapt to different color themes. Instead, use the functional variables listed above. All legitimate functional color combinations are guaranteed to look good in all color themes, because they need to maintain a certain amount of contrast. In rare cases, you may need to use scale variables to define custom functional variables in your application. Each color scale consists of 10 shades from 0 to 9. -color-dark -color-light -color-base-[0-9] -color-accent-[0-9] -color-success-[0-9] -color-warning-[0-9] -color-danger-[0-9]","title":"Global Colors"},{"location":"reference/global-colors/#global-colors","text":"Global variables are defined at the Scene root level. You can preview all of them in the Sampler app on Theme page. AtlantaFX is based on GitHub Primer color system. You can check GitHub Primer interface guidelines for more detailed instructions. There are functional color variables and color scale variables.","title":"Global Colors"},{"location":"reference/global-colors/#functional-colors","text":"","title":"Functional Colors"},{"location":"reference/global-colors/#foreground-colors","text":"Color Usage -color-fg-default Primary color for text and icons. It should be used for body content, titles and labels. -color-fg-muted For content that is secondary or that provides additional context but is not critical to understanding the flow of an interface. -color-fg-subtle For placeholders or decorative foregrounds. -color-fg-emphasis The text color designed to combine with *-emphasis backgrounds for optimal contrast.","title":"Foreground Colors"},{"location":"reference/global-colors/#background-colors","text":"Color Usage -color-bg-default Primary background color. -color-bg-overlay Background color for popup controls such as popovers and tooltips. -color-bg-subtle Provides visual rest and contrast against the default background. -color-bg-inset For a focal point, such as in conversations or activity feeds.","title":"Background Colors"},{"location":"reference/global-colors/#border-colors","text":"Color Usage -color-border-default Default color to create bounds around content. -color-border-muted For dividers to emphasize the separation between items, columns or sections. -color-border-subtle Faint border color. -color-shadow-default Color for creating shadow effects around controls.","title":"Border Colors"},{"location":"reference/global-colors/#accent-colors","text":"The below colors are all accent colors. Use them according to their role. The variable names are self-explaining. Neutral colors. Use to highlight content without any added meaning. -color-neutral-emphasis-plus -color-neutral-emphasis -color-neutral-muted -color-neutral-subtle Accent (or primary/brand) color. Use to draw attention to the particular area or component. -color-accent-fg -color-accent-emphasis -color-accent-muted -color-accent-subtle Success colors. Use to express the completion or positive outcome of a task. -color-success-fg -color-success-emphasis -color-success-muted -color-success-subtle Attention colors. Use to warn of pending tasks or highlight active content. -color-warning-fg -color-warning-emphasis -color-warning-muted -color-warning-subtle Danger colors. Use to inform of error or another negative message. -color-danger-fg -color-danger-emphasis -color-danger-muted -color-danger-subtle Note that functional color values are not always picked from the color palette. They can have its own unique value, e.g. to add opacity.","title":"Accent Colors"},{"location":"reference/global-colors/#chart-colors","text":"Chart colors are named as -color-chart-[1-8] and are used, well, for charts. The reason they are defined as global variables is to allow them to be used in controls that do not have .chart class, e.g. for drawing or diagrams.","title":"Chart Colors"},{"location":"reference/global-colors/#color-scale","text":"Generally, scale variables only supposed to be used by theme devs as a replacement of dynamic brightness calculation functions. Avoid referencing them directly when building UI that needs to adapt to different color themes. Instead, use the functional variables listed above. All legitimate functional color combinations are guaranteed to look good in all color themes, because they need to maintain a certain amount of contrast. In rare cases, you may need to use scale variables to define custom functional variables in your application. Each color scale consists of 10 shades from 0 to 9. -color-dark -color-light -color-base-[0-9] -color-accent-[0-9] -color-success-[0-9] -color-warning-[0-9] -color-danger-[0-9]","title":"Color Scale"},{"location":"reference/typography/","text":"Typography AtlantaFX doesn't include any fonts, it uses operating system font family. Default font size is 14px ( ~= 11pt ). You're free to change it, but please note that all stylesheets are tested with default font size only, so some controls may break with this change. Font size title-1 title-2 title-3 title-4 text-caption text-small Font color Note that accent color support requires two CSS styles in order to reuse existing class names. text , accent text , success text , warning text , danger text-muted text-subtle Font weight Warning JavaFX only supports bold or regular font weight. Other values are recognized by CSS parser, but reduced to one them. text-bold text-bolder text-normal text-lighter Font style text-italic text-oblique text-underlined text-strikethrough","title":"Typography"},{"location":"reference/typography/#typography","text":"AtlantaFX doesn't include any fonts, it uses operating system font family. Default font size is 14px ( ~= 11pt ). You're free to change it, but please note that all stylesheets are tested with default font size only, so some controls may break with this change.","title":"Typography"},{"location":"reference/typography/#font-size","text":"title-1 title-2 title-3 title-4 text-caption text-small","title":"Font size"},{"location":"reference/typography/#font-color","text":"Note that accent color support requires two CSS styles in order to reuse existing class names. text , accent text , success text , warning text , danger text-muted text-subtle","title":"Font color"},{"location":"reference/typography/#font-weight","text":"Warning JavaFX only supports bold or regular font weight. Other values are recognized by CSS parser, but reduced to one them. text-bold text-bolder text-normal text-lighter","title":"Font weight"},{"location":"reference/typography/#font-style","text":"text-italic text-oblique text-underlined text-strikethrough","title":"Font style"}]} |