Merge pull request #28389 from backstage/canon-styles-updates

Canon styles updates

packages/canon/.storybook/themes/backstage.css

@@ -1,15 +1,5 @@
-[data-theme='backstage-light'] {
-  /* Colors */
-  --canon-accent: #2e77d0;
-  --canon-background: #f8f8f8;
-  --canon-surface-1: #fff;
-  --canon-surface-2: #f4f4f4;
-
-  /* Text colors */
-  --canon-text-primary: #000;
-  --canon-text-primary-on-accent: #fff;
-  --canon-text-secondary: #646464;
-
+[data-theme-name='legacy'][data-theme='light'],
+[data-theme-name='legacy'][data-theme='dark'] {
   --canon-font-regular: 'Helvetica Neue', Helvetica, Roboto, Arial, sans-serif;
 
   .cn-button {
@@ -62,13 +52,35 @@
   }
 }
 
-[data-theme='backstage-dark'] {
+[data-theme-name='legacy'][data-theme='light'] {
   /* Colors */
   --canon-accent: #2e77d0;
+  --canon-background: #f8f8f8;
+  --canon-surface-1: #fff;
+  --canon-surface-2: #f4f4f4;
+
+  /* Text colors */
+  --canon-text-primary: #000;
+  --canon-text-primary-on-accent: #fff;
+  --canon-text-secondary: #646464;
+}
+
+[data-theme-name='legacy'][data-theme='dark'] {
+  /* Colors */
+  --canon-accent: #fff;
   --canon-background: #000;
   --canon-surface-1: #121212;
   --canon-surface-2: #1a1a1a;
 
+  /* Borders */
+  --canon-border-base: rgba(255, 255, 255, 0.2);
+  --canon-border-warning: #f50000;
+  --canon-border-error: #f87503;
+  --canon-border-selected: #25d262;
+
+  /* States - Add more states */
+  --canon-error: #f50000;
+
   /* Text colors */
   --canon-text-primary: #fff;
   --canon-text-primary-on-accent: #000;

packages/canon/src/components/Button/styles.css

@@ -35,18 +35,18 @@
 
   &:hover {
     background-color: transparent;
-    box-shadow: inset 0 0 0 1px var(--canon-outline-focus);
+    box-shadow: inset 0 0 0 1px var(--canon-border-focus);
     color: var(--canon-text-primary);
   }
 }
 
 .cn-button-secondary {
   background-color: transparent;
-  box-shadow: inset 0 0 0 1px var(--canon-outline);
+  box-shadow: inset 0 0 0 1px var(--canon-border-base);
   color: var(--canon-text-primary);
 
   &:hover {
-    box-shadow: inset 0 0 0 1px var(--canon-outline-hover);
+    box-shadow: inset 0 0 0 1px var(--canon-border-hover);
   }
 }
 

packages/canon/src/components/Checkbox/styles.css

@@ -9,39 +9,33 @@
   color: var(--canon-text-primary);
   user-select: none;
 
-  & .checkbox {
-    all: unset;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    width: 16px;
-    height: 16px;
-    box-shadow: inset 0 0 0 1px var(--canon-outline);
-    cursor: pointer;
-    border-radius: 2px;
-    transition: all 0.2s ease-in-out;
-
-    &[data-state='unchecked'] {
-      & .checkbox-indicator {
-        display: none;
-      }
-    }
-
-    &[data-state='checked'] {
-      background: var(--canon-accent);
-    }
-  }
-
-  & .checkbox-indicator {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    color: var(--canon-text-primary-on-accent);
-  }
-
   &:hover {
     & .checkbox {
-      box-shadow: inset 0 0 0 1px var(--canon-outline-hover);
+      box-shadow: inset 0 0 0 1px var(--canon-border-hover);
     }
   }
 }
+
+.checkbox {
+  all: unset;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 1rem;
+  height: 1rem;
+  box-shadow: inset 0 0 0 1px var(--canon-border-base);
+  cursor: pointer;
+  border-radius: 2px;
+  transition: all 0.2s ease-in-out;
+
+  &[data-checked] {
+    background-color: var(--canon-accent);
+  }
+}
+
+.checkbox-indicator {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: var(--canon-text-primary-on-accent);
+}

packages/canon/src/components/Heading/styles.css

@@ -23,36 +23,36 @@
   &.text-display {
     font-size: var(--canon-font-size-display);
     line-height: 100%;
-    font-weight: var(--canon-font-bold);
+    font-weight: var(--canon-font-weight-bold);
   }
 
   &.text-title1 {
     font-size: var(--canon-font-size-title1);
     line-height: 100%;
-    font-weight: var(--canon-font-bold);
+    font-weight: var(--canon-font-weight-bold);
   }
 
   &.text-title2 {
     font-size: var(--canon-font-size-title2);
     line-height: 100%;
-    font-weight: var(--canon-font-bold);
+    font-weight: var(--canon-font-weight-bold);
   }
 
   &.text-title3 {
     font-size: var(--canon-font-size-title3);
     line-height: 100%;
-    font-weight: var(--canon-font-bold);
+    font-weight: var(--canon-font-weight-bold);
   }
 
   &.text-title4 {
     font-size: var(--canon-font-size-title4);
     line-height: 100%;
-    font-weight: var(--canon-font-bold);
+    font-weight: var(--canon-font-weight-bold);
   }
 
   &.text-title5 {
     font-size: var(--canon-font-size-title5);
     line-height: 100%;
-    font-weight: var(--canon-font-bold);
+    font-weight: var(--canon-font-weight-bold);
   }
 }

packages/canon/src/components/Table/styles.css

@@ -18,7 +18,7 @@
 
 .table-header {
   tr {
-    /* border-bottom: 1px solid var(--canon-outline); */
+    /* border-bottom: 1px solid var(--canon-border); */
   }
 }
 

packages/canon/src/css/base.css

