@navikt/ds-css 7.40.0 → 8.0.1

package/chips.css

@@ -1,234 +0,0 @@
-.navds-chips {
-  display: flex;
-  gap: var(--a-spacing-2);
-  margin: 0;
-  padding: 0;
-  list-style: none;
-  flex-wrap: wrap;
-}
-
-.navds-chips :where(li) {
-  margin: 0;
-  padding: 0;
-  list-style: none;
-  display: block;
-}
-
-.navds-chips__chip {
-  all: unset;
-  display: flex;
-  cursor: pointer;
-  align-items: center;
-  justify-content: center;
-  gap: var(--a-spacing-05);
-  margin: 0;
-  padding: 0 var(--a-spacing-3);
-  text-decoration: none;
-  border-radius: var(--a-border-radius-full);
-  min-height: 2rem;
-}
-
-.navds-chips--small .navds-chips__chip {
-  min-height: 1.5rem;
-  padding: 0 var(--a-spacing-2);
-}
-
-.navds-chips__toggle {
-  box-shadow: inset 0 0 0 1px var(--ac-chip-toggle-border, var(--a-border-subtle));
-  background-color: var(--ac-chip-toggle-bg, var(--a-surface-action-subtle));
-  color: var(--ac-chip-toggle-text, var(--a-text-default));
-}
-
-.navds-chips__toggle:hover {
-  box-shadow: inset 0 0 0 1px var(--ac-chip-toggle-hover-border, var(--a-border-subtle-hover));
-  background-color: var(--ac-chip-toggle-hover-bg, var(--a-surface-action-subtle-hover));
-}
-
-.navds-chips__toggle[aria-pressed="true"] {
-  box-shadow: none;
-  background-color: var(--ac-chip-toggle-pressed-bg, var(--a-surface-action-selected));
-  color: var(--ac-chip-toggle-pressed-text, var(--a-text-on-action));
-}
-
-.navds-chips__toggle[aria-pressed="true"]:hover {
-  background-color: var(--ac-chip-toggle-pressed-hover-bg, var(--a-surface-action-selected-hover));
-}
-
-/* Toggle variant neutral */
-.navds-chips__toggle--neutral {
-  box-shadow: inset 0 0 0 1px var(--ac-chip-toggle-neutral-border, var(--a-border-subtle));
-  background-color: var(--ac-chip-toggle-neutral-bg, var(--a-surface-neutral-subtle));
-  color: var(--ac-chip-toggle-neutral-text, var(--a-text-default));
-}
-
-.navds-chips__toggle--neutral:hover {
-  box-shadow: inset 0 0 0 1px var(--ac-chip-toggle-neutral-hover-border, var(--a-border-subtle-hover));
-  background-color: var(--ac-chip-toggle-neutral-hover-bg, var(--a-surface-neutral-subtle-hover));
-}
-
-.navds-chips__toggle--neutral[aria-pressed="true"] {
-  box-shadow: none;
-  background-color: var(--ac-chip-toggle-neutral-pressed-bg, var(--a-surface-neutral-selected));
-  color: var(--ac-chip-toggle-neutral-pressed-text, var(--a-text-on-neutral));
-}
-
-.navds-chips__toggle--neutral[aria-pressed="true"]:hover {
-  background-color: var(--ac-chip-toggle-neutral-pressed-hover-bg, var(--a-surface-neutral-selected));
-}
-
-.navds-chips__toggle:focus-visible {
-  box-shadow: 0 0 0 2px var(--ac-chip-toggle-focus, var(--a-border-focus));
-}
-
-.navds-chips__toggle[aria-pressed="true"]:focus-visible,
-.navds-chips__toggle:active:focus-visible {
-  box-shadow:
-    inset 0 0 0 1px var(--a-surface-default),
-    0 0 0 2px var(--ac-chip-toggle-focus, var(--a-border-focus));
-}
-
-@supports not selector(:focus-visible) {
-  .navds-chips__toggle:focus {
-    outline: none;
-    box-shadow: 0 0 0 2px var(--ac-chip-toggle-focus, var(--a-border-focus));
-  }
-
-  .navds-chips__toggle[aria-pressed="true"]:focus,
-  .navds-chips__toggle:active:focus {
-    box-shadow:
-      inset 0 0 0 1px var(--a-surface-default),
-      0 0 0 2px var(--ac-chip-toggle-focus, var(--a-border-focus));
-  }
-}
-
-.navds-chips--medium .navds-chips__toggle--with-checkmark {
-  padding-left: var(--a-spacing-1-alt);
-}
-
-.navds-chips--small .navds-chips__toggle--with-checkmark {
-  padding-left: var(--a-spacing-1);
-}
-
-.navds-chips--small .navds-chips__toggle-icon {
-  width: 1rem;
-  height: 1rem;
-}
-
-.navds-chips__removable {
-  gap: 0;
-}
-
-.navds-chips__removable--action {
-  background-color: var(--ac-chip-removable-action-bg, var(--a-surface-action-selected));
-  color: var(--ac-chip-removable-action-text, var(--a-text-on-action));
-}
-
-.navds-chips__removable--neutral {
-  background-color: var(--ac-chip-removable-neutral-bg, var(--a-surface-neutral-subtle));
-  color: var(--ac-chip-removable-neutral-text, var(--a-text-default));
-  box-shadow: inset 0 0 0 1px var(--ac-chip-removable-neutral-border, var(--a-border-default));
-}
-
-.navds-chips__removable-icon {
-  width: 1.5rem;
-  height: 1.5rem;
-  font-size: 1.25rem;
-  display: grid;
-  place-items: center;
-  border-radius: var(--a-border-radius-full);
-}
-
-.navds-chips--small .navds-chips__removable-icon {
-  width: 1.25rem;
-  height: 1.25rem;
-}
-
-.navds-chips--small .navds-chips__removable-icon > svg {
-  width: 1rem;
-}
-
-.navds-chips__removable--action:focus-visible {
-  box-shadow:
-    inset 0 0 0 1px var(--a-surface-default),
-    0 0 0 2px var(--a-border-focus);
-}
-
-.navds-chips__removable--neutral:focus-visible {
-  box-shadow: 0 0 0 2px var(--a-border-focus);
-}
-
-@supports not selector(:focus-visible) {
-  .navds-chips__removable--action:focus {
-    outline: none;
-    box-shadow:
-      inset 0 0 0 1px var(--a-surface-default),
-      0 0 0 2px var(--a-border-focus);
-  }
-
-  .navds-chips__removable--neutral:focus {
-    outline: none;
-    box-shadow: 0 0 0 2px var(--a-border-focus);
-  }
-}
-
-.navds-chips__removable--action:hover {
-  background-color: var(--ac-chip-removable-action-hover-bg, var(--a-surface-action-selected-hover));
-}
-
-.navds-chips__removable--neutral:hover {
-  background-color: var(--ac-chip-removable-neutral-hover-bg, var(--a-surface-neutral-subtle-hover));
-  box-shadow: inset 0 0 0 1px var(--ac-chip-removable-neutral-hover-border, var(--a-border-strong));
-}
-
-.navds-chips--icon-left {
-  padding-left: var(--a-spacing-1-alt);
-}
-
-.navds-chips--icon-right {
-  padding-right: var(--a-spacing-1-alt);
-}
-
-.navds-chips--small .navds-chips--icon-right {
-  padding-right: var(--a-spacing-05);
-}
-
-@media (forced-colors: active) {
-  .navds-chips__chip {
-    border: 1px solid transparent;
-  }
-
-  .navds-chips__chip:hover {
-    background-color: highlighttext;
-    color: highlight;
-  }
-
-  .navds-chips__chip:focus-visible {
-    outline: 2px solid transparent;
-    outline-offset: 2px;
-  }
-
-  .navds-chips__chip:where([aria-pressed="true"], :active, :hover) > span {
-    forced-color-adjust: none;
-  }
-
-  .navds-chips__toggle:active {
-    background-color: highlight;
-    color: highlighttext;
-  }
-
-  .navds-chips__toggle[aria-pressed="true"] {
-    background-color: selecteditem;
-    color: selecteditemtext;
-    border: 1px solid selecteditem;
-  }
-
-  .navds-chips__toggle[aria-pressed="true"]:hover {
-    background-color: selecteditemtext;
-    color: selecteditem;
-  }
-
-  .navds-chips__toggle[aria-pressed="true"]:active {
-    background-color: highlight;
-    color: highlighttext;
-  }
-}

