From 91cac1993403a12327302ff68f7080f93ef106c6 Mon Sep 17 00:00:00 2001 From: eirikbacker Date: Wed, 29 Jan 2025 12:38:03 +0100 Subject: [PATCH] fix: use _dsc internal css custom property naming convetion --- packages/css/src/base.css | 8 ++++---- packages/css/src/field.css | 4 ++-- packages/css/src/fieldset.css | 2 +- packages/css/src/input.css | 29 +++++++++++++++++------------ packages/css/src/label.css | 6 +++--- packages/css/src/modal.css | 6 +++--- packages/css/src/skeleton.css | 2 +- packages/css/src/spinner.css | 2 +- 8 files changed, 32 insertions(+), 27 deletions(-) diff --git a/packages/css/src/base.css b/packages/css/src/base.css index b7a52872bc..083e79f965 100644 --- a/packages/css/src/base.css +++ b/packages/css/src/base.css @@ -49,16 +49,16 @@ body, * We use both box-shadow and outline to ensure that the focus style is visible, * in case box-shadow is overridden. */ - box-shadow: var(--ds--focus, var(--dsc-focus-boxShadow)); - outline: var(--ds--focus, var(--dsc-focus-outline)); - outline-offset: var(--ds--focus, var(--dsc-focus-border-width)); + box-shadow: var(--_ds--focus, var(--dsc-focus-boxShadow)); + outline: var(--_ds--focus, var(--dsc-focus-outline)); + outline-offset: var(--_ds--focus, var(--dsc-focus-border-width)); /** * Using CSS custom properties toggle trick to ensure focus-visible is only shown on outermost element * https://css-tricks.com/the-css-custom-property-toggle-trick/ */ * { - --ds--focus: ; + --_ds--focus: ; } } diff --git a/packages/css/src/field.css b/packages/css/src/field.css index 97ded9c348..015b6c34fc 100644 --- a/packages/css/src/field.css +++ b/packages/css/src/field.css @@ -26,7 +26,7 @@ } &:has([aria-readonly='true'], [readonly]) label { - --ds-internal-label--readonly: ; /* Activate lock icon for label when readonly */ + --_dsc-label--readonly: ; /* Activate lock icon for label when readonly */ } /** @@ -49,7 +49,7 @@ } & label { - --ds-internal-label--readonly: initial; /* Never show lock icon on toggle inputs */ + --_dsc-label--readonly: initial; /* Never show lock icon on toggle inputs */ font-weight: var(--ds-font-weight-regular); } diff --git a/packages/css/src/fieldset.css b/packages/css/src/fieldset.css index 57ec5277a0..10b16921e7 100644 --- a/packages/css/src/fieldset.css +++ b/packages/css/src/fieldset.css @@ -6,7 +6,7 @@ /* Add lock icon to legend when only containing readonly inputs */ &:has(input[readonly]):not(:has(input:not([readonly]))) > legend { - --ds-internal-label--readonly: ; /* Using technique https://css-tricks.com/the-css-custom-property-toggle-trick/ */ + --_dsc-label--readonly: ; /* Using technique https://css-tricks.com/the-css-custom-property-toggle-trick/ */ } /* Stack everything that is not directly after legend */ diff --git a/packages/css/src/input.css b/packages/css/src/input.css index cde534dd5e..cf6b6c98fd 100644 --- a/packages/css/src/input.css +++ b/packages/css/src/input.css @@ -23,11 +23,11 @@ --dsc-input-stroke: 0.05em; /* Checkmark with antialiasing is achieved by percentages 48% / 50% / 52% */ - --diagonal-1: transparent calc(48% - var(--dsc-input-stroke)); - --diagonal-2: currentcolor calc(50% - var(--dsc-input-stroke)); - --diagonal-3: currentcolor calc(50% + var(--dsc-input-stroke)); - --diagonal-4: transparent calc(52% + var(--dsc-input-stroke)); - --spacing--toggle: calc(var(--ds-size-1) / 2); + --_dsc-input-diagonal-1: transparent calc(48% - var(--dsc-input-stroke)); + --_dsc-input-diagonal-2: currentcolor calc(50% - var(--dsc-input-stroke)); + --_dsc-input-diagonal-3: currentcolor calc(50% + var(--dsc-input-stroke)); + --_dsc-input-diagonal-4: transparent calc(52% + var(--dsc-input-stroke)); + --_dsc-input-spacing--toggle: calc(var(--ds-size-1) / 2); appearance: none; background: var(--dsc-input-background); @@ -150,7 +150,7 @@ &[type='checkbox'], &[type='radio'] { border-width: var(--dsc-input-border-width--toggle); - padding: var(--spacing--toggle); + padding: var(--_dsc-input-spacing--toggle); flex-shrink: 0; /* Never shrink a toggle input */ line-height: inherit; /* Inherit line height so we can use 1lh to align with first line of label */ @@ -189,8 +189,13 @@ background-repeat: no-repeat; background-position: 10% 73%, 90% 50%; background-size: 35% 35%, 65% 65%; - background-image: linear-gradient(45deg, var(--diagonal-1), var(--diagonal-2), var(--diagonal-3), var(--diagonal-4)), - linear-gradient(-45deg, var(--diagonal-1), var(--diagonal-2), var(--diagonal-3), var(--diagonal-4)); + background-image: linear-gradient( + 45deg, + var(--_dsc-input-diagonal-1), + var(--_dsc-input-diagonal-2), + var(--_dsc-input-diagonal-3), + var(--_dsc-input-diagonal-4) + ), linear-gradient(-45deg, var(--_dsc-input-diagonal-1), var(--_dsc-input-diagonal-2), var(--_dsc-input-diagonal-3), var(--_dsc-input-diagonal-4)); @media (forced-colors: active) { background-color: LinkText; @@ -222,20 +227,20 @@ * Switch */ &[role='switch']:is([type='radio'], [type='checkbox']) { - --circle-position: left; + --_dsc-input-circle-position: left; background-image: radial-gradient(circle closest-side, currentcolor 95%, transparent 100%); background-origin: content-box; - background-position: var(--circle-position); + background-position: var(--_dsc-input-circle-position); background-repeat: no-repeat; - background-size: calc(var(--dsc-input-size--toggle) - var(--spacing--toggle) * 2) 100%; + background-size: calc(var(--dsc-input-size--toggle) - var(--_dsc-input-spacing--toggle) * 2) 100%; border-radius: var(--ds-border-radius-full); padding-inline: 0; /* Reset to position circle correctly */ transition: 0.2s background-position; width: calc(var(--dsc-input-size--toggle) * 2); &:checked { - --circle-position: right; + --_dsc-input-circle-position: right; @media (forced-colors: active) { color: CanvasText; diff --git a/packages/css/src/label.css b/packages/css/src/label.css index 8aca6bac02..67cd02f8fb 100644 --- a/packages/css/src/label.css +++ b/packages/css/src/label.css @@ -2,15 +2,15 @@ --dsc-label-icon-url: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' aria-hidden='true' viewBox='0 0 24 24'%3E%3Cpath fill-rule='evenodd' d='M12 2.25A4.75 4.75 0 0 0 7.25 7v2.25H7A1.75 1.75 0 0 0 5.25 11v9c0 .41.34.75.75.75h12a.75.75 0 0 0 .75-.75v-9A1.75 1.75 0 0 0 17 9.25h-.25V7A4.75 4.75 0 0 0 12 2.25m3.25 7V7a3.25 3.25 0 0 0-6.5 0v2.25zM12 13a1.5 1.5 0 0 0-.75 2.8V17a.75.75 0 0 0 1.5 0v-1.2A1.5 1.5 0 0 0 12 13'/%3E%3C/svg%3E"); --dsc-label-icon-size: 1.2em; --dsc-label-icon-spacing: var(--ds-size-1); - --ds-internal-label--readonly: initial; /* Using technique https://css-tricks.com/the-css-custom-property-toggle-trick/ */ + --_dsc-label--readonly: initial; /* Using technique https://css-tricks.com/the-css-custom-property-toggle-trick/ */ font-weight: var(--ds-font-weight-medium); - padding-inline-start: var(--ds-internal-label--readonly) calc(var(--dsc-label-icon-size) + var(--dsc-label-icon-spacing)); + padding-inline-start: var(--_dsc-label--readonly) calc(var(--dsc-label-icon-size) + var(--dsc-label-icon-spacing)); position: relative; &::before { background: currentcolor; - content: var(--ds-internal-label--readonly) ''; + content: var(--_dsc-label--readonly) ''; display: inline-block; height: var(--dsc-label-icon-size); margin-inline: calc((var(--dsc-label-icon-size) + var(--dsc-label-icon-spacing)) * -1); /* Using margin instead of top/left to avoid position: relative and to support dir="rtl" */ diff --git a/packages/css/src/modal.css b/packages/css/src/modal.css index 2c896658b3..0d4f541136 100644 --- a/packages/css/src/modal.css +++ b/packages/css/src/modal.css @@ -12,7 +12,7 @@ --dsc-modal-spacing: var(--ds-size-6); /* Internal */ - --ds-internal-icon-top-right-margin: calc(var(--dsc-modal-spacing) * -1 + var(--dsc-modal-icon-spacing)); + --_dsc-icon-top-right-margin: calc(var(--dsc-modal-spacing) * -1 + var(--dsc-modal-icon-spacing)); background: var(--dsc-modal-background); border-radius: var(--ds-border-radius-lg); @@ -37,7 +37,7 @@ } &:has(> .ds-modal__block) { - --ds-internal-icon-top-right-margin: var(--dsc-modal-icon-spacing); + --_dsc-icon-top-right-margin: var(--dsc-modal-icon-spacing); padding: 0; /* Let Modal.Block own the padding */ } @@ -58,7 +58,7 @@ /* Close button */ & > form[method='dialog']:first-child > button:only-child { float: right; - margin: var(--ds-internal-icon-top-right-margin) var(--ds-internal-icon-top-right-margin) var(--dsc-modal-icon-spacing) var(--dsc-modal-icon-spacing); + margin: var(--_dsc-icon-top-right-margin) var(--_dsc-icon-top-right-margin) var(--dsc-modal-icon-spacing) var(--dsc-modal-icon-spacing); color: inherit; &::before { diff --git a/packages/css/src/skeleton.css b/packages/css/src/skeleton.css index d7f7dac78a..dc28294a2b 100644 --- a/packages/css/src/skeleton.css +++ b/packages/css/src/skeleton.css @@ -51,7 +51,7 @@ } @media (prefers-reduced-motion: reduce) { - --dsc-skeleton-animation-duration: 1.6s; + animation-duration: 1.6s; } @media (forced-colors: active) { diff --git a/packages/css/src/spinner.css b/packages/css/src/spinner.css index 481d573202..f4b551e2c1 100644 --- a/packages/css/src/spinner.css +++ b/packages/css/src/spinner.css @@ -52,7 +52,7 @@ but don't remove it since it is not decorative. */ @media (prefers-reduced-motion: reduce) { .ds-spinner { - --dsc-spinner-animation-duration: 6s; + animation-duration: 6s; } }