fix: use _dsc internal css custom property naming convetion

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: ;
   }
 }
 

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);
     }
 

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 */

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;

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" */

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 {

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) {

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;
   }
 }