package/config/tests/bundle.test.ts

@@ -1,51 +0,0 @@
-import fastglob from "fast-glob";
-import path from "node:path";
-import { describe, expect, test } from "vitest";
-
-/**
- * Darkside config might have some new files added. We can skip these when checking for equality.
- */
-const newFiles = ["theme"];
-const deprecatedFiles: string[] = [];
-
-describe("Check that old and new (darkside) bundle matches", () => {
-  test("Darkside includes the same files as old bundle", () => {
-    const oldBundleDir = path.join(__dirname, "../../dist");
-    const darksideDir = path.join(__dirname, "../../dist/darkside");
-
-    const oldFiles = fastglob.sync("**/*.css", {
-      cwd: oldBundleDir,
-      ignore: ["**/version/**", "**/darkside/**"],
-    });
-
-    const darksideFiles = fastglob.sync("**/*.css", {
-      cwd: darksideDir,
-      ignore: ["**/version/**"],
-    });
-
-    expect(oldFiles.length).toBeGreaterThan(0);
-    expect(darksideFiles.length).toBeGreaterThan(0);
-
-    // Compare file names
-    oldFiles.forEach((file) => {
-      if (deprecatedFiles.find((oldFile) => file.includes(oldFile))) {
-        return;
-      }
-      expect(darksideFiles).toContain(file);
-    });
-
-    darksideFiles.forEach((file) => {
-      if (newFiles.find((newFile) => file.includes(newFile))) {
-        return;
-      }
-      expect(oldFiles).toContain(file);
-    });
-
-    /**
-     * Check that darkside has the same amount of files as old bundle
-     */
-    expect(
-      darksideFiles.length - newFiles.length * 2 + deprecatedFiles.length * 2,
-    ).toBe(oldFiles.length);
-  });
-});

