@navikt/ds-css 1.0.0-rc.1 → 1.0.0-rc.4

package/README.md

@@ -0,0 +1,43 @@
+# NAV designsystem styling
+
+CSS-package containing design for @navikt/ds-react and more.
+
+- All our tokens (Colors, border, shadows etc)
+- Component-styling for `@navikt/ds-react` packages
+- Normalize.css v8
+- Fonts
+
+## Installation
+
+Install `@navikt/ds-css` with yarn
+
+```bash
+  yarn add @navikt/ds-css
+```
+
+Install `@navikt/ds-css` with npm
+
+```bash
+  npm install @navikt/ds-css
+```
+
+## Usage
+
+Import styling for make it accessible. Only need to do this one place.
+
+```javascript
+import "@navikt/ds-css";
+
+function App() {
+  return <Component />;
+}
+```
+
+## Learn more
+
+- [Designsystem documentation](https://aksel.nav.no/designsystem)
+- [Storybook](https://master--5f801fb2aea7820022de2936.chromatic.com/)
+
+## License
+
+[MIT](https://github.com/navikt/Designsystemet/blob/master/LICENCE)

package/accordion.css

@@ -1,15 +1,9 @@
 :root {
-  --navds-accordion-color-text: var(--navds-semantic-color-text);
-  --navds-accordion-color-background: var(
-    --navds-semantic-color-component-background-light
-  );
-  --navds-accordion-color-text-hover: var(--navds-semantic-color-link);
-  --navds-accordion-color-border: var(--navds-semantic-color-border-muted);
-  --navds-accordion-color-border-hover: var(
+  --navds-accordion-color-text-hover: var(
     --navds-semantic-color-interaction-primary
   );
-  --navds-accordion-color-text-open: var(--navds-semantic-color-text);
-  --navds-accordion-color-text-open-hover: var(
+  --navds-accordion-color-border: var(--navds-semantic-color-border);
+  --navds-accordion-color-border-hover: var(
     --navds-semantic-color-interaction-primary
   );
   --navds-accordion-color-background-open: var(
@@ -17,14 +11,6 @@
   );
 }
 
-.navds-accordion .ReactCollapse--collapse {
-  transition: height 250ms cubic-bezier(0.4, 0, 0.2, 1);
-}
-
-.navds-accordion {
-  background: var(--navds-accordion-color-background);
-}
-
 .navds-accordion__item:focus-within {
   position: relative;
 }
@@ -33,9 +19,9 @@
   width: 100%;
   display: flex;
   justify-content: space-between;
-  align-items: center;
-  gap: var(--navds-spacing-4);
-  padding: var(--navds-spacing-4) var(--navds-spacing-3);
+  align-items: flex-start;
+  gap: var(--navds-spacing-2);
+  padding: 14px var(--navds-spacing-3) var(--navds-spacing-3);
   margin: 0;
   text-align: left;
   background: transparent;
@@ -54,20 +40,18 @@
   border-color: var(--navds-accordion-color-border-hover);
 }
 
-.navds-accordion__item--open > .navds-accordion__header {
-  background-color: var(--navds-accordion-color-background-open);
-  color: var(--navds-accordion-color-text-open);
-  border-color: transparent;
+.navds-accordion__header-content {
+  overflow: hidden;
+  text-overflow: ellipsis;
 }
 
-.navds-accordion__item--open > .navds-accordion__header:hover {
-  border-color: transparent;
-  color: var(--navds-accordion-color-text-open-hover);
+.navds-accordion__item--open > .navds-accordion__header {
+  background-color: var(--navds-accordion-color-background-open);
+  border-color: var(--navds-accordion-color-background-open);
 }
 
 .navds-accordion__content {
-  color: var(--navds-accordion-color-text);
-  padding: var(--navds-spacing-5) var(--navds-spacing-3) var(--navds-spacing-10);
+  padding: var(--navds-spacing-3) var(--navds-spacing-3) 18px;
   border-bottom: 2px solid var(--navds-accordion-color-border);
 }
 
@@ -79,12 +63,12 @@
 }
 
 .navds-accordion__expand-icon {
-  width: 1.5rem;
-  height: 1.5rem;
+  font-size: 1.5rem;
+  height: 1.75rem;
   flex-shrink: 0;
 }
 
-.navds-accordion__expand-icon--flip {
+.navds-accordion__item--open .navds-accordion__expand-icon {
   transform: rotateZ(180deg);
 }
 

package/alert.css

@@ -74,6 +74,6 @@
 
 .navds-alert--inline {
   background-color: transparent;
-  border-color: transparent;
+  border: none;
   padding: 0;
 }

package/baseline/baseline.css

@@ -43,6 +43,10 @@ a {
   color: var(--navds-semantic-color-link);
 }
 
+button {
+  color: inherit;
+}
+
 /* https://web.dev/prefers-reduced-motion/ */
 @media (prefers-reduced-motion: reduce) {
   *:not(.navds-loader *):not(.navds-loader),

package/button.css

@@ -116,24 +116,35 @@
   display: inline-flex;
   cursor: pointer;
   margin: 0;
-  text-align: center;
   text-decoration: none;
   border: none;
   background: none;
   border-radius: var(--navds-border-radius-small);
-  min-width: 48px;
-  padding: var(--navds-spacing-3);
+  padding: var(--navds-spacing-3) var(--navds-spacing-5);
+  align-items: center;
+  justify-content: center;
+  gap: var(--navds-spacing-2);
 }
 
 .navds-button--small {
-  padding-top: 0.375rem;
-  padding-bottom: 0.375rem;
-  min-width: 32px;
+  padding: 0.375rem var(--navds-spacing-3);
 }
 
 .navds-button--xsmall {
-  padding: 0.125rem 0.375rem;
-  min-width: 24px;
+  padding: 0.125rem var(--navds-spacing-2);
+  gap: var(--navds-spacing-1);
+}
+
+.navds-button--icon-only {
+  padding: var(--navds-spacing-3);
+}
+
+.navds-button--small.navds-button--icon-only {
+  padding: 0.375rem;
+}
+
+.navds-button--xsmall.navds-button--icon-only {
+  padding: var(--navds-spacing-1);
 }
 
 .navds-button:focus {
@@ -141,22 +152,37 @@
   box-shadow: var(--navds-shadow-focus);
 }
 
-.navds-button__inner {
-  margin: auto;
+.navds-button__icon {
+  --navds-button-icon-adjustment: -4px;
+
+  font-size: 1.5rem;
   display: flex;
-  align-items: center;
-  gap: var(--navds-spacing-2);
 }
 
-.navds-button svg {
-  font-size: 1.5rem;
+.navds-button__icon:first-child {
+  margin-left: var(--navds-button-icon-adjustment);
+}
+
+.navds-button__icon:last-child {
+  margin-right: var(--navds-button-icon-adjustment);
+}
+
+.navds-button__icon:only-child {
+  margin: 0;
 }
 
-.navds-button--small svg,
-.navds-button--xsmall svg {
+.navds-button--small .navds-button__icon {
+  --navds-button-icon-adjustment: -2px;
+
   font-size: 1.25rem;
 }
 
+.navds-button--xsmall .navds-button__icon {
+  --navds-button-icon-adjustment: -2px;
+
+  font-size: 1rem;
+}
+
 /*************************
  * .navds-button--primary *
  *************************/