update css

digdir · Apr 30, 2024 · 8baf9db · 8baf9db
1 parent bab1858
commit 8baf9db
Show file tree

Hide file tree

Showing 4 changed files with 54 additions and 198 deletions.
diff --git a/packages/css/index.css b/packages/css/index.css
@@ -13,3 +13,4 @@
 @import url('./accordion.css');
 @import url('./switch.css');
 @import url('./checkbox.css');
+@import url('./radio.css');
diff --git a/packages/css/Radio.module.css → packages/css/radio.css b/packages/css/Radio.module.css → packages/css/radio.css
@@ -1,5 +1,5 @@
 @layer fds.radio {
-  .container {
+  .fds-radio {
     --fds-radio-size: 1.75rem;
     --fds-radio-focus-border-width: 3px;
     --fds-radio-background: var(--fds-semantic-background-default);
@@ -9,13 +9,13 @@
     display: grid;
   }
 
-  .container:has(.label) {
+  .fds-radio:has(.fds-radio__label) {
     grid-template-columns: var(--fds-radio-size) auto;
     gap: var(--fds-spacing-2);
   }
 
   /* Radio */
-  .input {
+  .fds-radio__input {
     position: relative;
     width: var(--fds-radio-size);
     height: var(--fds-radio-size);
@@ -30,7 +30,7 @@
     border-radius: 50%;
   }
 
-  .input::before {
+  .fds-radio__input::before {
     position: absolute;
     content: '';
     display: block;
@@ -43,7 +43,7 @@
     border-radius: var(--fds-border_radius-medium);
   }
 
-  .label {
+  .fds-radio__label {
     min-height: var(--fds-sizing-10);
     min-width: min-content;
     display: inline-flex;
@@ -53,100 +53,111 @@
     cursor: pointer;
   }
 
-  .description {
+  .fds-radio__description {
     margin-top: calc(var(--fds-spacing-3) * -1);
     color: var(--fds-semantic-text-neutral-subtle);
     grid-column: 2;
   }
 
-  .disabled > .input,
-  .disabled > .label,
-  .disabled > .input::before {
+  .fds-radio--disabled > .fds-radio__input,
+  .fds-radio--disabled > .fds-radio__label,
+  .fds-radio--disabled > .fds-radio__input::before {
     cursor: not-allowed;
   }
 
-  .disabled > .label,
-  .disabled > .input,
-  .disabled > .description {
+  .fds-radio--disabled > .fds-radio__label,
+  .fds-radio--disabled > .fds-radio__input,
+  .fds-radio--disabled > .fds-radio__description {
     opacity: var(--fds-opacity-disabled);
   }
 
-  .readonly > .input,
-  .readonly > .label,
-  .readonly > .input::before {
+  .fds-radio--readonly > .fds-radio__input,
+  .fds-radio--readonly > .fds-radio__label,
+  .fds-radio--readonly > .fds-radio__input::before {
     cursor: default;
   }
 
-  .input:focus-visible {
+  .fds-radio__input:focus-visible {
     outline-offset: 0;
     outline: var(--fds-radio-focus-border-width) solid var(--fds-semantic-border-focus-outline);
-    box-shadow: inset 0 0 0 var(--fds-radio-focus-border-width) var(--fds-semantic-border-focus-boxshadow), inset 0 0 0 6px var(--fds-radio-background);
+    box-shadow:
+      inset 0 0 0 var(--fds-radio-focus-border-width) var(--fds-semantic-border-focus-boxshadow),
+      inset 0 0 0 6px var(--fds-radio-background);
   }
 
-  .input:checked {
+  .fds-radio__input:checked {
     --fds-radio-border-color: var(--fds-semantic-border-input-hover);
 
     background: var(--fds-radio-border-color);
   }
 
-  .readonly > .input {
+  .fds-radio--readonly > .fds-radio__input {
     --fds-radio-border-color: var(--fds-semantic-border-neutral-subtle);
     --fds-radio-background: var(--fds-semantic-surface-neutral-subtle);
   }
 
-  .input:checked:not(:focus-visible) {
-    box-shadow: inset 0 0 0 2px var(--fds-radio-border-color), inset 0 0 0 6px var(--fds-radio-background);
+  .fds-radio__input:checked:not(:focus-visible) {
+    box-shadow:
+      inset 0 0 0 2px var(--fds-radio-border-color),
+      inset 0 0 0 6px var(--fds-radio-background);
   }
 
-  .readonly > .input:checked {
+  .fds-radio--readonly > .fds-radio__input:checked {
     background: var(--fds-semantic-border-neutral-default);
   }
 
-  .error > .input:not(:disabled, :focus-visible) {
+  .fds-radio--error > .fds-radio__input:not(:disabled, :focus-visible) {
     --fds-radio-border-color: var(--fds-semantic-border-danger-default);
   }
 
   /* Only use hover for non-touch devices to prevent sticky-hovering
     "input:not(:read-only)" does not work so using ".container:not(.readonly) >" instead */
   @media (hover: hover) and (pointer: fine) {
-    .container:not(.readonly, .disabled) > .label:hover,
-    .container:not(.readonly, .disabled) > .input:hover + .label {
+    .fds-radio:not(.fds-radio--readonly, .fds-radio--disabled) > .fds-radio__label:hover,
+    .fds-radio:not(.fds-radio--readonly, .fds-radio--disabled) > .fds-radio__input:hover + .fds-radio__label {
       color: var(--fds-semantic-text-action-hover);
     }
 
-    .container:not(.readonly, .disabled) > .input:hover:not(:checked) {
+    .fds-radio:not(.fds-radio--readonly, .fds-radio--disabled) > .fds-radio__input:hover:not(:checked) {
       --fds-radio-border-color: var(--fds-semantic-border-input-hover);
 
-      box-shadow: var(--fds-radio-border__hover), inset 0 0 0 2px var(--fds-radio-border-color);
+      box-shadow:
+        var(--fds-radio-border__hover),
+        inset 0 0 0 2px var(--fds-radio-border-color);
     }
 
-    .container:not(.readonly, .disabled) > .input:hover:checked {
+    .fds-radio:not(.fds-radio--readonly, .fds-radio--disabled) > .fds-radio__input:hover:checked {
       --fds-radio-border-color: var(--fds-semantic-border-input-hover);
 
-      box-shadow: var(--fds-radio-border__hover), inset 0 0 0 2px var(--fds-radio-border-color), inset 0 0 0 6px var(--fds-radio-background);
+      box-shadow:
+        var(--fds-radio-border__hover),
+        inset 0 0 0 2px var(--fds-radio-border-color),
+        inset 0 0 0 6px var(--fds-radio-background);
     }
 
-    .container:not(.readonly, .disabled) > .input:hover:checked:focus-visible {
-      box-shadow: var(--fds-radio-border__hover), inset 0 0 0 var(--fds-radio-focus-border-width) var(--fds-semantic-border-focus-boxshadow),
+    .fds-radio:not(.fds-radio--readonly, .fds-radio--disabled) > .fds-radio__input:hover:checked:focus-visible {
+      box-shadow:
+        var(--fds-radio-border__hover),
+        inset 0 0 0 var(--fds-radio-focus-border-width) var(--fds-semantic-border-focus-boxshadow),
         inset 0 0 0 6px var(--fds-radio-background);
     }
   }
 
   /** Sizing */
 
-  .small {
+  .fds-radio--small {
     --fds-radio-size: var(--fds-sizing-5);
 
     min-height: var(--fds-sizing-10);
   }
 
-  .medium {
+  .fds-radio--medium {
     --fds-radio-size: var(--fds-sizing-6);
 
     min-height: var(--fds-sizing-11);
   }
 
-  .large {
+  .fds-radio--large {
     --fds-radio-size: var(--fds-sizing-7);
 
     min-height: var(--fds-sizing-12);

diff --git a/packages/css/react-css-modules.css b/packages/css/react-css-modules.css
@@ -998,161 +998,6 @@
   }
 }
 
-@layer fds.radio {
-  .fds-radio-container-7a9bd584 {
-    --fds-radio-size: 1.75rem;
-    --fds-radio-focus-border-width: 3px;
-    --fds-radio-background: var(--fds-semantic-background-default);
-    --fds-radio-border-color: var(--fds-semantic-border-input-default);
-    --fds-radio-border__hover: 0 0 0 var(--fds-spacing-2) var(--fds-semantic-surface-info-subtle-hover);
-
-    display: grid;
-  }
-
-  .fds-radio-container-7a9bd584:has(.fds-radio-label-7a9bd584) {
-    grid-template-columns: var(--fds-radio-size) auto;
-    gap: var(--fds-spacing-2);
-  }
-
-  /* Radio */
-  .fds-radio-input-7a9bd584 {
-    position: relative;
-    width: var(--fds-radio-size);
-    height: var(--fds-radio-size);
-    z-index: 1;
-    appearance: none;
-    outline: none;
-    cursor: pointer;
-    margin: 0;
-    align-self: center;
-    box-shadow: inset 0 0 0 2px var(--fds-radio-border-color);
-    background: var(--fds-radio-background);
-    border-radius: 50%;
-  }
-
-  .fds-radio-input-7a9bd584::before {
-    position: absolute;
-    content: '';
-    display: block;
-    width: 2.75rem;
-    height: 2.75rem;
-    transform: translate(-50%, -50%);
-    top: 50%;
-    left: 50%;
-    cursor: pointer;
-    border-radius: var(--fds-border_radius-medium);
-  }
-
-  .fds-radio-label-7a9bd584 {
-    min-height: var(--fds-sizing-10);
-    min-width: min-content;
-    display: inline-flex;
-    flex-direction: row;
-    gap: var(--fds-spacing-1);
-    align-items: center;
-    cursor: pointer;
-  }
-
-  .fds-radio-description-7a9bd584 {
-    margin-top: calc(var(--fds-spacing-3) * -1);
-    color: var(--fds-semantic-text-neutral-subtle);
-    grid-column: 2;
-  }
-
-  .fds-radio-disabled-7a9bd584 > .fds-radio-input-7a9bd584,
-  .fds-radio-disabled-7a9bd584 > .fds-radio-label-7a9bd584,
-  .fds-radio-disabled-7a9bd584 > .fds-radio-input-7a9bd584::before {
-    cursor: not-allowed;
-  }
-
-  .fds-radio-disabled-7a9bd584 > .fds-radio-label-7a9bd584,
-  .fds-radio-disabled-7a9bd584 > .fds-radio-input-7a9bd584,
-  .fds-radio-disabled-7a9bd584 > .fds-radio-description-7a9bd584 {
-    opacity: var(--fds-opacity-disabled);
-  }
-
-  .fds-radio-readonly-7a9bd584 > .fds-radio-input-7a9bd584,
-  .fds-radio-readonly-7a9bd584 > .fds-radio-label-7a9bd584,
-  .fds-radio-readonly-7a9bd584 > .fds-radio-input-7a9bd584::before {
-    cursor: default;
-  }
-
-  .fds-radio-input-7a9bd584:focus-visible {
-    outline-offset: 0;
-    outline: var(--fds-radio-focus-border-width) solid var(--fds-semantic-border-focus-outline);
-    box-shadow: inset 0 0 0 var(--fds-radio-focus-border-width) var(--fds-semantic-border-focus-boxshadow), inset 0 0 0 6px var(--fds-radio-background);
-  }
-
-  .fds-radio-input-7a9bd584:checked {
-    --fds-radio-border-color: var(--fds-semantic-border-input-hover);
-
-    background: var(--fds-radio-border-color);
-  }
-
-  .fds-radio-readonly-7a9bd584 > .fds-radio-input-7a9bd584 {
-    --fds-radio-border-color: var(--fds-semantic-border-neutral-subtle);
-    --fds-radio-background: var(--fds-semantic-surface-neutral-subtle);
-  }
-
-  .fds-radio-input-7a9bd584:checked:not(:focus-visible) {
-    box-shadow: inset 0 0 0 2px var(--fds-radio-border-color), inset 0 0 0 6px var(--fds-radio-background);
-  }
-
-  .fds-radio-readonly-7a9bd584 > .fds-radio-input-7a9bd584:checked {
-    background: var(--fds-semantic-border-neutral-default);
-  }
-
-  .fds-radio-error-7a9bd584 > .fds-radio-input-7a9bd584:not(:disabled, :focus-visible) {
-    --fds-radio-border-color: var(--fds-semantic-border-danger-default);
-  }
-
-  /* Only use hover for non-touch devices to prevent sticky-hovering
-    "input:not(:read-only)" does not work so using ".container:not(.readonly) >" instead */
-  @media (hover: hover) and (pointer: fine) {
-    .fds-radio-container-7a9bd584:not(.fds-radio-readonly-7a9bd584, .fds-radio-disabled-7a9bd584) > .fds-radio-label-7a9bd584:hover,
-    .fds-radio-container-7a9bd584:not(.fds-radio-readonly-7a9bd584, .fds-radio-disabled-7a9bd584) > .fds-radio-input-7a9bd584:hover + .fds-radio-label-7a9bd584 {
-      color: var(--fds-semantic-text-action-hover);
-    }
-
-    .fds-radio-container-7a9bd584:not(.fds-radio-readonly-7a9bd584, .fds-radio-disabled-7a9bd584) > .fds-radio-input-7a9bd584:hover:not(:checked) {
-      --fds-radio-border-color: var(--fds-semantic-border-input-hover);
-
-      box-shadow: var(--fds-radio-border__hover), inset 0 0 0 2px var(--fds-radio-border-color);
-    }
-
-    .fds-radio-container-7a9bd584:not(.fds-radio-readonly-7a9bd584, .fds-radio-disabled-7a9bd584) > .fds-radio-input-7a9bd584:hover:checked {
-      --fds-radio-border-color: var(--fds-semantic-border-input-hover);
-
-      box-shadow: var(--fds-radio-border__hover), inset 0 0 0 2px var(--fds-radio-border-color), inset 0 0 0 6px var(--fds-radio-background);
-    }
-
-    .fds-radio-container-7a9bd584:not(.fds-radio-readonly-7a9bd584, .fds-radio-disabled-7a9bd584) > .fds-radio-input-7a9bd584:hover:checked:focus-visible {
-      box-shadow: var(--fds-radio-border__hover), inset 0 0 0 var(--fds-radio-focus-border-width) var(--fds-semantic-border-focus-boxshadow),
-        inset 0 0 0 6px var(--fds-radio-background);
-    }
-  }
-
-  /** Sizing */
-
-  .fds-radio-small-7a9bd584 {
-    --fds-radio-size: var(--fds-sizing-5);
-
-    min-height: var(--fds-sizing-10);
-  }
-
-  .fds-radio-medium-7a9bd584 {
-    --fds-radio-size: var(--fds-sizing-6);
-
-    min-height: var(--fds-sizing-11);
-  }
-
-  .fds-radio-large-7a9bd584 {
-    --fds-radio-size: var(--fds-sizing-7);
-
-    min-height: var(--fds-sizing-12);
-  }
-}
-
 @layer fds.radio-group {
   .fds-group-inline-f6df9230 {
     display: flex;

diff --git a/packages/react/src/components/form/Radio/Radio.tsx b/packages/react/src/components/form/Radio/Radio.tsx
@@ -6,7 +6,6 @@ import { omit } from '../../../utilities';
 import { Label, Paragraph } from '../../Typography';
 import type { FormFieldProps } from '../useFormField';
 
-import classes from './Radio.module.css';
 import { useRadio } from './useRadio';
 
 export type RadioProps = {
@@ -34,25 +33,25 @@ export const Radio = forwardRef<HTMLInputElement, RadioProps>((props, ref) => {
     >
       <div
         className={cl(
-          classes.container,
-          classes[size],
-          inputProps.disabled && classes.disabled,
-          hasError && classes.error,
-          readOnly && classes.readonly,
+          'fds-radio',
+          `fds-radio--${size}`,
+          inputProps.disabled && `fds-radio--disabled`,
+          hasError && `fds-radio--error`,
+          readOnly && `fds-radio--readonly`,
           className,
         )}
         style={style}
       >
         <input
-          className={classes.input}
+          className={'fds-radio__input'}
           ref={ref}
           {...omit(['size', 'error'], rest)}
           {...inputProps}
         />
         {children && (
           <>
             <Label
-              className={classes.label}
+              className={'fds-radio__label'}
               htmlFor={inputProps.id}
               size={size}
               weight='regular'
@@ -66,7 +65,7 @@ export const Radio = forwardRef<HTMLInputElement, RadioProps>((props, ref) => {
               >
                 <div
                   id={descriptionId}
-                  className={classes.description}
+                  className={'fds-radio__description'}
                 >
                   {description}
                 </div>