package/copybutton.css

@@ -1,226 +0,0 @@
-[data-theme="dark"] {
-  --__ac-copybutton-action-text: var(--a-blue-300);
-  --__ac-copybutton-bg-hover: rgb(214 231 255 /0.13);
-  --__ac-copybutton-icon-success: rgb(51 170 95 /1);
-  --__ac-copybutton-neutral-text: rgb(231 240 254 /0.69);
-  --__ac-copybutton-text: rgb(251 252 254 /0.96);
-}
-
-[data-theme="light"] {
-  --__ac-copybutton-action-text: initial;
-  --__ac-copybutton-bg-hover: initial;
-  --__ac-copybutton-icon-success: initial;
-  --__ac-copybutton-neutral-text: initial;
-  --__ac-copybutton-text: initial;
-}
-
-.navds-copybutton {
-  --__ac-copybutton-padding: var(--a-spacing-3) var(--a-spacing-5) var(--a-spacing-3) var(--a-spacing-4);
-
-  cursor: pointer;
-  margin: 0;
-  text-decoration: none;
-  border: none;
-  background: none;
-  border-radius: var(--ac-copybutton-border-radius, var(--a-border-radius-medium));
-  padding: var(--__ac-copybutton-padding);
-  display: grid;
-  place-content: center;
-}
-
-@media (forced-colors: active) {
-  .navds-copybutton {
-    background-color: ButtonFace;
-    border: solid 1px ButtonText;
-    color: ButtonText;
-  }
-
-  .navds-copybutton.navds-copybutton:focus-visible {
-    box-shadow: none;
-    outline: 2px solid highlight;
-    outline-offset: 2px;
-  }
-}
-
-.navds-copybutton--icon-right {
-  --__ac-copybutton-padding: var(--a-spacing-3) var(--a-spacing-4) var(--a-spacing-3) var(--a-spacing-5);
-}
-
-.navds-copybutton--small {
-  --__ac-copybutton-padding: var(--a-spacing-1) var(--a-spacing-3) var(--a-spacing-1) var(--a-spacing-2);
-
-  min-height: 2rem;
-  min-width: 2rem;
-}
-
-.navds-copybutton--small.navds-copybutton--icon-right {
-  --__ac-copybutton-padding: var(--a-spacing-1) var(--a-spacing-2) var(--a-spacing-1) var(--a-spacing-3);
-}
-
-.navds-copybutton--xsmall {
-  --__ac-copybutton-padding: var(--a-spacing-05) var(--a-spacing-2) var(--a-spacing-05) var(--a-spacing-1);
-
-  min-height: 1.5rem;
-  min-width: 1.5rem;
-}
-
-.navds-copybutton--xsmall.navds-copybutton--icon-right {
-  --__ac-copybutton-padding: var(--a-spacing-05) var(--a-spacing-1) var(--a-spacing-05) var(--a-spacing-2);
-}
-
-.navds-copybutton--icon-only {
-  --__ac-copybutton-padding: var(--a-spacing-3);
-}
-
-.navds-copybutton--small.navds-copybutton--icon-only {
-  --__ac-copybutton-padding: var(--a-spacing-1);
-}
-
-.navds-copybutton--xsmall.navds-copybutton--icon-only {
-  --__ac-copybutton-padding: var(--a-spacing-05);
-}
-
-.navds-copybutton__icon {
-  font-size: 1.5rem;
-  display: flex;
-}
-
-:where(.navds-copybutton--xsmall, .navds-copybutton--small) .navds-copybutton__icon {
-  font-size: 1.25rem;
-}
-
-.navds-copybutton__icon:first-of-type {
-  margin-left: -0.25rem;
-}
-
-.navds-copybutton__icon:last-of-type {
-  margin-right: -0.25rem;
-}
-
-.navds-copybutton__icon:only-child {
-  margin: 0;
-}
-
-.navds-copybutton--active .navds-copybutton__icon {
-  animation: akselCopyButtonIconAnimation 2s cubic-bezier(0.215, 0.61, 0.355, 1);
-}
-
-@keyframes akselCopyButtonIconAnimation {
-  8% {
-    transform: translateY(0);
-  }
-
-  17% {
-    transform: translateY(-10%);
-  }
-
-  25% {
-    transform: translateY(2%);
-  }
-
-  30% {
-    transform: translateY(0);
-  }
-}
-
-:where(.navds-copybutton--small, .navds-copybutton--xsmall):where(:not(:only-child)) {
-  margin: -0.125rem;
-}
-
-.navds-copybutton:focus-visible {
-  outline: none;
-  box-shadow: var(--a-shadow-focus);
-}
-
-@supports not selector(:focus-visible) {
-  .navds-copybutton:focus {
-    outline: none;
-    box-shadow: var(--a-shadow-focus);
-  }
-}
-
-/* Variant/action */
-.navds-copybutton--action {
-  color: var(--ac-copybutton-action-text, var(--__ac-copybutton-action-text, var(--a-text-action)));
-  background-color: var(--ac-copybutton-action-bg, var(--a-surface-transparent));
-}
-
-.navds-copybutton--action:hover {
-  color: var(--ac-copybutton-action-hover-text, var(--__ac-copybutton-action-text, var(--a-text-action-hover)));
-  background-color: var(--ac-copybutton-action-hover-bg, var(--__ac-copybutton-bg-hover, var(--a-surface-hover)));
-}
-
-.navds-copybutton--action:where(:disabled),
-.navds-copybutton--action:hover:where(:disabled) {
-  color: var(--ac-copybutton-action-text, var(--__ac-copybutton-action-text, var(--a-text-action)));
-  background-color: var(--ac-copybutton-action-bg, var(--a-surface-transparent));
-  box-shadow: none;
-}
-
-.navds-copybutton--active.navds-copybutton--action {
-  color: var(--ac-copybutton-action-active-text, var(--__ac-copybutton-icon-success, var(--a-icon-success)));
-}
-
-/* Variant/neutral */
-.navds-copybutton--neutral {
-  color: var(--ac-copybutton-neutral-text, var(--__ac-copybutton-neutral-text, var(--a-text-subtle)));
-  background-color: var(--ac-copybutton-neutral-bg, var(--a-surface-transparent));
-}
-
-.navds-copybutton--neutral:hover {
-  color: var(--ac-copybutton-neutral-hover-text, var(--__ac-copybutton-text, var(--a-text-default)));
-  background-color: var(--ac-copybutton-neutral-hover-bg, var(--__ac-copybutton-bg-hover, var(--a-surface-hover)));
-}
-
-.navds-copybutton--neutral:where(:disabled, .navds-copybutton--disabled),
-.navds-copybutton--neutral:hover:where(:disabled, .navds-copybutton--disabled) {
-  color: var(--ac-copybutton-neutral-text, var(--__ac-copybutton-text, var(--a-text-default)));
-  background-color: var(--ac-copybutton-neutral-bg, var(--a-surface-transparent));
-  box-shadow: none;
-}
-
-.navds-copybutton--active.navds-copybutton--neutral {
-  color: var(--ac-copybutton-neutral-active-text, var(--__ac-copybutton-text, var(--a-text-default)));
-}
-
-.navds-copybutton__content {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  gap: var(--a-spacing-2);
-}
-
-.navds-copybutton--small > .navds-copybutton__content {
-  gap: var(--a-spacing-1-alt);
-}
-
-.navds-copybutton--xsmall > .navds-copybutton__content {
-  gap: var(--a-spacing-1);
-}
-
-.navds-copybutton--active > .navds-copybutton__content {
-  animation: var(--ac-copybutton-animation, akselCopyButtonAnimation 0.4s linear);
-}
-
-@keyframes akselCopyButtonAnimation {
-  0% {
-    opacity: 0.4;
-  }
-
-  100% {
-    opacity: 1;
-  }
-}
-
-/* Disabled */
-.navds-copybutton:where(:disabled) {
-  cursor: not-allowed;
-  opacity: 0.3;
-}
-
-@media (forced-colors: active) {
-  .navds-copybutton:where(:disabled) {
-    opacity: 1;
-    border-color: GrayText;
-  }
-}

