refactor: make text size classes relative to default size

owncloud · Aug 19, 2022 · 36170cf · 36170cf
1 parent 18fef0c
commit 36170cf
Show file tree

Hide file tree

Showing 8 changed files with 107 additions and 49 deletions.
diff --git a/docs/text.md b/docs/text.md
@@ -8,10 +8,3 @@ Use one of the following classes to enforce a certain wrapping behaviour.
 | .oc-text-nowrap   | Doesn't break to new lines.                                                                   |
 | .oc-text-truncate | Doesn't break to new lines. Text will be truncated, showing an ellipsis instead if necessary. |
 | .oc-text-break    | Text will break to new lines at word ends if it exceeds one line.                             |
-
-## Text size
-
-| Class         | Description                                                     |
-| ------------- | --------------------------------------------------------------- |
-| .oc-text-initial | Sets the font size to 1rem, the document default. Allows for the combination of correct HTML tags (e.g. headings) without relying on huge font sizes. |
-| .oc-text-lead | Sets a large font size to symbolise that the text is important. |
diff --git a/src/components/atoms/OcButton/OcButton.vue b/src/components/atoms/OcButton/OcButton.vue
@@ -203,7 +203,7 @@ export default {
     background-color: transparent;
     border-style: none;
     color: $color;
-    font-size: var(--oc-font-size-small);
+    font-size: var(--oc-font-size-medium);
     font-weight: normal;
     min-height: 0;
     padding: 0;

diff --git a/src/components/molecules/OcBreadcrumb/OcBreadcrumb.vue b/src/components/molecules/OcBreadcrumb/OcBreadcrumb.vue
@@ -219,7 +219,7 @@ export default {
     a,
     button,
     span {
-      font-size: var(--oc-font-size-small);
+      font-size: var(--oc-font-size-medium);
     }
   }
 

diff --git a/src/components/molecules/OcInfoDrop/OcInfoDrop.vue b/src/components/molecules/OcInfoDrop/OcInfoDrop.vue
@@ -135,11 +135,11 @@ export default {
     vertical-align: middle;
   }
   .info-drop-content {
-    font-size: var(--oc-font-size-small);
+    font-size: var(--oc-font-size-medium);
     color: var(--oc-color-text-default);
   }
   .info-more-link {
-    font-size: var(--oc-font-size-small) !important;
+    font-size: var(--oc-font-size-medium) !important;
   }
   .info-header {
     align-items: center;

diff --git a/src/components/organisms/OcAccordion/OcAccordion.vue b/src/components/organisms/OcAccordion/OcAccordion.vue
@@ -159,7 +159,7 @@ export default {
     @extend .oc-mb-rm;
 
     display: block;
-    font-size: var(--oc-font-size-medium);
+    font-size: var(--oc-font-size-large);
 
     &-arrow-icon {
       position: absolute;

diff --git a/src/styles/theme/oc-form.scss b/src/styles/theme/oc-form.scss
@@ -48,15 +48,15 @@ $form-disabled-color: var(--oc-color-text-muted) !default;
 
 $form-placeholder-color: var(--oc-color-text-muted) !default;
 
-$form-small-height: var(--oc-font-size-default) !default;
-$form-small-padding-horizontal: 8px !default;
+$form-small-height: var(--oc-font-size-small) !default;
+$form-small-padding-horizontal: var(--oc-space-small) !default;
 $form-small-line-height: $form-small-height !default;
-$form-small-font-size: var(--oc-font-size-default) !default;
+$form-small-font-size: var(--oc-font-size-small) !default;
 
 $form-large-height: var(--oc-font-size-large) !default;
-$form-large-padding-horizontal: 12px !default;
+$form-large-padding-horizontal: var(--oc-space-medium) !default;
 $form-large-line-height: $form-large-height !default;
-$form-large-font-size: var(--oc-font-size-default) !default;
+$form-large-font-size: var(--oc-font-size-large) !default;
 
 $form-danger-color: var(--oc-color-swatch-danger-default) !default;
 $form-success-color: var(--oc-color-swatch-success-default) !default;

diff --git a/src/styles/theme/oc-text.scss b/src/styles/theme/oc-text.scss
@@ -12,6 +12,9 @@ p {
 html * {
   font-family: var(--oc-font-family);
 }
+html {
+  font-size: var(--oc-font-size-default);
+}
 
 a {
   color: var(--oc-color-swatch-primary-default);
@@ -22,19 +25,15 @@ a {
   }
 }
 
-.oc-text-bold {
-  font-weight: 600 !important;
-}
-
-.oc-text-muted {
-  color: var(--oc-color-text-muted);
-}
-
 .oc-heading-divider {
   border-bottom: calc(0.2px + 0.05em) solid var(--oc-color-border);
   padding-bottom: calc(5px + 0.1em);
 }
 
+/* -------------------------- */
+/* --- wrapping behaviour --- */
+/* -------------------------- */
+
 /*
  * Prevent text from wrapping onto multiple lines
  */
@@ -50,12 +49,10 @@ a {
   max-width: 100%;
   overflow: hidden;
 }
-
 .oc-text-truncate {
   text-overflow: ellipsis;
   white-space: nowrap;
 }
-
 th.oc-text-truncate,
 td.oc-text-truncate {
   max-width: 0;
@@ -69,54 +66,118 @@ td.oc-text-truncate {
   white-space: unset;
   word-wrap: break-word;
 }
-
 th.oc-text-break,
 td.oc-text-break {
   word-break: break-all;
 }
 
-.oc-text-meta {
-  color: var(--oc-color-text-muted);
-  font-size: 0.875rem;
-  line-height: 1.4;
-}
+/* ----------------------- */
+/* --- different sizes --- */
+/* ----------------------- */
 
-.oc-text-initial {
-  font-size: var(--oc-font-size-small);
+/*
+ * x-small text size as defined by the `oc-font-size-xsmall` theme token.
+ * By default 0.72rem.
+ */
+.oc-text-xsmall {
+  font-size: var(--oc-font-size-xsmall);
 }
 
+/*
+ * x-small text size as defined by the `oc-font-size-small` theme token.
+ * By default 0.86rem.
+ */
 .oc-text-small {
-  font-size: 0.875rem;
-  line-height: 1.5;
+  font-size: var(--oc-font-size-small);
 }
 
-.oc-text-normal {
-  font-weight: 400;
+/*
+ * medium text size as defined by the `oc-font-size-medium` theme token.
+ * By default 1rem. This is the base font size as defined on the html document.
+ */
+.oc-text-medium {
+  font-size: var(--oc-font-size-medium);
 }
 
+/*
+ * large text size as defined by the `oc-font-size-large` theme token.
+ * By default 1.14rem.
+ */
 .oc-text-large {
-  font-size: 1.5rem;
-  line-height: 1.5;
+  font-size: var(--oc-font-size-large);
 }
 
-.oc-text-lead {
-  color: var(--oc-color-text-default);
-  font-size: 1.5rem;
-  line-height: 1.5;
+/*
+ * x-large text size as defined by the `oc-font-size-xlarge` theme token.
+ * By default 1.29rem.
+ */
+.oc-text-xlarge {
+  font-size: var(--oc-font-size-xlarge);
 }
 
+/* ------------------------- */
+/* --- different weights --- */
+/* ------------------------- */
+
+/*
+ * Normal font weight.
+ */
+.oc-text-normal {
+  font-weight: 400;
+}
+/*
+ * Bold font weight.
+ */
+.oc-text-bold {
+  font-weight: 600;
+}
+
+/* ----------------- */
+/* --- alignment --- */
+/* ----------------- */
+
+/*
+ * Align horizontally centered.
+ */
 .oc-text-center {
   text-align: center;
 }
 
+/*
+ * Align horizontally left.
+ */
 .oc-text-left {
   text-align: left;
 }
 
+/*
+ * Align horizontally right.
+ */
 .oc-text-right {
   text-align: right;
 }
 
+/* ------------------------- */
+/* --- special modifiers --- */
+/* ------------------------- */
+
+/*
+ * Give text a muted color and small size.
+ */
+.oc-text-meta {
+  color: var(--oc-color-text-muted);
+  font-size: var(--oc-font-size-small);
+}
+/*
+ * Give text a muted color.
+ */
+.oc-text-muted {
+  color: var(--oc-color-text-muted);
+}
+
+/*
+ * Transform text to all uppercase
+ */
 .oc-text-uppercase {
   text-transform: uppercase !important;
 }
diff --git a/src/tokens/ods/font.yaml b/src/tokens/ods/font.yaml
@@ -4,10 +4,14 @@ font:
     value: 'Inter, sans-serif'
   size:
     default:
-      value: 0.88rem
+      value: 0.875rem
+    xsmall:
+      value: 0.72rem
     small:
-      value: 0.88rem
+      value: 0.86rem
     medium:
-      value: 1.25rem
+      value: 1rem
     large:
-      value: 1.5rem
+      value: 1.14rem
+    xlarge:
+      value: 1.29rem