@ndla/primitives 1.0.32-alpha.0 → 1.0.34-alpha.0

package/dist/panda.buildinfo.json

@@ -56,38 +56,34 @@
       "marginBlock]___[value:small]___[cond:& > li",
       "position]___[value:absolute]___[cond:& > li<___>_before",
       "transform]___[value:translateX(-100%)]___[cond:& > li<___>_before",
-      "paddingInlineEnd]___[value:3xsmall]___[cond:& > li<___>_before",
+      "paddingInlineEnd]___[value:0.25em]___[cond:& > li<___>_before",
       "fontVariantNumeric]___[value:tabular-nums]___[cond:& > li<___>_before",
-      "marginInlineStart]___[value:small]___[cond:& > li",
+      "marginInlineStart]___[value:2.5ch",
       "counterReset]___[value:level1",
       "counterReset]___[value:level1 var(--start, 0)]___[cond:&[data-count='true']",
       "counterIncrement]___[value:level1]___[cond:& > li",
       "content]___[value:counter(level1, decimal) '. ']___[cond:& > li<___>_before",
-      "marginInlineStart]___[value:medium]___[cond:& > li<___>& > ol[data-variant='letters'] > li",
       "counterReset]___[value:level2]___[cond:& > li<___>& > ol:not([data-variant='letters'])",
       "counterReset]___[value:level2 var(--start, 0)]___[cond:& > li<___>& > ol:not([data-variant='letters'])<___>&[data-count='true']",
-      "marginInlineStart]___[value:xlarge]___[cond:& > li<___>& > ol:not([data-variant='letters'])<___>& > li",
+      "marginInlineStart]___[value:1ch]___[cond:& > li<___>& > ol:not([data-variant='letters'])<___>& > li",
       "counterIncrement]___[value:level2]___[cond:& > li<___>& > ol:not([data-variant='letters'])<___>& > li",
       "content]___[value:counter(level1, decimal) '.' counter(level2, decimal) '. ']___[cond:& > li<___>& > ol:not([data-variant='letters'])<___>& > li<___>_before",
       "counterReset]___[value:level3]___[cond:& > li<___>& > ol:not([data-variant='letters'])<___>& > li<___>& > ol:not([data-variant='letters'])",
       "counterReset]___[value:level3 var(--start, 0)]___[cond:& > li<___>& > ol:not([data-variant='letters'])<___>& > li<___>& > ol:not([data-variant='letters'])<___>&[data-count='true']",
-      "marginInlineStart]___[value:xxlarge]___[cond:& > li<___>& > ol:not([data-variant='letters'])<___>& > li<___>& > ol:not([data-variant='letters'])<___>& > li",
+      "marginInlineStart]___[value:2.5ch]___[cond:& > li<___>& > ol:not([data-variant='letters'])<___>& > li<___>& > ol:not([data-variant='letters'])<___>& > li",
       "counterIncrement]___[value:level3]___[cond:& > li<___>& > ol:not([data-variant='letters'])<___>& > li<___>& > ol:not([data-variant='letters'])<___>& > li",
       "content]___[value:counter(level1, decimal) '.' counter(level2, decimal) '.' counter(level3, decimal) '. ']___[cond:& > li<___>& > ol:not([data-variant='letters'])<___>& > li<___>& > ol:not([data-variant='letters'])<___>& > li<___>_before",
       "counterReset]___[value:level4]___[cond:& > li<___>& > ol:not([data-variant='letters'])<___>& > li<___>& > ol:not([data-variant='letters'])<___>& > li<___>& > ol:not([data-variant='letters'])",
       "counterReset]___[value:level4 var(--start, 0)]___[cond:& > li<___>& > ol:not([data-variant='letters'])<___>& > li<___>& > ol:not([data-variant='letters'])<___>& > li<___>& > ol:not([data-variant='letters'])<___>&[data-count='true']",
-      "marginInlineStart]___[value:3xlarge]___[cond:& > li<___>& > ol:not([data-variant='letters'])<___>& > li<___>& > ol:not([data-variant='letters'])<___>& > li<___>& > ol:not([data-variant='letters'])<___>& > li",
+      "marginInlineStart]___[value:4.5ch]___[cond:& > li<___>& > ol:not([data-variant='letters'])<___>& > li<___>& > ol:not([data-variant='letters'])<___>& > li<___>& > ol:not([data-variant='letters'])<___>& > li",
       "counterIncrement]___[value:level4]___[cond:& > li<___>& > ol:not([data-variant='letters'])<___>& > li<___>& > ol:not([data-variant='letters'])<___>& > li<___>& > ol:not([data-variant='letters'])<___>& > li",
       "content]___[value:counter(level1, decimal) '.' counter(level2, decimal) '.' counter(level3, decimal) '.' counter(level4, decimal) '. ']___[cond:& > li<___>& > ol:not([data-variant='letters'])<___>& > li<___>& > ol:not([data-variant='letters'])<___>& > li<___>& > ol:not([data-variant='letters'])<___>& > li<___>_before",
+      "marginInlineStart]___[value:0.5ch]___[cond:& > li<___>& > ol:not([data-variant='letters'])<___>& > li<___>& > ol:not([data-variant='letters'])<___>& > li<___>& > ol:not([data-variant='letters'])<___>& > li<___>& > ol[data-variant='letters'] > li",
       "content]___[value:counter(level1, upper-alpha) '. ']___[cond:& > li<___>_before",