@@ -14,9 +14,9 @@
  * limitations under the License.
  */
 
-@layer base {
-  @import './normalize.css';
+@import './normalize.css';
 
+@layer base {
   *,
   html,
   body {

packages/canon/src/css/core.css

@@ -19,38 +19,14 @@
 @import './utilities.css';
 
 /* Light theme tokens */
-:root {
-  /* Colors */
-  --canon-accent: #000;
-  --canon-background: #f8f8f8;
-  --canon-surface-1: #fff;
-  --canon-surface-2: #f4f4f4;
-  --canon-surface-3: #f1f1f1;
-
-  /* Borders */
-  --canon-border-base: rgba(0, 0, 0, 0.1);
-  --canon-border-warning: #e36d05;
-  --canon-border-error: #e22b2b;
-  --canon-border-selected: #1db954;
-
-  /* States - Add more states */
-  --canon-error: #f50000;
-
-  /* Text colors */
-  --canon-text-primary: #000;
-  --canon-text-primary-on-accent: #fff;
-  --canon-text-secondary: #646464;
-
-  /* Box shadows */
-  /* --canon-box-shadow-small: 0 0 0 1px rgba(0, 0, 0, 0.05); */
-  /* --canon-box-shadow-medium: 0 0 0 1px rgba(0, 0, 0, 0.1); */
-  /* --canon-box-shadow-large: 0 0 0 1px rgba(0, 0, 0, 0.2); */
 
+[data-theme='light'] {
   /* Font families */
   --canon-font-regular: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
     'Helvetica Neue', Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji',
     'Segoe UI Symbol', 'Noto Color Emoji';
-  --canon-font-monospace: 'Monospace', monospace;
+  --canon-font-monospace: ui-monospace, 'Menlo', 'Monaco', 'Consolas',
+    'Liberation Mono', 'Courier New', monospace;
 
   /* Font weights */
   --canon-font-weight-regular: 400;
@@ -93,10 +69,81 @@
   /* Container */
   --canon-container-max-width: 1200px;
   --canon-container-padding: 1rem;
+
+  /* Colors */
+  --canon-accent: #000;
+  --canon-background: #f8f8f8;
+  --canon-surface-1: #fff;
+  --canon-surface-2: #f4f4f4;
+  --canon-surface-3: #f1f1f1;
+
+  /* Borders */
+  --canon-border-base: rgba(0, 0, 0, 0.1);
+  --canon-border-hover: rgba(0, 0, 0, 0.2);
+  --canon-border-warning: #e36d05;
+  --canon-border-error: #e22b2b;
+  --canon-border-selected: #1db954;
+
+  /* States - Add more states */
+  --canon-error: #f50000;
+
+  /* Text colors */
+  --canon-text-primary: #000;
+  --canon-text-primary-on-accent: #fff;
+  --canon-text-secondary: #646464;
 }
 
 /* Dark theme tokens */
 [data-theme='dark'] {
+  /* Font families */
+  --canon-font-regular: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
+    'Helvetica Neue', Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji',
+    'Segoe UI Symbol', 'Noto Color Emoji';
+  --canon-font-monospace: ui-monospace, 'Menlo', 'Monaco', 'Consolas',
+    'Liberation Mono', 'Courier New', monospace;
+
+  /* Font weights */
+  --canon-font-weight-regular: 400;
+  --canon-font-weight-bold: 600;
+
+  /* Font sizes */
+  --canon-font-size-label: 0.625rem; /* 10px */
+  --canon-font-size-caption: 0.75rem; /* 12px */
+  --canon-font-size-body: 0.875rem; /* 14px */
+  --canon-font-size-subtitle: 1rem; /* 16px */
+  --canon-font-size-title5: 1.25rem; /* 20px */
+  --canon-font-size-title4: 1.5rem; /* 24px */
+  --canon-font-size-title3: 2rem; /* 32px */
+  --canon-font-size-title2: 3rem; /* 48px */
+  --canon-font-size-title1: 4rem; /* 64px */
+  --canon-font-size-display: 5.75rem; /* 92px */
+
+  /* Spacing */
+  --canon-spacing-5xs: 0.125rem; /* 2px */
+  --canon-spacing-4xs: 0.25rem; /* 4px */
+  --canon-spacing-3xs: 0.375rem; /* 6px */
+  --canon-spacing-2xs: 0.5rem; /* 8px */
+  --canon-spacing-xs: 0.75rem; /* 12px */
+  --canon-spacing-sm: 1rem; /* 16px */
+  --canon-spacing-md: 1.5rem; /* 24px */
+  --canon-spacing-lg: 2rem; /* 32px */
+  --canon-spacing-xl: 2.5rem; /* 40px */
+  --canon-spacing-2xl: 3rem; /* 48px */
+  --canon-spacing-3xl: 3.5rem; /* 56px */
+
+  /* Border radius */
+  --canon-border-radius-2xs: 0.125rem; /* 2px */
+  --canon-border-radius-xs: 0.25rem; /* 4px */
+  --canon-border-radius-sm: 0.5rem; /* 8px */
+  --canon-border-radius-md: 0.75rem; /* 12px */
+  --canon-border-radius-lg: 1rem; /* 16px */
+  --canon-border-radius-xl: 1.25rem; /* 20px */
+  --canon-border-radius-2xl: 1.5rem; /* 24px */
+
+  /* Container */
+  --canon-container-max-width: 1200px;
+  --canon-container-padding: 1rem;
+
   /* Colors */
   --canon-accent: #fff;
   --canon-background: #000;

packages/canon/src/css/normalize.css

@@ -9,193 +9,195 @@ Document
 Use a better box model (opinionated).
 */
 
-*,
-::before,
-::after {
-  box-sizing: border-box;
-}
+@layer base {
+  *,
+  ::before,
+  ::after {
+    box-sizing: border-box;
+  }
 
-html {
-  /* Improve consistency of default fonts in all browsers. (https://github.com/sindresorhus/modern-normalize/issues/3) */
-  font-family: system-ui, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif,
-    'Apple Color Emoji', 'Segoe UI Emoji';
-  line-height: 1.15; /* 1. Correct the line height in all browsers. */
-  -webkit-text-size-adjust: 100%; /* 2. Prevent adjustments of font size after orientation changes in iOS. */
-  tab-size: 4; /* 3. Use a more readable tab size (opinionated). */
-}
+  html {
+    /* Improve consistency of default fonts in all browsers. (https://github.com/sindresorhus/modern-normalize/issues/3) */
+    font-family: system-ui, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif,
+      'Apple Color Emoji', 'Segoe UI Emoji';
+    line-height: 1.15; /* 1. Correct the line height in all browsers. */
+    -webkit-text-size-adjust: 100%; /* 2. Prevent adjustments of font size after orientation changes in iOS. */
+    tab-size: 4; /* 3. Use a more readable tab size (opinionated). */
+  }
 
-/*
+  /*
 Sections
 ========
 */
 
-body {
-  margin: 0; /* Remove the margin in all browsers. */
-}
+  body {
+    margin: 0; /* Remove the margin in all browsers. */
+  }
 
-/*
+  /*
 Text-level semantics
 ====================
 */
 
-/**
+  /**
 Add the correct font weight in Chrome and Safari.
 */
 
-b,
-strong {
-  font-weight: bolder;
-}
+  b,
+  strong {
+    font-weight: bolder;
+  }
 
-/**
+  /**
 1. Improve consistency of default fonts in all browsers. (https://github.com/sindresorhus/modern-normalize/issues/3)
 2. Correct the odd 'em' font sizing in all browsers.
 */
 
-code,
-kbd,
-samp,
-pre {
-  font-family: ui-monospace, SFMono-Regular, Consolas, 'Liberation Mono', Menlo,
-    monospace; /* 1 */
-  font-size: 1em; /* 2 */
-}
+  code,
+  kbd,
+  samp,
+  pre {
+    font-family: ui-monospace, SFMono-Regular, Consolas, 'Liberation Mono',
+      Menlo, monospace; /* 1 */
+    font-size: 1em; /* 2 */
+  }
 
-/**
+  /**
 Add the correct font size in all browsers.
 */
 
-small {
-  font-size: 80%;
-}
+  small {
+    font-size: 80%;
+  }
 
-/**
+  /**
 Prevent 'sub' and 'sup' elements from affecting the line height in all browsers.
 */
 
-sub,
-sup {
-  font-size: 75%;
-  line-height: 0;
-  position: relative;
-  vertical-align: baseline;
-}
+  sub,
+  sup {
+    font-size: 75%;
+    line-height: 0;
+    position: relative;
+    vertical-align: baseline;
+  }
 
-sub {
-  bottom: -0.25em;
-}
+  sub {
+    bottom: -0.25em;
+  }
 
-sup {
-  top: -0.5em;
-}
+  sup {
+    top: -0.5em;
+  }
 
-/*
+  /*
 Tabular data
 ============
 */
 
-/**
+  /**
 Correct table border color inheritance in Chrome and Safari. (https://issues.chromium.org/issues/40615503, https://bugs.webkit.org/show_bug.cgi?id=195016)
 */
 
-table {
-  border-color: currentcolor;
-}
+  table {
+    border-color: currentcolor;
+  }
 
-/*
+  /*
 Forms
 =====
 */
 
-/**
+  /**
 1. Change the font styles in all browsers.
 2. Remove the margin in Firefox and Safari.
 */
 
-button,
-input,
-optgroup,
-select,
-textarea {
-  font-family: inherit; /* 1 */
-  font-size: 100%; /* 1 */
-  line-height: 1.15; /* 1 */
-  margin: 0; /* 2 */
-}
+  button,
+  input,
+  optgroup,
+  select,
+  textarea {
+    font-family: inherit; /* 1 */
+    font-size: 100%; /* 1 */
+    line-height: 1.15; /* 1 */
+    margin: 0; /* 2 */
+  }
 
-/**
+  /**
 Correct the inability to style clickable types in iOS and Safari.
 */
 
-button,
-[type='button'],
-[type='reset'],
-[type='submit'] {
-  -webkit-appearance: button;
-}
+  button,
+  [type='button'],
+  [type='reset'],
+  [type='submit'] {
+    -webkit-appearance: button;
+  }
 
-/**
+  /**
 Remove the padding so developers are not caught out when they zero out 'fieldset' elements in all browsers.
 */
 
-legend {
-  padding: 0;
-}
+  legend {
+    padding: 0;
+  }
 
-/**
+  /**
 Add the correct vertical alignment in Chrome and Firefox.
 */
 
-progress {
-  vertical-align: baseline;
-}
+  progress {
+    vertical-align: baseline;
+  }
 
-/**
+  /**
 Correct the cursor style of increment and decrement buttons in Safari.
 */
 
-::-webkit-inner-spin-button,
-::-webkit-outer-spin-button {
-  height: auto;
-}
+  ::-webkit-inner-spin-button,
+  ::-webkit-outer-spin-button {
+    height: auto;
+  }
 
-/**
+  /**
 1. Correct the odd appearance in Chrome and Safari.
 2. Correct the outline style in Safari.
 */
 
-[type='search'] {
-  -webkit-appearance: textfield; /* 1 */
-  outline-offset: -2px; /* 2 */
-}
+  [type='search'] {
+    -webkit-appearance: textfield; /* 1 */
+    outline-offset: -2px; /* 2 */
+  }
 
-/**
+  /**
 Remove the inner padding in Chrome and Safari on macOS.
 */
 
-::-webkit-search-decoration {
-  -webkit-appearance: none;
-}
+  ::-webkit-search-decoration {
+    -webkit-appearance: none;
+  }
 
-/**
+  /**
 1. Correct the inability to style clickable types in iOS and Safari.
 2. Change font properties to 'inherit' in Safari.
 */
 
-::-webkit-file-upload-button {
-  -webkit-appearance: button; /* 1 */
-  font: inherit; /* 2 */
-}
+  ::-webkit-file-upload-button {
+    -webkit-appearance: button; /* 1 */
+    font: inherit; /* 2 */
+  }
 
-/*
+  /*
 Interactive
 ===========
 */
 
-/*
+  /*
 Add the correct display in Chrome and Safari.
 */
 
-summary {
-  display: list-item;
+  summary {
+    display: list-item;
+  }
 }

packages/canon/src/css/utilities/2xl.css

@@ -377,6 +377,10 @@
       margin: var(--canon-spacing-2xl);
     }
 
+    .cu-2xl-m-2xs {
+      margin: var(--canon-spacing-2xs);
+    }
+
     .cu-2xl-m-lg {
       margin: var(--canon-spacing-lg);
     }
@@ -405,6 +409,10 @@
       margin-bottom: var(--canon-spacing-2xl);
     }
 
+    .cu-2xl-mb-2xs {
+      margin-bottom: var(--canon-spacing-2xs);
+    }
+
     .cu-2xl-mb-lg {
       margin-bottom: var(--canon-spacing-lg);
     }
@@ -433,6 +441,10 @@
       margin-left: var(--canon-spacing-2xl);
     }
 
+    .cu-2xl-ml-2xs {
+      margin-left: var(--canon-spacing-2xs);
+    }
+
     .cu-2xl-ml-lg {
       margin-left: var(--canon-spacing-lg);
     }
@@ -461,6 +473,10 @@
       margin-right: var(--canon-spacing-2xl);
     }
 
+    .cu-2xl-mr-2xs {
+      margin-right: var(--canon-spacing-2xs);
+    }
+
     .cu-2xl-mr-lg {
       margin-right: var(--canon-spacing-lg);
     }
@@ -489,6 +505,10 @@
       margin-top: var(--canon-spacing-2xl);
     }
 
+    .cu-2xl-mt-2xs {
+      margin-top: var(--canon-spacing-2xs);
+    }
+
     .cu-2xl-mt-lg {
       margin-top: var(--canon-spacing-lg);
     }
@@ -518,6 +538,11 @@
       margin-right: var(--canon-spacing-2xl);
     }
 