package/darkside/README.md

@@ -1,25 +0,0 @@
-# Template for writing new CSS
-
-## File setup
-
-1. Create new CSS-file for component: "alert.darkside.css", "button.darkside.css" etc. Remember to add `.darkside.` for easier lookup.
-2. Import file in "darkside/index.css": `@import "./alert.darkside.css`
-
-Files will not be included in `/dist` for now to avoid it potentially polluting production-code. This will need to be revisited when we want to expose the new systems outside the team.
-
-## Development
-
-1. Write new CSS for component. Use same prefix `.navds` as before.
-2. Run storybook and change from "Default (old)" to "Darkside (new)" in toolbar. You are now developing new CSS 🎉
-
-## Syntax
-
-- Test using outline + outline-offset for focus-markings.
-
-## Checklist
-
-- Add new CSS-files under `core/css/darkside`.
-- New files should include `.darkside.` for easier lookup.
-- Import new CSS-files in `core/css/darkside/index.css`
-- New CSS-selectors should have `.navds` as prefix, same as original code.
-- Test changes in Storybook by changing mode in toolbar from "default (old)" -> "darkside (new)"

package/darkside/baseline/print.darkside.css

@@ -1,75 +0,0 @@
-/* ==========================================================================
-   Print styles copied from https://github.com/h5bp/html5-boilerplate/blob/master/dist/css/style.css
-   Inlined to avoid the additional HTTP request:
-   https://www.phpied.com/delay-loading-your-print-css/
-   ========================================================================== */
-
-@media print {
-  *,
-  *::before,
-  *::after {
-    background: #fff !important;
-    color: #000 !important;
-
-    /* Black prints faster */
-    box-shadow: none !important;
-    text-shadow: none !important;
-  }
-
-  a,
-  a:visited {
-    text-decoration: underline;
-  }
-
-  a[href]::after {
-    content: " (" attr(href) ")";
-  }
-
-  abbr[title]::after {
-    content: " (" attr(title) ")";
-  }
-
-  /*
-     * Don't show links that are fragment identifiers,
-     * or use the `javascript:` pseudo protocol
-     */
-  a[href^="#"]::after,
-  a[href^="javascript:"]::after {
-    content: "";
-  }
-
-  pre {
-    white-space: pre-wrap !important;
-  }
-
-  pre,
-  blockquote {
-    border: 1px solid #999;
-    page-break-inside: avoid;
-  }
-
-  /*
-     * Printing Tables:
-     * https://web.archive.org/web/20180815150934/http://css-discuss.incutio.com/wiki/Printing_Tables
-     */
-  thead {
-    display: table-header-group;
-  }
-
-  tr,
-  img {
-    page-break-inside: avoid;
-  }
-
-  p,
-  h2,
-  h3 {
-    orphans: 3;
-    widows: 3;
-  }
-
-  h2,
-  h3 {
-    page-break-after: avoid;
-  }
-}

