From 7ad8d4980d87f512ead18195e0ec1e523f9279df Mon Sep 17 00:00:00 2001 From: Charles de Dreuille Date: Tue, 14 Jan 2025 11:45:32 +0000 Subject: [PATCH] Rename space token Signed-off-by: Charles de Dreuille --- .../HeadlessBanners/styles.module.css | 12 +- .../src/components/Tabs/styles.module.css | 4 +- .../src/components/Toolbar/styles.module.css | 4 +- .../canon/src/components/Button/styles.css | 2 +- .../canon/src/components/Checkbox/styles.css | 2 +- .../canon/src/components/Input/styles.css | 8 +- .../canon/src/components/Table/styles.css | 12 +- packages/canon/src/css/core.css | 44 +-- packages/canon/src/css/utilities/2xl.css | 264 +++++++++--------- packages/canon/src/css/utilities/lg.css | 264 +++++++++--------- packages/canon/src/css/utilities/md.css | 264 +++++++++--------- packages/canon/src/css/utilities/sm.css | 264 +++++++++--------- packages/canon/src/css/utilities/xl.css | 264 +++++++++--------- packages/canon/src/css/utilities/xs.css | 264 +++++++++--------- 14 files changed, 836 insertions(+), 836 deletions(-) diff --git a/canon-docs/src/components/HeadlessBanners/styles.module.css b/canon-docs/src/components/HeadlessBanners/styles.module.css index c8eb2bc68d..0561406433 100644 --- a/canon-docs/src/components/HeadlessBanners/styles.module.css +++ b/canon-docs/src/components/HeadlessBanners/styles.module.css @@ -1,11 +1,11 @@ .container { display: flex; background-color: var(--canon-surface-1); - padding: var(--canon-spacing-md); + padding: var(--canon-space-5); border-radius: var(--canon-border-radius-xs); border: 1px solid var(--canon-border-base); - margin-bottom: var(--canon-spacing-md); - gap: var(--canon-spacing-md); + margin-bottom: var(--canon-space-5); + gap: var(--canon-space-5); transition: background-color 0.2s ease-in-out; } @@ -32,11 +32,11 @@ background-color: var(--canon-surface-2); border: 1px solid var(--canon-border-base); border-radius: var(--canon-border-radius-xs); - padding: 0 var(--canon-spacing-xs); + padding: 0 var(--canon-space-3); height: 28px; border-radius: 100px; - margin-top: var(--canon-spacing-xs); + margin-top: var(--canon-space-3); font-size: var(--canon-font-size-body); color: var(--canon-text-primary); - gap: var(--canon-spacing-2xs); + gap: var(--canon-space-2); } diff --git a/canon-docs/src/components/Tabs/styles.module.css b/canon-docs/src/components/Tabs/styles.module.css index ba5db73b59..abc9f0325c 100644 --- a/canon-docs/src/components/Tabs/styles.module.css +++ b/canon-docs/src/components/Tabs/styles.module.css @@ -4,10 +4,10 @@ .list { display: flex; - gap: var(--canon-spacing-md); + gap: var(--canon-space-5); border-bottom: 1px solid var(--canon-border-base); position: relative; - margin-bottom: var(--canon-spacing-md); + margin-bottom: var(--canon-space-5); } .tab { diff --git a/canon-docs/src/components/Toolbar/styles.module.css b/canon-docs/src/components/Toolbar/styles.module.css index c960dca891..dd3798ad08 100644 --- a/canon-docs/src/components/Toolbar/styles.module.css +++ b/canon-docs/src/components/Toolbar/styles.module.css @@ -10,12 +10,12 @@ display: flex; align-items: center; justify-content: space-between; - padding: 0 var(--canon-spacing-md); + padding: 0 var(--canon-space-5); transition: background-color 0.2s ease-in-out; } .actions { display: flex; align-items: center; - gap: var(--canon-spacing-sm); + gap: var(--canon-space-4); } diff --git a/packages/canon/src/components/Button/styles.css b/packages/canon/src/components/Button/styles.css index 7af027ddcd..f7ea6d700c 100644 --- a/packages/canon/src/components/Button/styles.css +++ b/packages/canon/src/components/Button/styles.css @@ -74,7 +74,7 @@ .cn-button-content { display: flex; align-items: center; - gap: var(--canon-spacing-xs); + gap: var(--canon-space-3); font-weight: var(--canon-font-weight-bold); } diff --git a/packages/canon/src/components/Checkbox/styles.css b/packages/canon/src/components/Checkbox/styles.css index c1f285f7c7..d561f9dcf1 100644 --- a/packages/canon/src/components/Checkbox/styles.css +++ b/packages/canon/src/components/Checkbox/styles.css @@ -3,7 +3,7 @@ flex-direction: row; align-items: center; justify-content: center; - gap: var(--canon-spacing-xs); + gap: var(--canon-space-3); font-size: var(--canon-font-size-xs); font-family: var(--canon-font-regular); color: var(--canon-text-primary); diff --git a/packages/canon/src/components/Input/styles.css b/packages/canon/src/components/Input/styles.css index ef4cfa2a07..4b7f9120dc 100644 --- a/packages/canon/src/components/Input/styles.css +++ b/packages/canon/src/components/Input/styles.css @@ -25,13 +25,13 @@ font-size: var(--canon-font-size-caption); font-weight: var(--canon-font-weight-regular); color: var(--canon-text-primary); - margin-bottom: var(--canon-spacing-3xs); + margin-bottom: var(--canon-space-1_5); } .canon-input-control { border-radius: var(--canon-border-radius-sm); border: 1px solid var(--canon-border-base); - padding: var(--canon-spacing-sm); + padding: var(--canon-space-4); background-color: var(--canon-surface-1); font-size: var(--canon-font-size-body); font-weight: var(--canon-font-weight-regular); @@ -69,11 +69,11 @@ font-size: var(--canon-font-size-caption); font-weight: var(--canon-font-weight-regular); color: var(--canon-text-secondary); - margin-top: var(--canon-spacing-3xs); + margin-top: var(--canon-space-1_5); } .canon-input-error { font-size: var(--canon-font-size-caption); color: var(--canon-error); - margin-top: var(--canon-spacing-3xs); + margin-top: var(--canon-space-1_5); } diff --git a/packages/canon/src/components/Table/styles.css b/packages/canon/src/components/Table/styles.css index 574fae67bf..9a5967fa13 100644 --- a/packages/canon/src/components/Table/styles.css +++ b/packages/canon/src/components/Table/styles.css @@ -4,8 +4,8 @@ width: 100%; background-color: var(--canon-surface-1); border-radius: var(--canon-border-radius-xs); - padding-bottom: var(--canon-spacing-5xs); - padding-top: var(--canon-spacing-5xs); + padding-bottom: var(--canon-space-0_5); + padding-top: var(--canon-space-0_5); font-size: var(--canon-font-size-body); table { @@ -24,7 +24,7 @@ .table-head { text-align: left; - padding: var(--canon-spacing-xs); + padding: var(--canon-space-3); } .table-body { @@ -45,7 +45,7 @@ border-bottom-left-radius: var(--canon-border-radius-xs); box-shadow: inset 4px 2px 0 0 var(--canon-surface-1), inset 4px -2px 0 0 var(--canon-surface-1); - padding-left: var(--canon-spacing-xs); + padding-left: var(--canon-space-3); } & .table-cell:last-child { @@ -53,12 +53,12 @@ border-bottom-right-radius: var(--canon-border-radius-xs); box-shadow: inset -4px 2px 0 0 var(--canon-surface-1), inset -4px -2px 0 0 var(--canon-surface-1); - padding-right: var(--canon-spacing-xs); + padding-right: var(--canon-space-3); } } .table-cell { - padding: var(--canon-spacing-xs); + padding: var(--canon-space-3); background-color: var(--canon-surface-2); box-shadow: inset 0px 2px 0 0 var(--canon-surface-1), inset 0px -2px 0 0 var(--canon-surface-1); diff --git a/packages/canon/src/css/core.css b/packages/canon/src/css/core.css index b5008fb803..b5ecc60f41 100644 --- a/packages/canon/src/css/core.css +++ b/packages/canon/src/css/core.css @@ -45,17 +45,17 @@ --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 */ + --canon-space-0_5: 0.125rem; /* 2px */ + --canon-space-1: 0.25rem; /* 4px */ + --canon-space-1_5: 0.375rem; /* 6px */ + --canon-space-2: 0.5rem; /* 8px */ + --canon-space-3: 0.75rem; /* 12px */ + --canon-space-4: 1rem; /* 16px */ + --canon-space-5: 1.5rem; /* 24px */ + --canon-space-6: 2rem; /* 32px */ + --canon-space-7: 2.5rem; /* 40px */ + --canon-space-8: 3rem; /* 48px */ + --canon-space-9: 3.5rem; /* 56px */ /* Border radius */ --canon-border-radius-2xs: 0.125rem; /* 2px */ @@ -119,17 +119,17 @@ --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 */ + --canon-space-0_5: 0.125rem; /* 2px */ + --canon-space-1: 0.25rem; /* 4px */ + --canon-space-1_5: 0.375rem; /* 6px */ + --canon-space-2: 0.5rem; /* 8px */ + --canon-space-3: 0.75rem; /* 12px */ + --canon-space-4: 1rem; /* 16px */ + --canon-space-5: 1.5rem; /* 24px */ + --canon-space-6: 2rem; /* 32px */ + --canon-space-7: 2.5rem; /* 40px */ + --canon-space-8: 3rem; /* 48px */ + --canon-space-9: 3.5rem; /* 56px */ /* Border radius */ --canon-border-radius-2xs: 0.125rem; /* 2px */ diff --git a/packages/canon/src/css/utilities/2xl.css b/packages/canon/src/css/utilities/2xl.css index 4ea3d82db0..0194ad38e9 100644 --- a/packages/canon/src/css/utilities/2xl.css +++ b/packages/canon/src/css/utilities/2xl.css @@ -238,15 +238,15 @@ } .cu-2xl-gap-2xl { - gap: var(--canon-spacing-2xl); + gap: var(--canon-space-8); } .cu-2xl-gap-lg { - gap: var(--canon-spacing-lg); + gap: var(--canon-space-6); } .cu-2xl-gap-md { - gap: var(--canon-spacing-md); + gap: var(--canon-space-5); } .cu-2xl-gap-none { @@ -254,15 +254,15 @@ } .cu-2xl-gap-sm { - gap: var(--canon-spacing-sm); + gap: var(--canon-space-4); } .cu-2xl-gap-xl { - gap: var(--canon-spacing-xl); + gap: var(--canon-space-7); } .cu-2xl-gap-xs { - gap: var(--canon-spacing-xs); + gap: var(--canon-space-3); } .cu-2xl-grid { @@ -374,19 +374,19 @@ } .cu-2xl-m-2xl { - margin: var(--canon-spacing-2xl); + margin: var(--canon-space-8); } .cu-2xl-m-2xs { - margin: var(--canon-spacing-2xs); + margin: var(--canon-space-2); } .cu-2xl-m-lg { - margin: var(--canon-spacing-lg); + margin: var(--canon-space-6); } .cu-2xl-m-md { - margin: var(--canon-spacing-md); + margin: var(--canon-space-5); } .cu-2xl-m-none { @@ -394,31 +394,31 @@ } .cu-2xl-m-sm { - margin: var(--canon-spacing-sm); + margin: var(--canon-space-4); } .cu-2xl-m-xl { - margin: var(--canon-spacing-xl); + margin: var(--canon-space-7); } .cu-2xl-m-xs { - margin: var(--canon-spacing-xs); + margin: var(--canon-space-3); } .cu-2xl-mb-2xl { - margin-bottom: var(--canon-spacing-2xl); + margin-bottom: var(--canon-space-8); } .cu-2xl-mb-2xs { - margin-bottom: var(--canon-spacing-2xs); + margin-bottom: var(--canon-space-2); } .cu-2xl-mb-lg { - margin-bottom: var(--canon-spacing-lg); + margin-bottom: var(--canon-space-6); } .cu-2xl-mb-md { - margin-bottom: var(--canon-spacing-md); + margin-bottom: var(--canon-space-5); } .cu-2xl-mb-none { @@ -426,31 +426,31 @@ } .cu-2xl-mb-sm { - margin-bottom: var(--canon-spacing-sm); + margin-bottom: var(--canon-space-4); } .cu-2xl-mb-xl { - margin-bottom: var(--canon-spacing-xl); + margin-bottom: var(--canon-space-7); } .cu-2xl-mb-xs { - margin-bottom: var(--canon-spacing-xs); + margin-bottom: var(--canon-space-3); } .cu-2xl-ml-2xl { - margin-left: var(--canon-spacing-2xl); + margin-left: var(--canon-space-8); } .cu-2xl-ml-2xs { - margin-left: var(--canon-spacing-2xs); + margin-left: var(--canon-space-2); } .cu-2xl-ml-lg { - margin-left: var(--canon-spacing-lg); + margin-left: var(--canon-space-6); } .cu-2xl-ml-md { - margin-left: var(--canon-spacing-md); + margin-left: var(--canon-space-5); } .cu-2xl-ml-none { @@ -458,31 +458,31 @@ } .cu-2xl-ml-sm { - margin-left: var(--canon-spacing-sm); + margin-left: var(--canon-space-4); } .cu-2xl-ml-xl { - margin-left: var(--canon-spacing-xl); + margin-left: var(--canon-space-7); } .cu-2xl-ml-xs { - margin-left: var(--canon-spacing-xs); + margin-left: var(--canon-space-3); } .cu-2xl-mr-2xl { - margin-right: var(--canon-spacing-2xl); + margin-right: var(--canon-space-8); } .cu-2xl-mr-2xs { - margin-right: var(--canon-spacing-2xs); + margin-right: var(--canon-space-2); } .cu-2xl-mr-lg { - margin-right: var(--canon-spacing-lg); + margin-right: var(--canon-space-6); } .cu-2xl-mr-md { - margin-right: var(--canon-spacing-md); + margin-right: var(--canon-space-5); } .cu-2xl-mr-none { @@ -490,31 +490,31 @@ } .cu-2xl-mr-sm { - margin-right: var(--canon-spacing-sm); + margin-right: var(--canon-space-4); } .cu-2xl-mr-xl { - margin-right: var(--canon-spacing-xl); + margin-right: var(--canon-space-7); } .cu-2xl-mr-xs { - margin-right: var(--canon-spacing-xs); + margin-right: var(--canon-space-3); } .cu-2xl-mt-2xl { - margin-top: var(--canon-spacing-2xl); + margin-top: var(--canon-space-8); } .cu-2xl-mt-2xs { - margin-top: var(--canon-spacing-2xs); + margin-top: var(--canon-space-2); } .cu-2xl-mt-lg { - margin-top: var(--canon-spacing-lg); + margin-top: var(--canon-space-6); } .cu-2xl-mt-md { - margin-top: var(--canon-spacing-md); + margin-top: var(--canon-space-5); } .cu-2xl-mt-none { @@ -522,35 +522,35 @@ } .cu-2xl-mt-sm { - margin-top: var(--canon-spacing-sm); + margin-top: var(--canon-space-4); } .cu-2xl-mt-xl { - margin-top: var(--canon-spacing-xl); + margin-top: var(--canon-space-7); } .cu-2xl-mt-xs { - margin-top: var(--canon-spacing-xs); + margin-top: var(--canon-space-3); } .cu-2xl-mx-2xl { - margin-left: var(--canon-spacing-2xl); - margin-right: var(--canon-spacing-2xl); + margin-left: var(--canon-space-8); + margin-right: var(--canon-space-8); } .cu-2xl-mx-2xs { - margin-left: var(--canon-spacing-2xs); - margin-right: var(--canon-spacing-2xs); + margin-left: var(--canon-space-2); + margin-right: var(--canon-space-2); } .cu-2xl-mx-lg { - margin-left: var(--canon-spacing-lg); - margin-right: var(--canon-spacing-lg); + margin-left: var(--canon-space-6); + margin-right: var(--canon-space-6); } .cu-2xl-mx-md { - margin-left: var(--canon-spacing-md); - margin-right: var(--canon-spacing-md); + margin-left: var(--canon-space-5); + margin-right: var(--canon-space-5); } .cu-2xl-mx-none { @@ -559,38 +559,38 @@ } .cu-2xl-mx-sm { - margin-left: var(--canon-spacing-sm); - margin-right: var(--canon-spacing-sm); + margin-left: var(--canon-space-4); + margin-right: var(--canon-space-4); } .cu-2xl-mx-xl { - margin-left: var(--canon-spacing-xl); - margin-right: var(--canon-spacing-xl); + margin-left: var(--canon-space-7); + margin-right: var(--canon-space-7); } .cu-2xl-mx-xs { - margin-left: var(--canon-spacing-xs); - margin-right: var(--canon-spacing-xs); + margin-left: var(--canon-space-3); + margin-right: var(--canon-space-3); } .cu-2xl-my-2xl { - margin-top: var(--canon-spacing-2xl); - margin-bottom: var(--canon-spacing-2xl); + margin-top: var(--canon-space-8); + margin-bottom: var(--canon-space-8); } .cu-2xl-my-2xs { - margin-top: var(--canon-spacing-2xs); - margin-bottom: var(--canon-spacing-2xs); + margin-top: var(--canon-space-2); + margin-bottom: var(--canon-space-2); } .cu-2xl-my-lg { - margin-top: var(--canon-spacing-lg); - margin-bottom: var(--canon-spacing-lg); + margin-top: var(--canon-space-6); + margin-bottom: var(--canon-space-6); } .cu-2xl-my-md { - margin-top: var(--canon-spacing-md); - margin-bottom: var(--canon-spacing-md); + margin-top: var(--canon-space-5); + margin-bottom: var(--canon-space-5); } .cu-2xl-my-none { @@ -599,34 +599,34 @@ } .cu-2xl-my-sm { - margin-top: var(--canon-spacing-sm); - margin-bottom: var(--canon-spacing-sm); + margin-top: var(--canon-space-4); + margin-bottom: var(--canon-space-4); } .cu-2xl-my-xl { - margin-top: var(--canon-spacing-xl); - margin-bottom: var(--canon-spacing-xl); + margin-top: var(--canon-space-7); + margin-bottom: var(--canon-space-7); } .cu-2xl-my-xs { - margin-top: var(--canon-spacing-xs); - margin-bottom: var(--canon-spacing-xs); + margin-top: var(--canon-space-3); + margin-bottom: var(--canon-space-3); } .cu-2xl-p-2xl { - padding: var(--canon-spacing-2xl); + padding: var(--canon-space-8); } .cu-2xl-p-2xs { - padding: var(--canon-spacing-2xs); + padding: var(--canon-space-2); } .cu-2xl-p-lg { - padding: var(--canon-spacing-lg); + padding: var(--canon-space-6); } .cu-2xl-p-md { - padding: var(--canon-spacing-md); + padding: var(--canon-space-5); } .cu-2xl-p-none { @@ -634,31 +634,31 @@ } .cu-2xl-p-sm { - padding: var(--canon-spacing-sm); + padding: var(--canon-space-4); } .cu-2xl-p-xl { - padding: var(--canon-spacing-xl); + padding: var(--canon-space-7); } .cu-2xl-p-xs { - padding: var(--canon-spacing-xs); + padding: var(--canon-space-3); } .cu-2xl-pb-2xl { - padding-bottom: var(--canon-spacing-2xl); + padding-bottom: var(--canon-space-8); } .cu-2xl-pb-2xs { - padding-bottom: var(--canon-spacing-2xs); + padding-bottom: var(--canon-space-2); } .cu-2xl-pb-lg { - padding-bottom: var(--canon-spacing-lg); + padding-bottom: var(--canon-space-6); } .cu-2xl-pb-md { - padding-bottom: var(--canon-spacing-md); + padding-bottom: var(--canon-space-5); } .cu-2xl-pb-none { @@ -666,31 +666,31 @@ } .cu-2xl-pb-sm { - padding-bottom: var(--canon-spacing-sm); + padding-bottom: var(--canon-space-4); } .cu-2xl-pb-xl { - padding-bottom: var(--canon-spacing-xl); + padding-bottom: var(--canon-space-7); } .cu-2xl-pb-xs { - padding-bottom: var(--canon-spacing-xs); + padding-bottom: var(--canon-space-3); } .cu-2xl-pl-2xl { - padding-left: var(--canon-spacing-2xl); + padding-left: var(--canon-space-8); } .cu-2xl-pl-2xs { - padding-left: var(--canon-spacing-2xs); + padding-left: var(--canon-space-2); } .cu-2xl-pl-lg { - padding-left: var(--canon-spacing-lg); + padding-left: var(--canon-space-6); } .cu-2xl-pl-md { - padding-left: var(--canon-spacing-md); + padding-left: var(--canon-space-5); } .cu-2xl-pl-none { @@ -698,31 +698,31 @@ } .cu-2xl-pl-sm { - padding-left: var(--canon-spacing-sm); + padding-left: var(--canon-space-4); } .cu-2xl-pl-xl { - padding-left: var(--canon-spacing-xl); + padding-left: var(--canon-space-7); } .cu-2xl-pl-xs { - padding-left: var(--canon-spacing-xs); + padding-left: var(--canon-space-3); } .cu-2xl-pr-2xl { - padding-right: var(--canon-spacing-2xl); + padding-right: var(--canon-space-8); } .cu-2xl-pr-2xs { - padding-right: var(--canon-spacing-2xs); + padding-right: var(--canon-space-2); } .cu-2xl-pr-lg { - padding-right: var(--canon-spacing-lg); + padding-right: var(--canon-space-6); } .cu-2xl-pr-md { - padding-right: var(--canon-spacing-md); + padding-right: var(--canon-space-5); } .cu-2xl-pr-none { @@ -730,31 +730,31 @@ } .cu-2xl-pr-sm { - padding-right: var(--canon-spacing-sm); + padding-right: var(--canon-space-4); } .cu-2xl-pr-xl { - padding-right: var(--canon-spacing-xl); + padding-right: var(--canon-space-7); } .cu-2xl-pr-xs { - padding-right: var(--canon-spacing-xs); + padding-right: var(--canon-space-3); } .cu-2xl-pt-2xl { - padding-top: var(--canon-spacing-2xl); + padding-top: var(--canon-space-8); } .cu-2xl-pt-2xs { - padding-top: var(--canon-spacing-2xs); + padding-top: var(--canon-space-2); } .cu-2xl-pt-lg { - padding-top: var(--canon-spacing-lg); + padding-top: var(--canon-space-6); } .cu-2xl-pt-md { - padding-top: var(--canon-spacing-md); + padding-top: var(--canon-space-5); } .cu-2xl-pt-none { @@ -762,35 +762,35 @@ } .cu-2xl-pt-sm { - padding-top: var(--canon-spacing-sm); + padding-top: var(--canon-space-4); } .cu-2xl-pt-xl { - padding-top: var(--canon-spacing-xl); + padding-top: var(--canon-space-7); } .cu-2xl-pt-xs { - padding-top: var(--canon-spacing-xs); + padding-top: var(--canon-space-3); } .cu-2xl-px-2xl { - padding-left: var(--canon-spacing-2xl); - padding-right: var(--canon-spacing-2xl); + padding-left: var(--canon-space-8); + padding-right: var(--canon-space-8); } .cu-2xl-px-2xs { - padding-left: var(--canon-spacing-2xs); - padding-right: var(--canon-spacing-2xs); + padding-left: var(--canon-space-2); + padding-right: var(--canon-space-2); } .cu-2xl-px-lg { - padding-left: var(--canon-spacing-lg); - padding-right: var(--canon-spacing-lg); + padding-left: var(--canon-space-6); + padding-right: var(--canon-space-6); } .cu-2xl-px-md { - padding-left: var(--canon-spacing-md); - padding-right: var(--canon-spacing-md); + padding-left: var(--canon-space-5); + padding-right: var(--canon-space-5); } .cu-2xl-px-none { @@ -799,38 +799,38 @@ } .cu-2xl-px-sm { - padding-left: var(--canon-spacing-sm); - padding-right: var(--canon-spacing-sm); + padding-left: var(--canon-space-4); + padding-right: var(--canon-space-4); } .cu-2xl-px-xl { - padding-left: var(--canon-spacing-xl); - padding-right: var(--canon-spacing-xl); + padding-left: var(--canon-space-7); + padding-right: var(--canon-space-7); } .cu-2xl-px-xs { - padding-left: var(--canon-spacing-xs); - padding-right: var(--canon-spacing-xs); + padding-left: var(--canon-space-3); + padding-right: var(--canon-space-3); } .cu-2xl-py-2xl { - padding-top: var(--canon-spacing-2xl); - padding-bottom: var(--canon-spacing-2xl); + padding-top: var(--canon-space-8); + padding-bottom: var(--canon-space-8); } .cu-2xl-py-2xs { - padding-top: var(--canon-spacing-2xs); - padding-bottom: var(--canon-spacing-2xs); + padding-top: var(--canon-space-2); + padding-bottom: var(--canon-space-2); } .cu-2xl-py-lg { - padding-top: var(--canon-spacing-lg); - padding-bottom: var(--canon-spacing-lg); + padding-top: var(--canon-space-6); + padding-bottom: var(--canon-space-6); } .cu-2xl-py-md { - padding-top: var(--canon-spacing-md); - padding-bottom: var(--canon-spacing-md); + padding-top: var(--canon-space-5); + padding-bottom: var(--canon-space-5); } .cu-2xl-py-none { @@ -839,18 +839,18 @@ } .cu-2xl-py-sm { - padding-top: var(--canon-spacing-sm); - padding-bottom: var(--canon-spacing-sm); + padding-top: var(--canon-space-4); + padding-bottom: var(--canon-space-4); } .cu-2xl-py-xl { - padding-top: var(--canon-spacing-xl); - padding-bottom: var(--canon-spacing-xl); + padding-top: var(--canon-space-7); + padding-bottom: var(--canon-space-7); } .cu-2xl-py-xs { - padding-top: var(--canon-spacing-xs); - padding-bottom: var(--canon-spacing-xs); + padding-top: var(--canon-space-3); + padding-bottom: var(--canon-space-3); } .cu-2xl-rounded-2xl { diff --git a/packages/canon/src/css/utilities/lg.css b/packages/canon/src/css/utilities/lg.css index caa2adb310..8abf92c2bb 100644 --- a/packages/canon/src/css/utilities/lg.css +++ b/packages/canon/src/css/utilities/lg.css @@ -238,15 +238,15 @@ } .cu-lg-gap-2xl { - gap: var(--canon-spacing-2xl); + gap: var(--canon-space-8); } .cu-lg-gap-lg { - gap: var(--canon-spacing-lg); + gap: var(--canon-space-6); } .cu-lg-gap-md { - gap: var(--canon-spacing-md); + gap: var(--canon-space-5); } .cu-lg-gap-none { @@ -254,15 +254,15 @@ } .cu-lg-gap-sm { - gap: var(--canon-spacing-sm); + gap: var(--canon-space-4); } .cu-lg-gap-xl { - gap: var(--canon-spacing-xl); + gap: var(--canon-space-7); } .cu-lg-gap-xs { - gap: var(--canon-spacing-xs); + gap: var(--canon-space-3); } .cu-lg-grid { @@ -374,19 +374,19 @@ } .cu-lg-m-2xl { - margin: var(--canon-spacing-2xl); + margin: var(--canon-space-8); } .cu-lg-m-2xs { - margin: var(--canon-spacing-2xs); + margin: var(--canon-space-2); } .cu-lg-m-lg { - margin: var(--canon-spacing-lg); + margin: var(--canon-space-6); } .cu-lg-m-md { - margin: var(--canon-spacing-md); + margin: var(--canon-space-5); } .cu-lg-m-none { @@ -394,31 +394,31 @@ } .cu-lg-m-sm { - margin: var(--canon-spacing-sm); + margin: var(--canon-space-4); } .cu-lg-m-xl { - margin: var(--canon-spacing-xl); + margin: var(--canon-space-7); } .cu-lg-m-xs { - margin: var(--canon-spacing-xs); + margin: var(--canon-space-3); } .cu-lg-mb-2xl { - margin-bottom: var(--canon-spacing-2xl); + margin-bottom: var(--canon-space-8); } .cu-lg-mb-2xs { - margin-bottom: var(--canon-spacing-2xs); + margin-bottom: var(--canon-space-2); } .cu-lg-mb-lg { - margin-bottom: var(--canon-spacing-lg); + margin-bottom: var(--canon-space-6); } .cu-lg-mb-md { - margin-bottom: var(--canon-spacing-md); + margin-bottom: var(--canon-space-5); } .cu-lg-mb-none { @@ -426,31 +426,31 @@ } .cu-lg-mb-sm { - margin-bottom: var(--canon-spacing-sm); + margin-bottom: var(--canon-space-4); } .cu-lg-mb-xl { - margin-bottom: var(--canon-spacing-xl); + margin-bottom: var(--canon-space-7); } .cu-lg-mb-xs { - margin-bottom: var(--canon-spacing-xs); + margin-bottom: var(--canon-space-3); } .cu-lg-ml-2xl { - margin-left: var(--canon-spacing-2xl); + margin-left: var(--canon-space-8); } .cu-lg-ml-2xs { - margin-left: var(--canon-spacing-2xs); + margin-left: var(--canon-space-2); } .cu-lg-ml-lg { - margin-left: var(--canon-spacing-lg); + margin-left: var(--canon-space-6); } .cu-lg-ml-md { - margin-left: var(--canon-spacing-md); + margin-left: var(--canon-space-5); } .cu-lg-ml-none { @@ -458,31 +458,31 @@ } .cu-lg-ml-sm { - margin-left: var(--canon-spacing-sm); + margin-left: var(--canon-space-4); } .cu-lg-ml-xl { - margin-left: var(--canon-spacing-xl); + margin-left: var(--canon-space-7); } .cu-lg-ml-xs { - margin-left: var(--canon-spacing-xs); + margin-left: var(--canon-space-3); } .cu-lg-mr-2xl { - margin-right: var(--canon-spacing-2xl); + margin-right: var(--canon-space-8); } .cu-lg-mr-2xs { - margin-right: var(--canon-spacing-2xs); + margin-right: var(--canon-space-2); } .cu-lg-mr-lg { - margin-right: var(--canon-spacing-lg); + margin-right: var(--canon-space-6); } .cu-lg-mr-md { - margin-right: var(--canon-spacing-md); + margin-right: var(--canon-space-5); } .cu-lg-mr-none { @@ -490,31 +490,31 @@ } .cu-lg-mr-sm { - margin-right: var(--canon-spacing-sm); + margin-right: var(--canon-space-4); } .cu-lg-mr-xl { - margin-right: var(--canon-spacing-xl); + margin-right: var(--canon-space-7); } .cu-lg-mr-xs { - margin-right: var(--canon-spacing-xs); + margin-right: var(--canon-space-3); } .cu-lg-mt-2xl { - margin-top: var(--canon-spacing-2xl); + margin-top: var(--canon-space-8); } .cu-lg-mt-2xs { - margin-top: var(--canon-spacing-2xs); + margin-top: var(--canon-space-2); } .cu-lg-mt-lg { - margin-top: var(--canon-spacing-lg); + margin-top: var(--canon-space-6); } .cu-lg-mt-md { - margin-top: var(--canon-spacing-md); + margin-top: var(--canon-space-5); } .cu-lg-mt-none { @@ -522,35 +522,35 @@ } .cu-lg-mt-sm { - margin-top: var(--canon-spacing-sm); + margin-top: var(--canon-space-4); } .cu-lg-mt-xl { - margin-top: var(--canon-spacing-xl); + margin-top: var(--canon-space-7); } .cu-lg-mt-xs { - margin-top: var(--canon-spacing-xs); + margin-top: var(--canon-space-3); } .cu-lg-mx-2xl { - margin-left: var(--canon-spacing-2xl); - margin-right: var(--canon-spacing-2xl); + margin-left: var(--canon-space-8); + margin-right: var(--canon-space-8); } .cu-lg-mx-2xs { - margin-left: var(--canon-spacing-2xs); - margin-right: var(--canon-spacing-2xs); + margin-left: var(--canon-space-2); + margin-right: var(--canon-space-2); } .cu-lg-mx-lg { - margin-left: var(--canon-spacing-lg); - margin-right: var(--canon-spacing-lg); + margin-left: var(--canon-space-6); + margin-right: var(--canon-space-6); } .cu-lg-mx-md { - margin-left: var(--canon-spacing-md); - margin-right: var(--canon-spacing-md); + margin-left: var(--canon-space-5); + margin-right: var(--canon-space-5); } .cu-lg-mx-none { @@ -559,38 +559,38 @@ } .cu-lg-mx-sm { - margin-left: var(--canon-spacing-sm); - margin-right: var(--canon-spacing-sm); + margin-left: var(--canon-space-4); + margin-right: var(--canon-space-4); } .cu-lg-mx-xl { - margin-left: var(--canon-spacing-xl); - margin-right: var(--canon-spacing-xl); + margin-left: var(--canon-space-7); + margin-right: var(--canon-space-7); } .cu-lg-mx-xs { - margin-left: var(--canon-spacing-xs); - margin-right: var(--canon-spacing-xs); + margin-left: var(--canon-space-3); + margin-right: var(--canon-space-3); } .cu-lg-my-2xl { - margin-top: var(--canon-spacing-2xl); - margin-bottom: var(--canon-spacing-2xl); + margin-top: var(--canon-space-8); + margin-bottom: var(--canon-space-8); } .cu-lg-my-2xs { - margin-top: var(--canon-spacing-2xs); - margin-bottom: var(--canon-spacing-2xs); + margin-top: var(--canon-space-2); + margin-bottom: var(--canon-space-2); } .cu-lg-my-lg { - margin-top: var(--canon-spacing-lg); - margin-bottom: var(--canon-spacing-lg); + margin-top: var(--canon-space-6); + margin-bottom: var(--canon-space-6); } .cu-lg-my-md { - margin-top: var(--canon-spacing-md); - margin-bottom: var(--canon-spacing-md); + margin-top: var(--canon-space-5); + margin-bottom: var(--canon-space-5); } .cu-lg-my-none { @@ -599,34 +599,34 @@ } .cu-lg-my-sm { - margin-top: var(--canon-spacing-sm); - margin-bottom: var(--canon-spacing-sm); + margin-top: var(--canon-space-4); + margin-bottom: var(--canon-space-4); } .cu-lg-my-xl { - margin-top: var(--canon-spacing-xl); - margin-bottom: var(--canon-spacing-xl); + margin-top: var(--canon-space-7); + margin-bottom: var(--canon-space-7); } .cu-lg-my-xs { - margin-top: var(--canon-spacing-xs); - margin-bottom: var(--canon-spacing-xs); + margin-top: var(--canon-space-3); + margin-bottom: var(--canon-space-3); } .cu-lg-p-2xl { - padding: var(--canon-spacing-2xl); + padding: var(--canon-space-8); } .cu-lg-p-2xs { - padding: var(--canon-spacing-2xs); + padding: var(--canon-space-2); } .cu-lg-p-lg { - padding: var(--canon-spacing-lg); + padding: var(--canon-space-6); } .cu-lg-p-md { - padding: var(--canon-spacing-md); + padding: var(--canon-space-5); } .cu-lg-p-none { @@ -634,31 +634,31 @@ } .cu-lg-p-sm { - padding: var(--canon-spacing-sm); + padding: var(--canon-space-4); } .cu-lg-p-xl { - padding: var(--canon-spacing-xl); + padding: var(--canon-space-7); } .cu-lg-p-xs { - padding: var(--canon-spacing-xs); + padding: var(--canon-space-3); } .cu-lg-pb-2xl { - padding-bottom: var(--canon-spacing-2xl); + padding-bottom: var(--canon-space-8); } .cu-lg-pb-2xs { - padding-bottom: var(--canon-spacing-2xs); + padding-bottom: var(--canon-space-2); } .cu-lg-pb-lg { - padding-bottom: var(--canon-spacing-lg); + padding-bottom: var(--canon-space-6); } .cu-lg-pb-md { - padding-bottom: var(--canon-spacing-md); + padding-bottom: var(--canon-space-5); } .cu-lg-pb-none { @@ -666,31 +666,31 @@ } .cu-lg-pb-sm { - padding-bottom: var(--canon-spacing-sm); + padding-bottom: var(--canon-space-4); } .cu-lg-pb-xl { - padding-bottom: var(--canon-spacing-xl); + padding-bottom: var(--canon-space-7); } .cu-lg-pb-xs { - padding-bottom: var(--canon-spacing-xs); + padding-bottom: var(--canon-space-3); } .cu-lg-pl-2xl { - padding-left: var(--canon-spacing-2xl); + padding-left: var(--canon-space-8); } .cu-lg-pl-2xs { - padding-left: var(--canon-spacing-2xs); + padding-left: var(--canon-space-2); } .cu-lg-pl-lg { - padding-left: var(--canon-spacing-lg); + padding-left: var(--canon-space-6); } .cu-lg-pl-md { - padding-left: var(--canon-spacing-md); + padding-left: var(--canon-space-5); } .cu-lg-pl-none { @@ -698,31 +698,31 @@ } .cu-lg-pl-sm { - padding-left: var(--canon-spacing-sm); + padding-left: var(--canon-space-4); } .cu-lg-pl-xl { - padding-left: var(--canon-spacing-xl); + padding-left: var(--canon-space-7); } .cu-lg-pl-xs { - padding-left: var(--canon-spacing-xs); + padding-left: var(--canon-space-3); } .cu-lg-pr-2xl { - padding-right: var(--canon-spacing-2xl); + padding-right: var(--canon-space-8); } .cu-lg-pr-2xs { - padding-right: var(--canon-spacing-2xs); + padding-right: var(--canon-space-2); } .cu-lg-pr-lg { - padding-right: var(--canon-spacing-lg); + padding-right: var(--canon-space-6); } .cu-lg-pr-md { - padding-right: var(--canon-spacing-md); + padding-right: var(--canon-space-5); } .cu-lg-pr-none { @@ -730,31 +730,31 @@ } .cu-lg-pr-sm { - padding-right: var(--canon-spacing-sm); + padding-right: var(--canon-space-4); } .cu-lg-pr-xl { - padding-right: var(--canon-spacing-xl); + padding-right: var(--canon-space-7); } .cu-lg-pr-xs { - padding-right: var(--canon-spacing-xs); + padding-right: var(--canon-space-3); } .cu-lg-pt-2xl { - padding-top: var(--canon-spacing-2xl); + padding-top: var(--canon-space-8); } .cu-lg-pt-2xs { - padding-top: var(--canon-spacing-2xs); + padding-top: var(--canon-space-2); } .cu-lg-pt-lg { - padding-top: var(--canon-spacing-lg); + padding-top: var(--canon-space-6); } .cu-lg-pt-md { - padding-top: var(--canon-spacing-md); + padding-top: var(--canon-space-5); } .cu-lg-pt-none { @@ -762,35 +762,35 @@ } .cu-lg-pt-sm { - padding-top: var(--canon-spacing-sm); + padding-top: var(--canon-space-4); } .cu-lg-pt-xl { - padding-top: var(--canon-spacing-xl); + padding-top: var(--canon-space-7); } .cu-lg-pt-xs { - padding-top: var(--canon-spacing-xs); + padding-top: var(--canon-space-3); } .cu-lg-px-2xl { - padding-left: var(--canon-spacing-2xl); - padding-right: var(--canon-spacing-2xl); + padding-left: var(--canon-space-8); + padding-right: var(--canon-space-8); } .cu-lg-px-2xs { - padding-left: var(--canon-spacing-2xs); - padding-right: var(--canon-spacing-2xs); + padding-left: var(--canon-space-2); + padding-right: var(--canon-space-2); } .cu-lg-px-lg { - padding-left: var(--canon-spacing-lg); - padding-right: var(--canon-spacing-lg); + padding-left: var(--canon-space-6); + padding-right: var(--canon-space-6); } .cu-lg-px-md { - padding-left: var(--canon-spacing-md); - padding-right: var(--canon-spacing-md); + padding-left: var(--canon-space-5); + padding-right: var(--canon-space-5); } .cu-lg-px-none { @@ -799,38 +799,38 @@ } .cu-lg-px-sm { - padding-left: var(--canon-spacing-sm); - padding-right: var(--canon-spacing-sm); + padding-left: var(--canon-space-4); + padding-right: var(--canon-space-4); } .cu-lg-px-xl { - padding-left: var(--canon-spacing-xl); - padding-right: var(--canon-spacing-xl); + padding-left: var(--canon-space-7); + padding-right: var(--canon-space-7); } .cu-lg-px-xs { - padding-left: var(--canon-spacing-xs); - padding-right: var(--canon-spacing-xs); + padding-left: var(--canon-space-3); + padding-right: var(--canon-space-3); } .cu-lg-py-2xl { - padding-top: var(--canon-spacing-2xl); - padding-bottom: var(--canon-spacing-2xl); + padding-top: var(--canon-space-8); + padding-bottom: var(--canon-space-8); } .cu-lg-py-2xs { - padding-top: var(--canon-spacing-2xs); - padding-bottom: var(--canon-spacing-2xs); + padding-top: var(--canon-space-2); + padding-bottom: var(--canon-space-2); } .cu-lg-py-lg { - padding-top: var(--canon-spacing-lg); - padding-bottom: var(--canon-spacing-lg); + padding-top: var(--canon-space-6); + padding-bottom: var(--canon-space-6); } .cu-lg-py-md { - padding-top: var(--canon-spacing-md); - padding-bottom: var(--canon-spacing-md); + padding-top: var(--canon-space-5); + padding-bottom: var(--canon-space-5); } .cu-lg-py-none { @@ -839,18 +839,18 @@ } .cu-lg-py-sm { - padding-top: var(--canon-spacing-sm); - padding-bottom: var(--canon-spacing-sm); + padding-top: var(--canon-space-4); + padding-bottom: var(--canon-space-4); } .cu-lg-py-xl { - padding-top: var(--canon-spacing-xl); - padding-bottom: var(--canon-spacing-xl); + padding-top: var(--canon-space-7); + padding-bottom: var(--canon-space-7); } .cu-lg-py-xs { - padding-top: var(--canon-spacing-xs); - padding-bottom: var(--canon-spacing-xs); + padding-top: var(--canon-space-3); + padding-bottom: var(--canon-space-3); } .cu-lg-rounded-2xl { diff --git a/packages/canon/src/css/utilities/md.css b/packages/canon/src/css/utilities/md.css index fe6d56ad7c..c8b7af3dff 100644 --- a/packages/canon/src/css/utilities/md.css +++ b/packages/canon/src/css/utilities/md.css @@ -238,15 +238,15 @@ } .cu-md-gap-2xl { - gap: var(--canon-spacing-2xl); + gap: var(--canon-space-8); } .cu-md-gap-lg { - gap: var(--canon-spacing-lg); + gap: var(--canon-space-6); } .cu-md-gap-md { - gap: var(--canon-spacing-md); + gap: var(--canon-space-5); } .cu-md-gap-none { @@ -254,15 +254,15 @@ } .cu-md-gap-sm { - gap: var(--canon-spacing-sm); + gap: var(--canon-space-4); } .cu-md-gap-xl { - gap: var(--canon-spacing-xl); + gap: var(--canon-space-7); } .cu-md-gap-xs { - gap: var(--canon-spacing-xs); + gap: var(--canon-space-3); } .cu-md-grid { @@ -374,19 +374,19 @@ } .cu-md-m-2xl { - margin: var(--canon-spacing-2xl); + margin: var(--canon-space-8); } .cu-md-m-2xs { - margin: var(--canon-spacing-2xs); + margin: var(--canon-space-2); } .cu-md-m-lg { - margin: var(--canon-spacing-lg); + margin: var(--canon-space-6); } .cu-md-m-md { - margin: var(--canon-spacing-md); + margin: var(--canon-space-5); } .cu-md-m-none { @@ -394,31 +394,31 @@ } .cu-md-m-sm { - margin: var(--canon-spacing-sm); + margin: var(--canon-space-4); } .cu-md-m-xl { - margin: var(--canon-spacing-xl); + margin: var(--canon-space-7); } .cu-md-m-xs { - margin: var(--canon-spacing-xs); + margin: var(--canon-space-3); } .cu-md-mb-2xl { - margin-bottom: var(--canon-spacing-2xl); + margin-bottom: var(--canon-space-8); } .cu-md-mb-2xs { - margin-bottom: var(--canon-spacing-2xs); + margin-bottom: var(--canon-space-2); } .cu-md-mb-lg { - margin-bottom: var(--canon-spacing-lg); + margin-bottom: var(--canon-space-6); } .cu-md-mb-md { - margin-bottom: var(--canon-spacing-md); + margin-bottom: var(--canon-space-5); } .cu-md-mb-none { @@ -426,31 +426,31 @@ } .cu-md-mb-sm { - margin-bottom: var(--canon-spacing-sm); + margin-bottom: var(--canon-space-4); } .cu-md-mb-xl { - margin-bottom: var(--canon-spacing-xl); + margin-bottom: var(--canon-space-7); } .cu-md-mb-xs { - margin-bottom: var(--canon-spacing-xs); + margin-bottom: var(--canon-space-3); } .cu-md-ml-2xl { - margin-left: var(--canon-spacing-2xl); + margin-left: var(--canon-space-8); } .cu-md-ml-2xs { - margin-left: var(--canon-spacing-2xs); + margin-left: var(--canon-space-2); } .cu-md-ml-lg { - margin-left: var(--canon-spacing-lg); + margin-left: var(--canon-space-6); } .cu-md-ml-md { - margin-left: var(--canon-spacing-md); + margin-left: var(--canon-space-5); } .cu-md-ml-none { @@ -458,31 +458,31 @@ } .cu-md-ml-sm { - margin-left: var(--canon-spacing-sm); + margin-left: var(--canon-space-4); } .cu-md-ml-xl { - margin-left: var(--canon-spacing-xl); + margin-left: var(--canon-space-7); } .cu-md-ml-xs { - margin-left: var(--canon-spacing-xs); + margin-left: var(--canon-space-3); } .cu-md-mr-2xl { - margin-right: var(--canon-spacing-2xl); + margin-right: var(--canon-space-8); } .cu-md-mr-2xs { - margin-right: var(--canon-spacing-2xs); + margin-right: var(--canon-space-2); } .cu-md-mr-lg { - margin-right: var(--canon-spacing-lg); + margin-right: var(--canon-space-6); } .cu-md-mr-md { - margin-right: var(--canon-spacing-md); + margin-right: var(--canon-space-5); } .cu-md-mr-none { @@ -490,31 +490,31 @@ } .cu-md-mr-sm { - margin-right: var(--canon-spacing-sm); + margin-right: var(--canon-space-4); } .cu-md-mr-xl { - margin-right: var(--canon-spacing-xl); + margin-right: var(--canon-space-7); } .cu-md-mr-xs { - margin-right: var(--canon-spacing-xs); + margin-right: var(--canon-space-3); } .cu-md-mt-2xl { - margin-top: var(--canon-spacing-2xl); + margin-top: var(--canon-space-8); } .cu-md-mt-2xs { - margin-top: var(--canon-spacing-2xs); + margin-top: var(--canon-space-2); } .cu-md-mt-lg { - margin-top: var(--canon-spacing-lg); + margin-top: var(--canon-space-6); } .cu-md-mt-md { - margin-top: var(--canon-spacing-md); + margin-top: var(--canon-space-5); } .cu-md-mt-none { @@ -522,35 +522,35 @@ } .cu-md-mt-sm { - margin-top: var(--canon-spacing-sm); + margin-top: var(--canon-space-4); } .cu-md-mt-xl { - margin-top: var(--canon-spacing-xl); + margin-top: var(--canon-space-7); } .cu-md-mt-xs { - margin-top: var(--canon-spacing-xs); + margin-top: var(--canon-space-3); } .cu-md-mx-2xl { - margin-left: var(--canon-spacing-2xl); - margin-right: var(--canon-spacing-2xl); + margin-left: var(--canon-space-8); + margin-right: var(--canon-space-8); } .cu-md-mx-2xs { - margin-left: var(--canon-spacing-2xs); - margin-right: var(--canon-spacing-2xs); + margin-left: var(--canon-space-2); + margin-right: var(--canon-space-2); } .cu-md-mx-lg { - margin-left: var(--canon-spacing-lg); - margin-right: var(--canon-spacing-lg); + margin-left: var(--canon-space-6); + margin-right: var(--canon-space-6); } .cu-md-mx-md { - margin-left: var(--canon-spacing-md); - margin-right: var(--canon-spacing-md); + margin-left: var(--canon-space-5); + margin-right: var(--canon-space-5); } .cu-md-mx-none { @@ -559,38 +559,38 @@ } .cu-md-mx-sm { - margin-left: var(--canon-spacing-sm); - margin-right: var(--canon-spacing-sm); + margin-left: var(--canon-space-4); + margin-right: var(--canon-space-4); } .cu-md-mx-xl { - margin-left: var(--canon-spacing-xl); - margin-right: var(--canon-spacing-xl); + margin-left: var(--canon-space-7); + margin-right: var(--canon-space-7); } .cu-md-mx-xs { - margin-left: var(--canon-spacing-xs); - margin-right: var(--canon-spacing-xs); + margin-left: var(--canon-space-3); + margin-right: var(--canon-space-3); } .cu-md-my-2xl { - margin-top: var(--canon-spacing-2xl); - margin-bottom: var(--canon-spacing-2xl); + margin-top: var(--canon-space-8); + margin-bottom: var(--canon-space-8); } .cu-md-my-2xs { - margin-top: var(--canon-spacing-2xs); - margin-bottom: var(--canon-spacing-2xs); + margin-top: var(--canon-space-2); + margin-bottom: var(--canon-space-2); } .cu-md-my-lg { - margin-top: var(--canon-spacing-lg); - margin-bottom: var(--canon-spacing-lg); + margin-top: var(--canon-space-6); + margin-bottom: var(--canon-space-6); } .cu-md-my-md { - margin-top: var(--canon-spacing-md); - margin-bottom: var(--canon-spacing-md); + margin-top: var(--canon-space-5); + margin-bottom: var(--canon-space-5); } .cu-md-my-none { @@ -599,34 +599,34 @@ } .cu-md-my-sm { - margin-top: var(--canon-spacing-sm); - margin-bottom: var(--canon-spacing-sm); + margin-top: var(--canon-space-4); + margin-bottom: var(--canon-space-4); } .cu-md-my-xl { - margin-top: var(--canon-spacing-xl); - margin-bottom: var(--canon-spacing-xl); + margin-top: var(--canon-space-7); + margin-bottom: var(--canon-space-7); } .cu-md-my-xs { - margin-top: var(--canon-spacing-xs); - margin-bottom: var(--canon-spacing-xs); + margin-top: var(--canon-space-3); + margin-bottom: var(--canon-space-3); } .cu-md-p-2xl { - padding: var(--canon-spacing-2xl); + padding: var(--canon-space-8); } .cu-md-p-2xs { - padding: var(--canon-spacing-2xs); + padding: var(--canon-space-2); } .cu-md-p-lg { - padding: var(--canon-spacing-lg); + padding: var(--canon-space-6); } .cu-md-p-md { - padding: var(--canon-spacing-md); + padding: var(--canon-space-5); } .cu-md-p-none { @@ -634,31 +634,31 @@ } .cu-md-p-sm { - padding: var(--canon-spacing-sm); + padding: var(--canon-space-4); } .cu-md-p-xl { - padding: var(--canon-spacing-xl); + padding: var(--canon-space-7); } .cu-md-p-xs { - padding: var(--canon-spacing-xs); + padding: var(--canon-space-3); } .cu-md-pb-2xl { - padding-bottom: var(--canon-spacing-2xl); + padding-bottom: var(--canon-space-8); } .cu-md-pb-2xs { - padding-bottom: var(--canon-spacing-2xs); + padding-bottom: var(--canon-space-2); } .cu-md-pb-lg { - padding-bottom: var(--canon-spacing-lg); + padding-bottom: var(--canon-space-6); } .cu-md-pb-md { - padding-bottom: var(--canon-spacing-md); + padding-bottom: var(--canon-space-5); } .cu-md-pb-none { @@ -666,31 +666,31 @@ } .cu-md-pb-sm { - padding-bottom: var(--canon-spacing-sm); + padding-bottom: var(--canon-space-4); } .cu-md-pb-xl { - padding-bottom: var(--canon-spacing-xl); + padding-bottom: var(--canon-space-7); } .cu-md-pb-xs { - padding-bottom: var(--canon-spacing-xs); + padding-bottom: var(--canon-space-3); } .cu-md-pl-2xl { - padding-left: var(--canon-spacing-2xl); + padding-left: var(--canon-space-8); } .cu-md-pl-2xs { - padding-left: var(--canon-spacing-2xs); + padding-left: var(--canon-space-2); } .cu-md-pl-lg { - padding-left: var(--canon-spacing-lg); + padding-left: var(--canon-space-6); } .cu-md-pl-md { - padding-left: var(--canon-spacing-md); + padding-left: var(--canon-space-5); } .cu-md-pl-none { @@ -698,31 +698,31 @@ } .cu-md-pl-sm { - padding-left: var(--canon-spacing-sm); + padding-left: var(--canon-space-4); } .cu-md-pl-xl { - padding-left: var(--canon-spacing-xl); + padding-left: var(--canon-space-7); } .cu-md-pl-xs { - padding-left: var(--canon-spacing-xs); + padding-left: var(--canon-space-3); } .cu-md-pr-2xl { - padding-right: var(--canon-spacing-2xl); + padding-right: var(--canon-space-8); } .cu-md-pr-2xs { - padding-right: var(--canon-spacing-2xs); + padding-right: var(--canon-space-2); } .cu-md-pr-lg { - padding-right: var(--canon-spacing-lg); + padding-right: var(--canon-space-6); } .cu-md-pr-md { - padding-right: var(--canon-spacing-md); + padding-right: var(--canon-space-5); } .cu-md-pr-none { @@ -730,31 +730,31 @@ } .cu-md-pr-sm { - padding-right: var(--canon-spacing-sm); + padding-right: var(--canon-space-4); } .cu-md-pr-xl { - padding-right: var(--canon-spacing-xl); + padding-right: var(--canon-space-7); } .cu-md-pr-xs { - padding-right: var(--canon-spacing-xs); + padding-right: var(--canon-space-3); } .cu-md-pt-2xl { - padding-top: var(--canon-spacing-2xl); + padding-top: var(--canon-space-8); } .cu-md-pt-2xs { - padding-top: var(--canon-spacing-2xs); + padding-top: var(--canon-space-2); } .cu-md-pt-lg { - padding-top: var(--canon-spacing-lg); + padding-top: var(--canon-space-6); } .cu-md-pt-md { - padding-top: var(--canon-spacing-md); + padding-top: var(--canon-space-5); } .cu-md-pt-none { @@ -762,35 +762,35 @@ } .cu-md-pt-sm { - padding-top: var(--canon-spacing-sm); + padding-top: var(--canon-space-4); } .cu-md-pt-xl { - padding-top: var(--canon-spacing-xl); + padding-top: var(--canon-space-7); } .cu-md-pt-xs { - padding-top: var(--canon-spacing-xs); + padding-top: var(--canon-space-3); } .cu-md-px-2xl { - padding-left: var(--canon-spacing-2xl); - padding-right: var(--canon-spacing-2xl); + padding-left: var(--canon-space-8); + padding-right: var(--canon-space-8); } .cu-md-px-2xs { - padding-left: var(--canon-spacing-2xs); - padding-right: var(--canon-spacing-2xs); + padding-left: var(--canon-space-2); + padding-right: var(--canon-space-2); } .cu-md-px-lg { - padding-left: var(--canon-spacing-lg); - padding-right: var(--canon-spacing-lg); + padding-left: var(--canon-space-6); + padding-right: var(--canon-space-6); } .cu-md-px-md { - padding-left: var(--canon-spacing-md); - padding-right: var(--canon-spacing-md); + padding-left: var(--canon-space-5); + padding-right: var(--canon-space-5); } .cu-md-px-none { @@ -799,38 +799,38 @@ } .cu-md-px-sm { - padding-left: var(--canon-spacing-sm); - padding-right: var(--canon-spacing-sm); + padding-left: var(--canon-space-4); + padding-right: var(--canon-space-4); } .cu-md-px-xl { - padding-left: var(--canon-spacing-xl); - padding-right: var(--canon-spacing-xl); + padding-left: var(--canon-space-7); + padding-right: var(--canon-space-7); } .cu-md-px-xs { - padding-left: var(--canon-spacing-xs); - padding-right: var(--canon-spacing-xs); + padding-left: var(--canon-space-3); + padding-right: var(--canon-space-3); } .cu-md-py-2xl { - padding-top: var(--canon-spacing-2xl); - padding-bottom: var(--canon-spacing-2xl); + padding-top: var(--canon-space-8); + padding-bottom: var(--canon-space-8); } .cu-md-py-2xs { - padding-top: var(--canon-spacing-2xs); - padding-bottom: var(--canon-spacing-2xs); + padding-top: var(--canon-space-2); + padding-bottom: var(--canon-space-2); } .cu-md-py-lg { - padding-top: var(--canon-spacing-lg); - padding-bottom: var(--canon-spacing-lg); + padding-top: var(--canon-space-6); + padding-bottom: var(--canon-space-6); } .cu-md-py-md { - padding-top: var(--canon-spacing-md); - padding-bottom: var(--canon-spacing-md); + padding-top: var(--canon-space-5); + padding-bottom: var(--canon-space-5); } .cu-md-py-none { @@ -839,18 +839,18 @@ } .cu-md-py-sm { - padding-top: var(--canon-spacing-sm); - padding-bottom: var(--canon-spacing-sm); + padding-top: var(--canon-space-4); + padding-bottom: var(--canon-space-4); } .cu-md-py-xl { - padding-top: var(--canon-spacing-xl); - padding-bottom: var(--canon-spacing-xl); + padding-top: var(--canon-space-7); + padding-bottom: var(--canon-space-7); } .cu-md-py-xs { - padding-top: var(--canon-spacing-xs); - padding-bottom: var(--canon-spacing-xs); + padding-top: var(--canon-space-3); + padding-bottom: var(--canon-space-3); } .cu-md-rounded-2xl { diff --git a/packages/canon/src/css/utilities/sm.css b/packages/canon/src/css/utilities/sm.css index 87657c2222..67f3174be8 100644 --- a/packages/canon/src/css/utilities/sm.css +++ b/packages/canon/src/css/utilities/sm.css @@ -238,15 +238,15 @@ } .cu-sm-gap-2xl { - gap: var(--canon-spacing-2xl); + gap: var(--canon-space-8); } .cu-sm-gap-lg { - gap: var(--canon-spacing-lg); + gap: var(--canon-space-6); } .cu-sm-gap-md { - gap: var(--canon-spacing-md); + gap: var(--canon-space-5); } .cu-sm-gap-none { @@ -254,15 +254,15 @@ } .cu-sm-gap-sm { - gap: var(--canon-spacing-sm); + gap: var(--canon-space-4); } .cu-sm-gap-xl { - gap: var(--canon-spacing-xl); + gap: var(--canon-space-7); } .cu-sm-gap-xs { - gap: var(--canon-spacing-xs); + gap: var(--canon-space-3); } .cu-sm-grid { @@ -374,19 +374,19 @@ } .cu-sm-m-2xl { - margin: var(--canon-spacing-2xl); + margin: var(--canon-space-8); } .cu-sm-m-2xs { - margin: var(--canon-spacing-2xs); + margin: var(--canon-space-2); } .cu-sm-m-lg { - margin: var(--canon-spacing-lg); + margin: var(--canon-space-6); } .cu-sm-m-md { - margin: var(--canon-spacing-md); + margin: var(--canon-space-5); } .cu-sm-m-none { @@ -394,31 +394,31 @@ } .cu-sm-m-sm { - margin: var(--canon-spacing-sm); + margin: var(--canon-space-4); } .cu-sm-m-xl { - margin: var(--canon-spacing-xl); + margin: var(--canon-space-7); } .cu-sm-m-xs { - margin: var(--canon-spacing-xs); + margin: var(--canon-space-3); } .cu-sm-mb-2xl { - margin-bottom: var(--canon-spacing-2xl); + margin-bottom: var(--canon-space-8); } .cu-sm-mb-2xs { - margin-bottom: var(--canon-spacing-2xs); + margin-bottom: var(--canon-space-2); } .cu-sm-mb-lg { - margin-bottom: var(--canon-spacing-lg); + margin-bottom: var(--canon-space-6); } .cu-sm-mb-md { - margin-bottom: var(--canon-spacing-md); + margin-bottom: var(--canon-space-5); } .cu-sm-mb-none { @@ -426,31 +426,31 @@ } .cu-sm-mb-sm { - margin-bottom: var(--canon-spacing-sm); + margin-bottom: var(--canon-space-4); } .cu-sm-mb-xl { - margin-bottom: var(--canon-spacing-xl); + margin-bottom: var(--canon-space-7); } .cu-sm-mb-xs { - margin-bottom: var(--canon-spacing-xs); + margin-bottom: var(--canon-space-3); } .cu-sm-ml-2xl { - margin-left: var(--canon-spacing-2xl); + margin-left: var(--canon-space-8); } .cu-sm-ml-2xs { - margin-left: var(--canon-spacing-2xs); + margin-left: var(--canon-space-2); } .cu-sm-ml-lg { - margin-left: var(--canon-spacing-lg); + margin-left: var(--canon-space-6); } .cu-sm-ml-md { - margin-left: var(--canon-spacing-md); + margin-left: var(--canon-space-5); } .cu-sm-ml-none { @@ -458,31 +458,31 @@ } .cu-sm-ml-sm { - margin-left: var(--canon-spacing-sm); + margin-left: var(--canon-space-4); } .cu-sm-ml-xl { - margin-left: var(--canon-spacing-xl); + margin-left: var(--canon-space-7); } .cu-sm-ml-xs { - margin-left: var(--canon-spacing-xs); + margin-left: var(--canon-space-3); } .cu-sm-mr-2xl { - margin-right: var(--canon-spacing-2xl); + margin-right: var(--canon-space-8); } .cu-sm-mr-2xs { - margin-right: var(--canon-spacing-2xs); + margin-right: var(--canon-space-2); } .cu-sm-mr-lg { - margin-right: var(--canon-spacing-lg); + margin-right: var(--canon-space-6); } .cu-sm-mr-md { - margin-right: var(--canon-spacing-md); + margin-right: var(--canon-space-5); } .cu-sm-mr-none { @@ -490,31 +490,31 @@ } .cu-sm-mr-sm { - margin-right: var(--canon-spacing-sm); + margin-right: var(--canon-space-4); } .cu-sm-mr-xl { - margin-right: var(--canon-spacing-xl); + margin-right: var(--canon-space-7); } .cu-sm-mr-xs { - margin-right: var(--canon-spacing-xs); + margin-right: var(--canon-space-3); } .cu-sm-mt-2xl { - margin-top: var(--canon-spacing-2xl); + margin-top: var(--canon-space-8); } .cu-sm-mt-2xs { - margin-top: var(--canon-spacing-2xs); + margin-top: var(--canon-space-2); } .cu-sm-mt-lg { - margin-top: var(--canon-spacing-lg); + margin-top: var(--canon-space-6); } .cu-sm-mt-md { - margin-top: var(--canon-spacing-md); + margin-top: var(--canon-space-5); } .cu-sm-mt-none { @@ -522,35 +522,35 @@ } .cu-sm-mt-sm { - margin-top: var(--canon-spacing-sm); + margin-top: var(--canon-space-4); } .cu-sm-mt-xl { - margin-top: var(--canon-spacing-xl); + margin-top: var(--canon-space-7); } .cu-sm-mt-xs { - margin-top: var(--canon-spacing-xs); + margin-top: var(--canon-space-3); } .cu-sm-mx-2xl { - margin-left: var(--canon-spacing-2xl); - margin-right: var(--canon-spacing-2xl); + margin-left: var(--canon-space-8); + margin-right: var(--canon-space-8); } .cu-sm-mx-2xs { - margin-left: var(--canon-spacing-2xs); - margin-right: var(--canon-spacing-2xs); + margin-left: var(--canon-space-2); + margin-right: var(--canon-space-2); } .cu-sm-mx-lg { - margin-left: var(--canon-spacing-lg); - margin-right: var(--canon-spacing-lg); + margin-left: var(--canon-space-6); + margin-right: var(--canon-space-6); } .cu-sm-mx-md { - margin-left: var(--canon-spacing-md); - margin-right: var(--canon-spacing-md); + margin-left: var(--canon-space-5); + margin-right: var(--canon-space-5); } .cu-sm-mx-none { @@ -559,38 +559,38 @@ } .cu-sm-mx-sm { - margin-left: var(--canon-spacing-sm); - margin-right: var(--canon-spacing-sm); + margin-left: var(--canon-space-4); + margin-right: var(--canon-space-4); } .cu-sm-mx-xl { - margin-left: var(--canon-spacing-xl); - margin-right: var(--canon-spacing-xl); + margin-left: var(--canon-space-7); + margin-right: var(--canon-space-7); } .cu-sm-mx-xs { - margin-left: var(--canon-spacing-xs); - margin-right: var(--canon-spacing-xs); + margin-left: var(--canon-space-3); + margin-right: var(--canon-space-3); } .cu-sm-my-2xl { - margin-top: var(--canon-spacing-2xl); - margin-bottom: var(--canon-spacing-2xl); + margin-top: var(--canon-space-8); + margin-bottom: var(--canon-space-8); } .cu-sm-my-2xs { - margin-top: var(--canon-spacing-2xs); - margin-bottom: var(--canon-spacing-2xs); + margin-top: var(--canon-space-2); + margin-bottom: var(--canon-space-2); } .cu-sm-my-lg { - margin-top: var(--canon-spacing-lg); - margin-bottom: var(--canon-spacing-lg); + margin-top: var(--canon-space-6); + margin-bottom: var(--canon-space-6); } .cu-sm-my-md { - margin-top: var(--canon-spacing-md); - margin-bottom: var(--canon-spacing-md); + margin-top: var(--canon-space-5); + margin-bottom: var(--canon-space-5); } .cu-sm-my-none { @@ -599,34 +599,34 @@ } .cu-sm-my-sm { - margin-top: var(--canon-spacing-sm); - margin-bottom: var(--canon-spacing-sm); + margin-top: var(--canon-space-4); + margin-bottom: var(--canon-space-4); } .cu-sm-my-xl { - margin-top: var(--canon-spacing-xl); - margin-bottom: var(--canon-spacing-xl); + margin-top: var(--canon-space-7); + margin-bottom: var(--canon-space-7); } .cu-sm-my-xs { - margin-top: var(--canon-spacing-xs); - margin-bottom: var(--canon-spacing-xs); + margin-top: var(--canon-space-3); + margin-bottom: var(--canon-space-3); } .cu-sm-p-2xl { - padding: var(--canon-spacing-2xl); + padding: var(--canon-space-8); } .cu-sm-p-2xs { - padding: var(--canon-spacing-2xs); + padding: var(--canon-space-2); } .cu-sm-p-lg { - padding: var(--canon-spacing-lg); + padding: var(--canon-space-6); } .cu-sm-p-md { - padding: var(--canon-spacing-md); + padding: var(--canon-space-5); } .cu-sm-p-none { @@ -634,31 +634,31 @@ } .cu-sm-p-sm { - padding: var(--canon-spacing-sm); + padding: var(--canon-space-4); } .cu-sm-p-xl { - padding: var(--canon-spacing-xl); + padding: var(--canon-space-7); } .cu-sm-p-xs { - padding: var(--canon-spacing-xs); + padding: var(--canon-space-3); } .cu-sm-pb-2xl { - padding-bottom: var(--canon-spacing-2xl); + padding-bottom: var(--canon-space-8); } .cu-sm-pb-2xs { - padding-bottom: var(--canon-spacing-2xs); + padding-bottom: var(--canon-space-2); } .cu-sm-pb-lg { - padding-bottom: var(--canon-spacing-lg); + padding-bottom: var(--canon-space-6); } .cu-sm-pb-md { - padding-bottom: var(--canon-spacing-md); + padding-bottom: var(--canon-space-5); } .cu-sm-pb-none { @@ -666,31 +666,31 @@ } .cu-sm-pb-sm { - padding-bottom: var(--canon-spacing-sm); + padding-bottom: var(--canon-space-4); } .cu-sm-pb-xl { - padding-bottom: var(--canon-spacing-xl); + padding-bottom: var(--canon-space-7); } .cu-sm-pb-xs { - padding-bottom: var(--canon-spacing-xs); + padding-bottom: var(--canon-space-3); } .cu-sm-pl-2xl { - padding-left: var(--canon-spacing-2xl); + padding-left: var(--canon-space-8); } .cu-sm-pl-2xs { - padding-left: var(--canon-spacing-2xs); + padding-left: var(--canon-space-2); } .cu-sm-pl-lg { - padding-left: var(--canon-spacing-lg); + padding-left: var(--canon-space-6); } .cu-sm-pl-md { - padding-left: var(--canon-spacing-md); + padding-left: var(--canon-space-5); } .cu-sm-pl-none { @@ -698,31 +698,31 @@ } .cu-sm-pl-sm { - padding-left: var(--canon-spacing-sm); + padding-left: var(--canon-space-4); } .cu-sm-pl-xl { - padding-left: var(--canon-spacing-xl); + padding-left: var(--canon-space-7); } .cu-sm-pl-xs { - padding-left: var(--canon-spacing-xs); + padding-left: var(--canon-space-3); } .cu-sm-pr-2xl { - padding-right: var(--canon-spacing-2xl); + padding-right: var(--canon-space-8); } .cu-sm-pr-2xs { - padding-right: var(--canon-spacing-2xs); + padding-right: var(--canon-space-2); } .cu-sm-pr-lg { - padding-right: var(--canon-spacing-lg); + padding-right: var(--canon-space-6); } .cu-sm-pr-md { - padding-right: var(--canon-spacing-md); + padding-right: var(--canon-space-5); } .cu-sm-pr-none { @@ -730,31 +730,31 @@ } .cu-sm-pr-sm { - padding-right: var(--canon-spacing-sm); + padding-right: var(--canon-space-4); } .cu-sm-pr-xl { - padding-right: var(--canon-spacing-xl); + padding-right: var(--canon-space-7); } .cu-sm-pr-xs { - padding-right: var(--canon-spacing-xs); + padding-right: var(--canon-space-3); } .cu-sm-pt-2xl { - padding-top: var(--canon-spacing-2xl); + padding-top: var(--canon-space-8); } .cu-sm-pt-2xs { - padding-top: var(--canon-spacing-2xs); + padding-top: var(--canon-space-2); } .cu-sm-pt-lg { - padding-top: var(--canon-spacing-lg); + padding-top: var(--canon-space-6); } .cu-sm-pt-md { - padding-top: var(--canon-spacing-md); + padding-top: var(--canon-space-5); } .cu-sm-pt-none { @@ -762,35 +762,35 @@ } .cu-sm-pt-sm { - padding-top: var(--canon-spacing-sm); + padding-top: var(--canon-space-4); } .cu-sm-pt-xl { - padding-top: var(--canon-spacing-xl); + padding-top: var(--canon-space-7); } .cu-sm-pt-xs { - padding-top: var(--canon-spacing-xs); + padding-top: var(--canon-space-3); } .cu-sm-px-2xl { - padding-left: var(--canon-spacing-2xl); - padding-right: var(--canon-spacing-2xl); + padding-left: var(--canon-space-8); + padding-right: var(--canon-space-8); } .cu-sm-px-2xs { - padding-left: var(--canon-spacing-2xs); - padding-right: var(--canon-spacing-2xs); + padding-left: var(--canon-space-2); + padding-right: var(--canon-space-2); } .cu-sm-px-lg { - padding-left: var(--canon-spacing-lg); - padding-right: var(--canon-spacing-lg); + padding-left: var(--canon-space-6); + padding-right: var(--canon-space-6); } .cu-sm-px-md { - padding-left: var(--canon-spacing-md); - padding-right: var(--canon-spacing-md); + padding-left: var(--canon-space-5); + padding-right: var(--canon-space-5); } .cu-sm-px-none { @@ -799,38 +799,38 @@ } .cu-sm-px-sm { - padding-left: var(--canon-spacing-sm); - padding-right: var(--canon-spacing-sm); + padding-left: var(--canon-space-4); + padding-right: var(--canon-space-4); } .cu-sm-px-xl { - padding-left: var(--canon-spacing-xl); - padding-right: var(--canon-spacing-xl); + padding-left: var(--canon-space-7); + padding-right: var(--canon-space-7); } .cu-sm-px-xs { - padding-left: var(--canon-spacing-xs); - padding-right: var(--canon-spacing-xs); + padding-left: var(--canon-space-3); + padding-right: var(--canon-space-3); } .cu-sm-py-2xl { - padding-top: var(--canon-spacing-2xl); - padding-bottom: var(--canon-spacing-2xl); + padding-top: var(--canon-space-8); + padding-bottom: var(--canon-space-8); } .cu-sm-py-2xs { - padding-top: var(--canon-spacing-2xs); - padding-bottom: var(--canon-spacing-2xs); + padding-top: var(--canon-space-2); + padding-bottom: var(--canon-space-2); } .cu-sm-py-lg { - padding-top: var(--canon-spacing-lg); - padding-bottom: var(--canon-spacing-lg); + padding-top: var(--canon-space-6); + padding-bottom: var(--canon-space-6); } .cu-sm-py-md { - padding-top: var(--canon-spacing-md); - padding-bottom: var(--canon-spacing-md); + padding-top: var(--canon-space-5); + padding-bottom: var(--canon-space-5); } .cu-sm-py-none { @@ -839,18 +839,18 @@ } .cu-sm-py-sm { - padding-top: var(--canon-spacing-sm); - padding-bottom: var(--canon-spacing-sm); + padding-top: var(--canon-space-4); + padding-bottom: var(--canon-space-4); } .cu-sm-py-xl { - padding-top: var(--canon-spacing-xl); - padding-bottom: var(--canon-spacing-xl); + padding-top: var(--canon-space-7); + padding-bottom: var(--canon-space-7); } .cu-sm-py-xs { - padding-top: var(--canon-spacing-xs); - padding-bottom: var(--canon-spacing-xs); + padding-top: var(--canon-space-3); + padding-bottom: var(--canon-space-3); } .cu-sm-rounded-2xl { diff --git a/packages/canon/src/css/utilities/xl.css b/packages/canon/src/css/utilities/xl.css index 7d9e3b8add..d52de47e19 100644 --- a/packages/canon/src/css/utilities/xl.css +++ b/packages/canon/src/css/utilities/xl.css @@ -238,15 +238,15 @@ } .cu-xl-gap-2xl { - gap: var(--canon-spacing-2xl); + gap: var(--canon-space-8); } .cu-xl-gap-lg { - gap: var(--canon-spacing-lg); + gap: var(--canon-space-6); } .cu-xl-gap-md { - gap: var(--canon-spacing-md); + gap: var(--canon-space-5); } .cu-xl-gap-none { @@ -254,15 +254,15 @@ } .cu-xl-gap-sm { - gap: var(--canon-spacing-sm); + gap: var(--canon-space-4); } .cu-xl-gap-xl { - gap: var(--canon-spacing-xl); + gap: var(--canon-space-7); } .cu-xl-gap-xs { - gap: var(--canon-spacing-xs); + gap: var(--canon-space-3); } .cu-xl-grid { @@ -374,19 +374,19 @@ } .cu-xl-m-2xl { - margin: var(--canon-spacing-2xl); + margin: var(--canon-space-8); } .cu-xl-m-2xs { - margin: var(--canon-spacing-2xs); + margin: var(--canon-space-2); } .cu-xl-m-lg { - margin: var(--canon-spacing-lg); + margin: var(--canon-space-6); } .cu-xl-m-md { - margin: var(--canon-spacing-md); + margin: var(--canon-space-5); } .cu-xl-m-none { @@ -394,31 +394,31 @@ } .cu-xl-m-sm { - margin: var(--canon-spacing-sm); + margin: var(--canon-space-4); } .cu-xl-m-xl { - margin: var(--canon-spacing-xl); + margin: var(--canon-space-7); } .cu-xl-m-xs { - margin: var(--canon-spacing-xs); + margin: var(--canon-space-3); } .cu-xl-mb-2xl { - margin-bottom: var(--canon-spacing-2xl); + margin-bottom: var(--canon-space-8); } .cu-xl-mb-2xs { - margin-bottom: var(--canon-spacing-2xs); + margin-bottom: var(--canon-space-2); } .cu-xl-mb-lg { - margin-bottom: var(--canon-spacing-lg); + margin-bottom: var(--canon-space-6); } .cu-xl-mb-md { - margin-bottom: var(--canon-spacing-md); + margin-bottom: var(--canon-space-5); } .cu-xl-mb-none { @@ -426,31 +426,31 @@ } .cu-xl-mb-sm { - margin-bottom: var(--canon-spacing-sm); + margin-bottom: var(--canon-space-4); } .cu-xl-mb-xl { - margin-bottom: var(--canon-spacing-xl); + margin-bottom: var(--canon-space-7); } .cu-xl-mb-xs { - margin-bottom: var(--canon-spacing-xs); + margin-bottom: var(--canon-space-3); } .cu-xl-ml-2xl { - margin-left: var(--canon-spacing-2xl); + margin-left: var(--canon-space-8); } .cu-xl-ml-2xs { - margin-left: var(--canon-spacing-2xs); + margin-left: var(--canon-space-2); } .cu-xl-ml-lg { - margin-left: var(--canon-spacing-lg); + margin-left: var(--canon-space-6); } .cu-xl-ml-md { - margin-left: var(--canon-spacing-md); + margin-left: var(--canon-space-5); } .cu-xl-ml-none { @@ -458,31 +458,31 @@ } .cu-xl-ml-sm { - margin-left: var(--canon-spacing-sm); + margin-left: var(--canon-space-4); } .cu-xl-ml-xl { - margin-left: var(--canon-spacing-xl); + margin-left: var(--canon-space-7); } .cu-xl-ml-xs { - margin-left: var(--canon-spacing-xs); + margin-left: var(--canon-space-3); } .cu-xl-mr-2xl { - margin-right: var(--canon-spacing-2xl); + margin-right: var(--canon-space-8); } .cu-xl-mr-2xs { - margin-right: var(--canon-spacing-2xs); + margin-right: var(--canon-space-2); } .cu-xl-mr-lg { - margin-right: var(--canon-spacing-lg); + margin-right: var(--canon-space-6); } .cu-xl-mr-md { - margin-right: var(--canon-spacing-md); + margin-right: var(--canon-space-5); } .cu-xl-mr-none { @@ -490,31 +490,31 @@ } .cu-xl-mr-sm { - margin-right: var(--canon-spacing-sm); + margin-right: var(--canon-space-4); } .cu-xl-mr-xl { - margin-right: var(--canon-spacing-xl); + margin-right: var(--canon-space-7); } .cu-xl-mr-xs { - margin-right: var(--canon-spacing-xs); + margin-right: var(--canon-space-3); } .cu-xl-mt-2xl { - margin-top: var(--canon-spacing-2xl); + margin-top: var(--canon-space-8); } .cu-xl-mt-2xs { - margin-top: var(--canon-spacing-2xs); + margin-top: var(--canon-space-2); } .cu-xl-mt-lg { - margin-top: var(--canon-spacing-lg); + margin-top: var(--canon-space-6); } .cu-xl-mt-md { - margin-top: var(--canon-spacing-md); + margin-top: var(--canon-space-5); } .cu-xl-mt-none { @@ -522,35 +522,35 @@ } .cu-xl-mt-sm { - margin-top: var(--canon-spacing-sm); + margin-top: var(--canon-space-4); } .cu-xl-mt-xl { - margin-top: var(--canon-spacing-xl); + margin-top: var(--canon-space-7); } .cu-xl-mt-xs { - margin-top: var(--canon-spacing-xs); + margin-top: var(--canon-space-3); } .cu-xl-mx-2xl { - margin-left: var(--canon-spacing-2xl); - margin-right: var(--canon-spacing-2xl); + margin-left: var(--canon-space-8); + margin-right: var(--canon-space-8); } .cu-xl-mx-2xs { - margin-left: var(--canon-spacing-2xs); - margin-right: var(--canon-spacing-2xs); + margin-left: var(--canon-space-2); + margin-right: var(--canon-space-2); } .cu-xl-mx-lg { - margin-left: var(--canon-spacing-lg); - margin-right: var(--canon-spacing-lg); + margin-left: var(--canon-space-6); + margin-right: var(--canon-space-6); } .cu-xl-mx-md { - margin-left: var(--canon-spacing-md); - margin-right: var(--canon-spacing-md); + margin-left: var(--canon-space-5); + margin-right: var(--canon-space-5); } .cu-xl-mx-none { @@ -559,38 +559,38 @@ } .cu-xl-mx-sm { - margin-left: var(--canon-spacing-sm); - margin-right: var(--canon-spacing-sm); + margin-left: var(--canon-space-4); + margin-right: var(--canon-space-4); } .cu-xl-mx-xl { - margin-left: var(--canon-spacing-xl); - margin-right: var(--canon-spacing-xl); + margin-left: var(--canon-space-7); + margin-right: var(--canon-space-7); } .cu-xl-mx-xs { - margin-left: var(--canon-spacing-xs); - margin-right: var(--canon-spacing-xs); + margin-left: var(--canon-space-3); + margin-right: var(--canon-space-3); } .cu-xl-my-2xl { - margin-top: var(--canon-spacing-2xl); - margin-bottom: var(--canon-spacing-2xl); + margin-top: var(--canon-space-8); + margin-bottom: var(--canon-space-8); } .cu-xl-my-2xs { - margin-top: var(--canon-spacing-2xs); - margin-bottom: var(--canon-spacing-2xs); + margin-top: var(--canon-space-2); + margin-bottom: var(--canon-space-2); } .cu-xl-my-lg { - margin-top: var(--canon-spacing-lg); - margin-bottom: var(--canon-spacing-lg); + margin-top: var(--canon-space-6); + margin-bottom: var(--canon-space-6); } .cu-xl-my-md { - margin-top: var(--canon-spacing-md); - margin-bottom: var(--canon-spacing-md); + margin-top: var(--canon-space-5); + margin-bottom: var(--canon-space-5); } .cu-xl-my-none { @@ -599,34 +599,34 @@ } .cu-xl-my-sm { - margin-top: var(--canon-spacing-sm); - margin-bottom: var(--canon-spacing-sm); + margin-top: var(--canon-space-4); + margin-bottom: var(--canon-space-4); } .cu-xl-my-xl { - margin-top: var(--canon-spacing-xl); - margin-bottom: var(--canon-spacing-xl); + margin-top: var(--canon-space-7); + margin-bottom: var(--canon-space-7); } .cu-xl-my-xs { - margin-top: var(--canon-spacing-xs); - margin-bottom: var(--canon-spacing-xs); + margin-top: var(--canon-space-3); + margin-bottom: var(--canon-space-3); } .cu-xl-p-2xl { - padding: var(--canon-spacing-2xl); + padding: var(--canon-space-8); } .cu-xl-p-2xs { - padding: var(--canon-spacing-2xs); + padding: var(--canon-space-2); } .cu-xl-p-lg { - padding: var(--canon-spacing-lg); + padding: var(--canon-space-6); } .cu-xl-p-md { - padding: var(--canon-spacing-md); + padding: var(--canon-space-5); } .cu-xl-p-none { @@ -634,31 +634,31 @@ } .cu-xl-p-sm { - padding: var(--canon-spacing-sm); + padding: var(--canon-space-4); } .cu-xl-p-xl { - padding: var(--canon-spacing-xl); + padding: var(--canon-space-7); } .cu-xl-p-xs { - padding: var(--canon-spacing-xs); + padding: var(--canon-space-3); } .cu-xl-pb-2xl { - padding-bottom: var(--canon-spacing-2xl); + padding-bottom: var(--canon-space-8); } .cu-xl-pb-2xs { - padding-bottom: var(--canon-spacing-2xs); + padding-bottom: var(--canon-space-2); } .cu-xl-pb-lg { - padding-bottom: var(--canon-spacing-lg); + padding-bottom: var(--canon-space-6); } .cu-xl-pb-md { - padding-bottom: var(--canon-spacing-md); + padding-bottom: var(--canon-space-5); } .cu-xl-pb-none { @@ -666,31 +666,31 @@ } .cu-xl-pb-sm { - padding-bottom: var(--canon-spacing-sm); + padding-bottom: var(--canon-space-4); } .cu-xl-pb-xl { - padding-bottom: var(--canon-spacing-xl); + padding-bottom: var(--canon-space-7); } .cu-xl-pb-xs { - padding-bottom: var(--canon-spacing-xs); + padding-bottom: var(--canon-space-3); } .cu-xl-pl-2xl { - padding-left: var(--canon-spacing-2xl); + padding-left: var(--canon-space-8); } .cu-xl-pl-2xs { - padding-left: var(--canon-spacing-2xs); + padding-left: var(--canon-space-2); } .cu-xl-pl-lg { - padding-left: var(--canon-spacing-lg); + padding-left: var(--canon-space-6); } .cu-xl-pl-md { - padding-left: var(--canon-spacing-md); + padding-left: var(--canon-space-5); } .cu-xl-pl-none { @@ -698,31 +698,31 @@ } .cu-xl-pl-sm { - padding-left: var(--canon-spacing-sm); + padding-left: var(--canon-space-4); } .cu-xl-pl-xl { - padding-left: var(--canon-spacing-xl); + padding-left: var(--canon-space-7); } .cu-xl-pl-xs { - padding-left: var(--canon-spacing-xs); + padding-left: var(--canon-space-3); } .cu-xl-pr-2xl { - padding-right: var(--canon-spacing-2xl); + padding-right: var(--canon-space-8); } .cu-xl-pr-2xs { - padding-right: var(--canon-spacing-2xs); + padding-right: var(--canon-space-2); } .cu-xl-pr-lg { - padding-right: var(--canon-spacing-lg); + padding-right: var(--canon-space-6); } .cu-xl-pr-md { - padding-right: var(--canon-spacing-md); + padding-right: var(--canon-space-5); } .cu-xl-pr-none { @@ -730,31 +730,31 @@ } .cu-xl-pr-sm { - padding-right: var(--canon-spacing-sm); + padding-right: var(--canon-space-4); } .cu-xl-pr-xl { - padding-right: var(--canon-spacing-xl); + padding-right: var(--canon-space-7); } .cu-xl-pr-xs { - padding-right: var(--canon-spacing-xs); + padding-right: var(--canon-space-3); } .cu-xl-pt-2xl { - padding-top: var(--canon-spacing-2xl); + padding-top: var(--canon-space-8); } .cu-xl-pt-2xs { - padding-top: var(--canon-spacing-2xs); + padding-top: var(--canon-space-2); } .cu-xl-pt-lg { - padding-top: var(--canon-spacing-lg); + padding-top: var(--canon-space-6); } .cu-xl-pt-md { - padding-top: var(--canon-spacing-md); + padding-top: var(--canon-space-5); } .cu-xl-pt-none { @@ -762,35 +762,35 @@ } .cu-xl-pt-sm { - padding-top: var(--canon-spacing-sm); + padding-top: var(--canon-space-4); } .cu-xl-pt-xl { - padding-top: var(--canon-spacing-xl); + padding-top: var(--canon-space-7); } .cu-xl-pt-xs { - padding-top: var(--canon-spacing-xs); + padding-top: var(--canon-space-3); } .cu-xl-px-2xl { - padding-left: var(--canon-spacing-2xl); - padding-right: var(--canon-spacing-2xl); + padding-left: var(--canon-space-8); + padding-right: var(--canon-space-8); } .cu-xl-px-2xs { - padding-left: var(--canon-spacing-2xs); - padding-right: var(--canon-spacing-2xs); + padding-left: var(--canon-space-2); + padding-right: var(--canon-space-2); } .cu-xl-px-lg { - padding-left: var(--canon-spacing-lg); - padding-right: var(--canon-spacing-lg); + padding-left: var(--canon-space-6); + padding-right: var(--canon-space-6); } .cu-xl-px-md { - padding-left: var(--canon-spacing-md); - padding-right: var(--canon-spacing-md); + padding-left: var(--canon-space-5); + padding-right: var(--canon-space-5); } .cu-xl-px-none { @@ -799,38 +799,38 @@ } .cu-xl-px-sm { - padding-left: var(--canon-spacing-sm); - padding-right: var(--canon-spacing-sm); + padding-left: var(--canon-space-4); + padding-right: var(--canon-space-4); } .cu-xl-px-xl { - padding-left: var(--canon-spacing-xl); - padding-right: var(--canon-spacing-xl); + padding-left: var(--canon-space-7); + padding-right: var(--canon-space-7); } .cu-xl-px-xs { - padding-left: var(--canon-spacing-xs); - padding-right: var(--canon-spacing-xs); + padding-left: var(--canon-space-3); + padding-right: var(--canon-space-3); } .cu-xl-py-2xl { - padding-top: var(--canon-spacing-2xl); - padding-bottom: var(--canon-spacing-2xl); + padding-top: var(--canon-space-8); + padding-bottom: var(--canon-space-8); } .cu-xl-py-2xs { - padding-top: var(--canon-spacing-2xs); - padding-bottom: var(--canon-spacing-2xs); + padding-top: var(--canon-space-2); + padding-bottom: var(--canon-space-2); } .cu-xl-py-lg { - padding-top: var(--canon-spacing-lg); - padding-bottom: var(--canon-spacing-lg); + padding-top: var(--canon-space-6); + padding-bottom: var(--canon-space-6); } .cu-xl-py-md { - padding-top: var(--canon-spacing-md); - padding-bottom: var(--canon-spacing-md); + padding-top: var(--canon-space-5); + padding-bottom: var(--canon-space-5); } .cu-xl-py-none { @@ -839,18 +839,18 @@ } .cu-xl-py-sm { - padding-top: var(--canon-spacing-sm); - padding-bottom: var(--canon-spacing-sm); + padding-top: var(--canon-space-4); + padding-bottom: var(--canon-space-4); } .cu-xl-py-xl { - padding-top: var(--canon-spacing-xl); - padding-bottom: var(--canon-spacing-xl); + padding-top: var(--canon-space-7); + padding-bottom: var(--canon-space-7); } .cu-xl-py-xs { - padding-top: var(--canon-spacing-xs); - padding-bottom: var(--canon-spacing-xs); + padding-top: var(--canon-space-3); + padding-bottom: var(--canon-space-3); } .cu-xl-rounded-2xl { diff --git a/packages/canon/src/css/utilities/xs.css b/packages/canon/src/css/utilities/xs.css index 926a2cc627..798cb9f5f7 100644 --- a/packages/canon/src/css/utilities/xs.css +++ b/packages/canon/src/css/utilities/xs.css @@ -237,15 +237,15 @@ } .cu-gap-2xl { - gap: var(--canon-spacing-2xl); + gap: var(--canon-space-8); } .cu-gap-lg { - gap: var(--canon-spacing-lg); + gap: var(--canon-space-6); } .cu-gap-md { - gap: var(--canon-spacing-md); + gap: var(--canon-space-5); } .cu-gap-none { @@ -253,15 +253,15 @@ } .cu-gap-sm { - gap: var(--canon-spacing-sm); + gap: var(--canon-space-4); } .cu-gap-xl { - gap: var(--canon-spacing-xl); + gap: var(--canon-space-7); } .cu-gap-xs { - gap: var(--canon-spacing-xs); + gap: var(--canon-space-3); } .cu-grid { @@ -373,19 +373,19 @@ } .cu-m-2xl { - margin: var(--canon-spacing-2xl); + margin: var(--canon-space-8); } .cu-m-2xs { - margin: var(--canon-spacing-2xs); + margin: var(--canon-space-2); } .cu-m-lg { - margin: var(--canon-spacing-lg); + margin: var(--canon-space-6); } .cu-m-md { - margin: var(--canon-spacing-md); + margin: var(--canon-space-5); } .cu-m-none { @@ -393,31 +393,31 @@ } .cu-m-sm { - margin: var(--canon-spacing-sm); + margin: var(--canon-space-4); } .cu-m-xl { - margin: var(--canon-spacing-xl); + margin: var(--canon-space-7); } .cu-m-xs { - margin: var(--canon-spacing-xs); + margin: var(--canon-space-3); } .cu-mb-2xl { - margin-bottom: var(--canon-spacing-2xl); + margin-bottom: var(--canon-space-8); } .cu-mb-2xs { - margin-bottom: var(--canon-spacing-2xs); + margin-bottom: var(--canon-space-2); } .cu-mb-lg { - margin-bottom: var(--canon-spacing-lg); + margin-bottom: var(--canon-space-6); } .cu-mb-md { - margin-bottom: var(--canon-spacing-md); + margin-bottom: var(--canon-space-5); } .cu-mb-none { @@ -425,31 +425,31 @@ } .cu-mb-sm { - margin-bottom: var(--canon-spacing-sm); + margin-bottom: var(--canon-space-4); } .cu-mb-xl { - margin-bottom: var(--canon-spacing-xl); + margin-bottom: var(--canon-space-7); } .cu-mb-xs { - margin-bottom: var(--canon-spacing-xs); + margin-bottom: var(--canon-space-3); } .cu-ml-2xl { - margin-left: var(--canon-spacing-2xl); + margin-left: var(--canon-space-8); } .cu-ml-2xs { - margin-left: var(--canon-spacing-2xs); + margin-left: var(--canon-space-2); } .cu-ml-lg { - margin-left: var(--canon-spacing-lg); + margin-left: var(--canon-space-6); } .cu-ml-md { - margin-left: var(--canon-spacing-md); + margin-left: var(--canon-space-5); } .cu-ml-none { @@ -457,31 +457,31 @@ } .cu-ml-sm { - margin-left: var(--canon-spacing-sm); + margin-left: var(--canon-space-4); } .cu-ml-xl { - margin-left: var(--canon-spacing-xl); + margin-left: var(--canon-space-7); } .cu-ml-xs { - margin-left: var(--canon-spacing-xs); + margin-left: var(--canon-space-3); } .cu-mr-2xl { - margin-right: var(--canon-spacing-2xl); + margin-right: var(--canon-space-8); } .cu-mr-2xs { - margin-right: var(--canon-spacing-2xs); + margin-right: var(--canon-space-2); } .cu-mr-lg { - margin-right: var(--canon-spacing-lg); + margin-right: var(--canon-space-6); } .cu-mr-md { - margin-right: var(--canon-spacing-md); + margin-right: var(--canon-space-5); } .cu-mr-none { @@ -489,31 +489,31 @@ } .cu-mr-sm { - margin-right: var(--canon-spacing-sm); + margin-right: var(--canon-space-4); } .cu-mr-xl { - margin-right: var(--canon-spacing-xl); + margin-right: var(--canon-space-7); } .cu-mr-xs { - margin-right: var(--canon-spacing-xs); + margin-right: var(--canon-space-3); } .cu-mt-2xl { - margin-top: var(--canon-spacing-2xl); + margin-top: var(--canon-space-8); } .cu-mt-2xs { - margin-top: var(--canon-spacing-2xs); + margin-top: var(--canon-space-2); } .cu-mt-lg { - margin-top: var(--canon-spacing-lg); + margin-top: var(--canon-space-6); } .cu-mt-md { - margin-top: var(--canon-spacing-md); + margin-top: var(--canon-space-5); } .cu-mt-none { @@ -521,35 +521,35 @@ } .cu-mt-sm { - margin-top: var(--canon-spacing-sm); + margin-top: var(--canon-space-4); } .cu-mt-xl { - margin-top: var(--canon-spacing-xl); + margin-top: var(--canon-space-7); } .cu-mt-xs { - margin-top: var(--canon-spacing-xs); + margin-top: var(--canon-space-3); } .cu-mx-2xl { - margin-left: var(--canon-spacing-2xl); - margin-right: var(--canon-spacing-2xl); + margin-left: var(--canon-space-8); + margin-right: var(--canon-space-8); } .cu-mx-2xs { - margin-left: var(--canon-spacing-2xs); - margin-right: var(--canon-spacing-2xs); + margin-left: var(--canon-space-2); + margin-right: var(--canon-space-2); } .cu-mx-lg { - margin-left: var(--canon-spacing-lg); - margin-right: var(--canon-spacing-lg); + margin-left: var(--canon-space-6); + margin-right: var(--canon-space-6); } .cu-mx-md { - margin-left: var(--canon-spacing-md); - margin-right: var(--canon-spacing-md); + margin-left: var(--canon-space-5); + margin-right: var(--canon-space-5); } .cu-mx-none { @@ -558,38 +558,38 @@ } .cu-mx-sm { - margin-left: var(--canon-spacing-sm); - margin-right: var(--canon-spacing-sm); + margin-left: var(--canon-space-4); + margin-right: var(--canon-space-4); } .cu-mx-xl { - margin-left: var(--canon-spacing-xl); - margin-right: var(--canon-spacing-xl); + margin-left: var(--canon-space-7); + margin-right: var(--canon-space-7); } .cu-mx-xs { - margin-left: var(--canon-spacing-xs); - margin-right: var(--canon-spacing-xs); + margin-left: var(--canon-space-3); + margin-right: var(--canon-space-3); } .cu-my-2xl { - margin-top: var(--canon-spacing-2xl); - margin-bottom: var(--canon-spacing-2xl); + margin-top: var(--canon-space-8); + margin-bottom: var(--canon-space-8); } .cu-my-2xs { - margin-top: var(--canon-spacing-2xs); - margin-bottom: var(--canon-spacing-2xs); + margin-top: var(--canon-space-2); + margin-bottom: var(--canon-space-2); } .cu-my-lg { - margin-top: var(--canon-spacing-lg); - margin-bottom: var(--canon-spacing-lg); + margin-top: var(--canon-space-6); + margin-bottom: var(--canon-space-6); } .cu-my-md { - margin-top: var(--canon-spacing-md); - margin-bottom: var(--canon-spacing-md); + margin-top: var(--canon-space-5); + margin-bottom: var(--canon-space-5); } .cu-my-none { @@ -598,34 +598,34 @@ } .cu-my-sm { - margin-top: var(--canon-spacing-sm); - margin-bottom: var(--canon-spacing-sm); + margin-top: var(--canon-space-4); + margin-bottom: var(--canon-space-4); } .cu-my-xl { - margin-top: var(--canon-spacing-xl); - margin-bottom: var(--canon-spacing-xl); + margin-top: var(--canon-space-7); + margin-bottom: var(--canon-space-7); } .cu-my-xs { - margin-top: var(--canon-spacing-xs); - margin-bottom: var(--canon-spacing-xs); + margin-top: var(--canon-space-3); + margin-bottom: var(--canon-space-3); } .cu-p-2xl { - padding: var(--canon-spacing-2xl); + padding: var(--canon-space-8); } .cu-p-2xs { - padding: var(--canon-spacing-2xs); + padding: var(--canon-space-2); } .cu-p-lg { - padding: var(--canon-spacing-lg); + padding: var(--canon-space-6); } .cu-p-md { - padding: var(--canon-spacing-md); + padding: var(--canon-space-5); } .cu-p-none { @@ -633,31 +633,31 @@ } .cu-p-sm { - padding: var(--canon-spacing-sm); + padding: var(--canon-space-4); } .cu-p-xl { - padding: var(--canon-spacing-xl); + padding: var(--canon-space-7); } .cu-p-xs { - padding: var(--canon-spacing-xs); + padding: var(--canon-space-3); } .cu-pb-2xl { - padding-bottom: var(--canon-spacing-2xl); + padding-bottom: var(--canon-space-8); } .cu-pb-2xs { - padding-bottom: var(--canon-spacing-2xs); + padding-bottom: var(--canon-space-2); } .cu-pb-lg { - padding-bottom: var(--canon-spacing-lg); + padding-bottom: var(--canon-space-6); } .cu-pb-md { - padding-bottom: var(--canon-spacing-md); + padding-bottom: var(--canon-space-5); } .cu-pb-none { @@ -665,31 +665,31 @@ } .cu-pb-sm { - padding-bottom: var(--canon-spacing-sm); + padding-bottom: var(--canon-space-4); } .cu-pb-xl { - padding-bottom: var(--canon-spacing-xl); + padding-bottom: var(--canon-space-7); } .cu-pb-xs { - padding-bottom: var(--canon-spacing-xs); + padding-bottom: var(--canon-space-3); } .cu-pl-2xl { - padding-left: var(--canon-spacing-2xl); + padding-left: var(--canon-space-8); } .cu-pl-2xs { - padding-left: var(--canon-spacing-2xs); + padding-left: var(--canon-space-2); } .cu-pl-lg { - padding-left: var(--canon-spacing-lg); + padding-left: var(--canon-space-6); } .cu-pl-md { - padding-left: var(--canon-spacing-md); + padding-left: var(--canon-space-5); } .cu-pl-none { @@ -697,31 +697,31 @@ } .cu-pl-sm { - padding-left: var(--canon-spacing-sm); + padding-left: var(--canon-space-4); } .cu-pl-xl { - padding-left: var(--canon-spacing-xl); + padding-left: var(--canon-space-7); } .cu-pl-xs { - padding-left: var(--canon-spacing-xs); + padding-left: var(--canon-space-3); } .cu-pr-2xl { - padding-right: var(--canon-spacing-2xl); + padding-right: var(--canon-space-8); } .cu-pr-2xs { - padding-right: var(--canon-spacing-2xs); + padding-right: var(--canon-space-2); } .cu-pr-lg { - padding-right: var(--canon-spacing-lg); + padding-right: var(--canon-space-6); } .cu-pr-md { - padding-right: var(--canon-spacing-md); + padding-right: var(--canon-space-5); } .cu-pr-none { @@ -729,31 +729,31 @@ } .cu-pr-sm { - padding-right: var(--canon-spacing-sm); + padding-right: var(--canon-space-4); } .cu-pr-xl { - padding-right: var(--canon-spacing-xl); + padding-right: var(--canon-space-7); } .cu-pr-xs { - padding-right: var(--canon-spacing-xs); + padding-right: var(--canon-space-3); } .cu-pt-2xl { - padding-top: var(--canon-spacing-2xl); + padding-top: var(--canon-space-8); } .cu-pt-2xs { - padding-top: var(--canon-spacing-2xs); + padding-top: var(--canon-space-2); } .cu-pt-lg { - padding-top: var(--canon-spacing-lg); + padding-top: var(--canon-space-6); } .cu-pt-md { - padding-top: var(--canon-spacing-md); + padding-top: var(--canon-space-5); } .cu-pt-none { @@ -761,35 +761,35 @@ } .cu-pt-sm { - padding-top: var(--canon-spacing-sm); + padding-top: var(--canon-space-4); } .cu-pt-xl { - padding-top: var(--canon-spacing-xl); + padding-top: var(--canon-space-7); } .cu-pt-xs { - padding-top: var(--canon-spacing-xs); + padding-top: var(--canon-space-3); } .cu-px-2xl { - padding-left: var(--canon-spacing-2xl); - padding-right: var(--canon-spacing-2xl); + padding-left: var(--canon-space-8); + padding-right: var(--canon-space-8); } .cu-px-2xs { - padding-left: var(--canon-spacing-2xs); - padding-right: var(--canon-spacing-2xs); + padding-left: var(--canon-space-2); + padding-right: var(--canon-space-2); } .cu-px-lg { - padding-left: var(--canon-spacing-lg); - padding-right: var(--canon-spacing-lg); + padding-left: var(--canon-space-6); + padding-right: var(--canon-space-6); } .cu-px-md { - padding-left: var(--canon-spacing-md); - padding-right: var(--canon-spacing-md); + padding-left: var(--canon-space-5); + padding-right: var(--canon-space-5); } .cu-px-none { @@ -798,38 +798,38 @@ } .cu-px-sm { - padding-left: var(--canon-spacing-sm); - padding-right: var(--canon-spacing-sm); + padding-left: var(--canon-space-4); + padding-right: var(--canon-space-4); } .cu-px-xl { - padding-left: var(--canon-spacing-xl); - padding-right: var(--canon-spacing-xl); + padding-left: var(--canon-space-7); + padding-right: var(--canon-space-7); } .cu-px-xs { - padding-left: var(--canon-spacing-xs); - padding-right: var(--canon-spacing-xs); + padding-left: var(--canon-space-3); + padding-right: var(--canon-space-3); } .cu-py-2xl { - padding-top: var(--canon-spacing-2xl); - padding-bottom: var(--canon-spacing-2xl); + padding-top: var(--canon-space-8); + padding-bottom: var(--canon-space-8); } .cu-py-2xs { - padding-top: var(--canon-spacing-2xs); - padding-bottom: var(--canon-spacing-2xs); + padding-top: var(--canon-space-2); + padding-bottom: var(--canon-space-2); } .cu-py-lg { - padding-top: var(--canon-spacing-lg); - padding-bottom: var(--canon-spacing-lg); + padding-top: var(--canon-space-6); + padding-bottom: var(--canon-space-6); } .cu-py-md { - padding-top: var(--canon-spacing-md); - padding-bottom: var(--canon-spacing-md); + padding-top: var(--canon-space-5); + padding-bottom: var(--canon-space-5); } .cu-py-none { @@ -838,18 +838,18 @@ } .cu-py-sm { - padding-top: var(--canon-spacing-sm); - padding-bottom: var(--canon-spacing-sm); + padding-top: var(--canon-space-4); + padding-bottom: var(--canon-space-4); } .cu-py-xl { - padding-top: var(--canon-spacing-xl); - padding-bottom: var(--canon-spacing-xl); + padding-top: var(--canon-space-7); + padding-bottom: var(--canon-space-7); } .cu-py-xs { - padding-top: var(--canon-spacing-xs); - padding-bottom: var(--canon-spacing-xs); + padding-top: var(--canon-space-3); + padding-bottom: var(--canon-space-3); } .cu-rounded-2xl {