diff --git a/changelog/unreleased/enhancement-button-styling b/changelog/unreleased/enhancement-button-styling index 4df09edbc0b..ae29986e611 100644 --- a/changelog/unreleased/enhancement-button-styling +++ b/changelog/unreleased/enhancement-button-styling @@ -3,6 +3,6 @@ Enhancement: Button styling Button styling (colors and hover colors) has been improved in both light and dark mode to be more consistent among various button styles (colors for filled and outline buttons) https://github.com/owncloud/web/pull/9394 +https://github.com/owncloud/web/pull/9459 https://github.com/owncloud/web/issues/9353 https://github.com/owncloud/web/issues/9354 - diff --git a/docs/theming/_index.md b/docs/theming/_index.md index 36bbd51f28a..a4ac513155a 100644 --- a/docs/theming/_index.md +++ b/docs/theming/_index.md @@ -1,5 +1,5 @@ --- -title: "Theming" +title: 'Theming' date: 2021-04-01T00:00:00+00:00 weight: 55 geekdocRepo: https://github.com/owncloud/web @@ -82,7 +82,6 @@ Using the `"autoRedirect"` boolean, you can specify whether the user is shown a To further customize your ownCloud instance, you can provide your own styles. To give you an idea of how a working design system looks like, feel free to head over to the [ownCloud design tokens](https://owncloud.design/#/Design%20Tokens) for inspiration. - **Hint:** All the variables are initialized using the [ownCloud design tokens](https://owncloud.design/#/Design%20Tokens) and then overwritten by your theme variables. Therefore, you don't have to provide all the variables and can use the default ownCloud colors as a fallback. In general, the theme loader looks for a `designTokens` key inside your theme configuration. Inside the `designTokens`, it expects to find a `colorPalette`, `fontSizes` and `spacing` collection. The structure is outlined below: @@ -117,8 +116,7 @@ If you define different key-value pairs inside any of the objects in `"designTok If you'd like to set different breakpoints than the default ones in the ownCloud design system, you can set them using theming variables. -Breakpoint variables get prepended with `--oc-breakpoint-`, so e.g. *"large-default"* creates the custom CSS property `--oc-breakpoint-large-default`. - +Breakpoint variables get prepended with `--oc-breakpoint-`, so e.g. _"large-default"_ creates the custom CSS property `--oc-breakpoint-large-default`. ```json { @@ -139,7 +137,7 @@ Breakpoint variables get prepended with `--oc-breakpoint-`, so e.g. *"large-defa For the color values, you can use any valid CSS color format, e.g. **hex** (#fff), **rgb** (rgb(255,255,255)) or **color names** (white). -Color variables get prepended with `--oc-color-`, so e.g. *"background-default"* creates the custom CSS property `--oc-color-background-default`. +Color variables get prepended with `--oc-color-`, so e.g. _"background-default"_ creates the custom CSS property `--oc-color-background-default`. Again, you can use the [ownCloud design tokens](https://owncloud.design/#/Design%20Tokens) as a reference implementation. @@ -168,12 +166,15 @@ Again, you can use the [ownCloud design tokens](https://owncloud.design/#/Design "swatch-inverse-muted": "", "swatch-passive-default": "", "swatch-passive-hover": "", + "swatch-passive-hover-outline": "", "swatch-passive-muted": "", "swatch-passive-contrast": "", "swatch-primary-default": "", "swatch-primary-hover": "", "swatch-primary-muted": "", + "swatch-primary-muted-hover": "", "swatch-primary-gradient": "", + "swatch-primary-gradient-hover": "", "swatch-primary-contrast": "", "swatch-success-default": "", "swatch-success-hover": "", @@ -194,7 +195,7 @@ Again, you can use the [ownCloud design tokens](https://owncloud.design/#/Design You can change the `default`, `large` and `medium` font sizes according to your needs. If you need more customization options regarding font sizes, please [open an issue on GitHub](https://github.com/owncloud/web/issues/new) with a detailed description. -Font size variables get prepended with `--oc-font-size-`, so e.g. *"default"* creates the custom CSS property `--oc-font-size-default`. +Font size variables get prepended with `--oc-font-size-`, so e.g. _"default"_ creates the custom CSS property `--oc-font-size-default`. ```json { @@ -220,10 +221,10 @@ Please note that you also need to make the font available as a `font-face` via C ### Sizes -Use sizing variables to change various UI elements, such as icon and logo appearance, table row or checkbox sizes, according to your needs. +Use sizing variables to change various UI elements, such as icon and logo appearance, table row or checkbox sizes, according to your needs. If you need more customization options regarding sizes, please [open an issue on GitHub](https://github.com/owncloud/web/issues/new) with a detailed description. -Size variables get prepended with `--oc-size-`, so e.g. *"icon-default"* creates the custom CSS property `--oc-size-icon-default`. +Size variables get prepended with `--oc-size-`, so e.g. _"icon-default"_ creates the custom CSS property `--oc-size-icon-default`. ```json { @@ -243,7 +244,7 @@ Size variables get prepended with `--oc-size-`, so e.g. *"icon-default"* creates Use the six spacing options (`xsmall | small | medium | large | xlarge | xxlarge`) to create a more (or less) condensed version of the user interface. If you need more customization options regarding sizes, please [open an issue on GitHub](https://github.com/owncloud/web/issues/new) with a detailed description. -Spacing variables get prepended with `--oc-space-`, so e.g. *"xlarge"* creates the custom CSS property `--oc-space-xlarge`. +Spacing variables get prepended with `--oc-space-`, so e.g. _"xlarge"_ creates the custom CSS property `--oc-space-xlarge`. ```json { @@ -264,7 +265,7 @@ An empty template for your custom theme is provided below, and you can use the i ```json { - "common": { + "common": { "name": "", "slogan": "", "logo": "" diff --git a/packages/web-runtime/themes/owncloud/theme.json b/packages/web-runtime/themes/owncloud/theme.json index 8081ef78df4..a1d5900f042 100644 --- a/packages/web-runtime/themes/owncloud/theme.json +++ b/packages/web-runtime/themes/owncloud/theme.json @@ -137,6 +137,7 @@ "swatch-passive-contrast": "#000000", "swatch-primary-default": "#73b0f2", "swatch-primary-hover": "#7bafef", + "swatch-primary-muted": "", "swatch-primary-muted-hover": "#2282f7", "swatch-primary-gradient": "#4e85c8", "swatch-primary-gradient-hover": "#76a1d5",