+    .cu-2xl-mx-2xs {
+      margin-left: var(--canon-spacing-2xs);
+      margin-right: var(--canon-spacing-2xs);
+    }
+
     .cu-2xl-mx-lg {
       margin-left: var(--canon-spacing-lg);
       margin-right: var(--canon-spacing-lg);
@@ -553,6 +578,11 @@
       margin-bottom: var(--canon-spacing-2xl);
     }
 
+    .cu-2xl-my-2xs {
+      margin-top: var(--canon-spacing-2xs);
+      margin-bottom: var(--canon-spacing-2xs);
+    }
+
     .cu-2xl-my-lg {
       margin-top: var(--canon-spacing-lg);
       margin-bottom: var(--canon-spacing-lg);
@@ -587,6 +617,10 @@
       padding: var(--canon-spacing-2xl);
     }
 
+    .cu-2xl-p-2xs {
+      padding: var(--canon-spacing-2xs);
+    }
+
     .cu-2xl-p-lg {
       padding: var(--canon-spacing-lg);
     }
@@ -615,6 +649,10 @@
       padding-bottom: var(--canon-spacing-2xl);
     }
 
+    .cu-2xl-pb-2xs {
+      padding-bottom: var(--canon-spacing-2xs);
+    }
+
     .cu-2xl-pb-lg {
       padding-bottom: var(--canon-spacing-lg);
     }
