refactor(components): split css into multiple files

packages/components/src/content/container.css

@@ -0,0 +1,5 @@
+@layer sl-components {
+  [data-sl-container] {
+    container: sl-container / inline-size;
+  }
+}

packages/components/src/content/container.tsx

@@ -2,6 +2,7 @@ import type { ComponentPropsWithoutRef } from 'react'
 import React, { forwardRef } from 'react'
 
 import type { ContentContainerAs } from './types'
+import './container.css'
 
 /**
  * Wraps Content component to support Container Queries

packages/components/src/content/content.css

@@ -1,6 +1,6 @@
 @layer sl-components {
-  [data-sl-container] {
-    container: sl-container / inline-size;
+  [data-sl-content] {
+    padding: var(--sl-content-space-vertical) var(--sl-content-space-horizontal);
   }
 
   @container sl-container (min-width: 0px) {
@@ -52,8 +52,4 @@
       }
     }
   }
-
-  [data-sl-content] {
-    padding: var(--sl-content-space-vertical) var(--sl-content-space-horizontal);
-  }
 }

packages/components/src/content/content.tsx

@@ -1,7 +1,7 @@
 import type { ComponentPropsWithoutRef } from 'react'
 import React, { forwardRef } from 'react'
-import './content.css'
 
+import './content.css'
 import type { ContentContainerAs } from './types'
 
 /**

packages/components/src/field/field-label.css

@@ -0,0 +1,16 @@
+@layer sl-components {
+  [data-sl-field-label] {
+    grid-area: label;
+    margin-left: var(--sl-element-horizontal-gap);
+    margin-bottom: var(--sl-element-vertical-gap);
+    color: var(--sl-element-label-color);
+    display: flex;
+    align-items: center;
+    font: var(--sl-text-body-font);
+    letter-spacing: var(--sl-text-body-letter-spacing);
+
+    &[data-disabled='true'] {
+      color: var(--sl-fg-disabled);
+    }
+  }
+}

packages/components/src/field/field-label.tsx

@@ -1,7 +1,9 @@
 import type { ComponentPropsWithoutRef } from 'react'
 import React, { forwardRef } from 'react'
+
 import { createMessageHook } from '../locale'
 import { messages } from './messages'
+import './field-label.css'
 
 const useMessage = createMessageHook(messages)
 

packages/components/src/field/field-message.css

@@ -0,0 +1,17 @@
+@layer sl-components {
+  [data-sl-field-message] {
+    grid-area: message;
+    margin-left: var(--sl-element-horizontal-gap);
+    margin-top: var(--sl-element-vertical-gap);
+  }
+
+  [data-sl-field-message-text] {
+    color: var(--sl-fg);
+    font: var(--sl-text-caption-2-font);
+    letter-spacing: var(--sl-text-caption-2-letter-spacing);
+  }
+
+  [data-sl-field-message-text][role='alert'] {
+    color: var(--sl-fg-critical);
+  }
+}

packages/components/src/field/field-message.tsx

@@ -2,6 +2,7 @@ import type { ComponentPropsWithoutRef, ReactNode } from 'react'
 import React, { forwardRef } from 'react'
 
 import { Stack } from '../stack'
+import './field-message.css'
 
 export const FieldMessage = forwardRef<HTMLDivElement, FieldMessageProps>(
   function FieldMessage(props, ref) {

packages/components/src/field/field.css

@@ -1,25 +1,4 @@
 @layer sl-components {
-  [data-sl-field][data-variant='default'] {
-    --sl-element-template-areas: 'label' 'input' 'message';
-    --sl-element-vertical-gap: var(--sl-space-1);
-    --sl-element-horizontal-gap: var(--sl-space-0);
-    --sl-element-label-color: var(--sl-fg-soft);
-  }
-
-  [data-sl-field][data-variant='group'] {
-    --sl-element-template-areas: 'label' 'input' 'message';
-    --sl-element-vertical-gap: var(--sl-space-3);
-    --sl-element-horizontal-gap: var(--sl-space-0);
-    --sl-element-label-color: var(--sl-fg-soft);
-  }
-
-  [data-sl-field][data-variant='control'] {
-    --sl-element-template-areas: 'input label' '- message';
-    --sl-element-label-color: var(--sl-fg);
-    --sl-element-vertical-gap: var(--sl-space-0);
-    --sl-element-horizontal-gap: var(--sl-space-2);
-  }
-
   [data-sl-field] {
     display: grid;
     grid-template-areas: var(--sl-element-template-areas);
@@ -33,35 +12,25 @@
       grid-area: input;
     }
 
-    [data-sl-field-message] {
-      grid-area: message;
-      margin-left: var(--sl-element-horizontal-gap);
-      margin-top: var(--sl-element-vertical-gap);
-    }
-
-    [data-sl-field-message-text] {
-      color: var(--sl-fg);
-      font: var(--sl-text-caption-2-font);
-      letter-spacing: var(--sl-text-caption-2-letter-spacing);
+    &[data-variant='default'] {
+      --sl-element-template-areas: 'label' 'input' 'message';
+      --sl-element-vertical-gap: var(--sl-space-1);
+      --sl-element-horizontal-gap: var(--sl-space-0);
+      --sl-element-label-color: var(--sl-fg-soft);
     }
 
-    [data-sl-field-message-text][role='alert'] {
-      color: var(--sl-fg-critical);
+    &[data-variant='group'] {
+      --sl-element-template-areas: 'label' 'input' 'message';
+      --sl-element-vertical-gap: var(--sl-space-3);
+      --sl-element-horizontal-gap: var(--sl-space-0);
+      --sl-element-label-color: var(--sl-fg-soft);
     }
 
-    [data-sl-field-label] {
-      grid-area: label;
-      margin-left: var(--sl-element-horizontal-gap);
-      margin-bottom: var(--sl-element-vertical-gap);
-      color: var(--sl-element-label-color);
-      display: flex;
-      align-items: center;
-      font: var(--sl-text-body-font);
-      letter-spacing: var(--sl-text-body-letter-spacing);
-
-      &[data-disabled='true'] {
-        color: var(--sl-fg-disabled);
-      }
+    &[data-variant='control'] {
+      --sl-element-template-areas: 'input label' '- message';
+      --sl-element-label-color: var(--sl-fg);
+      --sl-element-vertical-gap: var(--sl-space-0);
+      --sl-element-horizontal-gap: var(--sl-space-2);
     }
   }
 }

packages/components/src/field/field.tsx

@@ -1,5 +1,6 @@
 import type { ComponentPropsWithoutRef } from 'react'
 import React, { forwardRef } from 'react'
+
 import './field.css'
 
 export const Field = forwardRef<HTMLDivElement, FieldProps>(function Field(

packages/components/src/filter/filter-list.css

@@ -0,0 +1,13 @@
+@layer sl-tokens {
+  :where([data-sl-filter-list]) {
+    --sl-filter-list-height: 16rem;
+  }
+}
+
+@layer sl-components {
+  [data-sl-filter-list] {
+    max-height: var(--sl-filter-list-height);
+    overflow-y: auto;
+    overflow-x: hidden;
+  }
+}

packages/components/src/filter/filter-list.tsx

@@ -4,6 +4,7 @@ import type { SelectListProps } from '../select'
 import { SelectList } from '../select'
 import { ComboboxList } from '../combobox'
 import { useSearchable } from './use-searchable'
+import './filter-list.css'
 
 /**
  * Filter listbox

packages/components/src/filter/filter.css → packages/components/src/filter/filter-option-check.css

@@ -1,33 +1,11 @@
 @layer sl-tokens {
-  :where([data-sl-filter-popover]) {
-    --sl-filter-popover-width: 16rem;
-  }
-
-  :where([data-sl-filter-list]) {
-    --sl-filter-list-height: 16rem;
-  }
-
   :where([data-sl-filter-option-check]) {
     --sl-filter-option-check-size: 1.25rem;
     --sl-filter-option-check-border-width: 0.0625rem;
   }
 }
 
 @layer sl-components {
-  [data-sl-filter] {
-    color: var(--sl-color-fg);
-  }
-
-  [data-sl-filter-popover] {
-    width: var(--sl-filter-popover-width);
-  }
-
-  [data-sl-filter-list] {
-    max-height: var(--sl-filter-list-height);
-    overflow-y: auto;
-    overflow-x: hidden;
-  }
-
   [data-sl-filter-option-check] {
     position: relative;
     background: transparent;
@@ -66,11 +44,4 @@
     width: calc(var(--sl-filter-option-check-size) / 2);
     border-radius: var(--sl-border-radius-full);
   }
-
-  [data-sl-filter-popover-footer] {
-    gap: var(--sl-space-2);
-    display: flex;
-    flex-direction: row;
-    justify-content: flex-end;
-  }
 }

packages/components/src/filter/filter-option-check.tsx

@@ -4,6 +4,7 @@ import { IconCheckSmall } from '@vtex/shoreline-icons'
 
 import { useSelectContext } from '../select'
 import { SelectItemCheck } from '@ariakit/react'
+import './filter-option-check.css'
 
 /**
  * Check state of the FilterOption

packages/components/src/filter/filter-popover.css

@@ -0,0 +1,18 @@
+@layer sl-tokens {
+  :where([data-sl-filter-popover]) {
+    --sl-filter-popover-width: 16rem;
+  }
+}
+
+@layer sl-components {
+  [data-sl-filter-popover] {
+    width: var(--sl-filter-popover-width);
+  }
+
+  [data-sl-filter-popover-footer] {
+    gap: var(--sl-space-2);
+    display: flex;
+    flex-direction: row;
+    justify-content: flex-end;
+  }
+}

packages/components/src/filter/filter-popover.tsx

@@ -9,9 +9,9 @@ import { FilterApply } from './filter-apply'
 import { Button } from '../button'
 import { Combobox } from '../combobox'
 import { useSearchable } from './use-searchable'
-
 import { createMessageHook } from '../locale'
 import { messages } from './messages'
+import './filter-popover.css'
 
 const useMessage = createMessageHook(messages)
 

packages/components/src/filter/filter.tsx

@@ -6,7 +6,6 @@ import { FilterTrigger } from './filter-trigger'
 import type { FilterPopoverProps } from './filter-popover'
 import { FilterPopover } from './filter-popover'
 import { FilterList } from './filter-list'
-import './filter.css'
 
 /**
  * Filter component

packages/components/src/grid/grid-cell.css

@@ -0,0 +1,11 @@
+@layer sl-components {
+  [data-sl-grid-cell] {
+    grid-column-start: var(--sl-grid-cell-columnStart);
+    grid-column-end: var(--sl-grid-cell-columnEnd);
+    grid-row-start: var(--sl-grid-cell-rowStart);
+    grid-row-end: var(--sl-grid-cell-rowEnd);
+    grid-column: var(--sl-grid-cell-column);
+    grid-row: var(--sl-grid-cell-row);
+    grid-area: var(--sl-grid-cell-area);
+  }
+}

packages/components/src/grid/grid-cell.tsx

@@ -1,6 +1,7 @@
 import type { CSSProperties, ComponentPropsWithoutRef } from 'react'
 import React, { forwardRef } from 'react'
 import type { CSSProperty } from '@vtex/shoreline-utils'
+import './grid-cell.css'
 
 export const GridCell = forwardRef<HTMLDivElement, GridCellProps>(
   function GridCell(props, ref) {

packages/components/src/grid/grid.css

@@ -9,14 +9,4 @@
     grid-auto-rows: var(--sl-grid-autoRows);
     grid-auto-flow: var(--sl-grid-autoFlow);
   }
-
-  [data-sl-grid-cell] {
-    grid-column-start: var(--sl-grid-cell-columnStart);
-    grid-column-end: var(--sl-grid-cell-columnEnd);
-    grid-row-start: var(--sl-grid-cell-rowStart);
-    grid-row-end: var(--sl-grid-cell-rowEnd);
-    grid-column: var(--sl-grid-cell-column);
-    grid-row: var(--sl-grid-cell-row);
-    grid-area: var(--sl-grid-cell-area);
-  }
 }

packages/components/src/menu/menu-item.css

@@ -0,0 +1,53 @@
+@layer sl-components {
+  [data-sl-menu-item] {
+    outline: none;
+    text-decoration: none;
+    display: flex;
+    cursor: pointer;
+    background: var(--sl-bg-muted-plain);
+    color: var(--sl-fg-muted);
+    padding: var(--sl-space-2) var(--sl-space-3);
+    border-radius: var(--sl-border-radius-medium);
+    font: var(--sl-text-emphasis-font);
+    letter-spacing: var(--sl-text-emphasis-letter-spacing);
+    gap: var(--sl-space-2);
+
+    &:hover {
+      background: var(--sl-bg-muted-plain-hover);
+      color: var(--sl-fg-muted-hover);
+    }
+
+    &:active {
+      background: var(--sl-bg-muted-plain-pressed);
+      color: var(--sl-fg-muted-pressed);
+    }
+
+    &:focus-visible {
+      box-shadow: var(--sl-focus-ring-accent);
+    }
+
+    &[data-critical='true'] {
+      color: var(--sl-fg-critical);
+      background: var(--sl-bg-critical-plain);
+
+      &:hover {
+        color: var(--sl-fg-critical-hover);
+        background: var(--sl-bg-critical-plain-hover);
+      }
+
+      &:active {
+        color: var(--sl-fg-critical-pressed);
+        background: var(--sl-bg-critical-plain-pressed);
+      }
+
+      &:focus-visible {
+        box-shadow: var(--sl-focus-ring-critical);
+      }
+    }
+
+    &[data-disabled='true'] {
+      color: var(--sl-fg-disabled);
+      background: var(--sl-bg-muted-plain);
+    }
+  }
+}

packages/components/src/menu/menu-item.tsx

@@ -1,6 +1,7 @@
 import type { ComponentPropsWithoutRef } from 'react'
 import React, { forwardRef } from 'react'
 import { MenuItem as BaseMenuItem } from '@ariakit/react'
+import './menu-item.css'
 
 export const MenuItem = forwardRef<HTMLDivElement, MenuItemProps>(
   function MenuItem(props, ref) {

packages/components/src/menu/menu-separator.css

@@ -0,0 +1,10 @@
+@layer sl-components {
+  [data-sl-menu-separator] {
+    border: none;
+    border-bottom: var(--sl-border);
+    margin-left: calc(var(--sl-space-4) * -1);
+    margin-right: calc(var(--sl-space-4) * -1);
+    margin-top: var(--sl-space-1);
+    margin-bottom: var(--sl-space-1);
+  }
+}