owncloud · kulmann · Oct 3, 2020 · Sep 25, 2020 · Oct 2, 2020 · Oct 2, 2020
diff --git a/build/build-system.js b/build/build-system.js
@@ -19,15 +19,15 @@ rm(path.join(config.system.assetsRoot, config.system.assetsSubDirectory), err =>
   webpack(webpackConfig, (err, stats) => {
     spinner.stop()
     if (err) throw err
-    process.stdout.write(
-      stats.toString({
-        colors: true,
-        modules: false,
-        children: false,
-        chunks: false,
-        chunkModules: false,
-      }) + "\n\n"
-    )
+    // process.stdout.write(
+    //   stats.toString({
+    //     colors: true,
+    //     modules: false,
+    //     children: false,
+    //     chunks: false,
+    //     chunkModules: false,
+    //   }) + "\n\n"
+    // )
 
     if (stats.hasErrors()) {
       console.log(chalk.red("  Design System build failed with errors.\n"))

diff --git a/changelog/unreleased/design-tweaks b/changelog/unreleased/design-tweaks
@@ -0,0 +1,7 @@
+Change: Small design improvements
+
+We've changed a few color design tokens.
+We've rotated the icon 45 degrees to the left.
+We've changed the spacing values and united them in one design tokens for both margin and padding.
+
+https://github.com/owncloud/owncloud-design-system/pull/890
diff --git a/changelog/unreleased/radio-and-checkbox-components.md b/changelog/unreleased/radio-and-checkbox-components.md
@@ -0,0 +1,6 @@
+Change: Updated checkbox and radiobutton components
+
+We updated the OcCheckbox and OcRadio components so that it's possible to use them properly with `v-model`. OcRadio had 
+the radiobutton on the right side of the label. We moved it over to the left side for consistency.
+
+https://github.com/owncloud/owncloud-design-system/pull/890  
diff --git a/changelog/unreleased/utility-classes b/changelog/unreleased/utility-classes
@@ -0,0 +1,6 @@
+Enhancement: Add margin and padding utility classes
+
+We've added utility classes which can assign margin and padding to elements.
+In their own subsections of utilities section in our design system documentation can be found how to use them.
+
+https://github.com/owncloud/owncloud-design-system/pull/890
diff --git a/config/docs.config.js b/config/docs.config.js
@@ -122,8 +122,20 @@ module.exports = {
       name: "Utilities",
       content: "../docs/utilities.md",
       exampleMode: "hide",
-      usageMode: "hide",
-      sectionDepth: 1,
+      usageMode: "expand",
+      sectionDepth: 2,
+      sections: [
+        {
+          name: "Margin",
+          content: "../docs/margins.md",
+          description: "Utility classes to assign a margin to elements"
+        },
+        {
+          name: "Padding",
+          content: "../docs/paddings.md",
+          description: "Utility classes to assign a padding to elements"
+        }
+      ]
     },
     {
       name: "Animations",

diff --git a/docs/margins.md b/docs/margins.md
@@ -0,0 +1,103 @@
+## Usage
+Add one or more of the following classes to any element to create the same vertical and/or horizontal margin that a paragraph usually has.
+
+| Class |	Description |
+| ----- | ----------- |
+| .oc-m |	Adds margin to all sides of the element. |
+| .oc-mt | Adds top margin. |
+| .oc-mb | Adds bottom margin. |
+| .oc-ml | Adds left margin. |
+| .oc-mr | Adds right margin. |
+| .oc-mx | Adds left and right margins. |
+| .oc-my | Adds top and bottom margins. |
+
+## X-Small margin
+Add one of the following classes to add very small spacing to block elements.
+
+| Class |	Description |
+| ----- | ----------- |
+| .oc-m-xs | Adds x-small margin to all sides of the element. |
+| .oc-mt-xs | Adds x-small top margin. |
+| .oc-mb-xs | Adds x-small bottom margin. |
+| .oc-ml-xs | Adds x-small left margin. |
+| .oc-mr-xs | Adds x-small right margin. |
+| .oc-mx-xs | Adds x-small left and right margins. |
+| .oc-my-xs | Adds x-small top and bottom margins. |
+
+## Small margin
+Add one of the following classes to add small spacing to block elements.
+
+| Class |	Description |
+| ----- | ----------- |
+| .oc-m-s | Adds small to all sides of the element. |
+| .oc-mt-s | Adds small top margin. |
+| .oc-mb-s | Adds small bottom margin. |
+| .oc-ml-s | Adds small left margin. |
+| .oc-mr-s | Adds small right margin. |
+| .oc-mx-s | Adds small left and right margins. |
+| .oc-my-s | Adds small top and bottom margins. |
+
+## Medium margin
+Add one of the following classes to add medium spacing to block elements.
+
+| Class |	Description |
+| ----- | ----------- |
+| .oc-m-m | Adds medium margin to all sides of the element. |
+| .oc-mt-m | Adds medium top margin.
+| .oc-mb-m | Adds medium bottom margin. |
+| .oc-ml-m | Adds medium left margin. |
+| .oc-mr-m | Adds medium right margin. |
+| .oc-mx-m | Adds medium left and right margins. |
+| .oc-my-m | Adds medium top and bottom margins. |
+
+## Large margin
+Add one of the following classes to add large spacing to block elements.
+
+| Class |	Description |
+| ----- | ----------- |
+| .oc-m-l | Adds large margin to all sides of the element. |
+| .oc-mt-l | Adds large top margin. |
+| .oc-mb-l | Adds large bottom margin. |
+| .oc-ml-l | Adds large left margin. |
+| .oc-mr-l | Adds large right margin. |
+| .oc-mx-l | Adds large left and right margins. |
+| .oc-my-l | Adds large top and bottom margins. |
+
+## X-Large margin
+Add one of the following classes to add very large spacing to block elements.
+
+| Class |	Description |
+| ----- | ----------- |
+| .oc-m-xl | Adds larger margin to all sides of the element. |
+| .oc-mt-xl | Adds larger top margin. |
+| .oc-mb-xl | Adds larger bottom margin. |
+| .oc-ml-xl | Adds larger left margin. |
+| .oc-mr-xl | Adds larger right margin. |
+| .oc-mx-xl | Adds larger left and right margins. |
+| .oc-my-xl | Adds larger top and bottom margins. |
+
+## XX-Large margin
+Add one of the following classes to add extra large spacing to block elements.
+
+| Class |	Description |
+| ----- | ----------- |
+| .oc-m-xxl | Adds extra larger margin to all sides of the element. |
+| .oc-mt-xxl | Adds extra larger top margin. |
+| .oc-mb-xxl | Adds extra larger bottom margin. |
+| .oc-ml-xxl | Adds extra larger left margin. |
+| .oc-mr-xxl | Adds extra larger right margin. |
+| .oc-mx-xxl | Adds extra larger left and right margins. |
+| .oc-my-xxl | Adds extra larger top and bottom margins. |
+
+## Remove margin
+Add one of the following classes to remove margin from block elements.
+
+| Class |	Description |
+| ----- | ----------- |
+| .oc-m-rm | Removes all margins. |
+| .oc-mt-rm | Removes top margin. |
+| .oc-mb-rm | Removes bottom margin. |
+| .oc-ml-rm | Removes left margin. |
+| .oc-mr-rm | Removes right margin. |
+| .oc-mx-rm | Removes left and right margins. |
+| .oc-my-rm | Removes top and bottom margins. |
diff --git a/docs/paddings.md b/docs/paddings.md
@@ -0,0 +1,103 @@
+## Usage
+Add one or more of the following classes to any element to create the same vertical and/or horizontal padding that a paragraph usually has.
+
+| Class |	Description |
+| ----- | ----------- |
+| .oc-p |	Adds padding to all sides of the element. |
+| .oc-pt | Adds top padding. |
+| .oc-pb | Adds bottom padding. |
+| .oc-pl | Adds left padding. |
+| .oc-pr | Adds right padding. |
+| .oc-px | Adds left and right paddings. |
+| .oc-py | Adds top and bottom paddings. |
+
+## X-Small padding
+Add one of the following classes to add very small spacing to block elements.
+
+| Class |	Description |
+| ----- | ----------- |
+| .oc-p-xs | Adds x-small padding to all sides of the element. |
+| .oc-pt-xs | Adds x-small top padding. |
+| .oc-pb-xs | Adds x-small bottom padding. |
+| .oc-pl-xs | Adds x-small left padding. |
+| .oc-pr-xs | Adds x-small right padding. |
+| .oc-px-xs | Adds x-small left and right paddings. |
+| .oc-py-xs | Adds x-small top and bottom paddings. |
+
+## Small padding
+Add one of the following classes to add small spacing to block elements.
+
+| Class |	Description |
+| ----- | ----------- |
+| .oc-p-s | Adds small to all sides of the element. |
+| .oc-pt-s | Adds small top padding. |
+| .oc-pb-s | Adds small bottom padding. |
+| .oc-pl-s | Adds small left padding. |
+| .oc-pr-s | Adds small right padding. |
+| .oc-px-s | Adds small left and right paddings. |
+| .oc-py-s | Adds small top and bottom paddings. |
+
+## Medium padding
+Add one of the following classes to add medium spacing to block elements.
+
+| Class |	Description |
+| ----- | ----------- |
+| .oc-p-m | Adds medium padding to all sides of the element. |
+| .oc-pt-m | Adds medium top padding.
+| .oc-pb-m | Adds medium bottom padding. |
+| .oc-pl-m | Adds medium left padding. |
+| .oc-pr-m | Adds medium right padding. |
+| .oc-px-m | Adds medium left and right paddings. |
+| .oc-py-m | Adds medium top and bottom paddings. |
+
+## Large padding
+Add one of the following classes to add large spacing to block elements.
+
+| Class |	Description |
+| ----- | ----------- |
+| .oc-p-l | Adds large padding to all sides of the element. |
+| .oc-pt-l | Adds large top padding. |
+| .oc-pb-l | Adds large bottom padding. |
+| .oc-pl-l | Adds large left padding. |
+| .oc-pr-l | Adds large right padding. |
+| .oc-px-l | Adds large left and right paddings. |
+| .oc-py-l | Adds large top and bottom paddings. |
+
+## X-Large padding
+Add one of the following classes to add very large spacing to block elements.
+
+| Class |	Description |
+| ----- | ----------- |
+| .oc-p-xl | Adds larger padding to all sides of the element. |
+| .oc-pt-xl | Adds larger top padding. |
+| .oc-pb-xl | Adds larger bottom padding. |
+| .oc-pl-xl | Adds larger left padding. |
+| .oc-pr-xl | Adds larger right padding. |
+| .oc-px-xl | Adds larger left and right paddings. |
+| .oc-py-xl | Adds larger top and bottom paddings. |
+
+## XX-Large padding
+Add one of the following classes to add extra large spacing to block elements.
+
+| Class |	Description |
+| ----- | ----------- |
+| .oc-p-xxl | Adds extra larger padding to all sides of the element. |
+| .oc-pt-xxl | Adds extra larger top padding. |
+| .oc-pb-xxl | Adds extra larger bottom padding. |
+| .oc-pl-xxl | Adds extra larger left padding. |
+| .oc-pr-xxl | Adds extra larger right padding. |
+| .oc-px-xxl | Adds extra larger left and right paddings. |
+| .oc-py-xxl | Adds extra larger top and bottom paddings. |
+
+## Remove padding
+Add one of the following classes to remove padding from block elements.
+
+| Class |	Description |
+| ----- | ----------- |
+| .oc-p-rm | Removes all paddings. |
+| .oc-pt-rm | Removes top padding. |
+| .oc-pb-rm | Removes bottom padding. |
+| .oc-pl-rm | Removes left padding. |
+| .oc-pr-rm | Removes right padding. |
+| .oc-px-rm | Removes left and right paddings. |
+| .oc-py-rm | Removes top and bottom paddings. |
diff --git a/docs/utilities.md b/docs/utilities.md
@@ -3,4 +3,5 @@
 | class name          | Description                                                                                                                                                                                      |
 | ------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
 | .oc-visually-hidden | Hides text visually, but not for screen readers. For that use case, <u>do not use</u> `display: none` or `visibility: hidden` since these CSS properties also hide elements from screen readers. |
-| .oc-border          | Adds a border with default size and color. Can be extended with side (e. g. `oc-border-top`) to assign border only to one side of the element                                                    |
+| .oc-border          | Adds a border with default size and color. Can be extended with side (e. g. `oc-bt`) to assign border only to one side of the element |
+| .oc-padding         | Adds a padding to the element. Can be extended with size (e. g. `oc-padding-small`) to assign specific size of the padding or with direction (e. g. `oc-padding-top`) to give padding only to a specific direction. |
diff --git a/src/assets/icons/link.svg b/src/assets/icons/link.svg
diff --git a/src/elements/OCAlert.vue b/src/elements/OCAlert.vue
@@ -65,7 +65,7 @@ export default {
   </oc-alert>
   <oc-alert variation="primary">
     <p>
-      <oc-icon name="info" class="uk-float-left uk-margin-small-right" />
+      <oc-icon name="info" class="uk-float-left oc-mr-s" />
       I am nice and blue and have an icon
     </p>
   </oc-alert>

diff --git a/src/elements/OCDrop.vue b/src/elements/OCDrop.vue
@@ -105,9 +105,9 @@ export default {
 <docs>
 ```jsx
 <div>
-  <div class="uk-button-group">
-    <oc-button id="my_menu">Menu</oc-button>
-    <oc-button id="my_filter">Filter</oc-button>
+  <div class="uk-button-group oc-mt-s">
+    <oc-button id="my_menu" class="oc-mr-s">Menu</oc-button>
+    <oc-button id="my_filter" class="oc-mr-s">Filter</oc-button>
     <oc-button id="my_advanced">Advanced</oc-button>
   </div>
 

diff --git a/src/elements/OCNotificationMessage.vue b/src/elements/OCNotificationMessage.vue
@@ -1,8 +1,8 @@
 <template>
   <div class="oc-alert" :class="$_ocNotificationMessage_classes">
-    <oc-icon :variation="status" size="large" name="info" class="uk-margin-small-right"></oc-icon>
+    <oc-icon :variation="status" size="large" name="info" class="oc-mr-s"></oc-icon>
     <div
-      class="uk-flex uk-flex-wrap uk-flex-middle uk-flex-1 uk-margin-right"
+      class="uk-flex uk-flex-wrap uk-flex-middle uk-flex-1 oc-mr"
       :role="status === 'danger' ? 'alert' : 'status'"
       :aria-live="status === 'danger' ? 'assertive' : 'polite'"
     >
@@ -13,14 +13,15 @@
         {{ message }}
       </div>
     </div>
-    <oc-icon
-      aria-label="Close"
-      :variation="status"
+    <oc-button
       name="close"
-      class="uk-position-top-right uk-margin-small-top uk-margin-small-right oc-alert-close-icon"
-      type="button"
+      variation="raw"
+      aria-label="Close"
+      class="uk-position-top-right oc-mt-s oc-mr-s"
       @click="$_ocNotificationMessage_close"
-    ></oc-icon>
+    >
+      <oc-icon name="close" :variation="status" />
+    </oc-button>
   </div>
 </template>
 <script>

diff --git a/src/elements/OcActionDrop.vue b/src/elements/OcActionDrop.vue
@@ -155,14 +155,14 @@ export default {
 
 <docs>
 ```jsx
-    <oc-action-drop button-variation="primary" class="uk-margin-small-left">
+    <oc-action-drop button-variation="primary" class="oc-ml-s">
         <template v-slot:button>Action</template>
         <template v-slot:actions>
             <div tabindex="0" role="menuitem" class="uk-text-nowrap">Action 1</div>
             <div tabindex="0" role="menuitem" class="uk-text-nowrap">Action 2</div>
         </template>
     </oc-action-drop>
-    <oc-action-drop button-variation="default" class="uk-margin-small-left">
+    <oc-action-drop button-variation="default" class="oc-ml-s">
         <template v-slot:button>Action</template>
         <template v-slot:actions>
             <div tabindex="0" role="menuitem" class="uk-text-nowrap">Action 3</div>

diff --git a/src/elements/OcBreadcrumb.vue b/src/elements/OcBreadcrumb.vue
@@ -99,7 +99,7 @@ export default {
 ```js
 <template>
   <div>
-    <oc-breadcrumb :items="items" home class="uk-margin-bottom" />
+    <oc-breadcrumb :items="items" home class="oc-mb" />
     <oc-breadcrumb :items="items" variation="lead" />
   </div>
 </template>