-      "marginInlineStart]___[value:medium]___[cond:& > li<___>& > ol:not([data-variant='letters']) > li",
-      "marginInlineStart]___[value:small]___[cond:& > li<___>& > ol[data-variant='letters'] > li",
       "content]___[value:counter(level1, lower-alpha) '. ']___[cond:& > li<___>& > ol[data-variant='letters'] > li<___>_before",
-      "marginInlineStart]___[value:small]___[cond:& > li<___>& > ol[data-variant='letters'] > li<___>& > ol[data-variant='letters'] > li",
       "content]___[value:counter(level1, lower-roman) '. ']___[cond:& > li<___>& > ol[data-variant='letters'] > li<___>& > ol[data-variant='letters'] > li<___>_before",
-      "marginInlineStart]___[value:medium]___[cond:& > li<___>& > ol[data-variant='letters'] > li<___>& > ol[data-variant='letters'] > li<___>& > ol:not([data-variant='letters']) > li",
       "listStyle]___[value:revert",
-      "paddingInlineStart]___[value:medium",
+      "paddingInlineStart]___[value:2.5ch",
       "marginBlock]___[value:small]___[cond:& li",
       "color]___[value:icon.strong]___[cond:& li<___>_marker",
       "fontWeight]___[value:bold]___[cond:& dt",
@@ -162,23 +158,23 @@
       "outlineStyle]___[value:solid]___[cond:_focusVisible",
       "paddingBlock]___[value:xxsmall",
       "minHeight]___[value:24",
+      "marginInline]___[value:0]___[cond:& svg",
+      "marginBlock]___[value:0]___[cond:& svg",
+      "width]___[value:medium]___[cond:& svg",
+      "height]___[value:medium]___[cond:& svg",
       "textStyle]___[value:label.small",
       "minHeight]___[value:large",
       "paddingBlock]___[value:4xsmall",
+      "width]___[value:small]___[cond:& svg",
+      "height]___[value:small]___[cond:& svg",
       "lineHeight]___[value:1",
       "minHeight]___[value:unset",
       "--shadow-width]___[value:3px",
       "height]___[value:xxlarge",
       "width]___[value:xxlarge",
-      "marginInline]___[value:0]___[cond:& svg",
-      "marginBlock]___[value:0]___[cond:& svg",
-      "width]___[value:medium]___[cond:& svg",
-      "height]___[value:medium]___[cond:& svg",
       "--shadow-width]___[value:2px",
       "height]___[value:large",
       "width]___[value:large",
-      "width]___[value:small]___[cond:& svg",
-      "height]___[value:small]___[cond:& svg",
       "paddingInline]___[value:xxsmall",
       "userSelect]___[value:none",
       "color]___[value:text.action]___[cond:_hover",
@@ -203,8 +199,8 @@
       "outlineColor]___[value:stroke.hover]___[cond:_hover",
       "backgroundColor]___[value:surface.dangerSubtle]___[cond:_hover<___>_invalid",
       "color]___[value:text.onAction]___[cond:_checked",
-      "background]___[value:surface.actionSubtle.selected]___[cond:_checked",
-      "borderColor]___[value:surface.actionSubtle.selected]___[cond:_checked",
+      "background]___[value:surface.action.selected]___[cond:_checked",
+      "borderColor]___[value:surface.action.selected]___[cond:_checked",
       "outlineColor]___[value:icon.onAction]___[cond:_checked",
       "outlineOffset]___[value:-4px]___[cond:_checked<___>_focus",
       "outlineOffset]___[value:-2px]___[cond:_checked<___>_hover",
@@ -353,6 +349,7 @@
       "marginBlock]___[value:xsmall",
       "paddingInlineEnd]___[value:medium",
       "paddingInlineEnd]___[value:0]___[cond:tabletDown",
+      "paddingInlineStart]___[value:medium",
       "paddingInlineStart]___[value:0]___[cond:tabletDown",
       "paddingInlineStart]___[value:0",
       "paddingInlineEnd]___[value:0",
@@ -582,17 +579,19 @@
       "paddingBlockStart]___[value:xsmall]___[cond:_horizontal",
       "paddingInlineStart]___[value:xsmall]___[cond:_vertical",
       "boxShadow]___[value:0 0 0 3px var(--shadow-color)]___[cond:_focusVisible",
-      "outline]___[value:3px solid",
-      "outlineColor]___[value:stroke.default",
-      "outlineOffset]___[value:-3px",
+      "background]___[value:stroke.default",
       "height]___[value:var(--height)]___[cond:_peerFocusVisible",
       "width]___[value:var(--width)]___[cond:_peerFocusVisible",
+      "outline]___[value:3px solid]___[cond:_peerFocusVisible",
+      "outlineOffset]___[value:-3px]___[cond:_peerFocusVisible",
+      "outlineColor]___[value:stroke.default]___[cond:_peerFocusVisible",
+      "background]___[value:transparent]___[cond:_peerFocusVisible",
       "borderTopRadius]___[value:xsmall]___[cond:_peerFocusVisible<___>_horizontal",
       "borderRightRadius]___[value:xsmall]___[cond:_peerFocusVisible<___>_vertical",
       "top]___[value:calc(var(--top) + var(--height) - 6px)]___[cond:_horizontal",
-      "top]___[value:var(--top)]___[cond:_horizontal<___>_peerFocusVisible",
       "height]___[value:3]___[cond:_horizontal",
       "width]___[value:var(--width)]___[cond:_horizontal",