@@ -643,6 +681,10 @@
       padding-left: var(--canon-spacing-2xl);
     }
 
+    .cu-2xl-pl-2xs {
+      padding-left: var(--canon-spacing-2xs);
+    }
+
     .cu-2xl-pl-lg {
       padding-left: var(--canon-spacing-lg);
     }
@@ -671,6 +713,10 @@
       padding-right: var(--canon-spacing-2xl);
     }
 
+    .cu-2xl-pr-2xs {
+      padding-right: var(--canon-spacing-2xs);
+    }
+
     .cu-2xl-pr-lg {
       padding-right: var(--canon-spacing-lg);
     }
@@ -699,6 +745,10 @@
       padding-top: var(--canon-spacing-2xl);
     }
 
+    .cu-2xl-pt-2xs {
+      padding-top: var(--canon-spacing-2xs);
+    }
+
     .cu-2xl-pt-lg {
       padding-top: var(--canon-spacing-lg);
     }
@@ -728,6 +778,11 @@
       padding-right: var(--canon-spacing-2xl);
     }
 
+    .cu-2xl-px-2xs {
+      padding-left: var(--canon-spacing-2xs);
+      padding-right: var(--canon-spacing-2xs);
+    }
+
     .cu-2xl-px-lg {
       padding-left: var(--canon-spacing-lg);
       padding-right: var(--canon-spacing-lg);
@@ -763,6 +818,11 @@
       padding-bottom: var(--canon-spacing-2xl);
     }
 
+    .cu-2xl-py-2xs {
+      padding-top: var(--canon-spacing-2xs);
+      padding-bottom: var(--canon-spacing-2xs);
+    }
+
     .cu-2xl-py-lg {
       padding-top: var(--canon-spacing-lg);
       padding-bottom: var(--canon-spacing-lg);

packages/canon/src/css/utilities/lg.css

@@ -377,6 +377,10 @@
       margin: var(--canon-spacing-2xl);
     }
 
+    .cu-lg-m-2xs {
+      margin: var(--canon-spacing-2xs);
+    }
+
     .cu-lg-m-lg {
       margin: var(--canon-spacing-lg);
     }
