@ndla/primitives 1.0.8-alpha.0 → 1.0.9-alpha.0

package/dist/panda.buildinfo.json

@@ -85,6 +85,7 @@
       "paddingInline]___[value:xsmall",
       "border]___[value:1px solid",
       "width]___[value:fit-content",
+      "textStyle]___[value:label.medium",
       "color]___[value:text.default",
       "backgroundColor]___[value:surface.brand.1.subtle",
       "borderColor]___[value:surface.brand.1.strong",
@@ -101,7 +102,6 @@
       "justifyContent]___[value:center",
       "gap]___[value:xsmall",
       "textDecoration]___[value:none",
-      "textStyle]___[value:label.medium",
       "fontWeight]___[value:bold",
       "transitionProperty]___[value:all",
       "textAlign]___[value:center",
@@ -122,17 +122,17 @@
       "background]___[value:surface.action.active]___[cond:_active",
       "boxShadow]___[value:inset 0 0 0 3px var(--shadow-color), inset 0px 0px 0px 6px currentcolor]___[cond:_focusVisible",
       "color]___[value:text.strong",
-      "background]___[value:surface.actionSubtle.active]___[cond:_active",
+      "background]___[value:surface.actionSubtle.hover.strong]___[cond:_active",
       "background]___[value:transparent",
       "boxShadow]___[value:inset 0 0 0 1px var(--shadow-color)]___[cond:_hover",
       "boxShadow]___[value:inset 0 0 0 3px var(--shadow-color)]___[cond:_hover<___>_focusVisible",
       "borderColor]___[value:stroke.default]___[cond:_active",
       "color]___[value:stroke.hover]___[cond:_hover",
       "color]___[value:surface.actionSubtle.hover.strong]___[cond:_hover",
-      "background]___[value:surface.error",
-      "background]___[value:surface.error.hover]___[cond:_hover",
-      "background]___[value:surface.error.active]___[cond:_active",
-      "boxShadowColor]___[value:surface.error]___[cond:_focusVisible",
+      "background]___[value:surface.danger",
+      "background]___[value:surface.danger.hover]___[cond:_hover",
+      "background]___[value:surface.danger.active]___[cond:_active",
+      "boxShadowColor]___[value:surface.danger]___[cond:_focusVisible",
       "background]___[value:surface.success",
       "background]___[value:surface.success.hover]___[cond:_hover",
       "background]___[value:surface.success.active]___[cond:_active",
@@ -141,6 +141,7 @@
       "textDecoration]___[value:underline",
       "textDecorationThickness]___[value:1px",
       "textDecoration]___[value:none]___[cond:_hover",
+      "background]___[value:surface.hover]___[cond:_active",
       "paddingBlock]___[value:xxsmall",
       "minHeight]___[value:24",
       "textStyle]___[value:label.small",
@@ -597,29 +598,43 @@
       "--arrow-background]___[value:colors.surface.action",
       "height]___[value:200px",
       "objectFit]___[value:cover",
-      "transitionProperty]___[value:background-color, border-color",
+      "borderInlineColor]___[value:transparent",
+      "transitionProperty]___[value:background-color, border-color, color",
       "transitionDuration]___[value:superFast",
       "transitionTimingFunction]___[value:ease-in-out",
-      "background]___[value:surface.brand.1.subtle]___[cond:_hover",
-      "background]___[value:surface.brand.1.subtle]___[cond:_highlighted",
-      "borderBlock]___[value:1px solid",
-      "borderColor]___[value:stroke.hover]___[cond:_highlighted",
-      "borderTop]___[value:1px solid",
-      "borderTopColor]___[value:stroke.subtle",
-      "borderBottom]___[value:1px solid",
-      "borderBottomColor]___[value:transparent",
-      "marginTop]___[value:-1px",
-      "borderTopColor]___[value:transparent]___[cond:_first",
-      "borderTopColor]___[value:stroke.hover]___[cond:_first<___>_hover",
-      "borderTopColor]___[value:stroke.hover]___[cond:_first<___>_highlighted",
-      "borderBottomColor]___[value:stroke.subtle]___[cond:_last",
-      "borderTopColor]___[value:stroke.hover]___[cond:&:hover + &",
-      "borderTopColor]___[value:stroke.hover]___[cond:&[data-highlighted] + &",
-      "borderBottomColor]___[value:transparent]___[cond:_hover",
-      "borderTopColor]___[value:stroke.hover]___[cond:_hover",
-      "borderBottomColor]___[value:stroke.hover]___[cond:_hover<___>_last",
-      "borderTopColor]___[value:stroke.hover]___[cond:_highlighted",
-      "borderBottomColor]___[value:stroke.hover]___[cond:_highlighted<___>_last",
+      "borderStyle]___[value:dashed",
+      "--background-hover]___[value:colors.surface.brand.1.subtle",
+      "--background-current]___[value:colors.surface.actionSubtle.selected",
+      "--border-hover]___[value:colors.stroke.hover",
+      "--color-hover]___[value:colors.text.onAction",
+      "--background-hover]___[value:colors.surface.brand.2.moderate",
+      "--background-current]___[value:colors.blue.800",
+      "--border-hover]___[value:colors.surface.brand.2.strong",
+      "borderBlockColor]___[value:stroke.subtle",
+      "borderBlockColor]___[value:var(--border-hover)]___[cond:_hover",
+      "borderBlockColor]___[value:var(--border-hover)]___[cond:_highlighted",
+      "borderBlockStartColor]___[value:stroke.subtle",
+      "borderBlockEndColor]___[value:transparent",
+      "marginBlockStart]___[value:-1px",
+      "borderBlockStartColor]___[value:transparent]___[cond:_first",
+      "borderBlockStartColor]___[value:var(--border-hover)]___[cond:_first<___>_hover",
+      "borderBlockStartColor]___[value:var(--border-hover)]___[cond:_first<___>_highlighted",
+      "borderBlockEndColor]___[value:stroke.subtle]___[cond:_last",
+      "borderBlockStartColor]___[value:var(--border-hover)]___[cond:&:hover + &",
+      "borderBlockStartColor]___[value:var(--border-hover)]___[cond:&[data-highlighted] + &",
+      "borderBlockEndColor]___[value:transparent]___[cond:_hover",
+      "borderBlockStartColor]___[value:var(--border-hover)]___[cond:_hover",
+      "borderBlockEndColor]___[value:var(--border-hover)]___[cond:_hover<___>_last",
+      "borderBlockStartColor]___[value:var(--border-hover)]___[cond:_highlighted",
+      "borderBlockEndColor]___[value:var(--border-hover)]___[cond:_highlighted<___>_last",
+      "background]___[value:var(--background-hover)]___[cond:_hover",
+      "background]___[value:var(--background-hover)]___[cond:_highlighted",
+      "background]___[value:var(--background-current)]___[cond:&[aria-current=\"true\"], &[aria-current=\"page\"]",
+      "color]___[value:var(--color-hover)]___[cond:&[aria-current=\"true\"], &[aria-current=\"page\"]",
+      "background]___[value:var(--background-hover)]___[cond:&[aria-current=\"true\"], &[aria-current=\"page\"]<___>_hover",
+      "color]___[value:text.default]___[cond:&[aria-current=\"true\"], &[aria-current=\"page\"]<___>_hover",
+      "background]___[value:var(--background-hover)]___[cond:&[aria-current=\"true\"], &[aria-current=\"page\"]<___>_highlighted",
+      "color]___[value:text.default]___[cond:&[aria-current=\"true\"], &[aria-current=\"page\"]<___>_highlighted",
       "minHeight]___[value:40px",
       "maxHeight]___[value:40px",
       "minWidth]___[value:56px",