package/darkside/baseline/tokens.darkside.css

@@ -1 +0,0 @@
-@import "../../../tokens/dist/darkside/tokens.css";

package/darkside/form/index.css

@@ -1,14 +0,0 @@
-@import "./fieldset.darkside.css";
-@import "./file-upload.darkside.css";
-@import "./form.darkside.css";
-@import "./error-summary.darkside.css";
-@import "./confirmation-panel.darkside.css";
-@import "./radio-checkbox.darkside.css";
-@import "./select.darkside.css";
-@import "./switch.darkside.css";
-@import "./text-field.darkside.css";
-@import "./textarea.darkside.css";
-@import "./search.darkside.css";
-@import "./combobox.darkside.css";
-@import "./form-summary.darkside.css";
-@import "./form-progress.darkside.css";

package/darkside/index.css

@@ -1,64 +0,0 @@
-@charset "UTF-8";
-
-/* CSS is ordered by specificity, so that browsers without layers fall backs to good defaults */
-@layer aksel.reset, aksel.theming, aksel.baseline, aksel.print, aksel.typography, aksel.components, aksel.layout;
-
-/* ----------------------------- CSS foundations ---------------------------- */
-@import "./baseline/fonts.darkside.css" layer(aksel.typography);
-@import "./baseline/reset.darkside.css" layer(aksel.reset);
-@import "./baseline/tokens.darkside.css" layer(aksel.theming);
-@import "./baseline/baseline.darkside.css" layer(aksel.baseline);
-@import "./baseline/print.darkside.css" layer(aksel.print);
-
-/* ------------------------------- Components ------------------------------- */
-@import "./theme.darkside.css" layer(aksel.components);
-@import "./typography.darkside.css" layer(aksel.components);
-@import "./button.darkside.css" layer(aksel.components);
-@import "./chips.darkside.css" layer(aksel.components);
-
-/**
-  * Most components depend on typo-styles, so we import them first.
-  *
-  * `./form/index.css` edits the following components:
-  * - Button
-  * - Chips
-  * To avoid specificity conflicts, we import those components before form.
-*/
-@import "./form/index.css" layer(aksel.components);
-@import "./accordion.darkside.css" layer(aksel.components);
-@import "./alert.darkside.css" layer(aksel.components);
-@import "./chat.darkside.css" layer(aksel.components);
-@import "./copybutton.darkside.css" layer(aksel.components);
-@import "./date.darkside.css" layer(aksel.components);
-@import "./dialog.darkside.css" layer(aksel.components);
-@import "./dropdown.darkside.css" layer(aksel.components);
-@import "./action-menu.darkside.css" layer(aksel.components);
-@import "./expansioncard.darkside.css" layer(aksel.components);
-@import "./guide-panel.darkside.css" layer(aksel.components);
-@import "./help-text.darkside.css" layer(aksel.components);
-@import "./inline-message.darkside.css" layer(aksel.components);
-@import "./internalheader.darkside.css" layer(aksel.components);
-@import "./link.darkside.css" layer(aksel.components);
-@import "./link-panel.darkside.css" layer(aksel.components);
-@import "./link-anchor.darkside.css" layer(aksel.components);
-@import "./link-card.darkside.css" layer(aksel.components);
-@import "./loader.darkside.css" layer(aksel.components);
-@import "./modal.darkside.css" layer(aksel.components);
-@import "./pagination.darkside.css" layer(aksel.components);
-@import "./popover.darkside.css" layer(aksel.components);
-@import "./tag.darkside.css" layer(aksel.components);
-@import "./timeline.darkside.css" layer(aksel.components);
-@import "./tooltip.darkside.css" layer(aksel.components);
-@import "./toggle-group.darkside.css" layer(aksel.components);
-@import "./panel.darkside.css" layer(aksel.components);
-@import "./read-more.darkside.css" layer(aksel.components);
-@import "./progress-bar.darkside.css" layer(aksel.components);
-@import "./skeleton.darkside.css" layer(aksel.components);
-@import "./process.darkside.css" layer(aksel.components);
-@import "./stepper.darkside.css" layer(aksel.components);
-@import "./table.darkside.css" layer(aksel.components);
-@import "./tabs.darkside.css" layer(aksel.components);
-@import "./list.darkside.css" layer(aksel.components);
-
-/* --------------------------------- Layout --------------------------------- */
-@import "./primitives/index.css" layer(aksel.layout);

package/darkside/primitives/index.css

@@ -1,7 +0,0 @@
-@import "./base.darkside.css";
-@import "./box.darkside.css";
-@import "./bleed.darkside.css";
-@import "./page.darkside.css";
-@import "./hgrid.darkside.css";
-@import "./stack.darkside.css";
-@import "./responsive.darkside.css";