@@ -405,6 +409,10 @@
       margin-bottom: var(--canon-spacing-2xl);
     }
 
+    .cu-lg-mb-2xs {
+      margin-bottom: var(--canon-spacing-2xs);
+    }
+
     .cu-lg-mb-lg {
       margin-bottom: var(--canon-spacing-lg);
     }
@@ -433,6 +441,10 @@
       margin-left: var(--canon-spacing-2xl);
     }
 
+    .cu-lg-ml-2xs {
+      margin-left: var(--canon-spacing-2xs);
+    }
+
     .cu-lg-ml-lg {
       margin-left: var(--canon-spacing-lg);
     }
@@ -461,6 +473,10 @@
       margin-right: var(--canon-spacing-2xl);
     }
 
+    .cu-lg-mr-2xs {
+      margin-right: var(--canon-spacing-2xs);
+    }
+
     .cu-lg-mr-lg {
       margin-right: var(--canon-spacing-lg);
     }
@@ -489,6 +505,10 @@
       margin-top: var(--canon-spacing-2xl);
     }
 
+    .cu-lg-mt-2xs {
+      margin-top: var(--canon-spacing-2xs);
+    }
+
     .cu-lg-mt-lg {
       margin-top: var(--canon-spacing-lg);
     }
@@ -518,6 +538,11 @@
       margin-right: var(--canon-spacing-2xl);
     }
 
+    .cu-lg-mx-2xs {
+      margin-left: var(--canon-spacing-2xs);
+      margin-right: var(--canon-spacing-2xs);
+    }
+
     .cu-lg-mx-lg {
       margin-left: var(--canon-spacing-lg);
       margin-right: var(--canon-spacing-lg);
@@ -553,6 +578,11 @@
       margin-bottom: var(--canon-spacing-2xl);
     }
 
+    .cu-lg-my-2xs {
+      margin-top: var(--canon-spacing-2xs);
+      margin-bottom: var(--canon-spacing-2xs);
+    }
+
     .cu-lg-my-lg {
       margin-top: var(--canon-spacing-lg);
       margin-bottom: var(--canon-spacing-lg);
@@ -587,6 +617,10 @@
       padding: var(--canon-spacing-2xl);
     }
 
+    .cu-lg-p-2xs {
+      padding: var(--canon-spacing-2xs);
+    }
+
     .cu-lg-p-lg {
       padding: var(--canon-spacing-lg);
     }
@@ -615,6 +649,10 @@
       padding-bottom: var(--canon-spacing-2xl);
     }
 
+    .cu-lg-pb-2xs {
+      padding-bottom: var(--canon-spacing-2xs);
+    }
+
     .cu-lg-pb-lg {
       padding-bottom: var(--canon-spacing-lg);
     }
@@ -643,6 +681,10 @@
       padding-left: var(--canon-spacing-2xl);
     }
 
+    .cu-lg-pl-2xs {
+      padding-left: var(--canon-spacing-2xs);
+    }
+
     .cu-lg-pl-lg {
       padding-left: var(--canon-spacing-lg);
     }
@@ -671,6 +713,10 @@
       padding-right: var(--canon-spacing-2xl);
     }
 
+    .cu-lg-pr-2xs {
+      padding-right: var(--canon-spacing-2xs);
+    }
+
     .cu-lg-pr-lg {
       padding-right: var(--canon-spacing-lg);
     }
@@ -699,6 +745,10 @@
       padding-top: var(--canon-spacing-2xl);
     }
 
+    .cu-lg-pt-2xs {
+      padding-top: var(--canon-spacing-2xs);
+    }
+
     .cu-lg-pt-lg {
       padding-top: var(--canon-spacing-lg);
     }
@@ -728,6 +778,11 @@
       padding-right: var(--canon-spacing-2xl);
     }
 
+    .cu-lg-px-2xs {
+      padding-left: var(--canon-spacing-2xs);
+      padding-right: var(--canon-spacing-2xs);
+    }
+
     .cu-lg-px-lg {
       padding-left: var(--canon-spacing-lg);
       padding-right: var(--canon-spacing-lg);
@@ -763,6 +818,11 @@
       padding-bottom: var(--canon-spacing-2xl);
     }
 
+    .cu-lg-py-2xs {
+      padding-top: var(--canon-spacing-2xs);
+      padding-bottom: var(--canon-spacing-2xs);
+    }
+
     .cu-lg-py-lg {
       padding-top: var(--canon-spacing-lg);
       padding-bottom: var(--canon-spacing-lg);

packages/canon/src/css/utilities/md.css

@@ -377,6 +377,10 @@
       margin: var(--canon-spacing-2xl);
     }
 
+    .cu-md-m-2xs {
+      margin: var(--canon-spacing-2xs);
+    }
+
     .cu-md-m-lg {
       margin: var(--canon-spacing-lg);
     }
@@ -405,6 +409,10 @@
       margin-bottom: var(--canon-spacing-2xl);
     }
 
+    .cu-md-mb-2xs {
+      margin-bottom: var(--canon-spacing-2xs);
+    }
+
     .cu-md-mb-lg {
       margin-bottom: var(--canon-spacing-lg);
     }
@@ -433,6 +441,10 @@
       margin-left: var(--canon-spacing-2xl);
     }
 
+    .cu-md-ml-2xs {
+      margin-left: var(--canon-spacing-2xs);
+    }
+
     .cu-md-ml-lg {
       margin-left: var(--canon-spacing-lg);
     }
@@ -461,6 +473,10 @@
       margin-right: var(--canon-spacing-2xl);
     }
 
+    .cu-md-mr-2xs {
+      margin-right: var(--canon-spacing-2xs);
+    }
+
     .cu-md-mr-lg {
       margin-right: var(--canon-spacing-lg);
     }
@@ -489,6 +505,10 @@
       margin-top: var(--canon-spacing-2xl);
     }
 
