Update util name to "text figures"

scss/_utilities_oldstyle-nums.scss → scss/_utilities_text-figures.scss

@@ -1,8 +1,8 @@
 @import 'settings';
 
 // Force a parent to clear floated children
-@mixin vf-u-oldstyle-nums {
-  .u-oldstyle-nums {
+@mixin vf-u-text-figures {
+  .u-text-figures {
     font-variant-numeric: oldstyle-nums !important;
   }
 }

scss/_vanilla.scss

@@ -84,7 +84,7 @@
 @import 'utilities_vertically-center';
 @import 'utilities_no-print';
 @import 'utilities_text-max-width';
-@import 'utilities_oldstyle-nums';
+@import 'utilities_text-figures';
 
 // Include all the CSS
 @mixin vanilla {
@@ -173,5 +173,5 @@
   @include vf-u-visualise-baseline;
   @include vf-u-no-print;
   @include vf-u-text-max-width;
-  @include vf-u-oldstyle-nums;
+  @include vf-u-text-figures;
 }

templates/docs/base/typography.md

@@ -32,7 +32,7 @@ We use the [Ubuntu typeface](https://design.ubuntu.com/font/) exclusively. It wa
   <tr>
     <td><span class="p-text--small-caps">ABCDEFGHIJKLMNOPQRSTUVWXYZ</span></td>
     <td><span class="p-text--small-caps">abcdefgijklmnopqrstuvwxyz</span></td>
-    <td>available soon</td>
+    <td><span class="p-text--small-caps">1234567890</span></td>
   </tr>
 </tbody>
 </table>
@@ -233,11 +233,33 @@ View example of the small caps text
 
 Previously this style was implemented as `.p-text--x-small-capitalised` class name. This name is now deprecated and will be removed in next major version of Vanilla, please use `.p-text--small-caps` instead.
 
-## Old-style numerals
-
-Old-style numerals are a font feature that changes the appearance of numbers in text to match the height of lowercase letters. The small-caps text uses old-style numerals by default. To apply old-style numerals to other text, add the class `u-oldstyle-nums`.
-
-<div class="embedded-example"><a href="/docs/examples/utilities/oldstyle-nums/" class="js-example">
+## Text figures
+
+Text figures are numerals designed to echo the varying height and alignment to the baseline of lowercase text.
+
+To apply the text figures styling, wrap the number in a span with the class `u-text-figures`.
+
+<div class="row--50-50">
+  <div class="col">
+    <div class="p-notification--positive">
+      <div class="p-notification__content">
+        <h5 class="p-notification__title">When to use:</h5>
+        <p class="p-notification__message">Text figures work best when placed within small caps where we've set them as the default and are generally recommended within blocks of lowercase text too, although we haven't set that as a default.</p>
+      </div>
+    </div>
+  </div>
+  <div class="col">
+    <div class="p-notification--negative">
+      <div class="p-notification__content">
+        <h5 class="p-notification__title">When not to use:</h5>
+        <p class="p-notification__message">Text figures should never be used next to uppercase text. Care should be taken in tables and other scenarios where there is a lot of numeric data.
+        </p>
+      </div>
+    </div>
+  </div>
+</div>
+
+<div class="embedded-example"><a href="/docs/examples/utilities/text-figures/" class="js-example">
 View example of the old-style numerals
 </a></div>
 

templates/docs/examples/utilities/text-figures.html

@@ -0,0 +1,7 @@
+{% extends "_layouts/examples.html" %}
+{% block title %}Text figures{% endblock %}
+
+{% block content %}
+<p>Default numbers: 1234567890</p>
+<p>Text figures: <span class="u-text-figures">1234567890</span></p>
+{% endblock %}