+      "top]___[value:var(--top)]___[cond:_horizontal<___>_peerFocusVisible",
       "height]___[value:var(--height)]___[cond:_vertical",
       "left]___[value:0]___[cond:_vertical",
       "width]___[value:3]___[cond:_vertical",
@@ -602,7 +601,7 @@
       "paddingInlineStart]___[value:xsmall",
       "cursor]___[value:initial",
       "outlineColor]___[value:transparent",
-      "backgroundColor]___[value:surface.actionSubtle.selected",
+      "backgroundColor]___[value:surface.action.selected",
       "transitionProperty]___[value:background, outline-color, color",
       "backgroundColor]___[value:surface.actionSubtle.hover]___[cond:_hover",
       "color]___[value:stroke.hover]___[cond:_hover<___>& svg",

package/dist/styles.css

@@ -170,6 +170,10 @@
     border-bottom-right-radius: var(--radii-xsmall);
 }
 
+  .ms_2\.5ch {
+    margin-inline-start: 2.5ch;
+}
+
   .counter-reset_level1 {
     counter-reset: level1;
 }
@@ -178,8 +182,8 @@
     list-style: revert;
 }
 
-  .ps_medium {
-    padding-inline-start: var(--spacing-medium);
+  .ps_2\.5ch {
+    padding-inline-start: 2.5ch;
 }
 
   .px_xsmall {
@@ -556,6 +560,10 @@
     padding-inline-end: var(--spacing-medium);
 }
 
+  .ps_medium {
+    padding-inline-start: var(--spacing-medium);
+}
+
   .ps_0 {
     padding-inline-start: 0;
 }
@@ -837,12 +845,8 @@
     padding-block: var(--spacing-3xsmall);
 }
 