+    .cu-md-mt-2xs {
+      margin-top: var(--canon-spacing-2xs);
+    }
+
     .cu-md-mt-lg {
       margin-top: var(--canon-spacing-lg);
     }
@@ -518,6 +538,11 @@
       margin-right: var(--canon-spacing-2xl);
     }
 
+    .cu-md-mx-2xs {
+      margin-left: var(--canon-spacing-2xs);
+      margin-right: var(--canon-spacing-2xs);
+    }
+
     .cu-md-mx-lg {
       margin-left: var(--canon-spacing-lg);
       margin-right: var(--canon-spacing-lg);
@@ -553,6 +578,11 @@
       margin-bottom: var(--canon-spacing-2xl);
     }
 
+    .cu-md-my-2xs {
+      margin-top: var(--canon-spacing-2xs);
+      margin-bottom: var(--canon-spacing-2xs);
+    }
+
     .cu-md-my-lg {
       margin-top: var(--canon-spacing-lg);
       margin-bottom: var(--canon-spacing-lg);
@@ -587,6 +617,10 @@
       padding: var(--canon-spacing-2xl);
     }
 
+    .cu-md-p-2xs {
+      padding: var(--canon-spacing-2xs);
+    }
+
     .cu-md-p-lg {
       padding: var(--canon-spacing-lg);
     }
@@ -615,6 +649,10 @@
       padding-bottom: var(--canon-spacing-2xl);
     }
 
+    .cu-md-pb-2xs {
+      padding-bottom: var(--canon-spacing-2xs);
+    }
+
     .cu-md-pb-lg {
       padding-bottom: var(--canon-spacing-lg);
     }
@@ -643,6 +681,10 @@
       padding-left: var(--canon-spacing-2xl);
     }
 
+    .cu-md-pl-2xs {
+      padding-left: var(--canon-spacing-2xs);
+    }
+
     .cu-md-pl-lg {
       padding-left: var(--canon-spacing-lg);
     }
@@ -671,6 +713,10 @@
       padding-right: var(--canon-spacing-2xl);
     }
 
+    .cu-md-pr-2xs {
+      padding-right: var(--canon-spacing-2xs);
+    }
+
     .cu-md-pr-lg {
       padding-right: var(--canon-spacing-lg);
     }
@@ -699,6 +745,10 @@
       padding-top: var(--canon-spacing-2xl);
     }
 
+    .cu-md-pt-2xs {
+      padding-top: var(--canon-spacing-2xs);
+    }
+
     .cu-md-pt-lg {
       padding-top: var(--canon-spacing-lg);
     }
@@ -728,6 +778,11 @@
       padding-right: var(--canon-spacing-2xl);
     }
 
+    .cu-md-px-2xs {
+      padding-left: var(--canon-spacing-2xs);
+      padding-right: var(--canon-spacing-2xs);
+    }
+
     .cu-md-px-lg {
       padding-left: var(--canon-spacing-lg);
       padding-right: var(--canon-spacing-lg);
@@ -763,6 +818,11 @@
       padding-bottom: var(--canon-spacing-2xl);
     }
 
+    .cu-md-py-2xs {
+      padding-top: var(--canon-spacing-2xs);
+      padding-bottom: var(--canon-spacing-2xs);
+    }
+
     .cu-md-py-lg {
       padding-top: var(--canon-spacing-lg);
       padding-bottom: var(--canon-spacing-lg);

packages/canon/src/css/utilities/sm.css

@@ -377,6 +377,10 @@
       margin: var(--canon-spacing-2xl);
     }
 
+    .cu-sm-m-2xs {
+      margin: var(--canon-spacing-2xs);
+    }
+
     .cu-sm-m-lg {
       margin: var(--canon-spacing-lg);
     }
@@ -405,6 +409,10 @@
       margin-bottom: var(--canon-spacing-2xl);
     }
 
+    .cu-sm-mb-2xs {
+      margin-bottom: var(--canon-spacing-2xs);
+    }
+
     .cu-sm-mb-lg {
       margin-bottom: var(--canon-spacing-lg);
     }
@@ -433,6 +441,10 @@
       margin-left: var(--canon-spacing-2xl);
     }
 
+    .cu-sm-ml-2xs {
+      margin-left: var(--canon-spacing-2xs);
+    }
+
     .cu-sm-ml-lg {
       margin-left: var(--canon-spacing-lg);
     }
@@ -461,6 +473,10 @@
       margin-right: var(--canon-spacing-2xl);
     }
 
+    .cu-sm-mr-2xs {
+      margin-right: var(--canon-spacing-2xs);
+    }
+
     .cu-sm-mr-lg {
       margin-right: var(--canon-spacing-lg);
     }
@@ -489,6 +505,10 @@
       margin-top: var(--canon-spacing-2xl);
     }
 
+    .cu-sm-mt-2xs {
+      margin-top: var(--canon-spacing-2xs);
+    }
+
     .cu-sm-mt-lg {
       margin-top: var(--canon-spacing-lg);
     }
@@ -518,6 +538,11 @@
       margin-right: var(--canon-spacing-2xl);
     }
 
+    .cu-sm-mx-2xs {
+      margin-left: var(--canon-spacing-2xs);
+      margin-right: var(--canon-spacing-2xs);
+    }
+
     .cu-sm-mx-lg {
       margin-left: var(--canon-spacing-lg);
       margin-right: var(--canon-spacing-lg);
@@ -553,6 +578,11 @@
       margin-bottom: var(--canon-spacing-2xl);
     }
 
+    .cu-sm-my-2xs {
+      margin-top: var(--canon-spacing-2xs);
+      margin-bottom: var(--canon-spacing-2xs);
+    }
+
     .cu-sm-my-lg {
       margin-top: var(--canon-spacing-lg);
       margin-bottom: var(--canon-spacing-lg);
@@ -587,6 +617,10 @@
       padding: var(--canon-spacing-2xl);
     }
 
