diff --git a/app/assets/stylesheets/framework/ds_experiments.scss b/app/assets/stylesheets/framework/ds_experiments.scss index 64d0d50239f7a52fae5d979a9d94f0b1531dc1c8..404a491ee15a5a7cfa176944aa3dc3aea11b6e81 100644 --- a/app/assets/stylesheets/framework/ds_experiments.scss +++ b/app/assets/stylesheets/framework/ds_experiments.scss @@ -6,40 +6,12 @@ :where(.application-chrome) { - // Form elements and buttons - .gl-button, - .gl-button.gl-button, - .form-control:not(.gl-search-box-by-type-input-borderless), - .gl-form-input, - .gl-form-input.form-control:not(.gl-search-box-by-type-input-borderless):not(.input-group-prepend + .gl-form-input):not(.gl-search-box-by-click-input), - .gl-form-select, - .input-group-text, - &.application-chrome .filtered-search-box { - @apply gl-rounded-lg; - } - // Decrease spacing between buttons // to align with optical spacing .gl-gap-3:has(> .gl-button) { @apply gl-gap-[0.375rem]; // 6px } - // Filtered search button - .input-group-prepend > div, - .filtered-search-history-dropdown-toggle-button.gl-button, - .input-group-prepend .btn { - @apply gl-rounded-l-lg #{!important}; - } - - .input-group-append .btn:not(.gl-rounded-full):not(.\!gl-rounded-full) { - @apply gl-rounded-r-lg #{!important}; - } - - // Increased border radii for GlModal - .gl-modal .modal-content { - @apply gl-rounded-[1rem] #{!important}; - } - // Increased border radii for drawers .gl-drawer { @apply gl-rounded-l-[1rem]; @@ -49,24 +21,6 @@ } } - // Increased border radii for GlAlert - .gl-alert { - @apply gl-rounded-lg; - } - - // Increased border radii for GlCard - .gl-card { - @apply gl-rounded-lg; - } - - .gl-card-header { - @apply gl-rounded-t-lg; - } - - .gl-card-footer { - @apply gl-rounded-b-lg; - } - // Increased border radii for more components .info-well, .file-holder, diff --git a/app/assets/stylesheets/framework/ds_experiments_tokens.scss b/app/assets/stylesheets/framework/ds_experiments_tokens.scss index a965bb01a3bb1105ec2000b1d0b94923e4c43641..d542f15a6477d41c1d1c5a76a182e6f3fd8963d9 100644 --- a/app/assets/stylesheets/framework/ds_experiments_tokens.scss +++ b/app/assets/stylesheets/framework/ds_experiments_tokens.scss @@ -6,6 +6,15 @@ :root.application-chrome { + --gl-action-border-radius: var(--gl-border-radius-lg); + --gl-alert-border-radius: var(--gl-border-radius-lg); + --gl-broadcast-banner-border-radius: var(--gl-border-radius-lg); + --gl-button-border-radius: var(--gl-border-radius-lg); + --gl-card-border-radius: var(--gl-border-radius-lg); + --gl-control-border-radius: var(--gl-border-radius-lg); + --gl-dropdown-border-radius: var(--gl-border-radius-lg); + --gl-modal-border-radius: var(--gl-border-radius-2xl); + --gl-button-confirm-primary-background-color-default: var(--gl-color-neutral-800); --gl-button-confirm-primary-background-color-hover: var(--gl-color-neutral-950); --gl-button-confirm-primary-background-color-focus: var(--gl-color-neutral-950);