-  .ring_3px_solid {
-    outline: 3px solid;
-}
-
-  .ring-o_-3px {
-    outline-offset: -3px;
+  .bg_stroke\.default {
+    background: var(--colors-stroke-default);
 }
 
   .w_full {
@@ -1357,16 +1361,12 @@
     border-width: 1px;
 }
 
-  .ring-c_stroke\.default {
-    outline-color: var(--colors-stroke-default);
-}
-
   .ring-c_transparent {
     outline-color: transparent;
 }
 
-  .bg-c_surface\.actionSubtle\.selected {
-    background-color: var(--colors-surface-action-subtle-selected);
+  .bg-c_surface\.action\.selected {
+    background-color: var(--colors-surface-action-selected);
 }
 
   .trs-prop_background\,_outline-color\,_color {
@@ -1489,10 +1489,6 @@
     margin-block: var(--spacing-small);
 }
 
-  .\[\&_\>_li\]\:ms_small > li {
-    margin-inline-start: var(--spacing-small);
-}
-
   .\[\&\[data-count\=\'true\'\]\]\:counter-reset_level1_var\(--start\,_0\)[data-count='true'] {
     counter-reset: level1 var(--start, 0);
 }
@@ -1549,8 +1545,8 @@
     color: var(--colors-text-on-action);
 }
 
-  .checked\:bg_surface\.actionSubtle\.selected:is(:checked, [data-checked], [aria-checked=true], [data-state="checked"]) {
-    background: var(--colors-surface-action-subtle-selected);
+  .checked\:bg_surface\.action\.selected:is(:checked, [data-checked], [aria-checked=true], [data-state="checked"]) {
+    background: var(--colors-surface-action-selected);
 }
 
   .invalid\:bg_surface\.dangerSubtle:is(:invalid, [data-invalid]) {
@@ -1907,8 +1903,8 @@
     border-color: var(--colors-stroke-disabled);
 }
 
-  .checked\:bd-c_surface\.actionSubtle\.selected:is(:checked, [data-checked], [aria-checked=true], [data-state="checked"]) {
-    border-color: var(--colors-surface-action-subtle-selected);
+  .checked\:bd-c_surface\.action\.selected:is(:checked, [data-checked], [aria-checked=true], [data-state="checked"]) {
+    border-color: var(--colors-surface-action-selected);
 }
 
   .checked\:ring-c_icon\.onAction:is(:checked, [data-checked], [aria-checked=true], [data-state="checked"]) {
@@ -2208,6 +2204,18 @@
     width: var(--width);
 }
 
+  .peer:is(:focus-visible, [data-focus-visible]) ~ .peerFocusVisible\:ring_3px_solid {
+    outline: 3px solid;
+}
+
+  .peer:is(:focus-visible, [data-focus-visible]) ~ .peerFocusVisible\:ring-o_-3px {
+    outline-offset: -3px;
+}
+
+  .peer:is(:focus-visible, [data-focus-visible]) ~ .peerFocusVisible\:bg_transparent {
+    background: transparent;
+}
+
   .focusVisible\:ring-c_stroke\.default:is(:focus-visible, [data-focus-visible]) {
     outline-color: var(--colors-stroke-default);
 }
@@ -2240,6 +2248,10 @@
     outline-color: var(--colors-surface-action);
 }
 
+  .peer:is(:focus-visible, [data-focus-visible]) ~ .peerFocusVisible\:ring-c_stroke\.default {
+    outline-color: var(--colors-stroke-default);
+}
+
   .hover\:bg_surface\.actionSubtle\.hover:is(:hover, [data-hover]) {
     background: var(--colors-surface-action-subtle-hover);
 }
@@ -2404,26 +2416,14 @@
     transform: translateX(-100%);
 }
 
-  .\[\&_\>_li\]\:before\:pe_3xsmall > li::before {
-    padding-inline-end: var(--spacing-3xsmall);
-}
-
-  .\[\&_\>_li\]\:\[\&_\>_ol\[data-variant\=\'letters\'\]_\>_li\]\:ms_medium > li > ol[data-variant='letters'] > li {
-    margin-inline-start: var(--spacing-medium);
+  .\[\&_\>_li\]\:before\:pe_0\.25em > li::before {
+    padding-inline-end: 0.25em;
 }
 
   .\[\&_\>_li\]\:\[\&_\>_ol\:not\(\[data-variant\=\'letters\'\]\)\]\:counter-reset_level2 > li > ol:not([data-variant='letters']) {
     counter-reset: level2;
 }
 
-  .\[\&_\>_li\]\:\[\&_\>_ol\:not\(\[data-variant\=\'letters\'\]\)_\>_li\]\:ms_medium > li > ol:not([data-variant='letters']) > li {
-    margin-inline-start: var(--spacing-medium);
-}
-
-  .\[\&_\>_li\]\:\[\&_\>_ol\[data-variant\=\'letters\'\]_\>_li\]\:ms_small > li > ol[data-variant='letters'] > li {
-    margin-inline-start: var(--spacing-small);
-}
-
   .\[\&_li\]\:marker\:c_icon\.strong li::marker {
     color: var(--colors-icon-strong);
 }
@@ -2726,18 +2726,14 @@
     counter-reset: level2 var(--start, 0);
 }
 
-  .\[\&_\>_li\]\:\[\&_\>_ol\:not\(\[data-variant\=\'letters\'\]\)\]\:\[\&_\>_li\]\:ms_xlarge > li > ol:not([data-variant='letters']) > li {
-    margin-inline-start: var(--spacing-xlarge);
+  .\[\&_\>_li\]\:\[\&_\>_ol\:not\(\[data-variant\=\'letters\'\]\)\]\:\[\&_\>_li\]\:ms_1ch > li > ol:not([data-variant='letters']) > li {
+    margin-inline-start: 1ch;
 }
 
   .\[\&_\>_li\]\:\[\&_\>_ol\:not\(\[data-variant\=\'letters\'\]\)\]\:\[\&_\>_li\]\:counter-increment_level2 > li > ol:not([data-variant='letters']) > li {
     counter-increment: level2;
 }
 
-  .\[\&_\>_li\]\:\[\&_\>_ol\[data-variant\=\'letters\'\]_\>_li\]\:\[\&_\>_ol\[data-variant\=\'letters\'\]_\>_li\]\:ms_small > li > ol[data-variant='letters'] > li > ol[data-variant='letters'] > li {
-    margin-inline-start: var(--spacing-small);
-}
-
   .disabled\:checked\:hover\:c_text\.disabled:is(:disabled, [disabled], [data-disabled], [aria-disabled='true']):is(:checked, [data-checked], [aria-checked=true], [data-state="checked"]):is(:hover, [data-hover]) {
     color: var(--colors-text-disabled);
 }
@@ -2786,10 +2782,6 @@
     counter-reset: level3;
 }
 
-  .\[\&_\>_li\]\:\[\&_\>_ol\[data-variant\=\'letters\'\]_\>_li\]\:\[\&_\>_ol\[data-variant\=\'letters\'\]_\>_li\]\:\[\&_\>_ol\:not\(\[data-variant\=\'letters\'\]\)_\>_li\]\:ms_medium > li > ol[data-variant='letters'] > li > ol[data-variant='letters'] > li > ol:not([data-variant='letters']) > li {
-    margin-inline-start: var(--spacing-medium);
-}
-
   .\[\&_\>_li\]\:\[\&_\>_ol\:not\(\[data-variant\=\'letters\'\]\)\]\:\[\&_\>_li\]\:before\:content_counter\(level1\,_decimal\)_\'\.\'_counter\(level2\,_decimal\)_\'\._\' > li > ol:not([data-variant='letters']) > li::before {
     content: counter(level1, decimal) '.' counter(level2, decimal) '. ';
 }
@@ -2802,8 +2794,8 @@
     counter-reset: level3 var(--start, 0);
 }
 
-  .\[\&_\>_li\]\:\[\&_\>_ol\:not\(\[data-variant\=\'letters\'\]\)\]\:\[\&_\>_li\]\:\[\&_\>_ol\:not\(\[data-variant\=\'letters\'\]\)\]\:\[\&_\>_li\]\:ms_xxlarge > li > ol:not([data-variant='letters']) > li > ol:not([data-variant='letters']) > li {
-    margin-inline-start: var(--spacing-xxlarge);
+  .\[\&_\>_li\]\:\[\&_\>_ol\:not\(\[data-variant\=\'letters\'\]\)\]\:\[\&_\>_li\]\:\[\&_\>_ol\:not\(\[data-variant\=\'letters\'\]\)\]\:\[\&_\>_li\]\:ms_2\.5ch > li > ol:not([data-variant='letters']) > li > ol:not([data-variant='letters']) > li {
+    margin-inline-start: 2.5ch;
 }
 
   .\[\&_\>_li\]\:\[\&_\>_ol\:not\(\[data-variant\=\'letters\'\]\)\]\:\[\&_\>_li\]\:\[\&_\>_ol\:not\(\[data-variant\=\'letters\'\]\)\]\:\[\&_\>_li\]\:counter-increment_level3 > li > ol:not([data-variant='letters']) > li > ol:not([data-variant='letters']) > li {
@@ -2822,14 +2814,18 @@
     counter-reset: level4 var(--start, 0);
 }
 
-  .\[\&_\>_li\]\:\[\&_\>_ol\:not\(\[data-variant\=\'letters\'\]\)\]\:\[\&_\>_li\]\:\[\&_\>_ol\:not\(\[data-variant\=\'letters\'\]\)\]\:\[\&_\>_li\]\:\[\&_\>_ol\:not\(\[data-variant\=\'letters\'\]\)\]\:\[\&_\>_li\]\:ms_3xlarge > li > ol:not([data-variant='letters']) > li > ol:not([data-variant='letters']) > li > ol:not([data-variant='letters']) > li {
-    margin-inline-start: var(--spacing-3xlarge);
+  .\[\&_\>_li\]\:\[\&_\>_ol\:not\(\[data-variant\=\'letters\'\]\)\]\:\[\&_\>_li\]\:\[\&_\>_ol\:not\(\[data-variant\=\'letters\'\]\)\]\:\[\&_\>_li\]\:\[\&_\>_ol\:not\(\[data-variant\=\'letters\'\]\)\]\:\[\&_\>_li\]\:ms_4\.5ch > li > ol:not([data-variant='letters']) > li > ol:not([data-variant='letters']) > li > ol:not([data-variant='letters']) > li {
+    margin-inline-start: 4.5ch;
 }
 
   .\[\&_\>_li\]\:\[\&_\>_ol\:not\(\[data-variant\=\'letters\'\]\)\]\:\[\&_\>_li\]\:\[\&_\>_ol\:not\(\[data-variant\=\'letters\'\]\)\]\:\[\&_\>_li\]\:\[\&_\>_ol\:not\(\[data-variant\=\'letters\'\]\)\]\:\[\&_\>_li\]\:counter-increment_level4 > li > ol:not([data-variant='letters']) > li > ol:not([data-variant='letters']) > li > ol:not([data-variant='letters']) > li {
     counter-increment: level4;
 }
 
+  .\[\&_\>_li\]\:\[\&_\>_ol\:not\(\[data-variant\=\'letters\'\]\)\]\:\[\&_\>_li\]\:\[\&_\>_ol\:not\(\[data-variant\=\'letters\'\]\)\]\:\[\&_\>_li\]\:\[\&_\>_ol\:not\(\[data-variant\=\'letters\'\]\)\]\:\[\&_\>_li\]\:\[\&_\>_ol\[data-variant\=\'letters\'\]_\>_li\]\:ms_0\.5ch > li > ol:not([data-variant='letters']) > li > ol:not([data-variant='letters']) > li > ol:not([data-variant='letters']) > li > ol[data-variant='letters'] > li {
+    margin-inline-start: 0.5ch;
+}
+
   .\[\&_\>_li\]\:\[\&_\>_ol\:not\(\[data-variant\=\'letters\'\]\)\]\:\[\&_\>_li\]\:\[\&_\>_ol\:not\(\[data-variant\=\'letters\'\]\)\]\:\[\&_\>_li\]\:\[\&_\>_ol\:not\(\[data-variant\=\'letters\'\]\)\]\:\[\&_\>_li\]\:before\:content_counter\(level1\,_decimal\)_\'\.\'_counter\(level2\,_decimal\)_\'\.\'_counter\(level3\,_decimal\)_\'\.\'_counter\(level4\,_decimal\)_\'\._\' > li > ol:not([data-variant='letters']) > li > ol:not([data-variant='letters']) > li > ol:not([data-variant='letters']) > li::before {
     content: counter(level1, decimal) '.' counter(level2, decimal) '.' counter(level3, decimal) '.' counter(level4, decimal) '. ';
 }

package/es/ArticleLists.js

@@ -23,11 +23,11 @@ const orderedListRecipe = cva({
       _before: {
         position: "absolute",
         transform: "translateX(-100%)",
-        paddingInlineEnd: "3xsmall",
+        paddingInlineEnd: "0.25em",
         fontVariantNumeric: "tabular-nums"
-      },
-      marginInlineStart: "small"
-    }
+      }
+    },
+    marginInlineStart: "2.5ch"
   },
   defaultVariants: {
     variant: "numbers"
@@ -44,16 +44,13 @@ const orderedListRecipe = cva({
           _before: {
             content: "counter(level1, decimal) '. '"
           },
-          [LETTER_LIST_ITEM]: {
-            marginInlineStart: "medium"
-          },
           [NUMBER_LIST]: {
             counterReset: "level2",
             "&[data-count='true']": {
               counterReset: "level2 var(--start, 0)"
             },
             [LIST_ITEM]: {
-              marginInlineStart: "xlarge",
+              marginInlineStart: "1ch",
               counterIncrement: "level2",
               _before: {
                 content: "counter(level1, decimal) '.' counter(level2, decimal) '. '"
@@ -64,7 +61,7 @@ const orderedListRecipe = cva({
                   counterReset: "level3 var(--start, 0)"
                 },
                 [LIST_ITEM]: {
-                  marginInlineStart: "xxlarge",
+                  marginInlineStart: "2.5ch",
                   counterIncrement: "level3",
                   _before: {
                     content: "counter(level1, decimal) '.' counter(level2, decimal) '.' counter(level3, decimal) '. '"
@@ -75,10 +72,13 @@ const orderedListRecipe = cva({
                       counterReset: "level4 var(--start, 0)"
                     },
                     [LIST_ITEM]: {
-                      marginInlineStart: "3xlarge",
+                      marginInlineStart: "4.5ch",
                       counterIncrement: "level4",
                       _before: {
                         content: "counter(level1, decimal) '.' counter(level2, decimal) '.' counter(level3, decimal) '.' counter(level4,  decimal) '. '"
+                      },
+                      [LETTER_LIST_ITEM]: {
+                        marginInlineStart: "0.5ch"
                       }
                     }
                   }
@@ -98,21 +98,13 @@ const orderedListRecipe = cva({
           _before: {
             content: "counter(level1, upper-alpha) '. '"
           },
-          [NUMBER_LIST_ITEM]: {
-            marginInlineStart: "medium"
-          },
           [LETTER_LIST_ITEM]: {
-            marginInlineStart: "small",
             _before: {
               content: "counter(level1, lower-alpha) '. '"
             },
             [LETTER_LIST_ITEM]: {
-              marginInlineStart: "small",
               _before: {
                 content: "counter(level1, lower-roman) '. '"
-              },
-              [NUMBER_LIST_ITEM]: {
-                marginInlineStart: "medium"
               }
             }
           }
@@ -148,7 +140,7 @@ export const OrderedList = /*#__PURE__*/forwardRef((_ref, ref) => {
 export const UnOrderedList = styled("ul", {
   base: {
     listStyle: "revert",
-    paddingInlineStart: "medium",
+    paddingInlineStart: "2.5ch",
     "& li": {
       marginBlock: "small",
       _marker: {

package/es/Button.js

@@ -170,13 +170,25 @@ export const buttonRecipe = cva({
         textStyle: "label.medium",
         paddingInline: "small",
         paddingBlock: "xxsmall",
-        minHeight: "24"
+        minHeight: "24",
+        "& svg": {
+          marginInline: "0",
+          marginBlock: "0",
+          width: "medium",
+          height: "medium"
+        }
       },
       small: {
         textStyle: "label.small",
         minHeight: "large",
         paddingInline: "xsmall",
-        paddingBlock: "4xsmall"
+        paddingBlock: "4xsmall",
+        "& svg": {
+          marginInline: "0",
+          marginBlock: "0",
+          width: "small",
+          height: "small"
+        }
       }
     }
   }

package/es/Checkbox.js

@@ -152,8 +152,8 @@ const checkboxRecipe = sva({
           },
           _checked: {
             color: "text.onAction",
-            background: "surface.actionSubtle.selected",
-            borderColor: "surface.actionSubtle.selected",
+            background: "surface.action.selected",
+            borderColor: "surface.action.selected",
             outlineColor: "icon.onAction",
             _focus: {
               outlineOffset: "-4px"

package/es/Tabs.js

@@ -111,13 +111,14 @@ const tabsRecipe = sva({
           }
         },
         indicator: {
-          background: "transparent",
-          outline: "3px solid",
-          outlineColor: "stroke.default",
-          outlineOffset: "-3px",
+          background: "stroke.default",
           _peerFocusVisible: {
             height: "var(--height)",
             width: "var(--width)",
+            outline: "3px solid",
+            outlineOffset: "-3px",
+            outlineColor: "stroke.default",
+            background: "transparent",
             _horizontal: {
               borderTopRadius: "xsmall"
             },
@@ -127,11 +128,11 @@ const tabsRecipe = sva({
           },
           _horizontal: {
             top: "calc(var(--top) + var(--height) - 6px)",
+            height: "3",
+            width: "var(--width)",
             _peerFocusVisible: {
               top: "var(--top)"
-            },
-            height: "3",
-            width: "var(--width)"
+            }
           },
           _vertical: {
             height: "var(--height)",

package/es/TagsInput.js

@@ -40,7 +40,7 @@ const tagsInputRecipe = sva({
       borderRadius: "large",
       outline: "1px solid",
       outlineColor: "transparent",
-      backgroundColor: "surface.actionSubtle.selected",
+      backgroundColor: "surface.action.selected",
       color: "text.onAction",
       transitionDuration: "normal",
       transitionProperty: "background, outline-color, color",

package/lib/ArticleLists.d.ts

@@ -19,16 +19,13 @@ declare const orderedListRecipe: import("@ndla/styled-system/types").RecipeRunti
                 _before: {
                     content: "counter(level1, decimal) '. '";
                 };
-                "& > ol[data-variant='letters'] > li": {
-                    marginInlineStart: "medium";
-                };
                 "& > ol:not([data-variant='letters'])": {
                     counterReset: "level2";
                     "&[data-count='true']": {
                         counterReset: "level2 var(--start, 0)";
                     };
                     "& > li": {
-                        marginInlineStart: "xlarge";
+                        marginInlineStart: "1ch";
                         counterIncrement: "level2";
                         _before: {
                             content: "counter(level1, decimal) '.' counter(level2, decimal) '. '";
@@ -39,7 +36,7 @@ declare const orderedListRecipe: import("@ndla/styled-system/types").RecipeRunti
                                 counterReset: "level3 var(--start, 0)";
                             };
                             "& > li": {
-                                marginInlineStart: "xxlarge";
+                                marginInlineStart: "2.5ch";
                                 counterIncrement: "level3";
                                 _before: {
                                     content: "counter(level1, decimal) '.' counter(level2, decimal) '.' counter(level3, decimal) '. '";
@@ -50,11 +47,14 @@ declare const orderedListRecipe: import("@ndla/styled-system/types").RecipeRunti
                                         counterReset: "level4 var(--start, 0)";
                                     };
                                     "& > li": {
-                                        marginInlineStart: "3xlarge";
+                                        marginInlineStart: "4.5ch";
                                         counterIncrement: "level4";
                                         _before: {
                                             content: "counter(level1, decimal) '.' counter(level2, decimal) '.' counter(level3, decimal) '.' counter(level4,  decimal) '. '";
                                         };
+                                        "& > ol[data-variant='letters'] > li": {
+                                            marginInlineStart: "0.5ch";
+                                        };
                                     };
                                 };
                             };
@@ -73,22 +73,14 @@ declare const orderedListRecipe: import("@ndla/styled-system/types").RecipeRunti
                 _before: {
                     content: "counter(level1, upper-alpha) '. '";
                 };
-                "& > ol:not([data-variant='letters']) > li": {
-                    marginInlineStart: "medium";
-                };
                 "& > ol[data-variant='letters'] > li": {
-                    marginInlineStart: "small";
                     _before: {
                         content: "counter(level1, lower-alpha) '. '";
                     };
                     "& > ol[data-variant='letters'] > li": {
-                        marginInlineStart: "small";
                         _before: {
                             content: "counter(level1, lower-roman) '. '";
                         };
-                        "& > ol:not([data-variant='letters']) > li": {
-                            marginInlineStart: "medium";
-                        };
                     };
                 };
             };

package/lib/ArticleLists.js

@@ -29,11 +29,11 @@ const orderedListRecipe = (0, _css.cva)({
       _before: {
         position: "absolute",
         transform: "translateX(-100%)",
-        paddingInlineEnd: "3xsmall",
+        paddingInlineEnd: "0.25em",
         fontVariantNumeric: "tabular-nums"
-      },
-      marginInlineStart: "small"
-    }
+      }
+    },
+    marginInlineStart: "2.5ch"
   },
   defaultVariants: {
     variant: "numbers"
@@ -50,16 +50,13 @@ const orderedListRecipe = (0, _css.cva)({
           _before: {
             content: "counter(level1, decimal) '. '"
           },
-          [LETTER_LIST_ITEM]: {
-            marginInlineStart: "medium"
-          },
           [NUMBER_LIST]: {
             counterReset: "level2",
             "&[data-count='true']": {
               counterReset: "level2 var(--start, 0)"
             },
             [LIST_ITEM]: {
-              marginInlineStart: "xlarge",
+              marginInlineStart: "1ch",
               counterIncrement: "level2",
               _before: {
                 content: "counter(level1, decimal) '.' counter(level2, decimal) '. '"
@@ -70,7 +67,7 @@ const orderedListRecipe = (0, _css.cva)({
                   counterReset: "level3 var(--start, 0)"
                 },
                 [LIST_ITEM]: {
-                  marginInlineStart: "xxlarge",
+                  marginInlineStart: "2.5ch",
                   counterIncrement: "level3",
                   _before: {
                     content: "counter(level1, decimal) '.' counter(level2, decimal) '.' counter(level3, decimal) '. '"
@@ -81,10 +78,13 @@ const orderedListRecipe = (0, _css.cva)({
                       counterReset: "level4 var(--start, 0)"
                     },
                     [LIST_ITEM]: {
-                      marginInlineStart: "3xlarge",
+                      marginInlineStart: "4.5ch",
                       counterIncrement: "level4",
                       _before: {
                         content: "counter(level1, decimal) '.' counter(level2, decimal) '.' counter(level3, decimal) '.' counter(level4,  decimal) '. '"
+                      },
+                      [LETTER_LIST_ITEM]: {
+                        marginInlineStart: "0.5ch"
                       }
                     }
                   }
@@ -104,21 +104,13 @@ const orderedListRecipe = (0, _css.cva)({
           _before: {
             content: "counter(level1, upper-alpha) '. '"
           },
-          [NUMBER_LIST_ITEM]: {
-            marginInlineStart: "medium"
-          },
           [LETTER_LIST_ITEM]: {
-            marginInlineStart: "small",
             _before: {
               content: "counter(level1, lower-alpha) '. '"
             },
             [LETTER_LIST_ITEM]: {
-              marginInlineStart: "small",
               _before: {
                 content: "counter(level1, lower-roman) '. '"
-              },
-              [NUMBER_LIST_ITEM]: {
-                marginInlineStart: "medium"
               }
             }
           }
@@ -154,7 +146,7 @@ const OrderedList = exports.OrderedList = /*#__PURE__*/(0, _react.forwardRef)((_
 const UnOrderedList = exports.UnOrderedList = (0, _jsx2.styled)("ul", {
   base: {
     listStyle: "revert",
-    paddingInlineStart: "medium",
+    paddingInlineStart: "2.5ch",
     "& li": {
       marginBlock: "small",
       _marker: {

package/lib/Button.d.ts

@@ -123,12 +123,24 @@ export declare const buttonRecipe: import("@ndla/styled-system/types").RecipeRun
             paddingInline: "small";
             paddingBlock: "xxsmall";
             minHeight: "24";
+            "& svg": {
+                marginInline: "0";
+                marginBlock: "0";
+                width: "medium";
+                height: "medium";
+            };
         };
         small: {
             textStyle: "label.small";
             minHeight: "large";
             paddingInline: "xsmall";
             paddingBlock: "4xsmall";
+            "& svg": {
+                marginInline: "0";
+                marginBlock: "0";
+                width: "small";
+                height: "small";
+            };
         };
     };
 }>;

package/lib/Button.js

@@ -176,13 +176,25 @@ const buttonRecipe = exports.buttonRecipe = (0, _css.cva)({
         textStyle: "label.medium",
         paddingInline: "small",
         paddingBlock: "xxsmall",
-        minHeight: "24"
+        minHeight: "24",
+        "& svg": {
+          marginInline: "0",
+          marginBlock: "0",
+          width: "medium",
+          height: "medium"
+        }
       },
       small: {
         textStyle: "label.small",
         minHeight: "large",
         paddingInline: "xsmall",
-        paddingBlock: "4xsmall"
+        paddingBlock: "4xsmall",
+        "& svg": {
+          marginInline: "0",
+          marginBlock: "0",
+          width: "small",
+          height: "small"
+        }
       }
     }
   }

package/lib/Checkbox.d.ts

@@ -104,8 +104,8 @@ declare const checkboxRecipe: import("@ndla/styled-system/types").SlotRecipeRunt
                 };
                 _checked: {
                     color: "text.onAction";
-                    background: "surface.actionSubtle.selected";
-                    borderColor: "surface.actionSubtle.selected";
+                    background: "surface.action.selected";
+                    borderColor: "surface.action.selected";
                     outlineColor: "icon.onAction";
                     _focus: {
                         outlineOffset: "-4px";

package/lib/Checkbox.js

@@ -158,8 +158,8 @@ const checkboxRecipe = (0, _css.sva)({
           },
           _checked: {
             color: "text.onAction",
-            background: "surface.actionSubtle.selected",
-            borderColor: "surface.actionSubtle.selected",
+            background: "surface.action.selected",
+            borderColor: "surface.action.selected",
             outlineColor: "icon.onAction",
             _focus: {
               outlineOffset: "-4px"

package/lib/Tabs.d.ts

@@ -38,13 +38,14 @@ declare const tabsRecipe: import("@ndla/styled-system/types").SlotRecipeRuntimeF
                 };
             };
             indicator: {
-                background: "transparent";
-                outline: "3px solid";
-                outlineColor: "stroke.default";
-                outlineOffset: "-3px";
+                background: "stroke.default";
                 _peerFocusVisible: {
                     height: "var(--height)";
                     width: "var(--width)";
+                    outline: "3px solid";
+                    outlineOffset: "-3px";
+                    outlineColor: "stroke.default";
+                    background: "transparent";
                     _horizontal: {
                         borderTopRadius: "xsmall";
                     };
@@ -54,11 +55,11 @@ declare const tabsRecipe: import("@ndla/styled-system/types").SlotRecipeRuntimeF
                 };
                 _horizontal: {
                     top: "calc(var(--top) + var(--height) - 6px)";
+                    height: "3";
+                    width: "var(--width)";
                     _peerFocusVisible: {
                         top: "var(--top)";
                     };
-                    height: "3";
-                    width: "var(--width)";
                 };
                 _vertical: {
                     height: "var(--height)";

package/lib/Tabs.js

@@ -117,13 +117,14 @@ const tabsRecipe = (0, _css.sva)({
           }
         },
         indicator: {
-          background: "transparent",
-          outline: "3px solid",
-          outlineColor: "stroke.default",
-          outlineOffset: "-3px",
+          background: "stroke.default",
           _peerFocusVisible: {
             height: "var(--height)",
             width: "var(--width)",
+            outline: "3px solid",
+            outlineOffset: "-3px",
+            outlineColor: "stroke.default",
+            background: "transparent",
             _horizontal: {
               borderTopRadius: "xsmall"
             },
@@ -133,11 +134,11 @@ const tabsRecipe = (0, _css.sva)({
           },
           _horizontal: {
             top: "calc(var(--top) + var(--height) - 6px)",
+            height: "3",
+            width: "var(--width)",
             _peerFocusVisible: {
               top: "var(--top)"
-            },
-            height: "3",
-            width: "var(--width)"
+            }
           },
           _vertical: {
             height: "var(--height)",

package/lib/TagsInput.js

@@ -46,7 +46,7 @@ const tagsInputRecipe = (0, _css.sva)({
       borderRadius: "large",
       outline: "1px solid",
       outlineColor: "transparent",
-      backgroundColor: "surface.actionSubtle.selected",
+      backgroundColor: "surface.action.selected",
       color: "text.onAction",
       transitionDuration: "normal",
       transitionProperty: "background, outline-color, color",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ndla/primitives",
-  "version": "1.0.32-alpha.0",
+  "version": "1.0.34-alpha.0",
   "description": "Primitive components for NDLA.",
   "license": "GPL-3.0",
   "main": "lib/index.js",
@@ -28,12 +28,12 @@
     "lib"
   ],
   "dependencies": {
-    "@ark-ui/react": "^3.12.0",
-    "@ndla/styled-system": "^0.0.22",
+    "@ark-ui/react": "^3.12.1",
+    "@ndla/styled-system": "^0.0.23",
     "@ndla/util": "^5.0.0-alpha.0"
   },
   "devDependencies": {
-    "@ndla/preset-panda": "^0.0.33",
+    "@ndla/preset-panda": "^0.0.35",
     "@pandacss/dev": "^0.46.0"
   },
   "peerDependencies": {
@@ -43,5 +43,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "07ec7465840ff67d4bf2958dab58ead11fac1dee"
+  "gitHead": "5bad5d1659659f8f6a1a8cb790d43fdbbfcdedbc"
 }