Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

FLUID-6782: update docs related to css custom properties for UIO #313

Merged
merged 1 commit into from
Dec 3, 2024
Merged

FLUID-6782: update docs related to css custom properties for UIO #313

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
36 changes: 34 additions & 2 deletions ...cuments/tutorial-userInterfaceOptions/IntegratingUIOptionsStylingPreferences.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -30,6 +30,13 @@ not compiled into CSS.

</div>

<div class="infusion-docs-note">

<strong>Note:</strong> using Sass files directly has been deprecated. In the future the sass file will likely be removed
and only css files may be provided.

</div>

## Enactor Stylesheets

### Base Stylesheets
Expand Down Expand Up @@ -66,6 +73,27 @@ with their application.
to override default styles. If the drop-in styles need to be overridden, it may be better to use the <code>*_base</code>
stylesheets and build up custom styles for the site.

### Custom Drop-in Stylesheet

You may find that for your particular application that you would like to have some control over the styling of your
website, but are not yet able to fully integrate the CSS custom properties from the base stylesheets. In this case you
could replicate the functionality of the Drop-in stylesheets for those parts you need to use overrides for in your own
styles.

For this it's best to review how the drop-in stylesheets are generated, but in short they make aggressive use of the
`!important` flag to attempt to give the declarations the highest level precedence. You can follow a similar approach,
or use other appropriate mechanisms for your given application.

For example:

```css
/* When the text size preference is set, set the font-size to the value
from --fl-textSize */
.fl-textSize-enabled {
font-size: var(--fl-textSize) !important;
}
```

</div>

## CSS Custom Properties
Expand Down Expand Up @@ -100,8 +128,12 @@ The contrast CSS custom properties are set when one of the contrast classes (e.g

* `--fl-fgColor`: foreground colour, often text colour
* `--fl-bgColor`: background colour
* `--fl-linkColor`: text colour for links
* `--fl-disabledColor`: text colour for disabled inputs
* `--fl-linkColor`: text colour for links (deprecated: use `--fl-linkFgColor`)
* `--fl-linkFgColor`: text colour for links
* `--fl-linkBgColor`: background colour for links
* `--fl-disabledColor`: text colour for disabled inputs (deprecated: use `--fl-disabledFgColor`)
* `--fl-disabledFgColor`: text colour for disabled inputs
* `--fl-disabledBgColor`: background colour for disabled inputs
* `--fl-selectedFgColor`: colour for selected text
* `--fl-selectedBgColor`: selection background colour
* `--fl-buttonFgColor`: text colour for buttons
Expand Down