This repository was archived by the owner on Apr 5, 2023. It is now read-only.
-
Notifications
You must be signed in to change notification settings - Fork 0
Example theme
[ Cassondra ] edited this page Apr 13, 2021
·
4 revisions
--theme--color--ui--link--Color
--theme--color--ui--link--Color--hover
--theme--color--ui--link--Color--focus
--theme--color--ui--link--Color--visited
--theme--color--ui--link--Color--on-dark
--theme--color--ui--link--Color--hover--on-dark
--theme--color--ui--link--Color--focus--on-dark
--theme--color--ui--link--Color--visited--on-dark
--theme--color--ui--link--Color--on-saturated
--theme--color--ui--link--Color--hover--on-saturated
--theme--color--ui--link--Color--focus--on-saturated
--theme--color--ui--link--Color--visited--on-saturated
--theme--color--ui--link--TextDecoration
--theme--color--ui--link--TextDecoration--hover
--theme--color--ui--link--TextDecoration--focus
--theme--color--ui--link--TextDecoration--visited
--theme--color--ui--link--TextDecoration--on-dark
--theme--color--ui--link--TextDecoration--hover--on-dark
--theme--color--ui--link--TextDecoration--focus--on-dark
--theme--color--ui--link--TextDecoration--visited--on-dark
--theme--color--ui--link--TextDecoration--on-saturated
--theme--color--ui--link--TextDecoration--hover--on-saturated
--theme--color--ui--link--TextDecoration--focus--on-saturated
--theme--color--ui--link--TextDecoration--visited--on-saturated
--theme--color--ui--base
--theme--color--ui--base--hover
--theme--color--ui--base--focus
--theme--color--ui--base--text
--theme--color--ui--base--text--hover
--theme--color--ui--base--text--focus
--theme--color--ui--complement
--theme--color--ui--complement--hover
--theme--color--ui--complement--focus
--theme--color--ui--complement--text
--theme--color--ui--complement--text--hover
--theme--color--ui--complement--text--focus
--theme--color--ui--accent
--theme--color--ui--accent--hover
--theme--color--ui--accent--focus
--theme--color--ui--accent--text
--theme--color--ui--accent--text--hover
--theme--color--ui--accent--text--focus
--theme--color--ui--disabled
--theme--color--ui--disabled--hover
--theme--color--ui--disabled--focus
--theme--color--ui--disabled--text
--theme--color--ui--disabled--text--hover
--theme--color--ui--disabled--text--focus
--theme--ui--BorderWidth
--theme--ui--BorderStyle
--theme--ui--BorderRadius
--theme--ui--BorderColor--lightest
--theme--ui--BorderColor
--theme--ui--BorderColor--darkest- Color:
--theme--color--surface--lightest, used for setting background colors on larger surfaces.- Text appearing on this ui-element color [
--text,--link], ex:--theme--color--surface--lightest--text.
- Variants describe state for links [
--visited,--hover,--focus], ex:--theme--color--surface--lightest--link--hover.
- Text appearing on this ui-element color [
- Color variants possible:
- Lightest
- Lighter
- Base
- Darker
- Darkest
- Complement
- Accent
- Border:
--theme--surface--BorderWidth, used for setting the default width for borders on ui-elements.- Properties supported include: [
width,style,radius], ex:--theme--surface--BorderStyle,--theme--surface--BorderRadius - Color subsets include: [
--lightest,--darkest], ex:--theme--surface--BorderColor--lightest
- Properties supported include: [
- Container:
--theme--spacing--container, used for setting spacing inside a container element. - Padding:
--theme--spacing--padding, used for setting padding around a container element. - Content:
--theme--spacing--content, used for setting spacing between content elements.
- Font size:
--theme--FontSize, used to set the default font-size property- Variants for sizing purposes, specifically mapped to abstract names rather than tag elements for better reusability: [
--xs,--sm,--md,--lg,--xl,--2xl], ex:--theme--FontSize--md
- Variants for sizing purposes, specifically mapped to abstract names rather than tag elements for better reusability: [
- Line height:
--theme--LineHeight, same variants available as font-size- Note that the vanilla variable,
--theme--LineHeight, would be connected with general page content such as p tags, while the sizing variants,--theme--LineHeight--md, would be most useful for headings.
- Note that the vanilla variable,
- Font weight:
--theme--FontWeight, same variants available as font-size- Note that the vanilla variable,
--theme--FontWeight, would be connected with general page content such as p tags, while the sizing variants,--theme--FontWeight--md, would be most useful for headings.
- Note that the vanilla variable,
- Font family:
--theme--FontFamily- Variants for different usage: [
--heading,--code], ex:--theme--FontFamily--heading
- Variants for different usage: [
- Animation:
--theme--animation-timing, used to set time and style of default animation- Variants for describing experience, such as [
--fast,--slow], ex:--theme--animation-timing--fast
- Variants for describing experience, such as [
- Shadow:
--theme--shadow, used to set shadowing standards, often accepts the values supported by the box-shadow properties.- Variants for sizing, minimal variation supported [
--sm,--lg], ex:--theme--shadow--sm - Variant for inset shadowing, ex:
--theme--shadow--inset
- Variants for sizing, minimal variation supported [
- Properties for defining the depth of elements on the page, naming is generic, not specific to a certain component. Accepts a number from 0-100+ (but we recommend staying under 100 if you can).
-
interrupts, ex:--theme--layer--interrupts -
navigation, ex:--theme--layer--navigation -
overlay, ex:--theme--layer--overlay -
content, ex:--theme--layer--content
-