+    .cu-sm-p-2xs {
+      padding: var(--canon-spacing-2xs);
+    }
+
     .cu-sm-p-lg {
       padding: var(--canon-spacing-lg);
     }
@@ -615,6 +649,10 @@
       padding-bottom: var(--canon-spacing-2xl);
     }
 
+    .cu-sm-pb-2xs {
+      padding-bottom: var(--canon-spacing-2xs);
+    }
+
     .cu-sm-pb-lg {
       padding-bottom: var(--canon-spacing-lg);
     }
@@ -643,6 +681,10 @@
       padding-left: var(--canon-spacing-2xl);
     }
 
+    .cu-sm-pl-2xs {
+      padding-left: var(--canon-spacing-2xs);
+    }
+
     .cu-sm-pl-lg {
       padding-left: var(--canon-spacing-lg);
     }
@@ -671,6 +713,10 @@
       padding-right: var(--canon-spacing-2xl);
     }
 
+    .cu-sm-pr-2xs {
+      padding-right: var(--canon-spacing-2xs);
+    }
+
     .cu-sm-pr-lg {
       padding-right: var(--canon-spacing-lg);
     }
@@ -699,6 +745,10 @@
       padding-top: var(--canon-spacing-2xl);
     }
 
+    .cu-sm-pt-2xs {
+      padding-top: var(--canon-spacing-2xs);
+    }
+
     .cu-sm-pt-lg {
       padding-top: var(--canon-spacing-lg);
     }
@@ -728,6 +778,11 @@
       padding-right: var(--canon-spacing-2xl);
     }
 
+    .cu-sm-px-2xs {
+      padding-left: var(--canon-spacing-2xs);
+      padding-right: var(--canon-spacing-2xs);
+    }
+
     .cu-sm-px-lg {
       padding-left: var(--canon-spacing-lg);
       padding-right: var(--canon-spacing-lg);
@@ -763,6 +818,11 @@
       padding-bottom: var(--canon-spacing-2xl);
     }
 
+    .cu-sm-py-2xs {
+      padding-top: var(--canon-spacing-2xs);
+      padding-bottom: var(--canon-spacing-2xs);
+    }
+
     .cu-sm-py-lg {
       padding-top: var(--canon-spacing-lg);
       padding-bottom: var(--canon-spacing-lg);

packages/canon/src/css/utilities/xl.css

@@ -377,6 +377,10 @@
       margin: var(--canon-spacing-2xl);
     }
 
+    .cu-xl-m-2xs {
+      margin: var(--canon-spacing-2xs);
+    }
+
     .cu-xl-m-lg {
       margin: var(--canon-spacing-lg);
     }
@@ -405,6 +409,10 @@
       margin-bottom: var(--canon-spacing-2xl);
     }
 
+    .cu-xl-mb-2xs {
+      margin-bottom: var(--canon-spacing-2xs);
+    }
+
     .cu-xl-mb-lg {
       margin-bottom: var(--canon-spacing-lg);
     }
@@ -433,6 +441,10 @@
       margin-left: var(--canon-spacing-2xl);
     }
 
+    .cu-xl-ml-2xs {
+      margin-left: var(--canon-spacing-2xs);
+    }
+
     .cu-xl-ml-lg {
       margin-left: var(--canon-spacing-lg);
     }
@@ -461,6 +473,10 @@
       margin-right: var(--canon-spacing-2xl);
     }
 
+    .cu-xl-mr-2xs {
+      margin-right: var(--canon-spacing-2xs);
+    }
+
     .cu-xl-mr-lg {
       margin-right: var(--canon-spacing-lg);
     }
@@ -489,6 +505,10 @@
       margin-top: var(--canon-spacing-2xl);
     }
 
+    .cu-xl-mt-2xs {
+      margin-top: var(--canon-spacing-2xs);
+    }
+
     .cu-xl-mt-lg {
       margin-top: var(--canon-spacing-lg);
     }
@@ -518,6 +538,11 @@
       margin-right: var(--canon-spacing-2xl);
     }
 
+    .cu-xl-mx-2xs {
+      margin-left: var(--canon-spacing-2xs);
+      margin-right: var(--canon-spacing-2xs);
+    }
+
     .cu-xl-mx-lg {
       margin-left: var(--canon-spacing-lg);
       margin-right: var(--canon-spacing-lg);
@@ -553,6 +578,11 @@
       margin-bottom: var(--canon-spacing-2xl);
     }
 
+    .cu-xl-my-2xs {
+      margin-top: var(--canon-spacing-2xs);
+      margin-bottom: var(--canon-spacing-2xs);
+    }
+
     .cu-xl-my-lg {
       margin-top: var(--canon-spacing-lg);
       margin-bottom: var(--canon-spacing-lg);
@@ -587,6 +617,10 @@
       padding: var(--canon-spacing-2xl);
     }
 
+    .cu-xl-p-2xs {
+      padding: var(--canon-spacing-2xs);
+    }
+
     .cu-xl-p-lg {
       padding: var(--canon-spacing-lg);
     }
@@ -615,6 +649,10 @@
       padding-bottom: var(--canon-spacing-2xl);
     }
 
+    .cu-xl-pb-2xs {
+      padding-bottom: var(--canon-spacing-2xs);
+    }
+
     .cu-xl-pb-lg {
       padding-bottom: var(--canon-spacing-lg);
     }
@@ -643,6 +681,10 @@
       padding-left: var(--canon-spacing-2xl);
     }
 
+    .cu-xl-pl-2xs {
+      padding-left: var(--canon-spacing-2xs);
+    }
+
     .cu-xl-pl-lg {
       padding-left: var(--canon-spacing-lg);
     }
@@ -671,6 +713,10 @@
       padding-right: var(--canon-spacing-2xl);
     }
 
