feat(tabs): css changes (#2431)

part of #2295

Author: Barsnes

.changeset/purple-berries-repeat.md

@@ -0,0 +1,6 @@
+---
+"@digdir/designsystemet-css": patch
+"@digdir/designsystemet-react": patch
+---
+
+Tabs: css changes

packages/css/tabs.css

@@ -5,6 +5,28 @@
   --dsc-tabs-content-padding: var(--ds-spacing-5);
   --dsc-tabs-content-color: var(--ds-color-neutral-text-default);
   --dsc-tabs-list-border-color: var(--ds-color-neutral-border-subtle);
+
+  &[data-size='sm'] {
+    --dsc-tabs-tab-padding: var(--ds-spacing-2) var(--ds-spacing-4);
+    --dsc-tabs-content-padding: var(--ds-spacing-4);
+  }
+
+  &[data-size='lg'] {
+    --dsc-tabs-tab-padding: var(--ds-spacing-4) var(--ds-spacing-6);
+    --dsc-tabs-content-padding: var(--ds-spacing-6);
+  }
+}
+
+.ds-tabs__content {
+  padding: var(--dsc-tabs-content-padding);
+  color: var(--dsc-tabs-content-color);
+}
+
+.ds-tabs__tablist {
+  display: flex;
+  flex-direction: row;
+  border-bottom: var(--ds-border-width-default) solid var(--dsc-tabs-list-border-color);
+  position: relative;
 }
 
 .ds-tabs__tab {
@@ -23,59 +45,35 @@
   color: var(--dsc-tabs-tab-color);
   position: relative;
   font-family: inherit;
-}
-
-.ds-tabs__content {
-  padding: var(--dsc-tabs-content-padding);
-  color: var(--dsc-tabs-content-color);
-}
-
-.ds-tabs--sm {
-  --dsc-tabs-tab-padding: var(--ds-spacing-2) var(--ds-spacing-4);
-  --dsc-tabs-content-padding: var(--ds-spacing-4);
-}
 
-.ds-tabs--md {
-  --dsc-tabs-tab-padding: var(--ds-spacing-3) var(--ds-spacing-5);
-  --dsc-tabs-content-padding: var(--ds-spacing-5);
-}
-
-.ds-tabs--lg {
-  --dsc-tabs-tab-padding: var(--ds-spacing-4) var(--ds-spacing-6);
-  --dsc-tabs-content-padding: var(--ds-spacing-6);
-}
-
-@media (hover: hover) and (pointer: fine) {
-  .ds-tabs__tab:hover:not([aria-selected='true']) {
-    --dsc-tabs__tab-bottom-border-color: var(--ds-color-neutral-border-subtle);
-    --dsc-tabs-tab-color: var(--ds-color-neutral-text-default);
+  &[aria-selected='true'] {
+    --dsc-tabs__tab-bottom-border-color: var(--ds-color-accent-base-default);
+    --dsc-tabs-tab-color: var(--ds-color-accent-text-subtle);
   }
-}
 
-.ds-tabs__tab[aria-selected='true'] {
-  --dsc-tabs__tab-bottom-border-color: var(--ds-color-accent-base-default);
-  --dsc-tabs-tab-color: var(--ds-color-accent-text-subtle);
-}
+  @composes ds-focus from './utilities.css';
 
-.ds-tabs__tab:focus {
-  z-index: 2;
-}
+  /* We set z-index to make sure the active line does not bleed over the focus indicator */
+  &:focus-visible {
+    z-index: 2;
+  }
 
-.ds-tabs__tab::after {
-  content: '';
-  display: block;
-  height: 3px;
-  width: 100%;
-  border-radius: var(--dsc-border-radius-full);
-  background-color: var(--dsc-tabs__tab-bottom-border-color);
-  position: absolute;
-  bottom: 0;
-  left: 0;
-}
+  &::after {
+    content: '';
+    display: block;
+    height: 3px;
+    width: 100%;
+    border-radius: var(--dsc-border-radius-full);
+    background-color: var(--dsc-tabs__tab-bottom-border-color);
+    position: absolute;
+    bottom: 0;
+    left: 0;
+  }
 
-.ds-tabs__tablist {
-  display: flex;
-  flex-direction: row;
-  border-bottom: var(--ds-border-width-default) solid var(--dsc-tabs-list-border-color);
-  position: relative;
+  @media (hover: hover) and (pointer: fine) {
+    &:hover:not([aria-selected='true']) {
+      --dsc-tabs__tab-bottom-border-color: var(--ds-color-neutral-border-subtle);
+      --dsc-tabs-tab-color: var(--ds-color-neutral-text-default);
+    }
+  }
 }

packages/react/src/components/Tabs/Tab.tsx

@@ -27,7 +27,7 @@ export const Tab = forwardRef<HTMLButtonElement, TabProps>((props, ref) => {
         <button
           {...useTabRest}
           type='button'
-          className={cl('ds-tabs__tab', 'ds-focus', className)}
+          className={cl('ds-tabs__tab', className)}
           ref={ref}
         >
           {children}

packages/react/src/components/Tabs/TabsRoot.tsx

@@ -42,18 +42,7 @@ export const TabsContext = createContext<TabsContextProps>({});
  * ```
  */
 export const TabsRoot = forwardRef<HTMLDivElement, TabsProps>(
-  (
-    {
-      size = 'md',
-      children,
-      value,
-      defaultValue,
-      className,
-      onChange,
-      ...rest
-    },
-    ref,
-  ) => {
+  ({ size = 'md', value, defaultValue, className, onChange, ...rest }, ref) => {
     const isControlled = value !== undefined;
     const [uncontrolledValue, setUncontrolledValue] = useState<
       string | undefined
@@ -77,12 +66,11 @@ export const TabsRoot = forwardRef<HTMLDivElement, TabsProps>(
         }}
       >
         <div
-          className={cl('ds-tabs', `ds-tabs--${size}`, className)}
+          className={cl('ds-tabs', className)}
+          data-size={size}
           ref={ref}
           {...rest}
-        >
-          {children}
-        </div>
+        />
       </TabsContext.Provider>
     );
   },