fix(css): remove unwanted css files when packaged (#2800)

fix: 👷 fix missing css files when css is packaged
and used downstream

- fixed faulty chip import
- remove raw files being bundles with packages as they used our custom
`@compose` causing errors (for now)
- move `base/base.css` to `base.css` so its available as a separate file
in `dist`
  - Was previously merged into `dist/index.css`

packages/css/accordion.css

@@ -72,7 +72,7 @@
     padding: var(--dsc-accordion-padding);
     position: relative;
 
-    @composes ds-focus from './base/base.css';
+    @composes ds-focus from './base.css';
 
     &:focus-visible {
       position: relative; /* Ensure foucs outline renders on top */

packages/css/button.css

@@ -59,7 +59,7 @@
   text-align: inherit;
   text-decoration: none;
 
-  @composes ds-focus from './base/base.css';
+  @composes ds-focus from './base.css';
 
   &:not([data-size]) {
     font-size: inherit; /* Ensure inheriting font-size when <button> */

packages/css/card.css

@@ -63,7 +63,7 @@
     }
 
     &:where(:focus-visible, :has(:focus-visible)) {
-      @composes ds-focus--visible from './base/base.css';
+      @composes ds-focus--visible from './base.css';
     }
 
     &:active {

packages/css/chip.css

@@ -35,15 +35,15 @@
   padding: 0 var(--ds-spacing-3);
   text-decoration: none;
 
-  @composes ds-focus from './base/base.css';
+  @composes ds-focus from './base.css';
 
   &:not([data-size]) {
     font-size: var(--ds-font-size-minus-1);
   }
 
   /* Show focus ring when input inside is focused by keyboard interaction */
   &:has(:focus-visible) {
-    @composes ds-focus--visible from './base/base.css';
+    @composes ds-focus--visible from './base.css';
   }
 
   &:disabled,

packages/css/field.css

@@ -50,7 +50,7 @@
     }
 
     &:has(input:focus-visible) {
-      @composes ds-focus--visible from './base/base.css';
+      @composes ds-focus--visible from './base.css';
     }
 
     &:has(input:only-child) {

packages/css/index.css

@@ -3,7 +3,7 @@
 @layer ds.base, ds.typography, ds.theme, ds.components;
 
 /** Import order defines ordinal specificity for layers */
-@import url('./base/base.css') layer(ds.base);
+@import url('./base.css') layer(ds.base);
 @import url('./heading.css') layer(ds.typography);
 @import url('./label.css') layer(ds.typography);
 @import url('./paragraph.css') layer(ds.typography);
@@ -24,7 +24,7 @@
 @import url('./link.css') layer(ds.components);
 @import url('./fieldset.css') layer(ds.components);
 @import url('./dropdown.css') layer(ds.components);
-@import url('./chip') layer(ds.components);
+@import url('./chip.css') layer(ds.components);
 @import url('./divider.css') layer(ds.components);
 @import url('./tabs.css') layer(ds.components);
 @import url('./pagination.css') layer(ds.components);

packages/css/input.css

@@ -44,7 +44,7 @@
   padding: var(--dsc-input-padding);
   position: relative; /* Ensure foucs outline renders on top */
 
-  @composes ds-focus from './base/base.css';
+  @composes ds-focus from './base.css';
 
   /* Round border-width up to nearest 1px if supported */
   @supports (width: round(down, .1em, 1px)) {

packages/css/package.json

@@ -13,8 +13,7 @@
     "./*": "./dist/*"
   },
   "files": [
-    "dist",
-    "*.css"
+    "dist"
   ],
   "publishConfig": {
     "access": "public"

packages/css/skiplink.css

@@ -3,7 +3,7 @@
   --dsc-skiplink-background-color: var(--ds-color-surface-hover);
   --dsc-skiplink-color: var(--ds-color-text-default);
 
-  @composes ds-sr-only from './base/base.css';
+  @composes ds-sr-only from './base.css';
 }
 
 .ds-skiplink:focus {

packages/css/tabs.css

@@ -52,7 +52,7 @@
     --dsc-tabs-tab-color: var(--ds-color-text-subtle);
   }
 
-  @composes ds-focus from './base/base.css';
+  @composes ds-focus from './base.css';
 
   /* We set z-index to make sure the active line does not bleed over the focus indicator */
   &:focus-visible {