From e5cfda9922f9c680337e4d147f5a94b7cb7e80da Mon Sep 17 00:00:00 2001 From: Lukas Hirt Date: Mon, 15 Jun 2020 11:13:10 +0200 Subject: [PATCH] Bring oC CI Added brand colors and xlarge padding token and increase clearspace around logo. Use Source Sans Pro as a global font and redesign buttons. --- .../unreleased/brand-and-interaction-colors | 8 ++ changelog/unreleased/improved-buttons | 7 ++ changelog/unreleased/logo-clearspace | 7 ++ changelog/unreleased/oc-ci-font | 6 + src/elements/OcButton.vue | 7 +- src/styles/theme/_variables.scss | 2 + src/styles/theme/oc-button.scss | 103 +++++++++++++++++- src/styles/theme/oc-sidebar.scss | 21 ++-- src/tokens/color.yml | 24 +++- src/tokens/paddings.yml | 3 + src/tokens/size.yml | 3 + 11 files changed, 166 insertions(+), 25 deletions(-) create mode 100644 changelog/unreleased/brand-and-interaction-colors create mode 100644 changelog/unreleased/improved-buttons create mode 100644 changelog/unreleased/logo-clearspace create mode 100644 changelog/unreleased/oc-ci-font diff --git a/changelog/unreleased/brand-and-interaction-colors b/changelog/unreleased/brand-and-interaction-colors new file mode 100644 index 000000000..b25a414dc --- /dev/null +++ b/changelog/unreleased/brand-and-interaction-colors @@ -0,0 +1,8 @@ +Enhancement: Bring oC primary brand and interaction colors + +We've brought the ownCloud corporate identity brand and interaction colors. +The primary brand colour is used as a background in the sidebar. +Interaction colours are used in buttons and links. + +https://github.com/owncloud/owncloud-design-system/issues/546 +https://github.com/owncloud/owncloud-design-system/pull/791 \ No newline at end of file diff --git a/changelog/unreleased/improved-buttons b/changelog/unreleased/improved-buttons new file mode 100644 index 000000000..5bf247a69 --- /dev/null +++ b/changelog/unreleased/improved-buttons @@ -0,0 +1,7 @@ +Enhancement: Improve the design of buttons + +We've added border-radius to buttons, added shadow to the primary button and adjusted font-weight and padding. + +https://github.com/owncloud/owncloud-design-system/issues/784 +https://github.com/owncloud/owncloud-design-system/issues/777 +https://github.com/owncloud/owncloud-design-system/pull/791 \ No newline at end of file diff --git a/changelog/unreleased/logo-clearspace b/changelog/unreleased/logo-clearspace new file mode 100644 index 000000000..8749b5726 --- /dev/null +++ b/changelog/unreleased/logo-clearspace @@ -0,0 +1,7 @@ +Enhancement: Increase the logo clearspace + +We've increased the gutter between top corner of the sidebar and the logo. +We've also decreased the size of the logo itself. + +https://github.com/owncloud/owncloud-design-system/issues/786 +https://github.com/owncloud/owncloud-design-system/pull/791 \ No newline at end of file diff --git a/changelog/unreleased/oc-ci-font b/changelog/unreleased/oc-ci-font new file mode 100644 index 000000000..f05fd87be --- /dev/null +++ b/changelog/unreleased/oc-ci-font @@ -0,0 +1,6 @@ +Enhancement: Use Source Sans Pro + +We've started using Source Sans Pro in the default theme as the font. + +https://github.com/owncloud/owncloud-design-system/issues/785 +https://github.com/owncloud/owncloud-design-system/pull/791 \ No newline at end of file diff --git a/src/elements/OcButton.vue b/src/elements/OcButton.vue index a0f7a42a2..9ceefb6a9 100644 --- a/src/elements/OcButton.vue +++ b/src/elements/OcButton.vue @@ -9,7 +9,7 @@ :disabled="disabled" @click="onClick" > - + @@ -135,11 +135,6 @@ export default { }, }, computed: { - $_ocButton_iconClass() { - return this.$slots.default - ? "uk-position-small uk-position-center-left" - : "uk-position-center" - }, $_ocButton_buttonClass() { if (this.stopClassPropagation) return "" diff --git a/src/styles/theme/_variables.scss b/src/styles/theme/_variables.scss index c383c205c..3f882461a 100644 --- a/src/styles/theme/_variables.scss +++ b/src/styles/theme/_variables.scss @@ -23,3 +23,5 @@ $navbar-nav-item-height: 60px; // Transition durations $transition-duration-short: 200ms; + +$global-font-family: 'Source Sans Pro', sans-serif; diff --git a/src/styles/theme/oc-button.scss b/src/styles/theme/oc-button.scss index 2996d1cbd..daac8bf63 100644 --- a/src/styles/theme/oc-button.scss +++ b/src/styles/theme/oc-button.scss @@ -4,13 +4,39 @@ // ======================================================================== @mixin hook-button() { - text-transform: uppercase; + display: inline-flex; + flex-flow: row wrap; + border-radius: 3px; + padding: 0.5rem 0.75rem; + font-size: 1.125rem; + font-weight: 600; + line-height: 1.4; + justify-content: center; + align-items: center; + transition: + background-color $transition-duration-short ease-in-out, + color $transition-duration-short ease-in-out, + border-color $transition-duration-short ease-in-out; } @mixin hook-button-disabled() { + border-color: lighten($global-muted-color, 25%); + color: lighten($global-muted-color, 25%); + .oc-icon > svg { fill: lighten($global-muted-color, 25%); } + + // Workaround for preventing hover effects on disabled buttons + &:hover, + &:focus { + border-color: lighten($global-muted-color, 25%); + color: lighten($global-muted-color, 25%); + + .oc-icon > svg { + fill: lighten($global-muted-color, 25%); + } + } } // @@ -24,13 +50,11 @@ position: relative; .oc-icon + span { - margin-left: $global-margin; + margin-left: $small-margin; } - text-transform: none !important; - - &:not(.uk-button-small):not(.uk-button-large):not(.uk-button-raw) { - min-height: $global-control-height; + .oc-icon > svg { + transition: fill $transition-duration-short ease-in-out; } &.uk-button-small { @@ -39,6 +63,7 @@ &.uk-button-large { min-height: $global-control-large-height; + font-size: 1.5rem; } &.uk-button-primary, @@ -48,6 +73,72 @@ fill: $global-inverse-color; } } + + &.uk-button-default { + border: 1px solid $action-primary; + background-color: transparent; + color: $action-primary; + + .oc-icon > svg { + fill: $action-primary; + } + + &:hover, + &:focus { + border-color: $action-primary-hover; + color: $action-primary-hover; + + .oc-icon > svg { + fill: $action-primary-hover; + } + } + } + + &.uk-button-primary { + background-color: $action-primary; + box-shadow: 0 4px 6px rgba($shadow-action-primary, 0.11), 0 1px 3px rgba($shadow-global, 0.08); + color: white; + + &:hover, + &:focus { + background-color: $action-primary-hover; + } + } + + .uk-button-group & { + border-radius: 0; + // Prevent negative margin which is coming from UIkit + margin-left: 0 !important; + + &:first-of-type { + border-radius: 3px 0 0 3px; + } + + &:last-of-type { + border-radius: 0 3px 3px 0; + } + + &.uk-button-default { + border-left: none; + border-right: none; + + &:first-of-type { + border-left: 1px solid $action-primary; + } + + &:last-of-type { + border-right: 1px solid $action-primary; + } + } + + &.uk-button-primary { + box-shadow: none; + } + } + + &:not(.uk-button-small):not(.uk-button-large):not(.uk-button-raw) { + min-height: $global-control-height; + } } .oc-button.uk-button-raw { diff --git a/src/styles/theme/oc-sidebar.scss b/src/styles/theme/oc-sidebar.scss index 7f23eed9d..456b518c9 100644 --- a/src/styles/theme/oc-sidebar.scss +++ b/src/styles/theme/oc-sidebar.scss @@ -2,8 +2,8 @@ width: $width-medium; height: 100vh; max-height: 100vh; - padding: $gutter 0; - background-color: $primary-background; + padding: $large-gutter 0 $gutter; + background-color: $brand-primary; overflow: hidden auto; box-sizing: border-box; @@ -26,7 +26,7 @@ } &-img { - @extend .uk-width-small; + height: $height-small; } &-text { @@ -53,7 +53,7 @@ &:hover, &:focus { - background-color: darken($primary-background, 5); + background-color: lighten($brand-primary, 5); } & > a, @@ -65,6 +65,8 @@ display: flex; flex-flow: row wrap; padding: $small-gutter; + font-size: 1.125rem; + font-weight: 600; align-items: center; &:hover, @@ -78,14 +80,11 @@ } &.uk-active { - background-color: darken($primary-background, 5); + background-color: lighten($brand-primary, 5); - & > a { - font-weight: bold; - - &:hover { - cursor: default; - } + // Vue doesn't allow navigating to active route so we do not use pointer as it might mislead users + & > a:hover { + cursor: default; } } } diff --git a/src/tokens/color.yml b/src/tokens/color.yml index 5e09041dd..62e4a9316 100644 --- a/src/tokens/color.yml +++ b/src/tokens/color.yml @@ -18,10 +18,10 @@ props: value: "#667fa3" category: "Font-colors" link-color: - value: "#0066ff" + value: "#4e85c8" category: "Font-colors" link-hover-color: - value: "#0066ff" + value: "#306db5" category: "Font-colors" inverse-color: value: "#fff" @@ -69,6 +69,26 @@ props: value: "#e00000" category: "Background-colors" + brand-primary: + value: "#1b223d" + category: "Brand-colors" + + action-primary: + value: "#4e85c8" + category: "Action-colors" + + action-primary-hover: + value: "#306db5" + category: "Action-colors" + + shadow-global: + value: "#000000" + category: "Shadow-colors" + + shadow-action-primary: + value: "#32325d" + category: "Shadow-colors" + global: type: color category: color diff --git a/src/tokens/paddings.yml b/src/tokens/paddings.yml index 0e891eaf4..de6cd743d 100644 --- a/src/tokens/paddings.yml +++ b/src/tokens/paddings.yml @@ -11,7 +11,10 @@ props: medium-gutter: value: "30px" large-gutter: + value: "50px" + xlarge-gutter: value: "70px" + global: type: number category: space diff --git a/src/tokens/size.yml b/src/tokens/size.yml index c03e6aeff..1f7a33d28 100644 --- a/src/tokens/size.yml +++ b/src/tokens/size.yml @@ -12,6 +12,9 @@ props: width-medium: value: "300px" + height-small: + value: "50px" + global: type: number category: size