diff --git a/scss/avatars.scss b/scss/avatars.scss index 3535a5d9..fc9721d4 100644 --- a/scss/avatars.scss +++ b/scss/avatars.scss @@ -1,5 +1,5 @@ -$avatar-small-height: 2.75rem; -$avatar-small-width: 2.75rem; +$avatar-small-height: 44px; +$avatar-small-width: 44px; -$avatar-large-height: 5rem; -$avatar-large-width: 5rem; +$avatar-large-height: 80px; +$avatar-large-width: 80px; diff --git a/scss/borders.scss b/scss/borders.scss index 0457a2e2..d0067d50 100644 --- a/scss/borders.scss +++ b/scss/borders.scss @@ -1 +1 @@ -$ux-border-radius: 0.25rem; +$ux-border-radius: 4px; diff --git a/scss/buttons.scss b/scss/buttons.scss index fb641452..b6aaa04b 100644 --- a/scss/buttons.scss +++ b/scss/buttons.scss @@ -26,14 +26,14 @@ $warning: $ux-yellow-400; @mixin btn-focus-outline { box-shadow: none !important; - outline: 0.125rem solid $ux-blue-500; - outline-offset: 0.125rem; + outline: 2px solid $ux-blue-500; + outline-offset: 2px; } @mixin btn-focus-outline--dark-bg { box-shadow: none !important; - outline: 0.125rem solid $ux-white; - outline-offset: 0.125rem; + outline: 2px solid $ux-white; + outline-offset: 2px; } @mixin btn-remove-bootstrap-focus-outline { diff --git a/scss/cards.scss b/scss/cards.scss index b51ceb81..aac18725 100644 --- a/scss/cards.scss +++ b/scss/cards.scss @@ -1,7 +1,7 @@ -$card-xs-spacing: 1rem; -$card-sm-spacing: 1.25rem; -$card-spacing: 1.5rem; -$card-width: 56rem; -$card-width-md: 40rem; -$card-width-sm: 32rem; -$card-width-xs: 15rem; +$card-xs-spacing: 16px; +$card-sm-spacing: 20px; +$card-spacing: 24px; +$card-width: 896px; +$card-width-md: 640px; +$card-width-sm: 512px; +$card-width-xs: 240px; diff --git a/scss/drawer.scss b/scss/drawer.scss index 58962937..3e06de12 100644 --- a/scss/drawer.scss +++ b/scss/drawer.scss @@ -1,3 +1,3 @@ -$drawer-width-small: 32rem; -$drawer-width-medium: 40rem; -$drawer-width-large: 55.625rem; +$drawer-width-small: 512px; +$drawer-width-medium: 640px; +$drawer-width-large: 890px; diff --git a/scss/forms/control_button_group.scss b/scss/forms/control_button_group.scss index bdf65b7f..f059d926 100644 --- a/scss/forms/control_button_group.scss +++ b/scss/forms/control_button_group.scss @@ -2,7 +2,7 @@ display: flex; flex-direction: row; flex-wrap: wrap; - margin-right: -0.5rem; + margin-right: -8px; &--full-width { // This is a min-width because we are using a negative margin-right on the container @@ -15,7 +15,7 @@ .FormControlLabel { flex: 1 1 0; - min-width: 16rem; + min-width: 256px; } } @@ -25,8 +25,8 @@ flex-wrap: wrap; .FormControlLabel--bordered { - padding: 0.3125rem 0.625rem; - margin-right: 0.5rem; + padding: 5px 10px; + margin-right: 8px; input[type='radio'] { display: none; @@ -36,7 +36,7 @@ .FormControlLabel { flex-wrap: wrap; - margin: 0 0.5rem 0.5rem 0; + margin: 0 8px 8px 0; display: block; } } diff --git a/scss/forms/form_control_label.scss b/scss/forms/form_control_label.scss index 882f2f9d..878ed1f3 100644 --- a/scss/forms/form_control_label.scss +++ b/scss/forms/form_control_label.scss @@ -7,7 +7,7 @@ align-items: center; color: $ux-gray-900; display: flex; - margin-bottom: 0.5rem; + margin-bottom: 8px; &--with-children { @include synth-font-type-30--medium; @@ -29,20 +29,20 @@ &__control { display: flex; - margin-right: .5rem; + margin-right: 8px; } &__children { @include synth-font-type-30; - margin-top: 0.5rem; + margin-top: 8px; width: 100%; } &--bordered { border: 1px solid $ux-gray-400; border-radius: $ux-border-radius; - padding: 1rem; + padding: 16px; cursor: pointer; &:hover { @@ -67,8 +67,8 @@ } input[type='checkbox'], input[type='radio'] { - min-height: 1rem; - min-width: 1rem; - margin-top: 0.125rem; + min-height: 16px; + min-width: 16px; + margin-top: 2px; } } diff --git a/scss/forms/form_group.scss b/scss/forms/form_group.scss index 1e255a79..6a06e51e 100644 --- a/scss/forms/form_group.scss +++ b/scss/forms/form_group.scss @@ -7,16 +7,16 @@ align-items: flex-start; display: flex; flex-direction: column; - margin: 0.5rem 0; + margin: 8px 0; &--bordered { border: 1px solid $ux-gray-400; border-radius: $ux-border-radius; - padding: 1rem; + padding: 16px; .InputLabel { @include synth-font-type-30--bold; - margin-bottom: 0.5rem; + margin-bottom: 8px; &__helper-text { @include synth-font-type-30; @@ -41,13 +41,13 @@ flex-direction: row; .InputLabel { - margin-right: 1rem; - margin-bottom: 0.5rem; + margin-right: 16px; + margin-bottom: 8px; } .FormControlLabel { white-space: nowrap; - margin-right: 1rem; + margin-right: 16px; } .FormControlLabel--active { @@ -58,7 +58,7 @@ &__helper-text { @include synth-font-type-20; color: $ux-gray-900; - margin: 0 0 0.75rem; + margin: 0 0 12px; &--pre { white-space: pre-wrap; @@ -68,7 +68,7 @@ &__invalid-feedback { @include synth-font-type-20--medium; color: $ux-red; - padding: .375rem 0; + padding: 6px 0; margin: 0; &__list { @@ -78,7 +78,7 @@ .form-control { @include synth-font-type-30; - height: 2.25rem; + height: 36px; } textarea.form-control { diff --git a/scss/forms/input_label.scss b/scss/forms/input_label.scss index 839584dc..40c49734 100644 --- a/scss/forms/input_label.scss +++ b/scss/forms/input_label.scss @@ -6,7 +6,7 @@ display: flex; align-items: center; flex-wrap: wrap; - margin-bottom: 0.375rem; + margin-bottom: 6px; &__helper-text { @include synth-font-type-10--uppercase; diff --git a/scss/modals.scss b/scss/modals.scss index 08a4f6c1..b252d913 100644 --- a/scss/modals.scss +++ b/scss/modals.scss @@ -1,3 +1,3 @@ -$modal-width-small: 32rem; -$modal-width-medium: 40rem; -$modal-width-large: 55.625rem; +$modal-width-small: 512px; +$modal-width-medium: 640px; +$modal-width-large: 890px; diff --git a/scss/navbar.scss b/scss/navbar.scss index 4e95be74..d2876fb2 100644 --- a/scss/navbar.scss +++ b/scss/navbar.scss @@ -1,3 +1,3 @@ -$ui-header-height: 4.5rem; -$ui-navbar-height: 3rem; +$ui-header-height: 72px; +$ui-navbar-height: 48px; $ui-navbar-height-mobile: $ui-navbar-height; diff --git a/scss/spacing.scss b/scss/spacing.scss index a0a67c2a..8dbf14eb 100644 --- a/scss/spacing.scss +++ b/scss/spacing.scss @@ -1,7 +1,7 @@ -$ux-spacing-10: 0.25rem; -$ux-spacing-20: 0.5rem; -$ux-spacing-30: 0.75rem; -$ux-spacing-40: 1rem; -$ux-spacing-50: 1.5rem; -$ux-spacing-60: 2rem; -$ux-spacing-70: 3rem; +$ux-spacing-10: 4px; +$ux-spacing-20: 8px; +$ux-spacing-30: 12px; +$ux-spacing-40: 16px; +$ux-spacing-50: 24px; +$ux-spacing-60: 32px; +$ux-spacing-70: 48px; diff --git a/spec/__snapshots__/Storyshots.test.js.snap b/spec/__snapshots__/Storyshots.test.js.snap index f253dcef..4faff34f 100644 --- a/spec/__snapshots__/Storyshots.test.js.snap +++ b/spec/__snapshots__/Storyshots.test.js.snap @@ -2570,8 +2570,8 @@ Array [ role="img" style={ Object { - "height": "1rem", - "marginRight": "0.5rem", + "height": "16px", + "marginRight": "8px", } } viewBox="0 0 488 512" @@ -2707,8 +2707,8 @@ Array [ role="img" style={ Object { - "height": "1rem", - "marginRight": "0.5rem", + "height": "16px", + "marginRight": "8px", } } viewBox="0 0 488 512" @@ -3261,7 +3261,7 @@ Array [
, @@ -3370,7 +3370,7 @@ Array [
, @@ -3478,7 +3478,7 @@ Array [
, @@ -5178,7 +5178,7 @@ exports[`Storyshots Components/Card Loading Custom 1`] = ` style={ Object { "--base-color": "#E1E1E1", - "borderRadius": "0.25rem", + "borderRadius": "4px", "width": "100%", } } @@ -5191,7 +5191,7 @@ exports[`Storyshots Components/Card Loading Custom 1`] = ` style={ Object { "--base-color": "#E1E1E1", - "borderRadius": "0.25rem", + "borderRadius": "4px", "width": "100%", } } @@ -5204,7 +5204,7 @@ exports[`Storyshots Components/Card Loading Custom 1`] = ` style={ Object { "--base-color": "#E1E1E1", - "borderRadius": "0.25rem", + "borderRadius": "4px", "width": "100%", } } @@ -5223,7 +5223,7 @@ exports[`Storyshots Components/Card Loading Custom 1`] = ` style={ Object { "--base-color": "#E1E1E1", - "borderRadius": "0.25rem", + "borderRadius": "4px", "width": "100%", } } @@ -5236,7 +5236,7 @@ exports[`Storyshots Components/Card Loading Custom 1`] = ` style={ Object { "--base-color": "#E1E1E1", - "borderRadius": "0.25rem", + "borderRadius": "4px", "width": "100%", } } @@ -5249,7 +5249,7 @@ exports[`Storyshots Components/Card Loading Custom 1`] = ` style={ Object { "--base-color": "#E1E1E1", - "borderRadius": "0.25rem", + "borderRadius": "4px", "width": "calc(100% * 0.5)", } } @@ -5274,7 +5274,7 @@ exports[`Storyshots Components/Card Loading Default 1`] = ` style={ Object { "--base-color": "#E1E1E1", - "borderRadius": "0.25rem", + "borderRadius": "4px", "height": 24, "width": "33%", } @@ -5297,7 +5297,7 @@ exports[`Storyshots Components/Card Loading Default 1`] = ` style={ Object { "--base-color": "#E1E1E1", - "borderRadius": "0.25rem", + "borderRadius": "4px", "width": "100%", } } @@ -5310,7 +5310,7 @@ exports[`Storyshots Components/Card Loading Default 1`] = ` style={ Object { "--base-color": "#E1E1E1", - "borderRadius": "0.25rem", + "borderRadius": "4px", "width": "100%", } } @@ -5323,7 +5323,7 @@ exports[`Storyshots Components/Card Loading Default 1`] = ` style={ Object { "--base-color": "#E1E1E1", - "borderRadius": "0.25rem", + "borderRadius": "4px", "width": "100%", } } @@ -5349,7 +5349,7 @@ exports[`Storyshots Components/Card Loading Paragraph Count 1`] = ` style={ Object { "--base-color": "#E1E1E1", - "borderRadius": "0.25rem", + "borderRadius": "4px", "height": 24, "width": "33%", } @@ -5372,7 +5372,7 @@ exports[`Storyshots Components/Card Loading Paragraph Count 1`] = ` style={ Object { "--base-color": "#E1E1E1", - "borderRadius": "0.25rem", + "borderRadius": "4px", "width": "100%", } } @@ -5385,7 +5385,7 @@ exports[`Storyshots Components/Card Loading Paragraph Count 1`] = ` style={ Object { "--base-color": "#E1E1E1", - "borderRadius": "0.25rem", + "borderRadius": "4px", "width": "100%", } } @@ -5398,7 +5398,7 @@ exports[`Storyshots Components/Card Loading Paragraph Count 1`] = ` style={ Object { "--base-color": "#E1E1E1", - "borderRadius": "0.25rem", + "borderRadius": "4px", "width": "100%", } } @@ -5420,7 +5420,7 @@ exports[`Storyshots Components/Card Loading Paragraph Count 1`] = ` style={ Object { "--base-color": "#E1E1E1", - "borderRadius": "0.25rem", + "borderRadius": "4px", "width": "100%", } } @@ -5433,7 +5433,7 @@ exports[`Storyshots Components/Card Loading Paragraph Count 1`] = ` style={ Object { "--base-color": "#E1E1E1", - "borderRadius": "0.25rem", + "borderRadius": "4px", "width": "100%", } } @@ -5446,7 +5446,7 @@ exports[`Storyshots Components/Card Loading Paragraph Count 1`] = ` style={ Object { "--base-color": "#E1E1E1", - "borderRadius": "0.25rem", + "borderRadius": "4px", "width": "100%", } } @@ -5560,7 +5560,7 @@ exports[`Storyshots Components/CheckboxButton Indeterminate 1`] = ` Object { "display": "flex", "flexDirection": "column", - "rowGap": "1rem", + "rowGap": "16px", } } > @@ -9784,7 +9784,7 @@ exports[`Storyshots Components/LoadingSkeleton Default 1`] = ` style={ Object { "--base-color": "#E1E1E1", - "borderRadius": "0.25rem", + "borderRadius": "4px", "width": "100%", } } @@ -9805,7 +9805,7 @@ exports[`Storyshots Components/LoadingSkeleton Height And Width 1`] = ` style={ Object { "--base-color": "#E1E1E1", - "borderRadius": "0.25rem", + "borderRadius": "4px", "height": "44px", "width": "200px", } @@ -9827,7 +9827,7 @@ exports[`Storyshots Components/LoadingSkeleton Multi Line 1`] = ` style={ Object { "--base-color": "#E1E1E1", - "borderRadius": "0.25rem", + "borderRadius": "4px", "width": "100%", } } @@ -9840,7 +9840,7 @@ exports[`Storyshots Components/LoadingSkeleton Multi Line 1`] = ` style={ Object { "--base-color": "#E1E1E1", - "borderRadius": "0.25rem", + "borderRadius": "4px", "width": "100%", } } @@ -9853,7 +9853,7 @@ exports[`Storyshots Components/LoadingSkeleton Multi Line 1`] = ` style={ Object { "--base-color": "#E1E1E1", - "borderRadius": "0.25rem", + "borderRadius": "4px", "width": "100%", } } @@ -10600,7 +10600,7 @@ exports[`Storyshots Components/Pill Default 1`] = `

@@ -10614,8 +10614,8 @@ exports[`Storyshots Components/Pill Default 1`] = `

@@ -11038,7 +11038,7 @@ Array [ style={ Object { "--base-color": "#E1E1E1", - "borderRadius": "0.25rem", + "borderRadius": "4px", "width": "100%", } } @@ -11051,7 +11051,7 @@ Array [ style={ Object { "--base-color": "#E1E1E1", - "borderRadius": "0.25rem", + "borderRadius": "4px", "width": "100%", } } @@ -11101,7 +11101,7 @@ Array [ style={ Object { "--base-color": "#E1E1E1", - "borderRadius": "0.25rem", + "borderRadius": "4px", "width": "", } } @@ -11114,7 +11114,7 @@ Array [ style={ Object { "--base-color": "#E1E1E1", - "borderRadius": "0.25rem", + "borderRadius": "4px", "width": "", } } @@ -11349,7 +11349,7 @@ Array [ style={ Object { "--base-color": "#E1E1E1", - "borderRadius": "0.25rem", + "borderRadius": "4px", "height": 40, "width": "100%", } @@ -11368,7 +11368,7 @@ Array [ style={ Object { "--base-color": "#E1E1E1", - "borderRadius": "0.25rem", + "borderRadius": "4px", "height": 70, "width": "100%", } @@ -11392,7 +11392,7 @@ Array [ style={ Object { "--base-color": "#E1E1E1", - "borderRadius": "0.25rem", + "borderRadius": "4px", "height": 40, "width": "100%", } @@ -11411,7 +11411,7 @@ Array [ style={ Object { "--base-color": "#E1E1E1", - "borderRadius": "0.25rem", + "borderRadius": "4px", "height": 70, "width": "100%", } @@ -11435,7 +11435,7 @@ Array [ style={ Object { "--base-color": "#E1E1E1", - "borderRadius": "0.25rem", + "borderRadius": "4px", "height": 40, "width": "100%", } @@ -11454,7 +11454,7 @@ Array [ style={ Object { "--base-color": "#E1E1E1", - "borderRadius": "0.25rem", + "borderRadius": "4px", "height": 70, "width": "100%", } @@ -11478,7 +11478,7 @@ Array [ style={ Object { "--base-color": "#E1E1E1", - "borderRadius": "0.25rem", + "borderRadius": "4px", "height": 40, "width": "100%", } @@ -11497,7 +11497,7 @@ Array [ style={ Object { "--base-color": "#E1E1E1", - "borderRadius": "0.25rem", + "borderRadius": "4px", "height": 70, "width": "100%", } @@ -11521,7 +11521,7 @@ Array [ style={ Object { "--base-color": "#E1E1E1", - "borderRadius": "0.25rem", + "borderRadius": "4px", "height": 40, "width": "100%", } @@ -11540,7 +11540,7 @@ Array [ style={ Object { "--base-color": "#E1E1E1", - "borderRadius": "0.25rem", + "borderRadius": "4px", "height": 70, "width": "100%", } @@ -11564,7 +11564,7 @@ Array [ style={ Object { "--base-color": "#E1E1E1", - "borderRadius": "0.25rem", + "borderRadius": "4px", "height": 40, "width": "100%", } @@ -11583,7 +11583,7 @@ Array [ style={ Object { "--base-color": "#E1E1E1", - "borderRadius": "0.25rem", + "borderRadius": "4px", "height": 70, "width": "100%", } @@ -11621,7 +11621,7 @@ exports[`Storyshots Components/Selects/Async Default 1`] = ` className="css-1f43avz-a11yText-A11yText" />
@@ -11743,7 +11743,7 @@ exports[`Storyshots Components/Selects/AsyncCreatable Default 1`] = ` className="css-1f43avz-a11yText-A11yText" />
@@ -11910,7 +11910,7 @@ exports[`Storyshots Components/Selects/AsyncCreatable In Modal 1`] = ` className="css-1f43avz-a11yText-A11yText" />
@@ -12043,7 +12043,7 @@ exports[`Storyshots Components/Selects/Creatable Default 1`] = ` className="css-1f43avz-a11yText-A11yText" />
@@ -12165,7 +12165,7 @@ exports[`Storyshots Components/Selects/Single Custom Option With Checkbox 1`] = className="css-1f43avz-a11yText-A11yText" />
@@ -12252,7 +12252,7 @@ exports[`Storyshots Components/Selects/Single Custom Option With Description 1`] className="css-1f43avz-a11yText-A11yText" />
@@ -12339,7 +12339,7 @@ exports[`Storyshots Components/Selects/Single Custom Option With Indeterminate C className="css-1f43avz-a11yText-A11yText" />
@@ -12426,7 +12426,7 @@ exports[`Storyshots Components/Selects/Single Custom Value Container 1`] = ` className="css-1f43avz-a11yText-A11yText" />
@@ -12513,7 +12513,7 @@ exports[`Storyshots Components/Selects/Single Default 1`] = ` className="css-1f43avz-a11yText-A11yText" />
@@ -12600,7 +12600,7 @@ exports[`Storyshots Components/Selects/Single Grouped Options 1`] = ` className="css-1f43avz-a11yText-A11yText" />
@@ -12698,7 +12698,7 @@ exports[`Storyshots Components/Selects/Single Loading 1`] = ` className="css-1f43avz-a11yText-A11yText" />
@@ -12785,7 +12785,7 @@ exports[`Storyshots Components/Selects/Single Multiple Select 1`] = ` className="css-1f43avz-a11yText-A11yText" />
@@ -12872,7 +12872,7 @@ exports[`Storyshots Components/Selects/Single Searchable 1`] = ` className="css-1f43avz-a11yText-A11yText" />
@@ -13840,7 +13840,7 @@ Array [ style={ Object { "--base-color": "#E1E1E1", - "borderRadius": "0.25rem", + "borderRadius": "4px", "width": 75, } } @@ -13858,7 +13858,7 @@ Array [ style={ Object { "--base-color": "#E1E1E1", - "borderRadius": "0.25rem", + "borderRadius": "4px", "width": 100, } } @@ -13876,7 +13876,7 @@ Array [ style={ Object { "--base-color": "#E1E1E1", - "borderRadius": "0.25rem", + "borderRadius": "4px", "width": 250, } } @@ -13894,7 +13894,7 @@ Array [ style={ Object { "--base-color": "#E1E1E1", - "borderRadius": "0.25rem", + "borderRadius": "4px", "width": 250, } } @@ -13912,7 +13912,7 @@ Array [ style={ Object { "--base-color": "#E1E1E1", - "borderRadius": "0.25rem", + "borderRadius": "4px", "width": 100, } } @@ -13946,7 +13946,7 @@ Array [ style={ Object { "--base-color": "#E1E1E1", - "borderRadius": "0.25rem", + "borderRadius": "4px", "width": 75, } } @@ -13964,7 +13964,7 @@ Array [ style={ Object { "--base-color": "#E1E1E1", - "borderRadius": "0.25rem", + "borderRadius": "4px", "width": 100, } } @@ -13982,7 +13982,7 @@ Array [ style={ Object { "--base-color": "#E1E1E1", - "borderRadius": "0.25rem", + "borderRadius": "4px", "width": 250, } } @@ -14000,7 +14000,7 @@ Array [ style={ Object { "--base-color": "#E1E1E1", - "borderRadius": "0.25rem", + "borderRadius": "4px", "width": 250, } } @@ -14018,7 +14018,7 @@ Array [ style={ Object { "--base-color": "#E1E1E1", - "borderRadius": "0.25rem", + "borderRadius": "4px", "width": 100, } } @@ -14052,7 +14052,7 @@ Array [ style={ Object { "--base-color": "#E1E1E1", - "borderRadius": "0.25rem", + "borderRadius": "4px", "width": 75, } } @@ -14070,7 +14070,7 @@ Array [ style={ Object { "--base-color": "#E1E1E1", - "borderRadius": "0.25rem", + "borderRadius": "4px", "width": 100, } } @@ -14088,7 +14088,7 @@ Array [ style={ Object { "--base-color": "#E1E1E1", - "borderRadius": "0.25rem", + "borderRadius": "4px", "width": 250, } } @@ -14106,7 +14106,7 @@ Array [ style={ Object { "--base-color": "#E1E1E1", - "borderRadius": "0.25rem", + "borderRadius": "4px", "width": 250, } } @@ -14124,7 +14124,7 @@ Array [ style={ Object { "--base-color": "#E1E1E1", - "borderRadius": "0.25rem", + "borderRadius": "4px", "width": 100, } } @@ -14158,7 +14158,7 @@ Array [ style={ Object { "--base-color": "#E1E1E1", - "borderRadius": "0.25rem", + "borderRadius": "4px", "width": 75, } } @@ -14176,7 +14176,7 @@ Array [ style={ Object { "--base-color": "#E1E1E1", - "borderRadius": "0.25rem", + "borderRadius": "4px", "width": 100, } } @@ -14194,7 +14194,7 @@ Array [ style={ Object { "--base-color": "#E1E1E1", - "borderRadius": "0.25rem", + "borderRadius": "4px", "width": 250, } } @@ -14212,7 +14212,7 @@ Array [ style={ Object { "--base-color": "#E1E1E1", - "borderRadius": "0.25rem", + "borderRadius": "4px", "width": 250, } } @@ -14230,7 +14230,7 @@ Array [ style={ Object { "--base-color": "#E1E1E1", - "borderRadius": "0.25rem", + "borderRadius": "4px", "width": 100, } } @@ -14269,7 +14269,7 @@ Array [ style={ Object { "--base-color": "#E1E1E1", - "borderRadius": "0.25rem", + "borderRadius": "4px", "width": 75, } } @@ -14287,7 +14287,7 @@ Array [ style={ Object { "--base-color": "#E1E1E1", - "borderRadius": "0.25rem", + "borderRadius": "4px", "width": 75, } } @@ -14305,7 +14305,7 @@ Array [ style={ Object { "--base-color": "#E1E1E1", - "borderRadius": "0.25rem", + "borderRadius": "4px", "width": 150, } } @@ -14323,7 +14323,7 @@ Array [ style={ Object { "--base-color": "#E1E1E1", - "borderRadius": "0.25rem", + "borderRadius": "4px", "width": 150, } } @@ -14341,7 +14341,7 @@ Array [ style={ Object { "--base-color": "#E1E1E1", - "borderRadius": "0.25rem", + "borderRadius": "4px", "width": 250, } } @@ -14359,7 +14359,7 @@ Array [ style={ Object { "--base-color": "#E1E1E1", - "borderRadius": "0.25rem", + "borderRadius": "4px", "width": 250, } } @@ -14377,7 +14377,7 @@ Array [ style={ Object { "--base-color": "#E1E1E1", - "borderRadius": "0.25rem", + "borderRadius": "4px", "width": 250, } } @@ -14411,7 +14411,7 @@ Array [ style={ Object { "--base-color": "#E1E1E1", - "borderRadius": "0.25rem", + "borderRadius": "4px", "width": 75, } } @@ -14429,7 +14429,7 @@ Array [ style={ Object { "--base-color": "#E1E1E1", - "borderRadius": "0.25rem", + "borderRadius": "4px", "width": 75, } } @@ -14447,7 +14447,7 @@ Array [ style={ Object { "--base-color": "#E1E1E1", - "borderRadius": "0.25rem", + "borderRadius": "4px", "width": 150, } } @@ -14465,7 +14465,7 @@ Array [ style={ Object { "--base-color": "#E1E1E1", - "borderRadius": "0.25rem", + "borderRadius": "4px", "width": 150, } } @@ -14483,7 +14483,7 @@ Array [ style={ Object { "--base-color": "#E1E1E1", - "borderRadius": "0.25rem", + "borderRadius": "4px", "width": 250, } } @@ -14501,7 +14501,7 @@ Array [ style={ Object { "--base-color": "#E1E1E1", - "borderRadius": "0.25rem", + "borderRadius": "4px", "width": 250, } } @@ -14519,7 +14519,7 @@ Array [ style={ Object { "--base-color": "#E1E1E1", - "borderRadius": "0.25rem", + "borderRadius": "4px", "width": 250, } } @@ -14553,7 +14553,7 @@ Array [ style={ Object { "--base-color": "#E1E1E1", - "borderRadius": "0.25rem", + "borderRadius": "4px", "width": 75, } } @@ -14571,7 +14571,7 @@ Array [ style={ Object { "--base-color": "#E1E1E1", - "borderRadius": "0.25rem", + "borderRadius": "4px", "width": 75, } } @@ -14589,7 +14589,7 @@ Array [ style={ Object { "--base-color": "#E1E1E1", - "borderRadius": "0.25rem", + "borderRadius": "4px", "width": 150, } } @@ -14607,7 +14607,7 @@ Array [ style={ Object { "--base-color": "#E1E1E1", - "borderRadius": "0.25rem", + "borderRadius": "4px", "width": 150, } } @@ -14625,7 +14625,7 @@ Array [ style={ Object { "--base-color": "#E1E1E1", - "borderRadius": "0.25rem", + "borderRadius": "4px", "width": 250, } } @@ -14643,7 +14643,7 @@ Array [ style={ Object { "--base-color": "#E1E1E1", - "borderRadius": "0.25rem", + "borderRadius": "4px", "width": 250, } } @@ -14661,7 +14661,7 @@ Array [ style={ Object { "--base-color": "#E1E1E1", - "borderRadius": "0.25rem", + "borderRadius": "4px", "width": 250, } } @@ -14695,7 +14695,7 @@ Array [ style={ Object { "--base-color": "#E1E1E1", - "borderRadius": "0.25rem", + "borderRadius": "4px", "width": 75, } } @@ -14713,7 +14713,7 @@ Array [ style={ Object { "--base-color": "#E1E1E1", - "borderRadius": "0.25rem", + "borderRadius": "4px", "width": 75, } } @@ -14731,7 +14731,7 @@ Array [ style={ Object { "--base-color": "#E1E1E1", - "borderRadius": "0.25rem", + "borderRadius": "4px", "width": 150, } } @@ -14749,7 +14749,7 @@ Array [ style={ Object { "--base-color": "#E1E1E1", - "borderRadius": "0.25rem", + "borderRadius": "4px", "width": 150, } } @@ -14767,7 +14767,7 @@ Array [ style={ Object { "--base-color": "#E1E1E1", - "borderRadius": "0.25rem", + "borderRadius": "4px", "width": 250, } } @@ -14785,7 +14785,7 @@ Array [ style={ Object { "--base-color": "#E1E1E1", - "borderRadius": "0.25rem", + "borderRadius": "4px", "width": 250, } } @@ -14803,7 +14803,7 @@ Array [ style={ Object { "--base-color": "#E1E1E1", - "borderRadius": "0.25rem", + "borderRadius": "4px", "width": 250, } } @@ -14837,7 +14837,7 @@ Array [ style={ Object { "--base-color": "#E1E1E1", - "borderRadius": "0.25rem", + "borderRadius": "4px", "width": 75, } } @@ -14855,7 +14855,7 @@ Array [ style={ Object { "--base-color": "#E1E1E1", - "borderRadius": "0.25rem", + "borderRadius": "4px", "width": 75, } } @@ -14873,7 +14873,7 @@ Array [ style={ Object { "--base-color": "#E1E1E1", - "borderRadius": "0.25rem", + "borderRadius": "4px", "width": 150, } } @@ -14891,7 +14891,7 @@ Array [ style={ Object { "--base-color": "#E1E1E1", - "borderRadius": "0.25rem", + "borderRadius": "4px", "width": 150, } } @@ -14909,7 +14909,7 @@ Array [ style={ Object { "--base-color": "#E1E1E1", - "borderRadius": "0.25rem", + "borderRadius": "4px", "width": 250, } } @@ -14927,7 +14927,7 @@ Array [ style={ Object { "--base-color": "#E1E1E1", - "borderRadius": "0.25rem", + "borderRadius": "4px", "width": 250, } } @@ -14945,7 +14945,7 @@ Array [ style={ Object { "--base-color": "#E1E1E1", - "borderRadius": "0.25rem", + "borderRadius": "4px", "width": 250, } } @@ -14979,7 +14979,7 @@ Array [ style={ Object { "--base-color": "#E1E1E1", - "borderRadius": "0.25rem", + "borderRadius": "4px", "width": 75, } } @@ -14997,7 +14997,7 @@ Array [ style={ Object { "--base-color": "#E1E1E1", - "borderRadius": "0.25rem", + "borderRadius": "4px", "width": 75, } } @@ -15015,7 +15015,7 @@ Array [ style={ Object { "--base-color": "#E1E1E1", - "borderRadius": "0.25rem", + "borderRadius": "4px", "width": 150, } } @@ -15033,7 +15033,7 @@ Array [ style={ Object { "--base-color": "#E1E1E1", - "borderRadius": "0.25rem", + "borderRadius": "4px", "width": 150, } } @@ -15051,7 +15051,7 @@ Array [ style={ Object { "--base-color": "#E1E1E1", - "borderRadius": "0.25rem", + "borderRadius": "4px", "width": 250, } } @@ -15069,7 +15069,7 @@ Array [ style={ Object { "--base-color": "#E1E1E1", - "borderRadius": "0.25rem", + "borderRadius": "4px", "width": 250, } } @@ -15087,7 +15087,7 @@ Array [ style={ Object { "--base-color": "#E1E1E1", - "borderRadius": "0.25rem", + "borderRadius": "4px", "width": 250, } } @@ -15121,7 +15121,7 @@ Array [ style={ Object { "--base-color": "#E1E1E1", - "borderRadius": "0.25rem", + "borderRadius": "4px", "width": 75, } } @@ -15139,7 +15139,7 @@ Array [ style={ Object { "--base-color": "#E1E1E1", - "borderRadius": "0.25rem", + "borderRadius": "4px", "width": 75, } } @@ -15157,7 +15157,7 @@ Array [ style={ Object { "--base-color": "#E1E1E1", - "borderRadius": "0.25rem", + "borderRadius": "4px", "width": 150, } } @@ -15175,7 +15175,7 @@ Array [ style={ Object { "--base-color": "#E1E1E1", - "borderRadius": "0.25rem", + "borderRadius": "4px", "width": 150, } } @@ -15193,7 +15193,7 @@ Array [ style={ Object { "--base-color": "#E1E1E1", - "borderRadius": "0.25rem", + "borderRadius": "4px", "width": 250, } } @@ -15211,7 +15211,7 @@ Array [ style={ Object { "--base-color": "#E1E1E1", - "borderRadius": "0.25rem", + "borderRadius": "4px", "width": 250, } } @@ -15229,7 +15229,7 @@ Array [ style={ Object { "--base-color": "#E1E1E1", - "borderRadius": "0.25rem", + "borderRadius": "4px", "width": 250, } } @@ -25751,7 +25751,7 @@ exports[`Storyshots Foundations/Color Palette Blue 1`] = ` style={ Object { "display": "flex", - "height": "20rem", + "height": "320px", "width": "100%", } } @@ -25771,8 +25771,8 @@ exports[`Storyshots Foundations/Color Palette Blue 1`] = ` "backgroundColor": "#FFF", "color": "#000", "fontSize": "0.75rem", - "margin": "1rem", - "padding": "0.25rem", + "margin": "16px", + "padding": "4px", "textAlign": "center", } } @@ -25800,8 +25800,8 @@ exports[`Storyshots Foundations/Color Palette Blue 1`] = ` "backgroundColor": "#FFF", "color": "#000", "fontSize": "0.75rem", - "margin": "1rem", - "padding": "0.25rem", + "margin": "16px", + "padding": "4px", "textAlign": "center", } } @@ -25829,8 +25829,8 @@ exports[`Storyshots Foundations/Color Palette Blue 1`] = ` "backgroundColor": "#FFF", "color": "#000", "fontSize": "0.75rem", - "margin": "1rem", - "padding": "0.25rem", + "margin": "16px", + "padding": "4px", "textAlign": "center", } } @@ -25858,8 +25858,8 @@ exports[`Storyshots Foundations/Color Palette Blue 1`] = ` "backgroundColor": "#FFF", "color": "#000", "fontSize": "0.75rem", - "margin": "1rem", - "padding": "0.25rem", + "margin": "16px", + "padding": "4px", "textAlign": "center", } } @@ -25887,8 +25887,8 @@ exports[`Storyshots Foundations/Color Palette Blue 1`] = ` "backgroundColor": "#FFF", "color": "#000", "fontSize": "0.75rem", - "margin": "1rem", - "padding": "0.25rem", + "margin": "16px", + "padding": "4px", "textAlign": "center", } } @@ -25916,8 +25916,8 @@ exports[`Storyshots Foundations/Color Palette Blue 1`] = ` "backgroundColor": "#FFF", "color": "#000", "fontSize": "0.75rem", - "margin": "1rem", - "padding": "0.25rem", + "margin": "16px", + "padding": "4px", "textAlign": "center", } } @@ -25945,8 +25945,8 @@ exports[`Storyshots Foundations/Color Palette Blue 1`] = ` "backgroundColor": "#FFF", "color": "#000", "fontSize": "0.75rem", - "margin": "1rem", - "padding": "0.25rem", + "margin": "16px", + "padding": "4px", "textAlign": "center", } } @@ -25974,8 +25974,8 @@ exports[`Storyshots Foundations/Color Palette Blue 1`] = ` "backgroundColor": "#FFF", "color": "#000", "fontSize": "0.75rem", - "margin": "1rem", - "padding": "0.25rem", + "margin": "16px", + "padding": "4px", "textAlign": "center", } } @@ -26003,8 +26003,8 @@ exports[`Storyshots Foundations/Color Palette Blue 1`] = ` "backgroundColor": "#FFF", "color": "#000", "fontSize": "0.75rem", - "margin": "1rem", - "padding": "0.25rem", + "margin": "16px", + "padding": "4px", "textAlign": "center", } } @@ -26025,7 +26025,7 @@ exports[`Storyshots Foundations/Color Palette Emerald 1`] = ` style={ Object { "display": "flex", - "height": "20rem", + "height": "320px", "width": "100%", } } @@ -26045,8 +26045,8 @@ exports[`Storyshots Foundations/Color Palette Emerald 1`] = ` "backgroundColor": "#FFF", "color": "#000", "fontSize": "0.75rem", - "margin": "1rem", - "padding": "0.25rem", + "margin": "16px", + "padding": "4px", "textAlign": "center", } } @@ -26074,8 +26074,8 @@ exports[`Storyshots Foundations/Color Palette Emerald 1`] = ` "backgroundColor": "#FFF", "color": "#000", "fontSize": "0.75rem", - "margin": "1rem", - "padding": "0.25rem", + "margin": "16px", + "padding": "4px", "textAlign": "center", } } @@ -26103,8 +26103,8 @@ exports[`Storyshots Foundations/Color Palette Emerald 1`] = ` "backgroundColor": "#FFF", "color": "#000", "fontSize": "0.75rem", - "margin": "1rem", - "padding": "0.25rem", + "margin": "16px", + "padding": "4px", "textAlign": "center", } } @@ -26132,8 +26132,8 @@ exports[`Storyshots Foundations/Color Palette Emerald 1`] = ` "backgroundColor": "#FFF", "color": "#000", "fontSize": "0.75rem", - "margin": "1rem", - "padding": "0.25rem", + "margin": "16px", + "padding": "4px", "textAlign": "center", } } @@ -26161,8 +26161,8 @@ exports[`Storyshots Foundations/Color Palette Emerald 1`] = ` "backgroundColor": "#FFF", "color": "#000", "fontSize": "0.75rem", - "margin": "1rem", - "padding": "0.25rem", + "margin": "16px", + "padding": "4px", "textAlign": "center", } } @@ -26190,8 +26190,8 @@ exports[`Storyshots Foundations/Color Palette Emerald 1`] = ` "backgroundColor": "#FFF", "color": "#000", "fontSize": "0.75rem", - "margin": "1rem", - "padding": "0.25rem", + "margin": "16px", + "padding": "4px", "textAlign": "center", } } @@ -26219,8 +26219,8 @@ exports[`Storyshots Foundations/Color Palette Emerald 1`] = ` "backgroundColor": "#FFF", "color": "#000", "fontSize": "0.75rem", - "margin": "1rem", - "padding": "0.25rem", + "margin": "16px", + "padding": "4px", "textAlign": "center", } } @@ -26248,8 +26248,8 @@ exports[`Storyshots Foundations/Color Palette Emerald 1`] = ` "backgroundColor": "#FFF", "color": "#000", "fontSize": "0.75rem", - "margin": "1rem", - "padding": "0.25rem", + "margin": "16px", + "padding": "4px", "textAlign": "center", } } @@ -26277,8 +26277,8 @@ exports[`Storyshots Foundations/Color Palette Emerald 1`] = ` "backgroundColor": "#FFF", "color": "#000", "fontSize": "0.75rem", - "margin": "1rem", - "padding": "0.25rem", + "margin": "16px", + "padding": "4px", "textAlign": "center", } } @@ -26299,7 +26299,7 @@ exports[`Storyshots Foundations/Color Palette Gray 1`] = ` style={ Object { "display": "flex", - "height": "20rem", + "height": "320px", "width": "100%", } } @@ -26319,8 +26319,8 @@ exports[`Storyshots Foundations/Color Palette Gray 1`] = ` "backgroundColor": "#FFF", "color": "#000", "fontSize": "0.75rem", - "margin": "1rem", - "padding": "0.25rem", + "margin": "16px", + "padding": "4px", "textAlign": "center", } } @@ -26348,8 +26348,8 @@ exports[`Storyshots Foundations/Color Palette Gray 1`] = ` "backgroundColor": "#FFF", "color": "#000", "fontSize": "0.75rem", - "margin": "1rem", - "padding": "0.25rem", + "margin": "16px", + "padding": "4px", "textAlign": "center", } } @@ -26377,8 +26377,8 @@ exports[`Storyshots Foundations/Color Palette Gray 1`] = ` "backgroundColor": "#FFF", "color": "#000", "fontSize": "0.75rem", - "margin": "1rem", - "padding": "0.25rem", + "margin": "16px", + "padding": "4px", "textAlign": "center", } } @@ -26406,8 +26406,8 @@ exports[`Storyshots Foundations/Color Palette Gray 1`] = ` "backgroundColor": "#FFF", "color": "#000", "fontSize": "0.75rem", - "margin": "1rem", - "padding": "0.25rem", + "margin": "16px", + "padding": "4px", "textAlign": "center", } } @@ -26435,8 +26435,8 @@ exports[`Storyshots Foundations/Color Palette Gray 1`] = ` "backgroundColor": "#FFF", "color": "#000", "fontSize": "0.75rem", - "margin": "1rem", - "padding": "0.25rem", + "margin": "16px", + "padding": "4px", "textAlign": "center", } } @@ -26464,8 +26464,8 @@ exports[`Storyshots Foundations/Color Palette Gray 1`] = ` "backgroundColor": "#FFF", "color": "#000", "fontSize": "0.75rem", - "margin": "1rem", - "padding": "0.25rem", + "margin": "16px", + "padding": "4px", "textAlign": "center", } } @@ -26493,8 +26493,8 @@ exports[`Storyshots Foundations/Color Palette Gray 1`] = ` "backgroundColor": "#FFF", "color": "#000", "fontSize": "0.75rem", - "margin": "1rem", - "padding": "0.25rem", + "margin": "16px", + "padding": "4px", "textAlign": "center", } } @@ -26522,8 +26522,8 @@ exports[`Storyshots Foundations/Color Palette Gray 1`] = ` "backgroundColor": "#FFF", "color": "#000", "fontSize": "0.75rem", - "margin": "1rem", - "padding": "0.25rem", + "margin": "16px", + "padding": "4px", "textAlign": "center", } } @@ -26551,8 +26551,8 @@ exports[`Storyshots Foundations/Color Palette Gray 1`] = ` "backgroundColor": "#FFF", "color": "#000", "fontSize": "0.75rem", - "margin": "1rem", - "padding": "0.25rem", + "margin": "16px", + "padding": "4px", "textAlign": "center", } } @@ -26573,7 +26573,7 @@ exports[`Storyshots Foundations/Color Palette Green 1`] = ` style={ Object { "display": "flex", - "height": "20rem", + "height": "320px", "width": "100%", } } @@ -26593,8 +26593,8 @@ exports[`Storyshots Foundations/Color Palette Green 1`] = ` "backgroundColor": "#FFF", "color": "#000", "fontSize": "0.75rem", - "margin": "1rem", - "padding": "0.25rem", + "margin": "16px", + "padding": "4px", "textAlign": "center", } } @@ -26622,8 +26622,8 @@ exports[`Storyshots Foundations/Color Palette Green 1`] = ` "backgroundColor": "#FFF", "color": "#000", "fontSize": "0.75rem", - "margin": "1rem", - "padding": "0.25rem", + "margin": "16px", + "padding": "4px", "textAlign": "center", } } @@ -26651,8 +26651,8 @@ exports[`Storyshots Foundations/Color Palette Green 1`] = ` "backgroundColor": "#FFF", "color": "#000", "fontSize": "0.75rem", - "margin": "1rem", - "padding": "0.25rem", + "margin": "16px", + "padding": "4px", "textAlign": "center", } } @@ -26680,8 +26680,8 @@ exports[`Storyshots Foundations/Color Palette Green 1`] = ` "backgroundColor": "#FFF", "color": "#000", "fontSize": "0.75rem", - "margin": "1rem", - "padding": "0.25rem", + "margin": "16px", + "padding": "4px", "textAlign": "center", } } @@ -26709,8 +26709,8 @@ exports[`Storyshots Foundations/Color Palette Green 1`] = ` "backgroundColor": "#FFF", "color": "#000", "fontSize": "0.75rem", - "margin": "1rem", - "padding": "0.25rem", + "margin": "16px", + "padding": "4px", "textAlign": "center", } } @@ -26738,8 +26738,8 @@ exports[`Storyshots Foundations/Color Palette Green 1`] = ` "backgroundColor": "#FFF", "color": "#000", "fontSize": "0.75rem", - "margin": "1rem", - "padding": "0.25rem", + "margin": "16px", + "padding": "4px", "textAlign": "center", } } @@ -26767,8 +26767,8 @@ exports[`Storyshots Foundations/Color Palette Green 1`] = ` "backgroundColor": "#FFF", "color": "#000", "fontSize": "0.75rem", - "margin": "1rem", - "padding": "0.25rem", + "margin": "16px", + "padding": "4px", "textAlign": "center", } } @@ -26796,8 +26796,8 @@ exports[`Storyshots Foundations/Color Palette Green 1`] = ` "backgroundColor": "#FFF", "color": "#000", "fontSize": "0.75rem", - "margin": "1rem", - "padding": "0.25rem", + "margin": "16px", + "padding": "4px", "textAlign": "center", } } @@ -26825,8 +26825,8 @@ exports[`Storyshots Foundations/Color Palette Green 1`] = ` "backgroundColor": "#FFF", "color": "#000", "fontSize": "0.75rem", - "margin": "1rem", - "padding": "0.25rem", + "margin": "16px", + "padding": "4px", "textAlign": "center", } } @@ -26847,7 +26847,7 @@ exports[`Storyshots Foundations/Color Palette Navy 1`] = ` style={ Object { "display": "flex", - "height": "20rem", + "height": "320px", "width": "100%", } } @@ -26867,8 +26867,8 @@ exports[`Storyshots Foundations/Color Palette Navy 1`] = ` "backgroundColor": "#FFF", "color": "#000", "fontSize": "0.75rem", - "margin": "1rem", - "padding": "0.25rem", + "margin": "16px", + "padding": "4px", "textAlign": "center", } } @@ -26896,8 +26896,8 @@ exports[`Storyshots Foundations/Color Palette Navy 1`] = ` "backgroundColor": "#FFF", "color": "#000", "fontSize": "0.75rem", - "margin": "1rem", - "padding": "0.25rem", + "margin": "16px", + "padding": "4px", "textAlign": "center", } } @@ -26925,8 +26925,8 @@ exports[`Storyshots Foundations/Color Palette Navy 1`] = ` "backgroundColor": "#FFF", "color": "#000", "fontSize": "0.75rem", - "margin": "1rem", - "padding": "0.25rem", + "margin": "16px", + "padding": "4px", "textAlign": "center", } } @@ -26954,8 +26954,8 @@ exports[`Storyshots Foundations/Color Palette Navy 1`] = ` "backgroundColor": "#FFF", "color": "#000", "fontSize": "0.75rem", - "margin": "1rem", - "padding": "0.25rem", + "margin": "16px", + "padding": "4px", "textAlign": "center", } } @@ -26983,8 +26983,8 @@ exports[`Storyshots Foundations/Color Palette Navy 1`] = ` "backgroundColor": "#FFF", "color": "#000", "fontSize": "0.75rem", - "margin": "1rem", - "padding": "0.25rem", + "margin": "16px", + "padding": "4px", "textAlign": "center", } } @@ -27012,8 +27012,8 @@ exports[`Storyshots Foundations/Color Palette Navy 1`] = ` "backgroundColor": "#FFF", "color": "#000", "fontSize": "0.75rem", - "margin": "1rem", - "padding": "0.25rem", + "margin": "16px", + "padding": "4px", "textAlign": "center", } } @@ -27041,8 +27041,8 @@ exports[`Storyshots Foundations/Color Palette Navy 1`] = ` "backgroundColor": "#FFF", "color": "#000", "fontSize": "0.75rem", - "margin": "1rem", - "padding": "0.25rem", + "margin": "16px", + "padding": "4px", "textAlign": "center", } } @@ -27070,8 +27070,8 @@ exports[`Storyshots Foundations/Color Palette Navy 1`] = ` "backgroundColor": "#FFF", "color": "#000", "fontSize": "0.75rem", - "margin": "1rem", - "padding": "0.25rem", + "margin": "16px", + "padding": "4px", "textAlign": "center", } } @@ -27099,8 +27099,8 @@ exports[`Storyshots Foundations/Color Palette Navy 1`] = ` "backgroundColor": "#FFF", "color": "#000", "fontSize": "0.75rem", - "margin": "1rem", - "padding": "0.25rem", + "margin": "16px", + "padding": "4px", "textAlign": "center", } } @@ -27121,7 +27121,7 @@ exports[`Storyshots Foundations/Color Palette Neutral 1`] = ` style={ Object { "display": "flex", - "height": "20rem", + "height": "320px", "width": "100%", } } @@ -27141,8 +27141,8 @@ exports[`Storyshots Foundations/Color Palette Neutral 1`] = ` "backgroundColor": "#FFF", "color": "#000", "fontSize": "0.75rem", - "margin": "1rem", - "padding": "0.25rem", + "margin": "16px", + "padding": "4px", "textAlign": "center", } } @@ -27170,8 +27170,8 @@ exports[`Storyshots Foundations/Color Palette Neutral 1`] = ` "backgroundColor": "#FFF", "color": "#000", "fontSize": "0.75rem", - "margin": "1rem", - "padding": "0.25rem", + "margin": "16px", + "padding": "4px", "textAlign": "center", } } @@ -27199,8 +27199,8 @@ exports[`Storyshots Foundations/Color Palette Neutral 1`] = ` "backgroundColor": "#FFF", "color": "#000", "fontSize": "0.75rem", - "margin": "1rem", - "padding": "0.25rem", + "margin": "16px", + "padding": "4px", "textAlign": "center", } } @@ -27228,8 +27228,8 @@ exports[`Storyshots Foundations/Color Palette Neutral 1`] = ` "backgroundColor": "#FFF", "color": "#000", "fontSize": "0.75rem", - "margin": "1rem", - "padding": "0.25rem", + "margin": "16px", + "padding": "4px", "textAlign": "center", } } @@ -27257,8 +27257,8 @@ exports[`Storyshots Foundations/Color Palette Neutral 1`] = ` "backgroundColor": "#FFF", "color": "#000", "fontSize": "0.75rem", - "margin": "1rem", - "padding": "0.25rem", + "margin": "16px", + "padding": "4px", "textAlign": "center", } } @@ -27286,8 +27286,8 @@ exports[`Storyshots Foundations/Color Palette Neutral 1`] = ` "backgroundColor": "#FFF", "color": "#000", "fontSize": "0.75rem", - "margin": "1rem", - "padding": "0.25rem", + "margin": "16px", + "padding": "4px", "textAlign": "center", } } @@ -27315,8 +27315,8 @@ exports[`Storyshots Foundations/Color Palette Neutral 1`] = ` "backgroundColor": "#FFF", "color": "#000", "fontSize": "0.75rem", - "margin": "1rem", - "padding": "0.25rem", + "margin": "16px", + "padding": "4px", "textAlign": "center", } } @@ -27344,8 +27344,8 @@ exports[`Storyshots Foundations/Color Palette Neutral 1`] = ` "backgroundColor": "#FFF", "color": "#000", "fontSize": "0.75rem", - "margin": "1rem", - "padding": "0.25rem", + "margin": "16px", + "padding": "4px", "textAlign": "center", } } @@ -27373,8 +27373,8 @@ exports[`Storyshots Foundations/Color Palette Neutral 1`] = ` "backgroundColor": "#FFF", "color": "#000", "fontSize": "0.75rem", - "margin": "1rem", - "padding": "0.25rem", + "margin": "16px", + "padding": "4px", "textAlign": "center", } } @@ -27395,7 +27395,7 @@ exports[`Storyshots Foundations/Color Palette Orange 1`] = ` style={ Object { "display": "flex", - "height": "20rem", + "height": "320px", "width": "100%", } } @@ -27415,8 +27415,8 @@ exports[`Storyshots Foundations/Color Palette Orange 1`] = ` "backgroundColor": "#FFF", "color": "#000", "fontSize": "0.75rem", - "margin": "1rem", - "padding": "0.25rem", + "margin": "16px", + "padding": "4px", "textAlign": "center", } } @@ -27444,8 +27444,8 @@ exports[`Storyshots Foundations/Color Palette Orange 1`] = ` "backgroundColor": "#FFF", "color": "#000", "fontSize": "0.75rem", - "margin": "1rem", - "padding": "0.25rem", + "margin": "16px", + "padding": "4px", "textAlign": "center", } } @@ -27473,8 +27473,8 @@ exports[`Storyshots Foundations/Color Palette Orange 1`] = ` "backgroundColor": "#FFF", "color": "#000", "fontSize": "0.75rem", - "margin": "1rem", - "padding": "0.25rem", + "margin": "16px", + "padding": "4px", "textAlign": "center", } } @@ -27502,8 +27502,8 @@ exports[`Storyshots Foundations/Color Palette Orange 1`] = ` "backgroundColor": "#FFF", "color": "#000", "fontSize": "0.75rem", - "margin": "1rem", - "padding": "0.25rem", + "margin": "16px", + "padding": "4px", "textAlign": "center", } } @@ -27531,8 +27531,8 @@ exports[`Storyshots Foundations/Color Palette Orange 1`] = ` "backgroundColor": "#FFF", "color": "#000", "fontSize": "0.75rem", - "margin": "1rem", - "padding": "0.25rem", + "margin": "16px", + "padding": "4px", "textAlign": "center", } } @@ -27560,8 +27560,8 @@ exports[`Storyshots Foundations/Color Palette Orange 1`] = ` "backgroundColor": "#FFF", "color": "#000", "fontSize": "0.75rem", - "margin": "1rem", - "padding": "0.25rem", + "margin": "16px", + "padding": "4px", "textAlign": "center", } } @@ -27589,8 +27589,8 @@ exports[`Storyshots Foundations/Color Palette Orange 1`] = ` "backgroundColor": "#FFF", "color": "#000", "fontSize": "0.75rem", - "margin": "1rem", - "padding": "0.25rem", + "margin": "16px", + "padding": "4px", "textAlign": "center", } } @@ -27618,8 +27618,8 @@ exports[`Storyshots Foundations/Color Palette Orange 1`] = ` "backgroundColor": "#FFF", "color": "#000", "fontSize": "0.75rem", - "margin": "1rem", - "padding": "0.25rem", + "margin": "16px", + "padding": "4px", "textAlign": "center", } } @@ -27647,8 +27647,8 @@ exports[`Storyshots Foundations/Color Palette Orange 1`] = ` "backgroundColor": "#FFF", "color": "#000", "fontSize": "0.75rem", - "margin": "1rem", - "padding": "0.25rem", + "margin": "16px", + "padding": "4px", "textAlign": "center", } } @@ -27669,7 +27669,7 @@ exports[`Storyshots Foundations/Color Palette Red 1`] = ` style={ Object { "display": "flex", - "height": "20rem", + "height": "320px", "width": "100%", } } @@ -27689,8 +27689,8 @@ exports[`Storyshots Foundations/Color Palette Red 1`] = ` "backgroundColor": "#FFF", "color": "#000", "fontSize": "0.75rem", - "margin": "1rem", - "padding": "0.25rem", + "margin": "16px", + "padding": "4px", "textAlign": "center", } } @@ -27718,8 +27718,8 @@ exports[`Storyshots Foundations/Color Palette Red 1`] = ` "backgroundColor": "#FFF", "color": "#000", "fontSize": "0.75rem", - "margin": "1rem", - "padding": "0.25rem", + "margin": "16px", + "padding": "4px", "textAlign": "center", } } @@ -27747,8 +27747,8 @@ exports[`Storyshots Foundations/Color Palette Red 1`] = ` "backgroundColor": "#FFF", "color": "#000", "fontSize": "0.75rem", - "margin": "1rem", - "padding": "0.25rem", + "margin": "16px", + "padding": "4px", "textAlign": "center", } } @@ -27776,8 +27776,8 @@ exports[`Storyshots Foundations/Color Palette Red 1`] = ` "backgroundColor": "#FFF", "color": "#000", "fontSize": "0.75rem", - "margin": "1rem", - "padding": "0.25rem", + "margin": "16px", + "padding": "4px", "textAlign": "center", } } @@ -27805,8 +27805,8 @@ exports[`Storyshots Foundations/Color Palette Red 1`] = ` "backgroundColor": "#FFF", "color": "#000", "fontSize": "0.75rem", - "margin": "1rem", - "padding": "0.25rem", + "margin": "16px", + "padding": "4px", "textAlign": "center", } } @@ -27834,8 +27834,8 @@ exports[`Storyshots Foundations/Color Palette Red 1`] = ` "backgroundColor": "#FFF", "color": "#000", "fontSize": "0.75rem", - "margin": "1rem", - "padding": "0.25rem", + "margin": "16px", + "padding": "4px", "textAlign": "center", } } @@ -27863,8 +27863,8 @@ exports[`Storyshots Foundations/Color Palette Red 1`] = ` "backgroundColor": "#FFF", "color": "#000", "fontSize": "0.75rem", - "margin": "1rem", - "padding": "0.25rem", + "margin": "16px", + "padding": "4px", "textAlign": "center", } } @@ -27892,8 +27892,8 @@ exports[`Storyshots Foundations/Color Palette Red 1`] = ` "backgroundColor": "#FFF", "color": "#000", "fontSize": "0.75rem", - "margin": "1rem", - "padding": "0.25rem", + "margin": "16px", + "padding": "4px", "textAlign": "center", } } @@ -27921,8 +27921,8 @@ exports[`Storyshots Foundations/Color Palette Red 1`] = ` "backgroundColor": "#FFF", "color": "#000", "fontSize": "0.75rem", - "margin": "1rem", - "padding": "0.25rem", + "margin": "16px", + "padding": "4px", "textAlign": "center", } } @@ -27943,7 +27943,7 @@ exports[`Storyshots Foundations/Color Palette Sand 1`] = ` style={ Object { "display": "flex", - "height": "20rem", + "height": "320px", "width": "100%", } } @@ -27963,8 +27963,8 @@ exports[`Storyshots Foundations/Color Palette Sand 1`] = ` "backgroundColor": "#FFF", "color": "#000", "fontSize": "0.75rem", - "margin": "1rem", - "padding": "0.25rem", + "margin": "16px", + "padding": "4px", "textAlign": "center", } } @@ -27992,8 +27992,8 @@ exports[`Storyshots Foundations/Color Palette Sand 1`] = ` "backgroundColor": "#FFF", "color": "#000", "fontSize": "0.75rem", - "margin": "1rem", - "padding": "0.25rem", + "margin": "16px", + "padding": "4px", "textAlign": "center", } } @@ -28021,8 +28021,8 @@ exports[`Storyshots Foundations/Color Palette Sand 1`] = ` "backgroundColor": "#FFF", "color": "#000", "fontSize": "0.75rem", - "margin": "1rem", - "padding": "0.25rem", + "margin": "16px", + "padding": "4px", "textAlign": "center", } } @@ -28050,8 +28050,8 @@ exports[`Storyshots Foundations/Color Palette Sand 1`] = ` "backgroundColor": "#FFF", "color": "#000", "fontSize": "0.75rem", - "margin": "1rem", - "padding": "0.25rem", + "margin": "16px", + "padding": "4px", "textAlign": "center", } } @@ -28079,8 +28079,8 @@ exports[`Storyshots Foundations/Color Palette Sand 1`] = ` "backgroundColor": "#FFF", "color": "#000", "fontSize": "0.75rem", - "margin": "1rem", - "padding": "0.25rem", + "margin": "16px", + "padding": "4px", "textAlign": "center", } } @@ -28108,8 +28108,8 @@ exports[`Storyshots Foundations/Color Palette Sand 1`] = ` "backgroundColor": "#FFF", "color": "#000", "fontSize": "0.75rem", - "margin": "1rem", - "padding": "0.25rem", + "margin": "16px", + "padding": "4px", "textAlign": "center", } } @@ -28137,8 +28137,8 @@ exports[`Storyshots Foundations/Color Palette Sand 1`] = ` "backgroundColor": "#FFF", "color": "#000", "fontSize": "0.75rem", - "margin": "1rem", - "padding": "0.25rem", + "margin": "16px", + "padding": "4px", "textAlign": "center", } } @@ -28166,8 +28166,8 @@ exports[`Storyshots Foundations/Color Palette Sand 1`] = ` "backgroundColor": "#FFF", "color": "#000", "fontSize": "0.75rem", - "margin": "1rem", - "padding": "0.25rem", + "margin": "16px", + "padding": "4px", "textAlign": "center", } } @@ -28195,8 +28195,8 @@ exports[`Storyshots Foundations/Color Palette Sand 1`] = ` "backgroundColor": "#FFF", "color": "#000", "fontSize": "0.75rem", - "margin": "1rem", - "padding": "0.25rem", + "margin": "16px", + "padding": "4px", "textAlign": "center", } } @@ -28217,7 +28217,7 @@ exports[`Storyshots Foundations/Color Palette Teal 1`] = ` style={ Object { "display": "flex", - "height": "20rem", + "height": "320px", "width": "100%", } } @@ -28237,8 +28237,8 @@ exports[`Storyshots Foundations/Color Palette Teal 1`] = ` "backgroundColor": "#FFF", "color": "#000", "fontSize": "0.75rem", - "margin": "1rem", - "padding": "0.25rem", + "margin": "16px", + "padding": "4px", "textAlign": "center", } } @@ -28266,8 +28266,8 @@ exports[`Storyshots Foundations/Color Palette Teal 1`] = ` "backgroundColor": "#FFF", "color": "#000", "fontSize": "0.75rem", - "margin": "1rem", - "padding": "0.25rem", + "margin": "16px", + "padding": "4px", "textAlign": "center", } } @@ -28295,8 +28295,8 @@ exports[`Storyshots Foundations/Color Palette Teal 1`] = ` "backgroundColor": "#FFF", "color": "#000", "fontSize": "0.75rem", - "margin": "1rem", - "padding": "0.25rem", + "margin": "16px", + "padding": "4px", "textAlign": "center", } } @@ -28324,8 +28324,8 @@ exports[`Storyshots Foundations/Color Palette Teal 1`] = ` "backgroundColor": "#FFF", "color": "#000", "fontSize": "0.75rem", - "margin": "1rem", - "padding": "0.25rem", + "margin": "16px", + "padding": "4px", "textAlign": "center", } } @@ -28353,8 +28353,8 @@ exports[`Storyshots Foundations/Color Palette Teal 1`] = ` "backgroundColor": "#FFF", "color": "#000", "fontSize": "0.75rem", - "margin": "1rem", - "padding": "0.25rem", + "margin": "16px", + "padding": "4px", "textAlign": "center", } } @@ -28382,8 +28382,8 @@ exports[`Storyshots Foundations/Color Palette Teal 1`] = ` "backgroundColor": "#FFF", "color": "#000", "fontSize": "0.75rem", - "margin": "1rem", - "padding": "0.25rem", + "margin": "16px", + "padding": "4px", "textAlign": "center", } } @@ -28411,8 +28411,8 @@ exports[`Storyshots Foundations/Color Palette Teal 1`] = ` "backgroundColor": "#FFF", "color": "#000", "fontSize": "0.75rem", - "margin": "1rem", - "padding": "0.25rem", + "margin": "16px", + "padding": "4px", "textAlign": "center", } } @@ -28440,8 +28440,8 @@ exports[`Storyshots Foundations/Color Palette Teal 1`] = ` "backgroundColor": "#FFF", "color": "#000", "fontSize": "0.75rem", - "margin": "1rem", - "padding": "0.25rem", + "margin": "16px", + "padding": "4px", "textAlign": "center", } } @@ -28469,8 +28469,8 @@ exports[`Storyshots Foundations/Color Palette Teal 1`] = ` "backgroundColor": "#FFF", "color": "#000", "fontSize": "0.75rem", - "margin": "1rem", - "padding": "0.25rem", + "margin": "16px", + "padding": "4px", "textAlign": "center", } } @@ -28491,7 +28491,7 @@ exports[`Storyshots Foundations/Color Palette Yellow 1`] = ` style={ Object { "display": "flex", - "height": "20rem", + "height": "320px", "width": "100%", } } @@ -28511,8 +28511,8 @@ exports[`Storyshots Foundations/Color Palette Yellow 1`] = ` "backgroundColor": "#FFF", "color": "#000", "fontSize": "0.75rem", - "margin": "1rem", - "padding": "0.25rem", + "margin": "16px", + "padding": "4px", "textAlign": "center", } } @@ -28540,8 +28540,8 @@ exports[`Storyshots Foundations/Color Palette Yellow 1`] = ` "backgroundColor": "#FFF", "color": "#000", "fontSize": "0.75rem", - "margin": "1rem", - "padding": "0.25rem", + "margin": "16px", + "padding": "4px", "textAlign": "center", } } @@ -28569,8 +28569,8 @@ exports[`Storyshots Foundations/Color Palette Yellow 1`] = ` "backgroundColor": "#FFF", "color": "#000", "fontSize": "0.75rem", - "margin": "1rem", - "padding": "0.25rem", + "margin": "16px", + "padding": "4px", "textAlign": "center", } } @@ -28598,8 +28598,8 @@ exports[`Storyshots Foundations/Color Palette Yellow 1`] = ` "backgroundColor": "#FFF", "color": "#000", "fontSize": "0.75rem", - "margin": "1rem", - "padding": "0.25rem", + "margin": "16px", + "padding": "4px", "textAlign": "center", } } @@ -28627,8 +28627,8 @@ exports[`Storyshots Foundations/Color Palette Yellow 1`] = ` "backgroundColor": "#FFF", "color": "#000", "fontSize": "0.75rem", - "margin": "1rem", - "padding": "0.25rem", + "margin": "16px", + "padding": "4px", "textAlign": "center", } } @@ -28656,8 +28656,8 @@ exports[`Storyshots Foundations/Color Palette Yellow 1`] = ` "backgroundColor": "#FFF", "color": "#000", "fontSize": "0.75rem", - "margin": "1rem", - "padding": "0.25rem", + "margin": "16px", + "padding": "4px", "textAlign": "center", } } @@ -28685,8 +28685,8 @@ exports[`Storyshots Foundations/Color Palette Yellow 1`] = ` "backgroundColor": "#FFF", "color": "#000", "fontSize": "0.75rem", - "margin": "1rem", - "padding": "0.25rem", + "margin": "16px", + "padding": "4px", "textAlign": "center", } } @@ -28714,8 +28714,8 @@ exports[`Storyshots Foundations/Color Palette Yellow 1`] = ` "backgroundColor": "#FFF", "color": "#000", "fontSize": "0.75rem", - "margin": "1rem", - "padding": "0.25rem", + "margin": "16px", + "padding": "4px", "textAlign": "center", } } @@ -28743,8 +28743,8 @@ exports[`Storyshots Foundations/Color Palette Yellow 1`] = ` "backgroundColor": "#FFF", "color": "#000", "fontSize": "0.75rem", - "margin": "1rem", - "padding": "0.25rem", + "margin": "16px", + "padding": "4px", "textAlign": "center", } } @@ -28776,12 +28776,6 @@ exports[`Storyshots Foundations/Spacing Spacing 1`] = ` > Token - - rem - - - 0.25 - @@ -28848,12 +28836,6 @@ exports[`Storyshots Foundations/Spacing Spacing 1`] = ` $ux-spacing-20 - - 0.5 - @@ -28886,12 +28868,6 @@ exports[`Storyshots Foundations/Spacing Spacing 1`] = ` $ux-spacing-30 - - 0.75 - @@ -28924,12 +28900,6 @@ exports[`Storyshots Foundations/Spacing Spacing 1`] = ` $ux-spacing-40 - - 1 - @@ -28962,12 +28932,6 @@ exports[`Storyshots Foundations/Spacing Spacing 1`] = ` $ux-spacing-50 - - 1.5 - @@ -29000,12 +28964,6 @@ exports[`Storyshots Foundations/Spacing Spacing 1`] = ` $ux-spacing-60 - - 2 - @@ -29038,12 +28996,6 @@ exports[`Storyshots Foundations/Spacing Spacing 1`] = ` $ux-spacing-70 - - 3 - @@ -30988,7 +30940,7 @@ exports[`Storyshots Layouts/Main Page Example 1`] = ` style={ Object { "color": "#101010", - "padding": ".5rem", + "padding": "8px", } } > @@ -30999,7 +30951,7 @@ exports[`Storyshots Layouts/Main Page Example 1`] = ` style={ Object { "color": "#101010", - "padding": ".5rem", + "padding": "8px", } } > @@ -31010,7 +30962,7 @@ exports[`Storyshots Layouts/Main Page Example 1`] = ` style={ Object { "color": "#101010", - "padding": ".5rem", + "padding": "8px", } } > @@ -31024,8 +30976,8 @@ exports[`Storyshots Layouts/Main Page Example 1`] = ` "alignItems": "center", "backgroundColor": "#177863", "display": "flex", - "height": "4.5rem", - "padding": "1rem", + "height": "72px", + "padding": "16px", "width": "100%", } } diff --git a/src/Accordion/AccordionCollapse.scss b/src/Accordion/AccordionCollapse.scss index bfb52928..5daee3df 100644 --- a/src/Accordion/AccordionCollapse.scss +++ b/src/Accordion/AccordionCollapse.scss @@ -4,6 +4,6 @@ border-top: 1px solid $ux-gray-400; &__container { - padding: 1rem 1.5rem; + padding: 16px 24px; } } diff --git a/src/Accordion/AccordionToggle.scss b/src/Accordion/AccordionToggle.scss index 62d139ae..89271de2 100644 --- a/src/Accordion/AccordionToggle.scss +++ b/src/Accordion/AccordionToggle.scss @@ -6,9 +6,9 @@ &__container { display: grid; - grid-template-columns: auto 1.5rem; + grid-template-columns: auto 24px; grid-template-areas: 'content chevron-right'; - padding: 1rem 1.5rem; + padding: 16px 24px; &--right { grid-area: chevron-right; @@ -74,20 +74,20 @@ } &__chevron-left { - margin-right: 1rem; + margin-right: 16px; } &__chevron-right { - margin-left: 2rem; + margin-left: 32px; } &__leading-icon { - margin-right: .5rem; + margin-right: 8px; } &__title { @include synth-font-type-30--bold; - margin-right: .5rem; + margin-right: 8px; } &__helper-text { diff --git a/src/Alert/Alert.scss b/src/Alert/Alert.scss index 5c1a021c..e4e95b23 100644 --- a/src/Alert/Alert.scss +++ b/src/Alert/Alert.scss @@ -30,7 +30,7 @@ .Synthesized { .Alert { display: grid; - grid-template-columns: 2rem auto auto 2rem; + grid-template-columns: 32px auto auto 32px; grid-template-rows: auto auto; grid-template-areas: 'icon content content close' @@ -80,7 +80,7 @@ &__title { @include synth-font-type-30--bold; - margin-bottom: 0.25rem; + margin-bottom: 4px; } &__message { @@ -90,7 +90,7 @@ } .Alert-success { - border-left: 0.5rem solid $synth-accent-green; + border-left: 8px solid $synth-accent-green; .close { @include close-action; @@ -110,7 +110,7 @@ } .Alert-info { - border-left: 0.5rem solid $synth-hyperlink-color; + border-left: 8px solid $synth-hyperlink-color; .close { @include close-action; @@ -130,7 +130,7 @@ } .Alert-announcement { - border-left: 0.5rem solid $synth-hyperlink-color; + border-left: 8px solid $synth-hyperlink-color; .close { @include close-action; @@ -158,7 +158,7 @@ } .Alert-warning { - border-left: 0.5rem solid $synth-warning-amber-alternate; + border-left: 8px solid $synth-warning-amber-alternate; .close { @include close-action; @@ -174,7 +174,7 @@ } .Alert-error { - border-left: 0.5rem solid $ux-red-400; + border-left: 8px solid $ux-red-400; .close { @include close-action; @@ -192,7 +192,7 @@ .Alert { display: grid; - grid-template-columns: 2rem auto auto 2rem; + grid-template-columns: 32px auto auto 32px; grid-template-rows: auto auto; grid-template-areas: 'icon content content close' @@ -241,7 +241,7 @@ &__title { @include synth-font-type-30--bold; - margin-bottom: 0.25rem; + margin-bottom: 4px; } &__message { @@ -253,7 +253,7 @@ .Alert-success { background-color: $ux-green-100; color: $ux-green-800; - border-left: 0.5rem solid $ux-green-400; + border-left: 8px solid $ux-green-400; .close { @include close-action; @@ -275,7 +275,7 @@ .Alert-info { background-color: $ux-blue-100; color: $ux-blue-800; - border-left: 0.5rem solid $ux-blue-300; + border-left: 8px solid $ux-blue-300; .close { @include close-action($ux-blue-600, $ux-blue-800) @@ -297,7 +297,7 @@ .Alert-announcement { background-color: $ux-blue-100; color: $ux-blue-700; - border-left: 0.5rem solid $ux-blue-300; + border-left: 8px solid $ux-blue-300; .close { @include close-action; @@ -339,7 +339,7 @@ .Alert-warning { background-color: $ux-yellow-100; color: $ux-yellow-900; - border-left: 0.5rem solid $ux-yellow-600; + border-left: 8px solid $ux-yellow-600; .close { @include close-action; @@ -357,7 +357,7 @@ .Alert-error { background-color: $ux-red-100; color: $ux-red-800; - border-left: 0.5rem solid $ux-red-400; + border-left: 8px solid $ux-red-400; .close { @include close-action; diff --git a/src/Alert/Alert.stories.jsx b/src/Alert/Alert.stories.jsx index af9feaad..30ae54a3 100644 --- a/src/Alert/Alert.stories.jsx +++ b/src/Alert/Alert.stories.jsx @@ -102,7 +102,7 @@ const googleButtonStyle = { const GoogleCalendarButton = () => ( ); diff --git a/src/Avatar/Avatar.scss b/src/Avatar/Avatar.scss index e220fb2d..726ea10d 100644 --- a/src/Avatar/Avatar.scss +++ b/src/Avatar/Avatar.scss @@ -8,13 +8,13 @@ &__alert { background-color: $ux-red-400; - border: 0.125rem solid $ux-white; + border: 2px solid $ux-white; border-radius: 50%; - height: 0.75rem; + height: 12px; position: absolute; top: 0; right: 0; - width: 0.75rem; + width: 12px; } &__circle { @@ -57,8 +57,8 @@ @include synth-font-type-70--bold; } &__alert { - height: 1.36rem; - width: 1.36rem; + height: 22px; + width: 22px; } } } diff --git a/src/Button/Button.stories.jsx b/src/Button/Button.stories.jsx index cee85411..2badff3e 100644 --- a/src/Button/Button.stories.jsx +++ b/src/Button/Button.stories.jsx @@ -402,7 +402,7 @@ export const Brands = () => ( > Google -
+
{' '} -
+
-
+
diff --git a/src/Popper/Popper.scss b/src/Popper/Popper.scss index 1ed726df..a05048d6 100644 --- a/src/Popper/Popper.scss +++ b/src/Popper/Popper.scss @@ -2,9 +2,9 @@ @mixin popper-arrow($popper-color: $ux-gray-800, $popper-border-color: $ux-gray-800) { .Popper__arrow { - height: 1rem; + height: 16px; position: absolute; - width: 1rem; + width: 16px; pointer-events: none; } @@ -29,70 +29,70 @@ &[data-placement*='bottom'] .Popper__arrow { left: 0; - margin-top: -0.4rem; + margin-top: -6px; top: 0; } &[data-placement*='bottom'] .Popper__arrow::before { border-color: transparent transparent $popper-border-color transparent; - border-width: 0 0.5rem 0.4rem 0.5rem; + border-width: 0 8px 6px 8px; position: absolute; top: -1px; } &[data-placement*='bottom'] .Popper__arrow::after { border-color: transparent transparent $popper-color transparent; - border-width: 0 0.5rem 0.4rem 0.5rem; + border-width: 0 8px 6px 8px; } &[data-placement*='top'] .Popper__arrow { bottom: 0; left: 0; - margin-bottom: -1rem; + margin-bottom: -16px; } &[data-placement*='top'] .Popper__arrow::before { border-color: $popper-border-color transparent transparent transparent; - border-width: 0.4rem 0.5rem 0 0.5rem; + border-width: 6px 8px 0 8px; position: absolute; top: 1px; } &[data-placement*='top'] .Popper__arrow::after { border-color: $popper-color transparent transparent transparent; - border-width: 0.4rem 0.5rem 0 0.5rem; + border-width: 6px 8px 0 8px; } &[data-placement*='right'] .Popper__arrow { left: 0; - margin-left: -0.7rem; + margin-left: -11px; } &[data-placement*='right'] .Popper__arrow::before { border-color: transparent $popper-border-color transparent transparent; - border-width: 0.5rem 0.4rem 0.5rem 0; + border-width: 8px 6px 8px 0; } &[data-placement*='right'] .Popper__arrow::after { border-color: transparent $popper-color transparent transparent; - border-width: 0.5rem 0.4rem 0.5rem 0; + border-width: 8px 6px 8px 0; left: 6px; top: 0; } &[data-placement*='left'] .Popper__arrow { - margin-right: -0.7rem; + margin-right: -11px; right: 0; } &[data-placement*='left'] .Popper__arrow::before { border-color: transparent transparent transparent $popper-border-color; - border-width: 0.5rem 0 0.5rem 0.4em; + border-width: 8px 0 8px 6px; } &[data-placement*='left'] .Popper__arrow::after { border-color: transparent transparent transparent $popper-color; - border-width: 0.5rem 0 0.5rem 0.4em; + border-width: 8px 0 8px 6px; left: 3px; top: 0; } @@ -103,9 +103,9 @@ @include popper-arrow($popper-color: $ux-white, $popper-border-color: $ux-gray-300); background-color: $ux-white; border-radius: $ux-border-radius; - border: 0.06rem solid $ux-gray-300; + border: 1px solid $ux-gray-300; box-shadow: $ux-box-shadow-card; - max-width: 15rem; + max-width: 240px; letter-spacing: normal; padding: $ux-spacing-30; z-index: $z-index-flash; diff --git a/src/ProfileCell/ProfileCell.scss b/src/ProfileCell/ProfileCell.scss index cb2c942c..a7cfa599 100644 --- a/src/ProfileCell/ProfileCell.scss +++ b/src/ProfileCell/ProfileCell.scss @@ -21,7 +21,7 @@ &__trailing_icon { color: $ux-gray-800; - margin-left: 0.25rem; + margin-left: 4px; } &__name { diff --git a/src/ProfileCell/ProfileCellSkeleton.scss b/src/ProfileCell/ProfileCellSkeleton.scss index 81a7a3a9..0fcb5f84 100644 --- a/src/ProfileCell/ProfileCellSkeleton.scss +++ b/src/ProfileCell/ProfileCellSkeleton.scss @@ -12,7 +12,7 @@ $profile-cell-avatar-small-width: $avatar-small-width; &__info { grid-column-start: 2; - margin-left: 1rem; + margin-left: 16px; display: grid; align-items: center; } diff --git a/src/RichTextEditor/RichTextEditor.scss b/src/RichTextEditor/RichTextEditor.scss index 67465a6e..3c6bfa28 100644 --- a/src/RichTextEditor/RichTextEditor.scss +++ b/src/RichTextEditor/RichTextEditor.scss @@ -5,7 +5,7 @@ .RichTextEditor__character-count { @include synth-font-type-20; - margin-top: 0.5rem; + margin-top: 8px; } } @@ -17,15 +17,15 @@ } .ProseMirror { - min-height: 5rem; + min-height: 80px; background: $ux-neutral-100; border: 1px solid $ux-gray-400; border-radius: 0 0 $ux-border-radius $ux-border-radius; - padding: 1rem; + padding: 16px; transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out; &:focus { - border: 0.06rem solid $ux-blue-500; + border: 1px solid $ux-blue-500; box-shadow: $input-focus-box-shadow; color: $input-focus-color; outline: none; @@ -37,7 +37,7 @@ ul, ol { - padding: 0 1rem; + padding: 0 16px; } li > p { diff --git a/src/Select/styles.js b/src/Select/styles.js index 9bd67770..c3da10b0 100644 --- a/src/Select/styles.js +++ b/src/Select/styles.js @@ -5,7 +5,7 @@ export const SELECT_SIZES = { SMALL: 'small' }; export const SIZE_SMALL_HEIGHT = { height: 'auto', - minHeight: '2.25rem', + minHeight: '36px', }; const getHeightProps = (size) => { @@ -53,7 +53,7 @@ const defaultStyles = ({ menuWidth, size }) => ({ ...styles, backgroundColor: systemColors.UX_BLUE_100, color: systemColors.UX_BLUE_700, - borderRadius: '.25rem', + borderRadius: '4px', }), menu: (styles) => ({ ...styles, @@ -65,7 +65,7 @@ const defaultStyles = ({ menuWidth, size }) => ({ fontSize: '0.875rem', fontWeight: 400, lineHeight: '1.25rem', - paddingLeft: '.5rem', + paddingLeft: '8px', }), multiValueRemove: (styles) => ({ ...styles, diff --git a/src/Steps/Step.scss b/src/Steps/Step.scss index 9499bab9..49519d44 100644 --- a/src/Steps/Step.scss +++ b/src/Steps/Step.scss @@ -1,7 +1,7 @@ @import '../../scss/theme'; -$step-circle-size: 2.5rem; -$text-container-margin-top: 0.625rem; +$step-circle-size: 40px; +$text-container-margin-top: 10px; .Step { display: grid; @@ -29,7 +29,7 @@ $text-container-margin-top: 0.625rem; color: $ux-emerald-600; float: left; line-height: 1; - margin-top: -0.5rem; + margin-top: -8px; padding-top: 50%; text-align: center; width: 100%; @@ -52,7 +52,7 @@ $text-container-margin-top: 0.625rem; display: flex; position: relative; // translates the text-container so that border is centered with circle - right: 1.25rem; + right: 20px; min-height: ($step-circle-size * 2) - $ux-spacing-30; diff --git a/src/Table/TableCell.scss b/src/Table/TableCell.scss index 36b2153b..ac2d7ec8 100644 --- a/src/Table/TableCell.scss +++ b/src/Table/TableCell.scss @@ -2,7 +2,7 @@ .TableCell { @include synth-font-type-30; - border-bottom: 0.06rem solid $ux-gray-200; + border-bottom: 1px solid $ux-gray-200; overflow: hidden; padding: $ux-spacing-50; text-align: left; @@ -25,7 +25,7 @@ &--compact { padding: $ux-spacing-30 $ux-spacing-50; - max-height: 3.25rem; + max-height: 52px; } &--right { diff --git a/src/Tabs/tabs.module.scss b/src/Tabs/tabs.module.scss index bde5d0d0..1bdb2f0c 100644 --- a/src/Tabs/tabs.module.scss +++ b/src/Tabs/tabs.module.scss @@ -1,7 +1,7 @@ @import '../../scss/theme.scss'; .tabs { - --border-width: 0.125rem; + --border-width: 2px; border-bottom: var(--border-width) solid $ux-gray-400; @@ -13,7 +13,7 @@ border-radius: 0; border-bottom: var(--border-width) solid $ux-gray-400; margin-bottom: calc(0px - var(--border-width)); - padding: 0.375rem 0.75rem; + padding: 6px 12px; } :global(.nav-link.active), @@ -30,7 +30,7 @@ .navItemButtonFullHeight { :global(.nav-item .button) { - height: calc(100% + 0.125rem); + height: calc(100% + 2px); } } } diff --git a/src/Toast/Toast.scss b/src/Toast/Toast.scss index 3e10522a..beed1b0a 100644 --- a/src/Toast/Toast.scss +++ b/src/Toast/Toast.scss @@ -5,7 +5,7 @@ right: 0; bottom: 0; transform: translateX(-10%); - width: 19rem; + width: 304px; z-index: $z-index-flash; @@ -18,7 +18,7 @@ .Alert { box-shadow: $ux-elevations-20; - padding: $ux-spacing-30 1.25rem; + padding: $ux-spacing-30 20px; // explicitly sets grid template areas based on Alert.scss // the CTA action will always be below the Toast content @@ -27,7 +27,7 @@ 'icon action action close'; &__action { - margin-top: 0.25rem; + margin-top: 4px; justify-content: flex-start; } } diff --git a/src/ToggleInput/ToggleInput.scss b/src/ToggleInput/ToggleInput.scss index 7b7f53e9..04d0540a 100644 --- a/src/ToggleInput/ToggleInput.scss +++ b/src/ToggleInput/ToggleInput.scss @@ -16,27 +16,27 @@ } :last-child { - margin-left: 0.5rem; + margin-left: 8px; } .react-toggle-track { - height: 1.25rem; - width: 2.5rem; + height: 20px; + width: 40px; } .react-toggle-thumb { - height: 1rem; - width: 1rem; - top: 0.125rem; - left: 0.125rem; + height: 16px; + width: 16px; + top: 2px; + left: 2px; border: none; } .react-toggle--focus { - border-radius: 0.75rem; - outline: 0.125rem solid $ux-blue-500; - outline-offset: 0.125rem; + border-radius: 12px; + outline: 2px solid $ux-blue-500; + outline-offset: 2px; .react-toggle-thumb { box-shadow: none; @@ -56,11 +56,11 @@ } .react-toggle-track-check { - left: -0.125rem; + left: -2px; } .react-toggle-track-x { - right: 0.875rem; + right: 14px; } .react-toggle--checked:hover:not(.react-toggle--disabled) .react-toggle-track { @@ -69,7 +69,7 @@ .react-toggle--checked .react-toggle-thumb { border-color: $ux-green-600; - left: 1.375rem; + left: 22px; &:hover { border-color: $ux-green; diff --git a/src/Tooltip/Tooltip.scss b/src/Tooltip/Tooltip.scss index dd3b7c1f..9782a9bb 100644 --- a/src/Tooltip/Tooltip.scss +++ b/src/Tooltip/Tooltip.scss @@ -22,8 +22,8 @@ outline: none; svg { - box-shadow: 0 0 0.25rem 0.167rem; - border-radius: 1rem; + box-shadow: 0 0 4px 3px; + border-radius: 16px; } } } diff --git a/stories/ColorPalette/Palette.stories.jsx b/stories/ColorPalette/Palette.stories.jsx index 1357d1f2..4ee1873b 100644 --- a/stories/ColorPalette/Palette.stories.jsx +++ b/stories/ColorPalette/Palette.stories.jsx @@ -4,7 +4,7 @@ import { colors } from 'src/Styles'; /* eslint-disable react/prop-types, react/no-array-index-key */ const Palette = ({ color }) => ( -
+
{ [...Array(9)].map((_, i) => { const colorNameKey = `UX_${color}_${i + 1}00`; @@ -23,8 +23,8 @@ const Palette = ({ color }) => ( backgroundColor: '#FFF', color: '#000', fontSize: '0.75rem', - margin: '1rem', - padding: '0.25rem', + margin: '16px', + padding: '4px', textAlign: 'center', }} > diff --git a/stories/Intro.stories.mdx b/stories/Intro.stories.mdx index d3e69733..a9ecaff2 100644 --- a/stories/Intro.stories.mdx +++ b/stories/Intro.stories.mdx @@ -6,8 +6,8 @@ import GithubLogo from '../public/github-logo.svg';
- User Interviews Design System -
+ User Interviews Design System +
We aim to create a system that allows us to build a user experience that is consistent, flexible and scalable. This style guide is living documentation that will be updated as we continue to evolve and improve our design system. @@ -23,7 +23,7 @@ import GithubLogo from '../public/github-logo.svg'; rel="noopener noreferrer" target="_blank" > - + Figma Library - + Github Repo
diff --git a/stories/Spacing/Spacing.stories.jsx b/stories/Spacing/Spacing.stories.jsx index 26e0d650..20ec9db5 100644 --- a/stories/Spacing/Spacing.stories.jsx +++ b/stories/Spacing/Spacing.stories.jsx @@ -9,13 +9,13 @@ import mdx from './Spacing.mdx'; /* eslint-disable object-curly-newline */ const data = [ - { id: 1, token: '$ux-spacing-10', rem: '0.25', px: '4' }, - { id: 2, token: '$ux-spacing-20', rem: '0.5', px: '8' }, - { id: 3, token: '$ux-spacing-30', rem: '0.75', px: '12' }, - { id: 4, token: '$ux-spacing-40', rem: '1', px: '16' }, - { id: 5, token: '$ux-spacing-50', rem: '1.5', px: '24' }, - { id: 6, token: '$ux-spacing-60', rem: '2', px: '32' }, - { id: 7, token: '$ux-spacing-70', rem: '3', px: '48' }, + { id: 1, token: '$ux-spacing-10', px: '4' }, + { id: 2, token: '$ux-spacing-20', px: '8' }, + { id: 3, token: '$ux-spacing-30', px: '12' }, + { id: 4, token: '$ux-spacing-40', px: '16' }, + { id: 5, token: '$ux-spacing-50', px: '24' }, + { id: 6, token: '$ux-spacing-60', px: '32' }, + { id: 7, token: '$ux-spacing-70', px: '48' }, ]; export const Spacing = () => ( @@ -23,7 +23,6 @@ export const Spacing = () => ( Token - rem px Example @@ -32,10 +31,9 @@ export const Spacing = () => ( {data.map(((row) => ( {row.token} - {row.rem} {row.px} -
+
)))} diff --git a/stories/Typography/Typography.scss b/stories/Typography/Typography.scss index 62908065..6ce3e483 100644 --- a/stories/Typography/Typography.scss +++ b/stories/Typography/Typography.scss @@ -4,8 +4,8 @@ background-color: #ffffff; display: flex; flex-wrap: wrap; - margin: 1rem; - min-height: 13.5rem; + margin: 16px; + min-height: 216px; ul { list-style: none; @@ -16,7 +16,7 @@ flex: 0 0 62.5%; max-width: 66.7%; padding-right: 15%; - padding: 1rem; + padding: 16px; width: 66.7%; } @@ -25,11 +25,11 @@ display: block; flex: 0 0 37.5%; max-width: 33.3%; - padding: 1rem 1.5rem; + padding: 16px 24px; width: 33.3%; li { - min-height: 1.5rem; + min-height: 24px; } }