+    .cu-xl-pr-2xs {
+      padding-right: var(--canon-spacing-2xs);
+    }
+
     .cu-xl-pr-lg {
       padding-right: var(--canon-spacing-lg);
     }
@@ -699,6 +745,10 @@
       padding-top: var(--canon-spacing-2xl);
     }
 
+    .cu-xl-pt-2xs {
+      padding-top: var(--canon-spacing-2xs);
+    }
+
     .cu-xl-pt-lg {
       padding-top: var(--canon-spacing-lg);
     }
@@ -728,6 +778,11 @@
       padding-right: var(--canon-spacing-2xl);
     }
 
+    .cu-xl-px-2xs {
+      padding-left: var(--canon-spacing-2xs);
+      padding-right: var(--canon-spacing-2xs);
+    }
+
     .cu-xl-px-lg {
       padding-left: var(--canon-spacing-lg);
       padding-right: var(--canon-spacing-lg);
@@ -763,6 +818,11 @@
       padding-bottom: var(--canon-spacing-2xl);
     }
 
+    .cu-xl-py-2xs {
+      padding-top: var(--canon-spacing-2xs);
+      padding-bottom: var(--canon-spacing-2xs);
+    }
+
     .cu-xl-py-lg {
       padding-top: var(--canon-spacing-lg);
       padding-bottom: var(--canon-spacing-lg);

packages/canon/src/css/utilities/xs.css

@@ -376,6 +376,10 @@
     margin: var(--canon-spacing-2xl);
   }
 
+  .cu-m-2xs {
+    margin: var(--canon-spacing-2xs);
+  }
+
   .cu-m-lg {
     margin: var(--canon-spacing-lg);
   }
@@ -404,6 +408,10 @@
     margin-bottom: var(--canon-spacing-2xl);
   }
 
+  .cu-mb-2xs {
+    margin-bottom: var(--canon-spacing-2xs);
+  }
+
   .cu-mb-lg {
     margin-bottom: var(--canon-spacing-lg);
   }
@@ -432,6 +440,10 @@
     margin-left: var(--canon-spacing-2xl);
   }
 
+  .cu-ml-2xs {
+    margin-left: var(--canon-spacing-2xs);
+  }
+
   .cu-ml-lg {
     margin-left: var(--canon-spacing-lg);
   }
@@ -460,6 +472,10 @@
     margin-right: var(--canon-spacing-2xl);
   }
 
+  .cu-mr-2xs {
+    margin-right: var(--canon-spacing-2xs);
+  }
+
   .cu-mr-lg {
     margin-right: var(--canon-spacing-lg);
   }
@@ -488,6 +504,10 @@
     margin-top: var(--canon-spacing-2xl);
   }
 
+  .cu-mt-2xs {
+    margin-top: var(--canon-spacing-2xs);
+  }
+
   .cu-mt-lg {
     margin-top: var(--canon-spacing-lg);
   }
@@ -517,6 +537,11 @@
     margin-right: var(--canon-spacing-2xl);
   }
 
+  .cu-mx-2xs {
+    margin-left: var(--canon-spacing-2xs);
+    margin-right: var(--canon-spacing-2xs);
+  }
+
   .cu-mx-lg {
     margin-left: var(--canon-spacing-lg);
     margin-right: var(--canon-spacing-lg);
@@ -552,6 +577,11 @@
     margin-bottom: var(--canon-spacing-2xl);
   }
 
+  .cu-my-2xs {
+    margin-top: var(--canon-spacing-2xs);
+    margin-bottom: var(--canon-spacing-2xs);
+  }
+
   .cu-my-lg {
     margin-top: var(--canon-spacing-lg);
     margin-bottom: var(--canon-spacing-lg);
@@ -586,6 +616,10 @@
     padding: var(--canon-spacing-2xl);
   }
 
+  .cu-p-2xs {
+    padding: var(--canon-spacing-2xs);
+  }
+
   .cu-p-lg {
     padding: var(--canon-spacing-lg);
   }
@@ -614,6 +648,10 @@
     padding-bottom: var(--canon-spacing-2xl);
   }
 
+  .cu-pb-2xs {
+    padding-bottom: var(--canon-spacing-2xs);
+  }
+
   .cu-pb-lg {
     padding-bottom: var(--canon-spacing-lg);
   }
@@ -642,6 +680,10 @@
     padding-left: var(--canon-spacing-2xl);
   }
 
+  .cu-pl-2xs {
+    padding-left: var(--canon-spacing-2xs);
+  }
+
   .cu-pl-lg {
     padding-left: var(--canon-spacing-lg);
   }
@@ -670,6 +712,10 @@
     padding-right: var(--canon-spacing-2xl);
   }
 
+  .cu-pr-2xs {
+    padding-right: var(--canon-spacing-2xs);
+  }
+
   .cu-pr-lg {
     padding-right: var(--canon-spacing-lg);
   }
@@ -698,6 +744,10 @@
     padding-top: var(--canon-spacing-2xl);
   }
 
+  .cu-pt-2xs {
+    padding-top: var(--canon-spacing-2xs);
+  }
+
   .cu-pt-lg {
     padding-top: var(--canon-spacing-lg);
   }
@@ -727,6 +777,11 @@
     padding-right: var(--canon-spacing-2xl);
   }
 
+  .cu-px-2xs {
+    padding-left: var(--canon-spacing-2xs);
+    padding-right: var(--canon-spacing-2xs);
+  }
+
   .cu-px-lg {
     padding-left: var(--canon-spacing-lg);
     padding-right: var(--canon-spacing-lg);
@@ -762,6 +817,11 @@
     padding-bottom: var(--canon-spacing-2xl);
   }
 
+  .cu-py-2xs {
+    padding-top: var(--canon-spacing-2xs);
+    padding-bottom: var(--canon-spacing-2xs);
+  }
+
   .cu-py-lg {
     padding-top: var(--canon-spacing-lg);
     padding-bottom: var(--canon-spacing-lg);