diff --git a/core/src/foundations/ionic.root.scss b/core/src/foundations/ionic.root.scss index 687e0a549f..ef0131858a 100644 --- a/core/src/foundations/ionic.root.scss +++ b/core/src/foundations/ionic.root.scss @@ -59,6 +59,7 @@ --ionic-space-600: 24px; --ionic-space-700: 28px; --ionic-space-800: 32px; + --ionic-space-850: 34px; --ionic-space-900: 36px; --ionic-space-1000: 40px; --ionic-space-1200: 48px; @@ -68,6 +69,7 @@ --ionic-border-radius-200: 8px; --ionic-border-radius-300: 12px; --ionic-border-radius-400: 16px; + --ionic-border-radius-500: 20px; --ionic-border-radius-800: 32px; --ionic-border-radius-1000: 40px; --ionic-border-radius-050: 2px; @@ -593,6 +595,7 @@ --ionic-scale-600: 24px; --ionic-scale-700: 28px; --ionic-scale-800: 32px; + --ionic-scale-850: 34px; --ionic-scale-900: 36px; --ionic-scale-1000: 40px; --ionic-scale-1100: 44px; @@ -602,7 +605,10 @@ --ionic-scale-1800: 72px; --ionic-scale-2000: 80px; --ionic-scale-2400: 96px; + --ionic-scale-2800: 112px; --ionic-scale-3200: 128px; + --ionic-scale-3400: 136px; + --ionic-scale-3600: 144px; --ionic-scale-4000: 160px; --ionic-scale-5000: 200px; --ionic-scale-6200: 248px; diff --git a/core/src/foundations/ionic.utility.scss b/core/src/foundations/ionic.utility.scss index 213b6ca918..3d373c1447 100644 --- a/core/src/foundations/ionic.utility.scss +++ b/core/src/foundations/ionic.utility.scss @@ -331,6 +331,24 @@ @include padding($ionic-space-800); } +.ionic-margin-space-850 { + --margin-start: #{$ionic-space-850}; + --margin-end: #{$ionic-space-850}; + --margin-top: #{$ionic-space-850}; + --margin-bottom: #{$ionic-space-850}; + + @include margin($ionic-space-850); +} + +.ionic-padding-space-850 { + --padding-start: #{$ionic-space-850}; + --padding-end: #{$ionic-space-850}; + --padding-top: #{$ionic-space-850}; + --padding-bottom: #{$ionic-space-850}; + + @include padding($ionic-space-850); +} + .ionic-margin-space-900 { --margin-start: #{$ionic-space-900}; --margin-end: #{$ionic-space-900}; @@ -417,6 +435,9 @@ .ionic-border-radius-400 { border-radius: $ionic-border-radius-400; } +.ionic-border-radius-500 { + border-radius: $ionic-border-radius-500; +} .ionic-border-radius-800 { border-radius: $ionic-border-radius-800; } diff --git a/core/src/foundations/ionic.vars.scss b/core/src/foundations/ionic.vars.scss index f08892a3c1..1003309f10 100644 --- a/core/src/foundations/ionic.vars.scss +++ b/core/src/foundations/ionic.vars.scss @@ -90,6 +90,7 @@ $ionic-space-500: var(--ionic-space-500, 20px); $ionic-space-600: var(--ionic-space-600, 24px); $ionic-space-700: var(--ionic-space-700, 28px); $ionic-space-800: var(--ionic-space-800, 32px); +$ionic-space-850: var(--ionic-space-850, 34px); $ionic-space-900: var(--ionic-space-900, 36px); $ionic-space-1000: var(--ionic-space-1000, 40px); $ionic-space-1200: var(--ionic-space-1200, 48px); @@ -99,6 +100,7 @@ $ionic-border-radius-100: var(--ionic-border-radius-100, 4px); $ionic-border-radius-200: var(--ionic-border-radius-200, 8px); $ionic-border-radius-300: var(--ionic-border-radius-300, 12px); $ionic-border-radius-400: var(--ionic-border-radius-400, 16px); +$ionic-border-radius-500: var(--ionic-border-radius-500, 20px); $ionic-border-radius-800: var(--ionic-border-radius-800, 32px); $ionic-border-radius-1000: var(--ionic-border-radius-1000, 40px); $ionic-border-radius-050: var(--ionic-border-radius-050, 2px); @@ -624,6 +626,7 @@ $ionic-scale-500: var(--ionic-scale-500, 20px); $ionic-scale-600: var(--ionic-scale-600, 24px); $ionic-scale-700: var(--ionic-scale-700, 28px); $ionic-scale-800: var(--ionic-scale-800, 32px); +$ionic-scale-850: var(--ionic-scale-850, 34px); $ionic-scale-900: var(--ionic-scale-900, 36px); $ionic-scale-1000: var(--ionic-scale-1000, 40px); $ionic-scale-1100: var(--ionic-scale-1100, 44px); @@ -633,7 +636,10 @@ $ionic-scale-1600: var(--ionic-scale-1600, 64px); $ionic-scale-1800: var(--ionic-scale-1800, 72px); $ionic-scale-2000: var(--ionic-scale-2000, 80px); $ionic-scale-2400: var(--ionic-scale-2400, 96px); +$ionic-scale-2800: var(--ionic-scale-2800, 112px); $ionic-scale-3200: var(--ionic-scale-3200, 128px); +$ionic-scale-3400: var(--ionic-scale-3400, 136px); +$ionic-scale-3600: var(--ionic-scale-3600, 144px); $ionic-scale-4000: var(--ionic-scale-4000, 160px); $ionic-scale-5000: var(--ionic-scale-5000, 200px); $ionic-scale-6200: var(--ionic-scale-6200, 248px); diff --git a/core/src/foundations/tokens.preview.html b/core/src/foundations/tokens.preview.html index be20ee99c0..acaf82b1b3 100644 --- a/core/src/foundations/tokens.preview.html +++ b/core/src/foundations/tokens.preview.html @@ -1657,6 +1657,8 @@