package/dist/styles.css

@@ -239,8 +239,8 @@
     background: transparent;
 }
 
-  .bg_surface\.error {
-    background: var(--colors-surface-error);
+  .bg_surface\.danger {
+    background: var(--colors-surface-danger);
 }
 
   .bg_surface\.success {
@@ -877,16 +877,44 @@
     object-fit: cover;
 }
 
-  .bd-y_1px_solid {
-    border-block: 1px solid;
+  .bd-x-c_transparent {
+    border-inline-color: transparent;
 }
 
-  .bd-t_1px_solid {
-    border-top: 1px solid;
+  .\--background-hover_colors\.surface\.brand\.1\.subtle {
+    --background-hover: var(--colors-surface-brand-1-subtle);
 }
 
-  .bd-b_1px_solid {
-    border-bottom: 1px solid;
+  .\--background-current_colors\.surface\.actionSubtle\.selected {
+    --background-current: var(--colors-surface-action-subtle-selected);
+}
+
+  .\--border-hover_colors\.stroke\.hover {
+    --border-hover: var(--colors-stroke-hover);
+}
+
+  .\--color-hover_colors\.text\.onAction {
+    --color-hover: var(--colors-text-on-action);
+}
+
+  .\--background-hover_colors\.surface\.brand\.2\.moderate {
+    --background-hover: var(--colors-surface-brand-2-moderate);
+}
+
+  .\--background-current_colors\.blue\.800 {
+    --background-current: var(--colors-blue-800);
+}
+
+  .\--border-hover_colors\.surface\.brand\.2\.strong {
+    --border-hover: var(--colors-surface-brand-2-strong);
+}
+
+  .bd-y-c_stroke\.subtle {
+    border-block-color: var(--colors-stroke-subtle);
+}
+
+  .mbs_-1px {
+    margin-block-start: -1px;
 }
 
   .min-h_40px {
@@ -1204,9 +1232,9 @@
     right: var(--spacing-xxsmall);
 }
 
-  .trs-prop_background-color\,_border-color {
-    --transition-prop: background-color, border-color;
-    transition-property: background-color, border-color;
+  .trs-prop_background-color\,_border-color\,_color {
+    --transition-prop: background-color, border-color, color;
+    transition-property: background-color, border-color, color;
 }
 
   .trs-dur_superFast {
@@ -1219,16 +1247,16 @@
     transition-timing-function: ease-in-out;
 }
 
-  .bd-t-c_stroke\.subtle {
-    border-top-color: var(--colors-stroke-subtle);
+  .border-style_dashed {
+    border-style: dashed;
 }
 
-  .bd-b-c_transparent {
-    border-bottom-color: transparent;
+  .bd-bs-c_stroke\.subtle {
+    border-block-start-color: var(--colors-stroke-subtle);
 }
 
-  .mt_-1px {
-    margin-top: -1px;
+  .bd-be-c_transparent {
+    border-block-end-color: transparent;
 }
 
   .disabled\:cursor_not-allowed:is(:disabled, [disabled], [data-disabled], [aria-disabled='true']) {
@@ -1625,8 +1653,20 @@
     display: inline-block;
 }
 
-  .highlighted\:bg_surface\.brand\.1\.subtle[data-highlighted] {
-    background: var(--colors-surface-brand-1-subtle);
+  .highlighted\:bd-y-c_var\(--border-hover\)[data-highlighted] {
+    border-block-color: var(--border-hover);
+}
+
+  .highlighted\:bg_var\(--background-hover\)[data-highlighted] {
+    background: var(--background-hover);
+}
+
+  .\[\&\[aria-current\=\"true\"\]\,_\&\[aria-current\=\"page\"\]\]\:bg_var\(--background-current\)[aria-current="true"],.\[\&\[aria-current\=\"true\"\]\,_\&\[aria-current\=\"page\"\]\]\:bg_var\(--background-current\)[aria-current="page"] {
+    background: var(--background-current);
+}
+
+  .\[\&\[aria-current\=\"true\"\]\,_\&\[aria-current\=\"page\"\]\]\:c_var\(--color-hover\)[aria-current="true"],.\[\&\[aria-current\=\"true\"\]\,_\&\[aria-current\=\"page\"\]\]\:c_var\(--color-hover\)[aria-current="page"] {
+    color: var(--color-hover);
 }
 
   .closed\:trs-prop_background\,_border-color\,_border\,_border-radius:is([closed], [data-closed], [data-state="closed"]) {
@@ -1781,24 +1821,20 @@
     outline-color: var(--colors-stroke-hover);
 }
 
-  .highlighted\:bd-c_stroke\.hover[data-highlighted] {
-    border-color: var(--colors-stroke-hover);
-}
-
-  .first\:bd-t-c_transparent:first-child {
-    border-top-color: transparent;
+  .first\:bd-bs-c_transparent:first-child {
+    border-block-start-color: transparent;
 }
 
-  .last\:bd-b-c_stroke\.subtle:last-child {
-    border-bottom-color: var(--colors-stroke-subtle);
+  .last\:bd-be-c_stroke\.subtle:last-child {
+    border-block-end-color: var(--colors-stroke-subtle);
 }
 
-  :is(.\[\&\[data-highlighted\]_\+_\&\]\:bd-t-c_stroke\.hover)[data-highlighted] + :is(.\[\&\[data-highlighted\]_\+_\&\]\:bd-t-c_stroke\.hover) {
-    border-top-color: var(--colors-stroke-hover);
+  :is(.\[\&\[data-highlighted\]_\+_\&\]\:bd-bs-c_var\(--border-hover\))[data-highlighted] + :is(.\[\&\[data-highlighted\]_\+_\&\]\:bd-bs-c_var\(--border-hover\)) {
+    border-block-start-color: var(--border-hover);
 }
 
-  .highlighted\:bd-t-c_stroke\.hover[data-highlighted] {
-    border-top-color: var(--colors-stroke-hover);
+  .highlighted\:bd-bs-c_var\(--border-hover\)[data-highlighted] {
+    border-block-start-color: var(--border-hover);
 }
 
   .focusWithin\:ring-o_-1px:focus-within {
@@ -1834,8 +1870,8 @@
     box-shadow: inset 0 0 0 3px var(--shadow-color), inset 0px 0px 0px 6px currentcolor;
 }
 
-  .focusVisible\:bx-sh-c_surface\.error:is(:focus-visible, [data-focus-visible]) {
-    --shadow-color: var(--colors-surface-error);
+  .focusVisible\:bx-sh-c_surface\.danger:is(:focus-visible, [data-focus-visible]) {
+    --shadow-color: var(--colors-surface-danger);
 }
 
   .focusVisible\:bx-sh-c_surface\.success:is(:focus-visible, [data-focus-visible]) {
@@ -1967,8 +2003,8 @@
     color: var(--colors-surface-action-subtle-hover-strong);
 }
 
-  .hover\:bg_surface\.error\.hover:is(:hover, [data-hover]) {
-    background: var(--colors-surface-error-hover);
+  .hover\:bg_surface\.danger\.hover:is(:hover, [data-hover]) {
+    background: var(--colors-surface-danger-hover);
 }
 
   .hover\:bg_surface\.success\.hover:is(:hover, [data-hover]) {
@@ -2015,8 +2051,12 @@
     transform: translateX(20%);
 }
 
-  .hover\:bg_surface\.brand\.1\.subtle:is(:hover, [data-hover]) {
-    background: var(--colors-surface-brand-1-subtle);
+  .hover\:bd-y-c_var\(--border-hover\):is(:hover, [data-hover]) {
+    border-block-color: var(--border-hover);
+}
+
+  .hover\:bg_var\(--background-hover\):is(:hover, [data-hover]) {
+    background: var(--background-hover);
 }
 
   .hover\:bd-c_stroke\.hover:is(:hover, [data-hover]) {
@@ -2031,16 +2071,16 @@
     background-color: var(--colors-surface-action-subtle-hover);
 }
 
-  .\[\&\:hover_\+_\&\]\:bd-t-c_stroke\.hover:hover + .\[\&\:hover_\+_\&\]\:bd-t-c_stroke\.hover {
-    border-top-color: var(--colors-stroke-hover);
+  .\[\&\:hover_\+_\&\]\:bd-bs-c_var\(--border-hover\):hover + .\[\&\:hover_\+_\&\]\:bd-bs-c_var\(--border-hover\) {
+    border-block-start-color: var(--border-hover);
 }
 
-  .hover\:bd-b-c_transparent:is(:hover, [data-hover]) {
-    border-bottom-color: transparent;
+  .hover\:bd-be-c_transparent:is(:hover, [data-hover]) {
+    border-block-end-color: transparent;
 }
 
-  .hover\:bd-t-c_stroke\.hover:is(:hover, [data-hover]) {
-    border-top-color: var(--colors-stroke-hover);
+  .hover\:bd-bs-c_var\(--border-hover\):is(:hover, [data-hover]) {
+    border-block-start-color: var(--border-hover);
 }
 
   .active\:c_text\.onAction:is(:active, [data-active]) {
@@ -2051,18 +2091,22 @@
     background: var(--colors-surface-action-active);
 }
 
-  .active\:bg_surface\.actionSubtle\.active:is(:active, [data-active]) {
-    background: var(--colors-surface-action-subtle-active);
+  .active\:bg_surface\.actionSubtle\.hover\.strong:is(:active, [data-active]) {
+    background: var(--colors-surface-action-subtle-hover-strong);
 }
 
-  .active\:bg_surface\.error\.active:is(:active, [data-active]) {
-    background: var(--colors-surface-error-active);
+  .active\:bg_surface\.danger\.active:is(:active, [data-active]) {
+    background: var(--colors-surface-danger-active);
 }
 
   .active\:bg_surface\.success\.active:is(:active, [data-active]) {
     background: var(--colors-surface-success-active);
 }
 
+  .active\:bg_surface\.hover:is(:active, [data-active]) {
+    background: var(--colors-surface-hover);
+}
+
   .active\:bg_surface\.active:is(:active, [data-active]) {
     background: var(--colors-surface-active);
 }
@@ -2253,6 +2297,22 @@
     color: var(--colors-stroke-hover);
 }
 
+  .\[\&\[aria-current\=\"true\"\]\,_\&\[aria-current\=\"page\"\]\]\:hover\:bg_var\(--background-hover\)[aria-current="true"]:is(:hover, [data-hover]),.\[\&\[aria-current\=\"true\"\]\,_\&\[aria-current\=\"page\"\]\]\:hover\:bg_var\(--background-hover\)[aria-current="page"]:is(:hover, [data-hover]) {
+    background: var(--background-hover);
+}
+
+  .\[\&\[aria-current\=\"true\"\]\,_\&\[aria-current\=\"page\"\]\]\:hover\:c_text\.default[aria-current="true"]:is(:hover, [data-hover]),.\[\&\[aria-current\=\"true\"\]\,_\&\[aria-current\=\"page\"\]\]\:hover\:c_text\.default[aria-current="page"]:is(:hover, [data-hover]) {
+    color: var(--colors-text-default);
+}
+
+  .\[\&\[aria-current\=\"true\"\]\,_\&\[aria-current\=\"page\"\]\]\:highlighted\:bg_var\(--background-hover\)[aria-current="true"][data-highlighted],.\[\&\[aria-current\=\"true\"\]\,_\&\[aria-current\=\"page\"\]\]\:highlighted\:bg_var\(--background-hover\)[aria-current="page"][data-highlighted] {
+    background: var(--background-hover);
+}
+
+  .\[\&\[aria-current\=\"true\"\]\,_\&\[aria-current\=\"page\"\]\]\:highlighted\:c_text\.default[aria-current="true"][data-highlighted],.\[\&\[aria-current\=\"true\"\]\,_\&\[aria-current\=\"page\"\]\]\:highlighted\:c_text\.default[aria-current="page"][data-highlighted] {
+    color: var(--colors-text-default);
+}
+
   .\[\&_\>_li\]\:marker\:content_counter\(level1\,_decimal\)_\'\._\' > li::marker {
     content: counter(level1, decimal) '. ';
 }
@@ -2321,16 +2381,16 @@
     top: var(--top);
 }
 
-  .first\:hover\:bd-t-c_stroke\.hover:first-child:is(:hover, [data-hover]) {
-    border-top-color: var(--colors-stroke-hover);
+  .first\:hover\:bd-bs-c_var\(--border-hover\):first-child:is(:hover, [data-hover]) {
+    border-block-start-color: var(--border-hover);
 }
 
-  .first\:highlighted\:bd-t-c_stroke\.hover:first-child[data-highlighted] {
-    border-top-color: var(--colors-stroke-hover);
+  .first\:highlighted\:bd-bs-c_var\(--border-hover\):first-child[data-highlighted] {
+    border-block-start-color: var(--border-hover);
 }
 
-  .highlighted\:last\:bd-b-c_stroke\.hover[data-highlighted]:last-child {
-    border-bottom-color: var(--colors-stroke-hover);
+  .highlighted\:last\:bd-be-c_var\(--border-hover\)[data-highlighted]:last-child {
+    border-block-end-color: var(--border-hover);
 }
 
   .focusWithin\:hover\:ring-c_stroke\.default:focus-within:is(:hover, [data-hover]) {
@@ -2361,8 +2421,8 @@
     border-color: var(--colors-stroke-default);
 }
 
-  .hover\:last\:bd-b-c_stroke\.hover:is(:hover, [data-hover]):last-child {
-    border-bottom-color: var(--colors-stroke-hover);
+  .hover\:last\:bd-be-c_var\(--border-hover\):is(:hover, [data-hover]):last-child {
+    border-block-end-color: var(--border-hover);
 }
 
   .\[\&_\>_li\]\:\[\&_\>_ol\:not\(\[data-variant\=\'letters\'\]\)\]\:\[\&\[data-count\=\'true\'\]\]\:counter-reset_level2_var\(--start\,_0\) > li > ol:not([data-variant='letters'])[data-count='true'] {

package/es/Badge.js

@@ -17,6 +17,7 @@ const badgeRecipe = cva({
     borderRadius: "xsmall",
     border: "1px solid",
     width: "fit-content",
+    textStyle: "label.medium",
     color: "text.default"
   },
   defaultVariants: {

package/es/Button.js

@@ -81,7 +81,7 @@ export const buttonBaseRecipe = cva({
           background: "surface.actionSubtle.hover"
         },
         _active: {
-          background: "surface.actionSubtle.active"
+          background: "surface.actionSubtle.hover.strong"
         }
       },
       tertiary: {
@@ -96,7 +96,7 @@ export const buttonBaseRecipe = cva({
         },
         _active: {
           borderColor: "stroke.default",
-          background: "surface.actionSubtle.active"
+          background: "surface.actionSubtle.hover.strong"
         }
       },
       clear: {
@@ -114,16 +114,16 @@ export const buttonBaseRecipe = cva({
         }
       },
       danger: {
-        background: "surface.error",
+        background: "surface.danger",
         color: "text.onAction",
         _hover: {
-          background: "surface.error.hover"
+          background: "surface.danger.hover"
         },
         _active: {
-          background: "surface.error.active"
+          background: "surface.danger.active"
         },
         _focusVisible: {
-          boxShadowColor: "surface.error",
+          boxShadowColor: "surface.danger",
           boxShadow: "inset 0 0 0 3px var(--shadow-color), inset 0px 0px 0px 6px currentcolor"
         }
       },
@@ -148,6 +148,9 @@ export const buttonBaseRecipe = cva({
         textDecorationThickness: "1px",
         _hover: {
           textDecoration: "none"
+        },
+        _active: {
+          background: "surface.hover"
         }
       }
     }

package/es/ListItem/ListItem.js

@@ -12,26 +12,25 @@ import { sva } from "@ndla/styled-system/css";
 import { createStyleContext } from "../createStyleContext";
 import { Image } from "../Image";
 import { Heading } from "../Text";
+
+// TODO: Focus ring on current items is not visible
 import { jsx as _jsx } from "react/jsx-runtime";
 export const listItemRecipe = sva({
   slots: ["root", "title", "content", "image"],
   base: {
     root: {
+      borderWidth: "1px",
+      borderInlineColor: "transparent",
+      color: "text.default",
       position: "relative",
       display: "flex",
       gap: "xsmall",
       alignItems: "center",
       paddingBlock: "xsmall",
       paddingInline: "xsmall",
-      transitionProperty: "background-color, border-color",
+      transitionProperty: "background-color, border-color, color",
       transitionDuration: "superFast",
-      transitionTimingFunction: "ease-in-out",
-      _hover: {
-        background: "surface.brand.1.subtle"
-      },
-      _highlighted: {
-        background: "surface.brand.1.subtle"
-      }
+      transitionTimingFunction: "ease-in-out"
     },
     content: {
       display: "flex",
@@ -40,12 +39,6 @@ export const listItemRecipe = sva({
       gap: "xsmall",
       width: "100%"
     },
-    title: {
-      textDecoration: "underline",
-      _hover: {
-        textDecoration: "none"
-      }
-    },
     image: {
       minHeight: "40px",
       maxHeight: "40px",
@@ -56,58 +49,124 @@ export const listItemRecipe = sva({
     }
   },
   defaultVariants: {
-    variant: "standalone"
+    variant: "standalone",
+    colorTheme: "brand1",
+    borderVariant: "solid"
   },
+  compoundVariants: [{
+    variant: ["standalone", "list"],
+    css: {
+      root: {
+        _hover: {
+          background: "var(--background-hover)"
+        },
+        _highlighted: {
+          background: "var(--background-hover)"
+        },
+        '&[aria-current="true"], &[aria-current="page"]': {
+          background: "var(--background-current)",
+          color: "var(--color-hover)",
+          _hover: {
+            background: "var(--background-hover)",
+            color: "text.default"
+          },
+          _highlighted: {
+            background: "var(--background-hover)",
+            color: "text.default"
+          }
+        }
+      },
+      title: {
+        textDecoration: "underline",
+        _hover: {
+          textDecoration: "none"
+        }
+      }
+    }
+  }],
   variants: {
+    borderVariant: {
+      solid: {
+        root: {
+          borderStyle: "solid"
+        }
+      },
+      dashed: {
+        root: {
+          borderStyle: "dashed"
+        }
+      }
+    },
+    colorTheme: {
+      brand1: {
+        root: {
+          "--background-hover": "colors.surface.brand.1.subtle",
+          "--background-current": "colors.surface.actionSubtle.selected",
+          "--border-hover": "colors.stroke.hover",
+          "--color-hover": "colors.text.onAction"
+        }
+      },
+      brand2: {
+        root: {
+          "--background-hover": "colors.surface.brand.2.moderate",
+          // TODO: Not a semantic color
+          "--background-current": "colors.blue.800",
+          "--border-hover": "colors.surface.brand.2.strong",
+          "--color-hover": "colors.text.onAction"
+        }
+      }
+    },
     variant: {
+      nonInteractive: {
+        root: {
+          borderBlockColor: "stroke.subtle"
+        }
+      },
       standalone: {
         root: {
-          borderBlock: "1px solid",
-          borderColor: "stroke.subtle",
+          borderBlockColor: "stroke.subtle",
           _hover: {
-            borderColor: "stroke.hover"
+            borderBlockColor: "var(--border-hover)"
           },
           _highlighted: {
-            borderColor: "stroke.hover"
+            borderBlockColor: "var(--border-hover)"
           }
         }
       },
       list: {
         root: {
-          borderTop: "1px solid",
-          borderTopColor: "stroke.subtle",
-          borderBottom: "1px solid",
-          borderBottomColor: "transparent",
-          marginTop: "-1px",
+          borderBlockStartColor: "stroke.subtle",
+          borderBlockEndColor: "transparent",
+          marginBlockStart: "-1px",
           _first: {
-            borderTopColor: "transparent",
+            borderBlockStartColor: "transparent",
             _hover: {
-              borderTopColor: "stroke.hover"
+              borderBlockStartColor: "var(--border-hover)"
             },
             _highlighted: {
-              borderTopColor: "stroke.hover"
+              borderBlockStartColor: "var(--border-hover)"
             }
           },
           _last: {
-            borderBottomColor: "stroke.subtle"
+            borderBlockEndColor: "stroke.subtle"
           },
           "&:hover + &": {
-            borderTopColor: "stroke.hover"
+            borderBlockStartColor: "var(--border-hover)"
           },
           "&[data-highlighted] + &": {
-            borderTopColor: "stroke.hover"
+            borderBlockStartColor: "var(--border-hover)"
           },
           _hover: {
-            borderBottomColor: "transparent",
-            borderTopColor: "stroke.hover",
+            borderBlockEndColor: "transparent",
+            borderBlockStartColor: "var(--border-hover)",
             _last: {
-              borderBottomColor: "stroke.hover"
+              borderBlockEndColor: "var(--border-hover)"
             }
           },
           _highlighted: {
-            borderTopColor: "stroke.hover",
+            borderBlockStartColor: "var(--border-hover)",
             _last: {
-              borderBottomColor: "stroke.hover"
+              borderBlockEndColor: "var(--border-hover)"
             }
           }
         }

package/lib/Badge.d.ts

@@ -5,7 +5,7 @@
  * LICENSE file in the root directory of this source tree.
  *
  */
-import { HTMLArkProps } from "@ark-ui/react";
+import { type HTMLArkProps } from "@ark-ui/react";
 import { RecipeVariantProps } from "@ndla/styled-system/css";
 import { JsxStyleProps } from "@ndla/styled-system/types";
 declare const badgeRecipe: import("@ndla/styled-system/types").RecipeRuntimeFn<{

package/lib/Badge.js

@@ -23,6 +23,7 @@ const badgeRecipe = (0, _css.cva)({
     borderRadius: "xsmall",
     border: "1px solid",
     width: "fit-content",
+    textStyle: "label.medium",
     color: "text.default"
   },
   defaultVariants: {

package/lib/Button.d.ts

@@ -34,7 +34,7 @@ export declare const buttonBaseRecipe: import("@ndla/styled-system/types").Recip
                 background: "surface.actionSubtle.hover";
             };
             _active: {
-                background: "surface.actionSubtle.active";
+                background: "surface.actionSubtle.hover.strong";
             };
         };
         tertiary: {
@@ -49,7 +49,7 @@ export declare const buttonBaseRecipe: import("@ndla/styled-system/types").Recip
             };
             _active: {
                 borderColor: "stroke.default";
-                background: "surface.actionSubtle.active";
+                background: "surface.actionSubtle.hover.strong";
             };
         };
         clear: {
@@ -67,16 +67,16 @@ export declare const buttonBaseRecipe: import("@ndla/styled-system/types").Recip
             };
         };
         danger: {
-            background: "surface.error";
+            background: "surface.danger";
             color: "text.onAction";
             _hover: {
-                background: "surface.error.hover";
+                background: "surface.danger.hover";
             };
             _active: {
-                background: "surface.error.active";
+                background: "surface.danger.active";
             };
             _focusVisible: {
-                boxShadowColor: "surface.error";
+                boxShadowColor: "surface.danger";
                 boxShadow: "inset 0 0 0 3px var(--shadow-color), inset 0px 0px 0px 6px currentcolor";
             };
         };
@@ -102,6 +102,9 @@ export declare const buttonBaseRecipe: import("@ndla/styled-system/types").Recip
             _hover: {
                 textDecoration: "none";
             };
+            _active: {
+                background: "surface.hover";
+            };
         };
     };
 }>;

package/lib/Button.js

@@ -86,7 +86,7 @@ const buttonBaseRecipe = exports.buttonBaseRecipe = (0, _css.cva)({
           background: "surface.actionSubtle.hover"
         },
         _active: {
-          background: "surface.actionSubtle.active"
+          background: "surface.actionSubtle.hover.strong"
         }
       },
       tertiary: {
@@ -101,7 +101,7 @@ const buttonBaseRecipe = exports.buttonBaseRecipe = (0, _css.cva)({
         },
         _active: {
           borderColor: "stroke.default",
-          background: "surface.actionSubtle.active"
+          background: "surface.actionSubtle.hover.strong"
         }
       },
       clear: {
@@ -119,16 +119,16 @@ const buttonBaseRecipe = exports.buttonBaseRecipe = (0, _css.cva)({
         }
       },
       danger: {
-        background: "surface.error",
+        background: "surface.danger",
         color: "text.onAction",
         _hover: {
-          background: "surface.error.hover"
+          background: "surface.danger.hover"
         },
         _active: {
-          background: "surface.error.active"
+          background: "surface.danger.active"
         },
         _focusVisible: {
-          boxShadowColor: "surface.error",
+          boxShadowColor: "surface.danger",
           boxShadow: "inset 0 0 0 3px var(--shadow-color), inset 0px 0px 0px 6px currentcolor"
         }
       },
@@ -153,6 +153,9 @@ const buttonBaseRecipe = exports.buttonBaseRecipe = (0, _css.cva)({
         textDecorationThickness: "1px",
         _hover: {
           textDecoration: "none"
+        },
+        _active: {
+          background: "surface.hover"
         }
       }
     }

package/lib/ListItem/ListItem.d.ts

@@ -10,55 +10,87 @@ import type { JsxStyleProps, RecipeVariantProps } from "@ndla/styled-system/type
 import { type ImageProps } from "../Image";
 import { type TextProps } from "../Text";
 export declare const listItemRecipe: import("@ndla/styled-system/types").SlotRecipeRuntimeFn<"title" | "image" | "content" | "root", {
+    borderVariant: {
+        solid: {
+            root: {
+                borderStyle: "solid";
+            };
+        };
+        dashed: {
+            root: {
+                borderStyle: "dashed";
+            };
+        };
+    };
+    colorTheme: {
+        brand1: {
+            root: {
+                "--background-hover": "colors.surface.brand.1.subtle";
+                "--background-current": "colors.surface.actionSubtle.selected";
+                "--border-hover": "colors.stroke.hover";
+                "--color-hover": "colors.text.onAction";
+            };
+        };
+        brand2: {
+            root: {
+                "--background-hover": "colors.surface.brand.2.moderate";
+                "--background-current": "colors.blue.800";
+                "--border-hover": "colors.surface.brand.2.strong";
+                "--color-hover": "colors.text.onAction";
+            };
+        };
+    };
     variant: {
+        nonInteractive: {
+            root: {
+                borderBlockColor: "stroke.subtle";
+            };
+        };
         standalone: {
             root: {
-                borderBlock: "1px solid";
-                borderColor: "stroke.subtle";
+                borderBlockColor: "stroke.subtle";
                 _hover: {
-                    borderColor: "stroke.hover";
+                    borderBlockColor: "var(--border-hover)";
                 };
                 _highlighted: {
-                    borderColor: "stroke.hover";
+                    borderBlockColor: "var(--border-hover)";
                 };
             };
         };
         list: {
             root: {
-                borderTop: "1px solid";
-                borderTopColor: "stroke.subtle";
-                borderBottom: "1px solid";
-                borderBottomColor: "transparent";
-                marginTop: "-1px";
+                borderBlockStartColor: "stroke.subtle";
+                borderBlockEndColor: "transparent";
+                marginBlockStart: "-1px";
                 _first: {
-                    borderTopColor: "transparent";
+                    borderBlockStartColor: "transparent";
                     _hover: {
-                        borderTopColor: "stroke.hover";
+                        borderBlockStartColor: "var(--border-hover)";
                     };
                     _highlighted: {
-                        borderTopColor: "stroke.hover";
+                        borderBlockStartColor: "var(--border-hover)";
                     };
                 };
                 _last: {
-                    borderBottomColor: "stroke.subtle";
+                    borderBlockEndColor: "stroke.subtle";
                 };
                 "&:hover + &": {
-                    borderTopColor: "stroke.hover";
+                    borderBlockStartColor: "var(--border-hover)";
                 };
                 "&[data-highlighted] + &": {
-                    borderTopColor: "stroke.hover";
+                    borderBlockStartColor: "var(--border-hover)";
                 };
                 _hover: {
-                    borderBottomColor: "transparent";
-                    borderTopColor: "stroke.hover";
+                    borderBlockEndColor: "transparent";
+                    borderBlockStartColor: "var(--border-hover)";
                     _last: {
-                        borderBottomColor: "stroke.hover";
+                        borderBlockEndColor: "var(--border-hover)";
                     };
                 };
                 _highlighted: {
-                    borderTopColor: "stroke.hover";
+                    borderBlockStartColor: "var(--border-hover)";
                     _last: {
-                        borderBottomColor: "stroke.hover";
+                        borderBlockEndColor: "var(--border-hover)";
                     };
                 };
             };
@@ -70,7 +102,9 @@ export type ListItemProps = HTMLArkProps<"div"> & JsxStyleProps & ListItemVarian
 export declare const ListItemRoot: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & import("@ark-ui/react").PolymorphicProps & {
     consumeCss?: boolean | undefined;
 } & import("@ndla/styled-system/types").WithCss & {
-    variant?: "list" | "standalone" | undefined;
+    borderVariant?: "dashed" | "solid" | undefined;
+    colorTheme?: "brand1" | "brand2" | undefined;
+    variant?: "list" | "standalone" | "nonInteractive" | undefined;
 } & import("react").RefAttributes<HTMLDivElement>>;
 export declare const ListItemHeading: import("react").ForwardRefExoticComponent<TextProps & Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLParagraphElement>, HTMLParagraphElement>, "ref"> & import("@ark-ui/react").PolymorphicProps & {
     consumeCss?: boolean | undefined;

package/lib/ListItem/ListItem.js

@@ -19,25 +19,24 @@ var _jsxRuntime = require("react/jsx-runtime");
  *
  */
 
+// TODO: Focus ring on current items is not visible
+
 const listItemRecipe = exports.listItemRecipe = (0, _css.sva)({
   slots: ["root", "title", "content", "image"],
   base: {
     root: {
+      borderWidth: "1px",
+      borderInlineColor: "transparent",
+      color: "text.default",
       position: "relative",
       display: "flex",
       gap: "xsmall",
       alignItems: "center",
       paddingBlock: "xsmall",
       paddingInline: "xsmall",
-      transitionProperty: "background-color, border-color",
+      transitionProperty: "background-color, border-color, color",
       transitionDuration: "superFast",
-      transitionTimingFunction: "ease-in-out",
-      _hover: {
-        background: "surface.brand.1.subtle"
-      },
-      _highlighted: {
-        background: "surface.brand.1.subtle"
-      }
+      transitionTimingFunction: "ease-in-out"
     },
     content: {
       display: "flex",
@@ -46,12 +45,6 @@ const listItemRecipe = exports.listItemRecipe = (0, _css.sva)({
       gap: "xsmall",
       width: "100%"
     },
-    title: {
-      textDecoration: "underline",
-      _hover: {
-        textDecoration: "none"
-      }
-    },
     image: {
       minHeight: "40px",
       maxHeight: "40px",
@@ -62,58 +55,124 @@ const listItemRecipe = exports.listItemRecipe = (0, _css.sva)({
     }
   },
   defaultVariants: {
-    variant: "standalone"
+    variant: "standalone",
+    colorTheme: "brand1",
+    borderVariant: "solid"
   },
+  compoundVariants: [{
+    variant: ["standalone", "list"],
+    css: {
+      root: {
+        _hover: {
+          background: "var(--background-hover)"
+        },
+        _highlighted: {
+          background: "var(--background-hover)"
+        },
+        '&[aria-current="true"], &[aria-current="page"]': {
+          background: "var(--background-current)",
+          color: "var(--color-hover)",
+          _hover: {
+            background: "var(--background-hover)",
+            color: "text.default"
+          },
+          _highlighted: {
+            background: "var(--background-hover)",
+            color: "text.default"
+          }
+        }
+      },
+      title: {
+        textDecoration: "underline",
+        _hover: {
+          textDecoration: "none"
+        }
+      }
+    }
+  }],
   variants: {
+    borderVariant: {
+      solid: {
+        root: {
+          borderStyle: "solid"
+        }
+      },
+      dashed: {
+        root: {
+          borderStyle: "dashed"
+        }
+      }
+    },
+    colorTheme: {
+      brand1: {
+        root: {
+          "--background-hover": "colors.surface.brand.1.subtle",
+          "--background-current": "colors.surface.actionSubtle.selected",
+          "--border-hover": "colors.stroke.hover",
+          "--color-hover": "colors.text.onAction"
+        }
+      },
+      brand2: {
+        root: {
+          "--background-hover": "colors.surface.brand.2.moderate",
+          // TODO: Not a semantic color
+          "--background-current": "colors.blue.800",
+          "--border-hover": "colors.surface.brand.2.strong",
+          "--color-hover": "colors.text.onAction"
+        }
+      }
+    },
     variant: {
+      nonInteractive: {
+        root: {
+          borderBlockColor: "stroke.subtle"
+        }
+      },
       standalone: {
         root: {
-          borderBlock: "1px solid",
-          borderColor: "stroke.subtle",
+          borderBlockColor: "stroke.subtle",
           _hover: {
-            borderColor: "stroke.hover"
+            borderBlockColor: "var(--border-hover)"
           },
           _highlighted: {
-            borderColor: "stroke.hover"
+            borderBlockColor: "var(--border-hover)"
           }
         }
       },
       list: {
         root: {
-          borderTop: "1px solid",
-          borderTopColor: "stroke.subtle",
-          borderBottom: "1px solid",
-          borderBottomColor: "transparent",
-          marginTop: "-1px",
+          borderBlockStartColor: "stroke.subtle",
+          borderBlockEndColor: "transparent",
+          marginBlockStart: "-1px",
           _first: {
-            borderTopColor: "transparent",
+            borderBlockStartColor: "transparent",
             _hover: {
-              borderTopColor: "stroke.hover"
+              borderBlockStartColor: "var(--border-hover)"
             },
             _highlighted: {
-              borderTopColor: "stroke.hover"
+              borderBlockStartColor: "var(--border-hover)"
             }
           },
           _last: {
-            borderBottomColor: "stroke.subtle"
+            borderBlockEndColor: "stroke.subtle"
           },
           "&:hover + &": {
-            borderTopColor: "stroke.hover"
+            borderBlockStartColor: "var(--border-hover)"
           },
           "&[data-highlighted] + &": {
-            borderTopColor: "stroke.hover"
+            borderBlockStartColor: "var(--border-hover)"
           },
           _hover: {
-            borderBottomColor: "transparent",
-            borderTopColor: "stroke.hover",
+            borderBlockEndColor: "transparent",
+            borderBlockStartColor: "var(--border-hover)",
             _last: {
-              borderBottomColor: "stroke.hover"
+              borderBlockEndColor: "var(--border-hover)"
             }
           },
           _highlighted: {
-            borderTopColor: "stroke.hover",
+            borderBlockStartColor: "var(--border-hover)",
             _last: {
-              borderBottomColor: "stroke.hover"
+              borderBlockEndColor: "var(--border-hover)"
             }
           }
         }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ndla/primitives",
-  "version": "1.0.8-alpha.0",
+  "version": "1.0.9-alpha.0",
   "description": "Primitive components for NDLA.",
   "license": "GPL-3.0",
   "main": "lib/index.js",
@@ -29,11 +29,11 @@
   ],
   "dependencies": {
     "@ark-ui/react": "^3.6.2",
-    "@ndla/styled-system": "^0.0.10",
+    "@ndla/styled-system": "^0.0.11",
     "@ndla/util": "^4.1.0"
   },
   "devDependencies": {
-    "@ndla/preset-panda": "^0.0.18",
+    "@ndla/preset-panda": "^0.0.19",
     "@pandacss/dev": "^0.44.0"
   },
   "peerDependencies": {
@@ -43,5 +43,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "1f5266d080c8cc172af46980cea7a451cfa12b28"
+  "gitHead": "62f2145f507c5365f8f5ed452de32ac43b11f155"
 }