@navikt/ds-css 7.22.0 → 7.23.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (225) hide show
  1. package/CHANGELOG.md +18 -0
  2. package/darkside/accordion.darkside.css +6 -6
  3. package/darkside/action-menu.darkside.css +2 -2
  4. package/darkside/alert.darkside.css +6 -37
  5. package/darkside/button.darkside.css +84 -173
  6. package/darkside/chat.darkside.css +18 -19
  7. package/darkside/chips.darkside.css +12 -46
  8. package/darkside/date.darkside.css +9 -9
  9. package/darkside/dropdown.darkside.css +2 -2
  10. package/darkside/expansioncard.darkside.css +11 -7
  11. package/darkside/form/combobox.darkside.css +7 -7
  12. package/darkside/form/file-upload.darkside.css +10 -10
  13. package/darkside/form/form-summary.darkside.css +3 -3
  14. package/darkside/form/radio-checkbox.darkside.css +7 -27
  15. package/darkside/form/search.darkside.css +2 -2
  16. package/darkside/form/select.darkside.css +3 -3
  17. package/darkside/form/switch.darkside.css +14 -25
  18. package/darkside/form/text-field.darkside.css +2 -2
  19. package/darkside/form/textarea.darkside.css +2 -2
  20. package/darkside/guide-panel.darkside.css +2 -2
  21. package/darkside/help-text.darkside.css +5 -5
  22. package/darkside/link.darkside.css +10 -14
  23. package/darkside/list.darkside.css +8 -11
  24. package/darkside/loader.darkside.css +8 -26
  25. package/darkside/pagination.darkside.css +0 -5
  26. package/darkside/progress-bar.darkside.css +1 -1
  27. package/darkside/read-more.darkside.css +4 -4
  28. package/darkside/stepper.darkside.css +10 -10
  29. package/darkside/table.darkside.css +8 -8
  30. package/darkside/tabs.darkside.css +5 -7
  31. package/darkside/tag.darkside.css +27 -84
  32. package/darkside/timeline.darkside.css +14 -86
  33. package/darkside/toggle-group.darkside.css +3 -15
  34. package/darkside/typography.darkside.css +18 -0
  35. package/dist/component/alert.min.css +1 -1
  36. package/dist/component/chat.min.css +1 -1
  37. package/dist/component/date.min.css +1 -1
  38. package/dist/component/expansioncard.min.css +1 -1
  39. package/dist/component/form.min.css +1 -1
  40. package/dist/component/list.css +8 -12
  41. package/dist/component/list.min.css +1 -1
  42. package/dist/component/modal.min.css +1 -1
  43. package/dist/component/primitives.min.css +1 -1
  44. package/dist/component/skeleton.min.css +1 -1
  45. package/dist/component/stepper.min.css +1 -1
  46. package/dist/component/tabs.min.css +1 -1
  47. package/dist/component/tag.min.css +1 -1
  48. package/dist/component/timeline.min.css +1 -1
  49. package/dist/component/togglegroup.min.css +1 -1
  50. package/dist/components.css +8 -12
  51. package/dist/components.min.css +3 -3
  52. package/dist/darkside/component/accordion.css +6 -6
  53. package/dist/darkside/component/accordion.min.css +1 -1
  54. package/dist/darkside/component/actionmenu.css +2 -2
  55. package/dist/darkside/component/actionmenu.min.css +1 -1
  56. package/dist/darkside/component/alert.css +6 -36
  57. package/dist/darkside/component/alert.min.css +1 -1
  58. package/dist/darkside/component/button.css +70 -134
  59. package/dist/darkside/component/button.min.css +1 -1
  60. package/dist/darkside/component/chat.css +15 -12
  61. package/dist/darkside/component/chat.min.css +1 -1
  62. package/dist/darkside/component/chips.css +16 -50
  63. package/dist/darkside/component/chips.min.css +1 -1
  64. package/dist/darkside/component/date.css +9 -9
  65. package/dist/darkside/component/date.min.css +1 -1
  66. package/dist/darkside/component/dropdown.css +2 -2
  67. package/dist/darkside/component/dropdown.min.css +1 -1
  68. package/dist/darkside/component/expansioncard.css +11 -7
  69. package/dist/darkside/component/expansioncard.min.css +1 -1
  70. package/dist/darkside/component/form.css +49 -74
  71. package/dist/darkside/component/form.min.css +1 -1
  72. package/dist/darkside/component/guidepanel.css +2 -2
  73. package/dist/darkside/component/guidepanel.min.css +1 -1
  74. package/dist/darkside/component/helptext.css +5 -5
  75. package/dist/darkside/component/helptext.min.css +1 -1
  76. package/dist/darkside/component/link.css +10 -14
  77. package/dist/darkside/component/link.min.css +1 -1
  78. package/dist/darkside/component/list.css +8 -22
  79. package/dist/darkside/component/list.min.css +1 -1
  80. package/dist/darkside/component/loader.css +8 -20
  81. package/dist/darkside/component/loader.min.css +1 -1
  82. package/dist/darkside/component/pagination.css +0 -5
  83. package/dist/darkside/component/pagination.min.css +1 -1
  84. package/dist/darkside/component/progressbar.css +1 -1
  85. package/dist/darkside/component/progressbar.min.css +1 -1
  86. package/dist/darkside/component/readmore.css +4 -4
  87. package/dist/darkside/component/readmore.min.css +1 -1
  88. package/dist/darkside/component/stepper.css +10 -10
  89. package/dist/darkside/component/stepper.min.css +1 -1
  90. package/dist/darkside/component/table.css +8 -8
  91. package/dist/darkside/component/table.min.css +1 -1
  92. package/dist/darkside/component/tabs.css +2 -2
  93. package/dist/darkside/component/tabs.min.css +1 -1
  94. package/dist/darkside/component/tag.css +28 -74
  95. package/dist/darkside/component/tag.min.css +1 -1
  96. package/dist/darkside/component/timeline.css +15 -87
  97. package/dist/darkside/component/timeline.min.css +1 -1
  98. package/dist/darkside/component/togglegroup.css +3 -12
  99. package/dist/darkside/component/togglegroup.min.css +1 -1
  100. package/dist/darkside/component/typography.css +16 -0
  101. package/dist/darkside/component/typography.min.css +1 -1
  102. package/dist/darkside/components.css +305 -597
  103. package/dist/darkside/components.min.css +1 -1
  104. package/dist/darkside/global/tokens.css +825 -825
  105. package/dist/darkside/global/tokens.min.css +1 -1
  106. package/dist/darkside/index.css +1134 -1426
  107. package/dist/darkside/index.min.css +1 -1
  108. package/dist/darkside/version/{7.22.0 → 7.23.0}/component/accordion.css +6 -6
  109. package/dist/darkside/version/7.23.0/component/accordion.min.css +1 -0
  110. package/dist/darkside/version/{7.22.0 → 7.23.0}/component/actionmenu.css +2 -2
  111. package/dist/darkside/version/7.23.0/component/actionmenu.min.css +1 -0
  112. package/dist/darkside/version/{7.22.0 → 7.23.0}/component/alert.css +6 -36
  113. package/dist/darkside/version/7.23.0/component/alert.min.css +1 -0
  114. package/dist/darkside/version/7.23.0/component/button.css +208 -0
  115. package/dist/darkside/version/7.23.0/component/button.min.css +1 -0
  116. package/dist/darkside/version/{7.22.0 → 7.23.0}/component/chat.css +15 -12
  117. package/dist/darkside/version/7.23.0/component/chat.min.css +1 -0
  118. package/dist/darkside/version/{7.22.0 → 7.23.0}/component/chips.css +16 -50
  119. package/dist/darkside/version/7.23.0/component/chips.min.css +1 -0
  120. package/dist/darkside/version/{7.22.0 → 7.23.0}/component/date.css +9 -9
  121. package/dist/darkside/version/7.23.0/component/date.min.css +1 -0
  122. package/dist/darkside/version/{7.22.0 → 7.23.0}/component/dropdown.css +2 -2
  123. package/dist/darkside/version/{7.22.0 → 7.23.0}/component/dropdown.min.css +1 -1
  124. package/dist/darkside/version/{7.22.0 → 7.23.0}/component/expansioncard.css +11 -7
  125. package/dist/darkside/version/7.23.0/component/expansioncard.min.css +1 -0
  126. package/dist/darkside/version/{7.22.0 → 7.23.0}/component/form.css +49 -74
  127. package/dist/darkside/version/7.23.0/component/form.min.css +1 -0
  128. package/dist/darkside/version/{7.22.0 → 7.23.0}/component/guidepanel.css +2 -2
  129. package/dist/darkside/version/7.23.0/component/guidepanel.min.css +1 -0
  130. package/dist/darkside/version/{7.22.0 → 7.23.0}/component/helptext.css +5 -5
  131. package/dist/darkside/version/7.23.0/component/helptext.min.css +1 -0
  132. package/dist/darkside/version/{7.22.0 → 7.23.0}/component/link.css +10 -14
  133. package/dist/darkside/version/7.23.0/component/link.min.css +1 -0
  134. package/dist/darkside/version/{7.22.0 → 7.23.0}/component/list.css +8 -22
  135. package/dist/darkside/version/7.23.0/component/list.min.css +1 -0
  136. package/dist/darkside/version/{7.22.0 → 7.23.0}/component/loader.css +8 -20
  137. package/dist/darkside/version/7.23.0/component/loader.min.css +1 -0
  138. package/dist/darkside/version/{7.22.0 → 7.23.0}/component/pagination.css +0 -5
  139. package/dist/darkside/version/{7.22.0 → 7.23.0}/component/pagination.min.css +1 -1
  140. package/dist/darkside/version/{7.22.0 → 7.23.0}/component/progressbar.css +1 -1
  141. package/dist/darkside/version/7.23.0/component/progressbar.min.css +1 -0
  142. package/dist/darkside/version/{7.22.0 → 7.23.0}/component/readmore.css +4 -4
  143. package/dist/darkside/version/7.23.0/component/readmore.min.css +1 -0
  144. package/dist/darkside/version/{7.22.0 → 7.23.0}/component/stepper.css +10 -10
  145. package/dist/darkside/version/7.23.0/component/stepper.min.css +1 -0
  146. package/dist/darkside/version/{7.22.0 → 7.23.0}/component/table.css +8 -8
  147. package/dist/darkside/version/7.23.0/component/table.min.css +1 -0
  148. package/dist/darkside/version/{7.22.0 → 7.23.0}/component/tabs.css +2 -2
  149. package/dist/darkside/version/7.23.0/component/tabs.min.css +1 -0
  150. package/dist/darkside/version/7.23.0/component/tag.css +83 -0
  151. package/dist/darkside/version/7.23.0/component/tag.min.css +1 -0
  152. package/dist/darkside/version/{7.22.0 → 7.23.0}/component/timeline.css +15 -87
  153. package/dist/darkside/version/7.23.0/component/timeline.min.css +1 -0
  154. package/dist/darkside/version/{7.22.0 → 7.23.0}/component/togglegroup.css +3 -12
  155. package/dist/darkside/version/7.23.0/component/togglegroup.min.css +1 -0
  156. package/dist/darkside/version/{7.22.0 → 7.23.0}/component/typography.css +16 -0
  157. package/dist/darkside/version/{7.22.0 → 7.23.0}/component/typography.min.css +1 -1
  158. package/dist/darkside/version/{7.22.0 → 7.23.0}/components.css +305 -597
  159. package/dist/darkside/version/7.23.0/components.min.css +1 -0
  160. package/dist/darkside/version/{7.22.0 → 7.23.0}/global/tokens.css +825 -825
  161. package/dist/darkside/version/7.23.0/global/tokens.min.css +1 -0
  162. package/dist/darkside/version/{7.22.0 → 7.23.0}/index.css +1134 -1426
  163. package/dist/darkside/version/7.23.0/index.min.css +1 -0
  164. package/dist/global/baseline.min.css +1 -1
  165. package/dist/global/tokens.css +329 -329
  166. package/dist/global/tokens.min.css +1 -1
  167. package/dist/index.css +337 -341
  168. package/dist/index.min.css +4 -4
  169. package/list.css +8 -11
  170. package/package.json +4 -4
  171. package/dist/darkside/version/7.22.0/component/accordion.min.css +0 -1
  172. package/dist/darkside/version/7.22.0/component/actionmenu.min.css +0 -1
  173. package/dist/darkside/version/7.22.0/component/alert.min.css +0 -1
  174. package/dist/darkside/version/7.22.0/component/button.css +0 -272
  175. package/dist/darkside/version/7.22.0/component/button.min.css +0 -1
  176. package/dist/darkside/version/7.22.0/component/chat.min.css +0 -1
  177. package/dist/darkside/version/7.22.0/component/chips.min.css +0 -1
  178. package/dist/darkside/version/7.22.0/component/date.min.css +0 -1
  179. package/dist/darkside/version/7.22.0/component/expansioncard.min.css +0 -1
  180. package/dist/darkside/version/7.22.0/component/form.min.css +0 -1
  181. package/dist/darkside/version/7.22.0/component/guidepanel.min.css +0 -1
  182. package/dist/darkside/version/7.22.0/component/helptext.min.css +0 -1
  183. package/dist/darkside/version/7.22.0/component/link.min.css +0 -1
  184. package/dist/darkside/version/7.22.0/component/list.min.css +0 -1
  185. package/dist/darkside/version/7.22.0/component/loader.min.css +0 -1
  186. package/dist/darkside/version/7.22.0/component/progressbar.min.css +0 -1
  187. package/dist/darkside/version/7.22.0/component/readmore.min.css +0 -1
  188. package/dist/darkside/version/7.22.0/component/stepper.min.css +0 -1
  189. package/dist/darkside/version/7.22.0/component/table.min.css +0 -1
  190. package/dist/darkside/version/7.22.0/component/tabs.min.css +0 -1
  191. package/dist/darkside/version/7.22.0/component/tag.css +0 -129
  192. package/dist/darkside/version/7.22.0/component/tag.min.css +0 -1
  193. package/dist/darkside/version/7.22.0/component/timeline.min.css +0 -1
  194. package/dist/darkside/version/7.22.0/component/togglegroup.min.css +0 -1
  195. package/dist/darkside/version/7.22.0/components.min.css +0 -1
  196. package/dist/darkside/version/7.22.0/global/tokens.min.css +0 -1
  197. package/dist/darkside/version/7.22.0/index.min.css +0 -1
  198. /package/dist/darkside/version/{7.22.0 → 7.23.0}/component/copybutton.css +0 -0
  199. /package/dist/darkside/version/{7.22.0 → 7.23.0}/component/copybutton.min.css +0 -0
  200. /package/dist/darkside/version/{7.22.0 → 7.23.0}/component/internalheader.css +0 -0
  201. /package/dist/darkside/version/{7.22.0 → 7.23.0}/component/internalheader.min.css +0 -0
  202. /package/dist/darkside/version/{7.22.0 → 7.23.0}/component/linkpanel.css +0 -0
  203. /package/dist/darkside/version/{7.22.0 → 7.23.0}/component/linkpanel.min.css +0 -0
  204. /package/dist/darkside/version/{7.22.0 → 7.23.0}/component/modal.css +0 -0
  205. /package/dist/darkside/version/{7.22.0 → 7.23.0}/component/modal.min.css +0 -0
  206. /package/dist/darkside/version/{7.22.0 → 7.23.0}/component/panel.css +0 -0
  207. /package/dist/darkside/version/{7.22.0 → 7.23.0}/component/panel.min.css +0 -0
  208. /package/dist/darkside/version/{7.22.0 → 7.23.0}/component/popover.css +0 -0
  209. /package/dist/darkside/version/{7.22.0 → 7.23.0}/component/popover.min.css +0 -0
  210. /package/dist/darkside/version/{7.22.0 → 7.23.0}/component/primitives.css +0 -0
  211. /package/dist/darkside/version/{7.22.0 → 7.23.0}/component/primitives.min.css +0 -0
  212. /package/dist/darkside/version/{7.22.0 → 7.23.0}/component/skeleton.css +0 -0
  213. /package/dist/darkside/version/{7.22.0 → 7.23.0}/component/skeleton.min.css +0 -0
  214. /package/dist/darkside/version/{7.22.0 → 7.23.0}/component/theme.css +0 -0
  215. /package/dist/darkside/version/{7.22.0 → 7.23.0}/component/theme.min.css +0 -0
  216. /package/dist/darkside/version/{7.22.0 → 7.23.0}/component/tooltip.css +0 -0
  217. /package/dist/darkside/version/{7.22.0 → 7.23.0}/component/tooltip.min.css +0 -0
  218. /package/dist/darkside/version/{7.22.0 → 7.23.0}/global/baseline.css +0 -0
  219. /package/dist/darkside/version/{7.22.0 → 7.23.0}/global/baseline.min.css +0 -0
  220. /package/dist/darkside/version/{7.22.0 → 7.23.0}/global/fonts.css +0 -0
  221. /package/dist/darkside/version/{7.22.0 → 7.23.0}/global/fonts.min.css +0 -0
  222. /package/dist/darkside/version/{7.22.0 → 7.23.0}/global/print.css +0 -0
  223. /package/dist/darkside/version/{7.22.0 → 7.23.0}/global/print.min.css +0 -0
  224. /package/dist/darkside/version/{7.22.0 → 7.23.0}/global/reset.css +0 -0
  225. /package/dist/darkside/version/{7.22.0 → 7.23.0}/global/reset.min.css +0 -0
@@ -8,7 +8,7 @@
8
8
  text-align: left;
9
9
  cursor: pointer;
10
10
  border-radius: var(--ax-radius-8);
11
- color: var(--ax-text-accent-subtle);
11
+ color: var(--ax-text-subtle);
12
12
  background: none;
13
13
  border: none;
14
14
  display: flex;
@@ -28,7 +28,7 @@
28
28
  }
29
29
 
30
30
  .aksel-accordion__header:hover {
31
- background-color: var(--ax-bg-accent-moderate-hoverA);
31
+ background-color: var(--ax-bg-moderate-hoverA);
32
32
  }
33
33
 
34
34
  .aksel-accordion__header:hover:before, .aksel-accordion__header:hover:after {
@@ -36,8 +36,8 @@
36
36
  }
37
37
 
38
38
  .aksel-accordion__header:hover > .aksel-accordion__icon-wrapper {
39
- background-color: var(--ax-bg-accent-strong-hover);
40
- color: var(--ax-text-accent-contrast);
39
+ background-color: var(--ax-bg-strong-hover);
40
+ color: var(--ax-text-contrast);
41
41
  }
42
42
 
43
43
  @media (forced-colors: active) {
@@ -85,10 +85,10 @@
85
85
 
86
86
  .aksel-accordion__icon-wrapper {
87
87
  border-radius: var(--ax-radius-8);
88
- background-color: var(--ax-bg-accent-moderateA);
88
+ background-color: var(--ax-bg-moderateA);
89
89
  width: 22px;
90
90
  height: 22px;
91
- color: var(--ax-text-accent-subtle);
91
+ color: var(--ax-text-subtle);
92
92
  align-self: center;
93
93
  }
94
94
 
@@ -0,0 +1 @@
1
+ @layer aksel.components{.aksel-accordion__header{justify-content:flex-start;align-items:flex-start;gap:var(--ax-space-12);width:100%;padding:var(--ax-space-12);text-align:left;cursor:pointer;border-radius:var(--ax-radius-8);color:var(--ax-text-subtle);background:none;border:none;display:flex;position:relative}.aksel-accordion__header>*{font-weight:var(--ax-font-weight-regular)}@media (forced-colors: active){.aksel-accordion__header{color:canvastext;background-color:canvas;border:1px solid buttonborder}}.aksel-accordion__header:hover{background-color:var(--ax-bg-moderate-hoverA)}.aksel-accordion__header:hover:before,.aksel-accordion__header:hover:after{display:none}.aksel-accordion__header:hover>.aksel-accordion__icon-wrapper{background-color:var(--ax-bg-strong-hover);color:var(--ax-text-contrast)}@media (forced-colors: active){.aksel-accordion__header:hover{color:highlight;background-color:canvas;border:1px solid highlight}}.aksel-accordion__header:focus-visible{outline:3px solid var(--ax-border-focus);outline-offset:3px;z-index:1}.aksel-accordion__header:focus-visible:before,.aksel-accordion__header:focus-visible:after{display:none}.aksel-accordion--small .aksel-accordion__header{padding-block:var(--ax-space-8)}.aksel-accordion__header:before,.aksel-accordion__header:after{content:"";background-color:var(--ax-border-neutral-subtleA);width:100%;height:1px;display:block;position:absolute;top:0;left:0;right:0}.aksel-accordion__header:after{top:initial;bottom:0}.aksel-accordion__item[data-expanded=true]>.aksel-accordion__header:after,.aksel-accordion__item:not(:last-child)>.aksel-accordion__header:after,.aksel-accordion__item[data-expanded=false]:has(.aksel-accordion__header:where(:hover,:focus-visible))+.aksel-accordion__item>.aksel-accordion__header:before{display:none}.aksel-accordion__icon-wrapper{border-radius:var(--ax-radius-8);background-color:var(--ax-bg-moderateA);width:22px;height:22px;color:var(--ax-text-subtle);align-self:center}.aksel-accordion__header-chevron{height:inherit;width:inherit;flex-shrink:0;transition:transform .25s cubic-bezier(.2,0,0,1)}.aksel-accordion__item[data-expanded=true]>.aksel-accordion__header .aksel-accordion__header-chevron{transform:rotateX(-180deg)}.aksel-accordion--indent>.aksel-accordion__item .aksel-accordion__content-inner{padding-block:var(--ax-space-8);padding-inline:calc(var(--ax-space-20) + 2px) var(--ax-space-20)}@media (forced-colors: active){.aksel-accordion--indent>.aksel-accordion__item .aksel-accordion__content-inner{border-left:1px solid canvastext}}.aksel-accordion--indent>.aksel-accordion__item>.aksel-accordion__content{box-shadow:-2px 0 0 0 var(--ax-border-neutral-subtleA)}.aksel-accordion__item>.aksel-accordion__content{visibility:hidden;margin-inline:var(--ax-space-24) var(--ax-space-12);opacity:0;border-color:#0000;grid-template-rows:0fr;margin-block:0;transition-property:visibility,opacity,grid-template-rows,margin,min-height;transition-duration:.25s;transition-timing-function:cubic-bezier(.2,0,0,1);display:grid;overflow:hidden}.aksel-accordion__item>.aksel-accordion__content .aksel-accordion__content-inner{min-height:0;padding-block:0}.aksel-accordion__item[data-expanded=true]>.aksel-accordion__content{visibility:visible;margin-block:var(--ax-space-8);border-color:var(--ax-border-neutral-subtleA);opacity:1;grid-template-rows:1fr;margin-block-end:var(--ax-space-24)}.aksel-accordion__item[data-expanded=true]>.aksel-accordion__content .aksel-accordion__content-inner{min-height:fit-content}.aksel-accordion__item[data-expanded=true]:last-child{border-bottom:1px solid var(--ax-border-neutral-subtleA)}.aksel-accordion__item--no-animation>.aksel-accordion__content{transition:none}}
@@ -70,7 +70,7 @@
70
70
  }
71
71
 
72
72
  .aksel-action-menu__item:focus {
73
- background-color: var(--ax-bg-accent-moderate-hoverA);
73
+ background-color: var(--ax-bg-moderate-hoverA);
74
74
  color: var(--ax-text-neutral);
75
75
  outline: none;
76
76
  }
@@ -93,7 +93,7 @@
93
93
  }
94
94
 
95
95
  .aksel-action-menu__sub-trigger:focus {
96
- background-color: var(--ax-bg-accent-moderate-hoverA);
96
+ background-color: var(--ax-bg-moderate-hoverA);
97
97
  }
98
98
 
99
99
  .aksel-action-menu__item--danger {
@@ -0,0 +1 @@
1
+ @layer aksel.components{.aksel-action-menu__content{border-radius:var(--ax-radius-12);border:1px solid var(--ax-border-neutral-subtleA);box-shadow:var(--ax-shadow-dialog);transition:transform .25s cubic-bezier(0,0,0,1) allow-discrete;overflow:hidden}@starting-style{.aksel-action-menu__content[data-state=open][data-side=bottom]{transform:translateY(-4px)}}@starting-style{.aksel-action-menu__content[data-state=open][data-side=top]{transform:translateY(4px)}}@starting-style{.aksel-action-menu__content[data-state=open][data-side=right]{transform:translate(-4px)}}@starting-style{.aksel-action-menu__content[data-state=open][data-side=left]{transform:translate(4px)}}.aksel-action-menu__content>.aksel-action-menu__content-inner{--__axc-action-menu-content-p: var(--ax-space-8);--__axc-action-menu-item-pr: var(--ax-space-8);--__axc-action-menu-item-pl: var(--ax-space-8);--__axc-action-menu-item-height: 2rem;border-radius:var(--ax-radius-12);background-color:var(--ax-bg-raised);min-width:128px;max-width:min(95vw,640px);transform-origin:var(--__ac-action-menu-content-transform-origin);padding:var(--__axc-action-menu-content-p);max-height:var(--__ac-action-menu-content-available-height);animation-duration:.16s;animation-timing-function:cubic-bezier(.16,1,.3,1);overflow:auto}.aksel-action-menu__item{align-items:center;gap:var(--ax-space-8);min-height:var(--__axc-action-menu-item-height);cursor:default;border-radius:var(--ax-radius-8);padding-left:var(--__axc-action-menu-item-pl);padding-right:var(--__axc-action-menu-item-pr);font-size:var(--ax-font-size-medium);scroll-margin-block:var(--__axc-action-menu-content-p);color:var(--ax-text-neutral);line-height:1.5;text-decoration:none;display:flex;position:relative}.aksel-action-menu__item svg{flex-shrink:0}.aksel-action-menu__item:focus{background-color:var(--ax-bg-moderate-hoverA);color:var(--ax-text-neutral);outline:none}.aksel-action-menu__item[aria-disabled=true]{opacity:.5;pointer-events:none}.aksel-action-menu__item--has-icon{--__axc-action-menu-item-pl: var(--ax-space-24)}.aksel-action-menu__sub-trigger{--__axc-action-menu-item-pr: var(--ax-space-2)}.aksel-action-menu__sub-trigger[data-state=open]{background-color:var(--ax-bg-neutral-moderate-pressedA)}.aksel-action-menu__sub-trigger:focus{background-color:var(--ax-bg-moderate-hoverA)}.aksel-action-menu__item--danger{color:var(--ax-text-danger-subtle)}.aksel-action-menu__item--danger:focus{background-color:var(--ax-bg-danger-moderate-hoverA);color:var(--ax-text-danger-subtle)}.aksel-action-menu__marker{align-items:center;gap:var(--ax-space-4);display:flex}.aksel-action-menu__marker--right{padding-left:var(--ax-space-16);margin-left:auto}.aksel-action-menu__marker--left{width:var(--__axc-action-menu-item-pl);justify-content:center;display:inline-flex;position:absolute;left:0}.aksel-action-menu__marker-icon svg{flex-shrink:0;font-size:18px}.aksel-action-menu__shortcut{background-color:var(--ax-bg-neutral-moderateA);color:var(--ax-text-neutral);border-radius:var(--ax-radius-2);padding:0 var(--ax-space-4);min-width:1.125rem;height:1.125rem;line-height:1;font-size:var(--ax-font-size-small);justify-content:center;align-items:center;display:inline-flex}.aksel-action-menu__label{min-height:calc(var(--__axc-action-menu-item-height) - 6px);padding-right:var(--__axc-action-menu-item-pr);padding-left:var(--__axc-action-menu-item-pl);color:var(--ax-text-neutral-subtle);border-radius:var(--ax-radius-4);-webkit-user-select:none;user-select:none;cursor:default;font-size:var(--ax-font-size-small);align-items:center;display:flex}.aksel-action-menu__divider{height:1px;margin-block:var(--ax-space-8);background-color:var(--ax-border-neutral-subtleA)}.aksel-action-menu__indicator-icon--unchecked,.aksel-action-menu__indicator-icon--checked,.aksel-action-menu__indicator-icon--indeterminate{display:none}.aksel-action-menu__indicator{place-content:center;display:grid}.aksel-action-menu__indicator[data-state=unchecked] .aksel-action-menu__indicator-icon--unchecked,.aksel-action-menu__indicator[data-state=checked] .aksel-action-menu__indicator-icon--checked,.aksel-action-menu__indicator[data-state=indeterminate] .aksel-action-menu__indicator-icon--indeterminate{display:block}.aksel-action-menu__indicator-icon{font-size:14px}}
@@ -4,10 +4,16 @@
4
4
  padding: var(--ax-space-20);
5
5
  gap: var(--ax-space-12);
6
6
  border: 1px solid;
7
+ border-color: var(--ax-border-default);
8
+ background-color: var(--ax-bg-moderate);
7
9
  align-items: center;
8
10
  display: flex;
9
11
  }
10
12
 
13
+ .aksel-alert > .aksel-alert__icon {
14
+ color: var(--ax-text-decoration);
15
+ }
16
+
11
17
  @media (forced-colors: active) {
12
18
  .aksel-alert {
13
19
  color: canvastext;
@@ -37,42 +43,6 @@
37
43
  margin-block-start: 0;
38
44
  }
39
45
 
40
- .aksel-alert--info {
41
- border-color: var(--ax-border-info);
42
- background-color: var(--ax-bg-info-moderate);
43
- }
44
-
45
- .aksel-alert--info > .aksel-alert__icon {
46
- color: var(--ax-text-info-decoration);
47
- }
48
-
49
- .aksel-alert--success {
50
- border-color: var(--ax-border-success);
51
- background-color: var(--ax-bg-success-moderate);
52
- }
53
-
54
- .aksel-alert--success > .aksel-alert__icon {
55
- color: var(--ax-text-success-decoration);
56
- }
57
-
58
- .aksel-alert--warning {
59
- border-color: var(--ax-border-warning);
60
- background-color: var(--ax-bg-warning-moderate);
61
- }
62
-
63
- .aksel-alert--warning > .aksel-alert__icon {
64
- color: var(--ax-text-warning-decoration);
65
- }
66
-
67
- .aksel-alert--error {
68
- border-color: var(--ax-border-danger);
69
- background-color: var(--ax-bg-danger-moderate);
70
- }
71
-
72
- .aksel-alert--error > .aksel-alert__icon {
73
- color: var(--ax-text-danger-decoration);
74
- }
75
-
76
46
  .aksel-alert--full-width {
77
47
  border-radius: 0;
78
48
  }
@@ -0,0 +1 @@
1
+ @layer aksel.components{.aksel-alert{border-radius:var(--ax-radius-12);padding:var(--ax-space-20);gap:var(--ax-space-12);border:1px solid;border-color:var(--ax-border-default);background-color:var(--ax-bg-moderate);align-items:center;display:flex}.aksel-alert>.aksel-alert__icon{color:var(--ax-text-decoration)}@media (forced-colors: active){.aksel-alert{color:canvastext;background-color:canvas;border:1px solid canvastext}}.aksel-alert__wrapper--maxwidth{max-width:43.5rem}.aksel-alert__icon{height:var(--ax-font-line-height-xlarge);flex-shrink:0;align-self:flex-start;font-size:1.5rem}.aksel-alert--small{padding:var(--ax-space-16);gap:var(--ax-space-8)}.aksel-alert--small>.aksel-alert__icon{height:var(--ax-font-line-height-large);margin-block-start:0}.aksel-alert--full-width{border-radius:0}.aksel-alert--inline{background-color:#0000;border:none;padding:0}.aksel-alert__button-wrapper{flex-flow:row;flex:1;justify-content:flex-end;align-self:flex-start;display:flex}.aksel-alert--close-button>.aksel-alert__wrapper,.aksel-alert--close-button>.aksel-alert__icon{margin-block-start:var(--ax-space-2)}.aksel-alert--close-button.aksel-alert--small{align-items:flex-start}.aksel-alert--close-button.aksel-alert--small>.aksel-alert__wrapper,.aksel-alert--close-button.aksel-alert--small>.aksel-alert__icon{margin-block-start:var(--ax-space-4)}}
@@ -0,0 +1,208 @@
1
+ @layer aksel.components {
2
+ .aksel-button {
3
+ --__axc-button-icon-size: 1.5rem;
4
+ --__axc-button-icon-margin: -4px;
5
+ --__axc-button-border-color: transparent;
6
+ --__axc-button-border-width: 2px;
7
+ padding: var(--ax-space-12) var(--ax-space-20);
8
+ border-radius: var(--ax-radius-8);
9
+ cursor: pointer;
10
+ justify-content: center;
11
+ align-items: center;
12
+ gap: var(--ax-space-8);
13
+ box-shadow: inset 0 0 0 var(--__axc-button-border-width) var(--__axc-button-border-color);
14
+ background: none;
15
+ border: none;
16
+ text-decoration: none;
17
+ display: inline-flex;
18
+ }
19
+
20
+ .aksel-button:focus-visible {
21
+ outline: 3px solid var(--ax-border-focus);
22
+ outline-offset: 3px;
23
+ }
24
+
25
+ .aksel-button[data-variant="primary"] {
26
+ background-color: var(--ax-bg-strong);
27
+ color: var(--ax-text-contrast);
28
+ }
29
+
30
+ .aksel-button[data-variant="primary"]:hover {
31
+ background-color: var(--ax-bg-strong-hover);
32
+ }
33
+
34
+ .aksel-button[data-variant="primary"]:active {
35
+ background-color: var(--ax-bg-strong-pressed);
36
+ }
37
+
38
+ .aksel-button[data-variant="primary"]:is(:disabled, .aksel-button--disabled) {
39
+ background-color: var(--ax-bg-strong);
40
+ }
41
+
42
+ .aksel-button[data-variant="secondary"] {
43
+ --__axc-button-border-color: var(--ax-border-default);
44
+ color: var(--ax-text-subtle);
45
+ background-color: rgba(0, 0, 0, 0);
46
+ }
47
+
48
+ .aksel-button[data-variant="secondary"][data-color="neutral"] {
49
+ color: var(--ax-text-default);
50
+ }
51
+
52
+ .aksel-button[data-variant="secondary"]:hover {
53
+ --__axc-button-border-color: var(--ax-border-strong);
54
+ background-color: var(--ax-bg-moderate-hoverA);
55
+ }
56
+
57
+ .aksel-button[data-variant="secondary"]:active {
58
+ background-color: var(--ax-bg-moderate-pressedA);
59
+ }
60
+
61
+ .aksel-button[data-variant="secondary"]:is(:disabled, .aksel-button--disabled) {
62
+ color: var(--ax-text-subtle);
63
+ background-color: rgba(0, 0, 0, 0);
64
+ }
65
+
66
+ .aksel-button[data-variant="secondary"]:is(:disabled, .aksel-button--disabled)[data-color="neutral"] {
67
+ color: var(--ax-text-default);
68
+ }
69
+
70
+ .aksel-button[data-variant="tertiary"] {
71
+ color: var(--ax-text-subtle);
72
+ background-color: rgba(0, 0, 0, 0);
73
+ }
74
+
75
+ .aksel-button[data-variant="tertiary"][data-color="neutral"] {
76
+ color: var(--ax-text-default);
77
+ }
78
+
79
+ .aksel-button[data-variant="tertiary"]:hover {
80
+ background-color: var(--ax-bg-moderate-hoverA);
81
+ }
82
+
83
+ .aksel-button[data-variant="tertiary"]:active {
84
+ background-color: var(--ax-bg-moderate-pressedA);
85
+ }
86
+
87
+ .aksel-button[data-variant="tertiary"][data-pressed="true"] {
88
+ background-color: var(--ax-bg-strong-pressed);
89
+ color: var(--ax-text-contrast);
90
+ }
91
+
92
+ .aksel-button[data-variant="tertiary"]:is(:disabled, .aksel-button--disabled) {
93
+ color: var(--ax-text-subtle);
94
+ background-color: rgba(0, 0, 0, 0);
95
+ }
96
+
97
+ .aksel-button[data-variant="tertiary"]:is(:disabled, .aksel-button--disabled)[data-color="neutral"] {
98
+ color: var(--ax-text-default);
99
+ }
100
+
101
+ .aksel-button--small, .aksel-button--xsmall {
102
+ --__axc-button-icon-margin: -2px;
103
+ }
104
+
105
+ .aksel-button--small {
106
+ padding: var(--ax-space-4) var(--ax-space-12);
107
+ gap: var(--ax-space-6);
108
+ min-width: 2rem;
109
+ min-height: 2rem;
110
+ }
111
+
112
+ .aksel-button--xsmall {
113
+ padding: var(--ax-space-2) var(--ax-space-8);
114
+ gap: var(--ax-space-4);
115
+ --__axc-button-icon-size: 1.25rem;
116
+ }
117
+
118
+ @supports not selector(:focus-visible) {
119
+ .aksel-button:focus {
120
+ outline: 3px solid var(--ax-border-focus);
121
+ }
122
+ }
123
+
124
+ .aksel-button__icon {
125
+ font-size: var(--__axc-button-icon-size);
126
+ display: flex;
127
+ }
128
+
129
+ .aksel-button__icon:first-child {
130
+ margin-left: var(--__axc-button-icon-margin);
131
+ }
132
+
133
+ .aksel-button__icon:last-child {
134
+ margin-right: var(--__axc-button-icon-margin);
135
+ }
136
+
137
+ .aksel-button--icon-only .aksel-button__icon {
138
+ margin: 0;
139
+ }
140
+
141
+ .aksel-button--icon-only {
142
+ padding: var(--ax-space-12);
143
+ }
144
+
145
+ .aksel-button--icon-only.aksel-button--small {
146
+ padding: var(--ax-space-4);
147
+ }
148
+
149
+ .aksel-button--icon-only.aksel-button--xsmall {
150
+ padding: var(--ax-space-2);
151
+ }
152
+
153
+ .aksel-button:where(:disabled, .aksel-button--disabled) {
154
+ cursor: not-allowed;
155
+ }
156
+
157
+ .aksel-button:not(.aksel-button--loading):where(:disabled, .aksel-button--disabled) {
158
+ opacity: var(--ax-opacity-disabled);
159
+ }
160
+
161
+ .aksel-button > .aksel-loader {
162
+ position: absolute;
163
+ }
164
+
165
+ .aksel-button .aksel-loader .aksel-loader__foreground {
166
+ stroke: currentColor;
167
+ }
168
+
169
+ .aksel-button--primary .aksel-loader .aksel-loader__background, .aksel-button--danger .aksel-loader .aksel-loader__background {
170
+ stroke: rgba(255, 255, 255, .3);
171
+ }
172
+
173
+ .aksel-button--loading > :not(.aksel-loader) {
174
+ visibility: hidden;
175
+ }
176
+
177
+ @media (forced-colors: active) {
178
+ .aksel-button:not(.aksel-button--loading):where(:disabled, .aksel-button--disabled) {
179
+ opacity: 1;
180
+ color: graytext;
181
+ }
182
+
183
+ .aksel-button {
184
+ color: buttontext;
185
+ background-color: buttonface;
186
+ border: 1px solid rgba(0, 0, 0, 0);
187
+ }
188
+
189
+ .aksel-button:not(:disabled):hover {
190
+ color: highlight;
191
+ box-shadow: none;
192
+ background-color: highlighttext;
193
+ border-color: highlight;
194
+ }
195
+
196
+ .aksel-button:not(:disabled):hover span {
197
+ forced-color-adjust: none;
198
+ }
199
+
200
+ .aksel-button .aksel-loader .aksel-loader__foreground {
201
+ stroke: canvas;
202
+ }
203
+
204
+ .aksel-button--primary .aksel-loader .aksel-loader__background, .aksel-button--danger .aksel-loader .aksel-loader__background {
205
+ stroke: canvastext;
206
+ }
207
+ }
208
+ }
@@ -0,0 +1 @@
1
+ @layer aksel.components{.aksel-button{--__axc-button-icon-size: 1.5rem;--__axc-button-icon-margin: -4px;--__axc-button-border-color: transparent;--__axc-button-border-width: 2px;padding:var(--ax-space-12) var(--ax-space-20);border-radius:var(--ax-radius-8);cursor:pointer;justify-content:center;align-items:center;gap:var(--ax-space-8);box-shadow:inset 0 0 0 var(--__axc-button-border-width) var(--__axc-button-border-color);background:none;border:none;text-decoration:none;display:inline-flex}.aksel-button:focus-visible{outline:3px solid var(--ax-border-focus);outline-offset:3px}.aksel-button[data-variant=primary]{background-color:var(--ax-bg-strong);color:var(--ax-text-contrast)}.aksel-button[data-variant=primary]:hover{background-color:var(--ax-bg-strong-hover)}.aksel-button[data-variant=primary]:active{background-color:var(--ax-bg-strong-pressed)}.aksel-button[data-variant=primary]:is(:disabled,.aksel-button--disabled){background-color:var(--ax-bg-strong)}.aksel-button[data-variant=secondary]{--__axc-button-border-color: var(--ax-border-default);color:var(--ax-text-subtle);background-color:#0000}.aksel-button[data-variant=secondary][data-color=neutral]{color:var(--ax-text-default)}.aksel-button[data-variant=secondary]:hover{--__axc-button-border-color: var(--ax-border-strong);background-color:var(--ax-bg-moderate-hoverA)}.aksel-button[data-variant=secondary]:active{background-color:var(--ax-bg-moderate-pressedA)}.aksel-button[data-variant=secondary]:is(:disabled,.aksel-button--disabled){color:var(--ax-text-subtle);background-color:#0000}.aksel-button[data-variant=secondary]:is(:disabled,.aksel-button--disabled)[data-color=neutral]{color:var(--ax-text-default)}.aksel-button[data-variant=tertiary]{color:var(--ax-text-subtle);background-color:#0000}.aksel-button[data-variant=tertiary][data-color=neutral]{color:var(--ax-text-default)}.aksel-button[data-variant=tertiary]:hover{background-color:var(--ax-bg-moderate-hoverA)}.aksel-button[data-variant=tertiary]:active{background-color:var(--ax-bg-moderate-pressedA)}.aksel-button[data-variant=tertiary][data-pressed=true]{background-color:var(--ax-bg-strong-pressed);color:var(--ax-text-contrast)}.aksel-button[data-variant=tertiary]:is(:disabled,.aksel-button--disabled){color:var(--ax-text-subtle);background-color:#0000}.aksel-button[data-variant=tertiary]:is(:disabled,.aksel-button--disabled)[data-color=neutral]{color:var(--ax-text-default)}.aksel-button--small,.aksel-button--xsmall{--__axc-button-icon-margin: -2px}.aksel-button--small{padding:var(--ax-space-4) var(--ax-space-12);gap:var(--ax-space-6);min-width:2rem;min-height:2rem}.aksel-button--xsmall{padding:var(--ax-space-2) var(--ax-space-8);gap:var(--ax-space-4);--__axc-button-icon-size: 1.25rem}@supports not selector(:focus-visible){.aksel-button:focus{outline:3px solid var(--ax-border-focus)}}.aksel-button__icon{font-size:var(--__axc-button-icon-size);display:flex}.aksel-button__icon:first-child{margin-left:var(--__axc-button-icon-margin)}.aksel-button__icon:last-child{margin-right:var(--__axc-button-icon-margin)}.aksel-button--icon-only .aksel-button__icon{margin:0}.aksel-button--icon-only{padding:var(--ax-space-12)}.aksel-button--icon-only.aksel-button--small{padding:var(--ax-space-4)}.aksel-button--icon-only.aksel-button--xsmall{padding:var(--ax-space-2)}.aksel-button:where(:disabled,.aksel-button--disabled){cursor:not-allowed}.aksel-button:not(.aksel-button--loading):where(:disabled,.aksel-button--disabled){opacity:var(--ax-opacity-disabled)}.aksel-button>.aksel-loader{position:absolute}.aksel-button .aksel-loader .aksel-loader__foreground{stroke:currentColor}.aksel-button--primary .aksel-loader .aksel-loader__background,.aksel-button--danger .aksel-loader .aksel-loader__background{stroke:#ffffff4d}.aksel-button--loading>:not(.aksel-loader){visibility:hidden}@media (forced-colors: active){.aksel-button:not(.aksel-button--loading):where(:disabled,.aksel-button--disabled){opacity:1;color:graytext}.aksel-button{color:buttontext;background-color:buttonface;border:1px solid rgba(0,0,0,0)}.aksel-button:not(:disabled):hover{color:highlight;box-shadow:none;background-color:highlighttext;border-color:highlight}.aksel-button:not(:disabled):hover span{forced-color-adjust:none}.aksel-button .aksel-loader .aksel-loader__foreground{stroke:canvas}.aksel-button--primary .aksel-loader .aksel-loader__background,.aksel-button--danger .aksel-loader .aksel-loader__background{stroke:canvastext}}}
@@ -6,6 +6,21 @@
6
6
  display: flex;
7
7
  }
8
8
 
9
+ .aksel-chat .aksel-chat__bubble, .aksel-chat .aksel-chat__avatar {
10
+ background-color: var(--ax-bg-moderateA);
11
+ border: 1px solid var(--ax-border-subtleA);
12
+ }
13
+
14
+ .aksel-chat[data-variant="subtle"] .aksel-chat__bubble, .aksel-chat[data-variant="subtle"] .aksel-chat__avatar {
15
+ background-color: var(--ax-bg-softA);
16
+ border: 1px solid var(--ax-border-subtleA);
17
+ }
18
+
19
+ .aksel-chat[data-color="neutral"][data-variant="subtle"] .aksel-chat__bubble, .aksel-chat[data-color="neutral"][data-variant="subtle"] .aksel-chat__avatar {
20
+ background-color: var(--ax-bg-raised);
21
+ border: 1px solid var(--ax-border-neutral-subtleA);
22
+ }
23
+
9
24
  .aksel-chat--right {
10
25
  flex-direction: row-reverse;
11
26
  }
@@ -20,9 +35,7 @@
20
35
  }
21
36
 
22
37
  .aksel-chat__avatar {
23
- background-color: var(--ax-bg-raised);
24
38
  border-radius: var(--ax-radius-full);
25
- border: 1px solid var(--ax-border-neutral-subtleA);
26
39
  color: var(--ax-text-neutral);
27
40
  letter-spacing: .024rem;
28
41
  flex-shrink: 0;
@@ -54,11 +67,9 @@
54
67
 
55
68
  .aksel-chat__bubble {
56
69
  padding: var(--ax-space-20);
57
- background-color: var(--ax-bg-raised);
58
70
  gap: var(--ax-space-8);
59
71
  border-radius: var(--ax-radius-12);
60
72
  border-bottom-left-radius: var(--ax-radius-2);
61
- border: 1px solid var(--ax-border-neutral-subtleA);
62
73
  flex-direction: column;
63
74
  width: fit-content;
64
75
  display: flex;
@@ -68,14 +79,6 @@
68
79
  padding: var(--ax-space-16);
69
80
  }
70
81
 
71
- .aksel-chat--info .aksel-chat__bubble, .aksel-chat--info .aksel-chat__avatar {
72
- background-color: var(--ax-bg-info-moderate);
73
- }
74
-
75
- .aksel-chat--neutral .aksel-chat__bubble, .aksel-chat--neutral .aksel-chat__avatar {
76
- background-color: var(--ax-bg-neutral-moderateA);
77
- }
78
-
79
82
  .aksel-chat__top-text {
80
83
  color: var(--ax-text-neutral);
81
84
  gap: var(--ax-space-8);
@@ -0,0 +1 @@
1
+ @layer aksel.components{.aksel-chat{align-items:flex-end;gap:var(--ax-space-12);max-width:40.75rem;display:flex}.aksel-chat .aksel-chat__bubble,.aksel-chat .aksel-chat__avatar{background-color:var(--ax-bg-moderateA);border:1px solid var(--ax-border-subtleA)}.aksel-chat[data-variant=subtle] .aksel-chat__bubble,.aksel-chat[data-variant=subtle] .aksel-chat__avatar{background-color:var(--ax-bg-softA);border:1px solid var(--ax-border-subtleA)}.aksel-chat[data-color=neutral][data-variant=subtle] .aksel-chat__bubble,.aksel-chat[data-color=neutral][data-variant=subtle] .aksel-chat__avatar{background-color:var(--ax-bg-raised);border:1px solid var(--ax-border-neutral-subtleA)}.aksel-chat--right{flex-direction:row-reverse}.aksel-chat--right .aksel-chat__bubble-wrapper{align-items:flex-end}.aksel-chat--right .aksel-chat__bubble{border-radius:var(--ax-radius-12);border-bottom-right-radius:var(--ax-radius-2)}.aksel-chat__avatar{border-radius:var(--ax-radius-full);color:var(--ax-text-neutral);letter-spacing:.024rem;flex-shrink:0;justify-content:center;align-items:center;width:2.5rem;height:2.5rem;font-size:1.06rem;line-height:2.5rem;display:flex;overflow:hidden}.aksel-chat__avatar svg{align-self:center;width:100%;max-width:1.5rem;max-height:1.5rem}.aksel-chat__bubble-wrapper{gap:var(--ax-space-12);flex-direction:column;margin:0;padding:0;list-style:none;display:flex}.aksel-chat__bubble{padding:var(--ax-space-20);gap:var(--ax-space-8);border-radius:var(--ax-radius-12);border-bottom-left-radius:var(--ax-radius-2);flex-direction:column;width:fit-content;display:flex}.aksel-chat--small .aksel-chat__bubble{padding:var(--ax-space-16)}.aksel-chat__top-text{color:var(--ax-text-neutral);gap:var(--ax-space-8);align-items:baseline;margin:0;font-weight:400;display:flex}.aksel-chat--right .aksel-chat__top-text{align-self:flex-end}.aksel-chat--top-text-left .aksel-chat__top-text{align-self:flex-start}.aksel-chat--top-text-right .aksel-chat__top-text,.aksel-chat--left .aksel-chat__top-text--right{align-self:flex-end}.aksel-chat--right .aksel-chat__top-text--left{align-self:flex-start}}
@@ -65,48 +65,26 @@
65
65
  padding-right: var(--ax-space-2);
66
66
  }
67
67
 
68
- .aksel-chips__toggle--action {
69
- box-shadow: inset 0 0 0 1px var(--ax-border-accent-subtleA);
70
- background-color: var(--ax-bg-accent-moderate);
71
- color: var(--ax-text-accent);
68
+ .aksel-chips__toggle {
69
+ box-shadow: inset 0 0 0 1px var(--ax-border-subtleA);
70
+ background-color: var(--ax-bg-moderate);
71
+ color: var(--ax-text-default);
72
72
  transition: box-shadow .2s cubic-bezier(.15, 1, .3, 1);
73
73
  }
74
74
 
75
- .aksel-chips__toggle--action:hover {
76
- background-color: var(--ax-bg-accent-moderate-hover);
77
- box-shadow: inset 0 0 0 1px var(--ax-border-accent);
75
+ .aksel-chips__toggle:hover {
76
+ background-color: var(--ax-bg-moderate-hover);
77
+ box-shadow: inset 0 0 0 1px var(--ax-border-default);
78
78
  }
79
79
 
80
- .aksel-chips__toggle--action[data-pressed="true"] {
80
+ .aksel-chips__toggle[data-pressed="true"] {
81
81
  box-shadow: none;
82
- background-color: var(--ax-bg-accent-strong-pressed);
83
- color: var(--ax-text-accent-contrast);
82
+ background-color: var(--ax-bg-strong-pressed);
83
+ color: var(--ax-text-contrast);
84
84
  }
85
85
 
86
- .aksel-chips__toggle--action[data-pressed="true"]:hover {
87
- background-color: var(--ax-bg-accent-strong-hover);
88
- }
89
-
90
- .aksel-chips__toggle--neutral {
91
- box-shadow: inset 0 0 0 1px var(--ax-border-neutral-subtleA);
92
- background-color: var(--ax-bg-neutral-moderate);
93
- color: var(--ax-text-neutral);
94
- transition: box-shadow .2s cubic-bezier(.15, 1, .3, 1);
95
- }
96
-
97
- .aksel-chips__toggle--neutral:hover {
98
- background-color: var(--ax-bg-neutral-moderate-hover);
99
- box-shadow: inset 0 0 0 1px var(--ax-border-neutral);
100
- }
101
-
102
- .aksel-chips__toggle--neutral[data-pressed="true"] {
103
- box-shadow: none;
104
- background-color: var(--ax-bg-neutral-strong-pressed);
105
- color: var(--ax-text-neutral-contrast);
106
- }
107
-
108
- .aksel-chips__toggle--neutral[data-pressed="true"]:hover {
109
- background-color: var(--ax-bg-neutral-strong-hover);
86
+ .aksel-chips__toggle[data-pressed="true"]:hover {
87
+ background-color: var(--ax-bg-strong-hover);
110
88
  }
111
89
 
112
90
  .aksel-chips--medium .aksel-chips__toggle--with-checkmark {
@@ -114,25 +92,13 @@
114
92
  }
115
93
 
116
94
  .aksel-chips__removable {
95
+ background: var(--ax-bg-strong-pressed);
96
+ color: var(--ax-text-contrast);
117
97
  gap: 0;
118
98
  }
119
99
 
120
- .aksel-chips__removable--action {
121
- background: var(--ax-bg-accent-strong-pressed);
122
- color: var(--ax-text-accent-contrast);
123
- }
124
-
125
- .aksel-chips__removable--action:hover {
126
- background: var(--ax-bg-accent-strong-hover);
127
- }
128
-
129
- .aksel-chips__removable--neutral {
130
- background: var(--ax-bg-neutral-strong-pressed);
131
- color: var(--ax-text-neutral-contrast);
132
- }
133
-
134
- .aksel-chips__removable--neutral:hover {
135
- background: var(--ax-bg-neutral-strong-hover);
100
+ .aksel-chips__removable:hover {
101
+ background: var(--ax-bg-strong-hover);
136
102
  }
137
103
 
138
104
  .aksel-chips__removable-icon {
@@ -0,0 +1 @@
1
+ @layer aksel.components{.aksel-chips{gap:var(--ax-space-8);flex-wrap:wrap;margin:0;padding:0;list-style:none;display:flex}.aksel-chips li{margin:0;padding:0;list-style:none;display:block}.aksel-chips__chip{all:unset;cursor:pointer;justify-content:center;align-items:center;gap:var(--ax-space-2);padding:0 var(--ax-space-12);border-radius:var(--ax-radius-full);min-height:2rem;margin:0;text-decoration:none;display:flex}.aksel-chips__chip:focus-visible{outline:3px solid var(--ax-border-focus);outline-offset:3px}.aksel-chips--readonly .aksel-chips__chip{background-color:var(--ax-bg-neutral-moderateA)}.aksel-chips--small .aksel-chips__chip{min-height:1.5rem;padding:0 var(--ax-space-8)}.aksel-chips--small .aksel-chips__toggle-icon{width:1rem;height:1rem}.aksel-chips--small .aksel-chips__toggle--with-checkmark{padding-left:var(--ax-space-4)}.aksel-chips--small .aksel-chips__removable-icon{width:1.25rem;height:1.25rem}.aksel-chips--small .aksel-chips__removable-icon>svg{width:1rem}.aksel-chips--small .aksel-chips--icon-right{padding-right:var(--ax-space-2)}.aksel-chips__toggle{box-shadow:inset 0 0 0 1px var(--ax-border-subtleA);background-color:var(--ax-bg-moderate);color:var(--ax-text-default);transition:box-shadow .2s cubic-bezier(.15,1,.3,1)}.aksel-chips__toggle:hover{background-color:var(--ax-bg-moderate-hover);box-shadow:inset 0 0 0 1px var(--ax-border-default)}.aksel-chips__toggle[data-pressed=true]{box-shadow:none;background-color:var(--ax-bg-strong-pressed);color:var(--ax-text-contrast)}.aksel-chips__toggle[data-pressed=true]:hover{background-color:var(--ax-bg-strong-hover)}.aksel-chips--medium .aksel-chips__toggle--with-checkmark{padding-left:var(--ax-space-6)}.aksel-chips__removable{background:var(--ax-bg-strong-pressed);color:var(--ax-text-contrast);gap:0}.aksel-chips__removable:hover{background:var(--ax-bg-strong-hover)}.aksel-chips__removable-icon{border-radius:var(--ax-radius-full);place-items:center;width:1.5rem;height:1.5rem;font-size:1.25rem;display:grid}.aksel-chips--icon-left{padding-left:var(--ax-space-6)}.aksel-chips--icon-right{padding-right:var(--ax-space-6)}@media (forced-colors: active){.aksel-chips__chip{border:1px solid rgba(0,0,0,0)}.aksel-chips__chip:hover{color:highlight;background-color:highlighttext}.aksel-chips__chip:where([data-pressed=true],:active,:hover)>span{forced-color-adjust:none}.aksel-chips__toggle[data-pressed=true]{color:selecteditemtext;background-color:selecteditem;border:1px solid selecteditem}.aksel-chips__toggle[data-pressed=true]:hover{color:selecteditem;background-color:selecteditemtext}}}
@@ -9,8 +9,8 @@
9
9
  }
10
10
 
11
11
  .aksel-date .rdp-day_range_middle.rdp-day_selected {
12
- background-color: var(--ax-bg-accent-moderate-pressedA);
13
- box-shadow: inset 0 0 0 1px var(--ax-border-accent-subtleA);
12
+ background-color: var(--ax-bg-moderate-pressedA);
13
+ box-shadow: inset 0 0 0 1px var(--ax-border-subtleA);
14
14
  color: var(--ax-text-neutral);
15
15
  }
16
16
 
@@ -57,8 +57,8 @@
57
57
  }
58
58
 
59
59
  .aksel-date .rdp-day_selected, .aksel-date .aksel-monthpicker__month--selected {
60
- color: var(--ax-text-accent-contrast);
61
- background: var(--ax-bg-accent-strong-pressed);
60
+ color: var(--ax-text-contrast);
61
+ background: var(--ax-bg-strong-pressed);
62
62
  cursor: pointer;
63
63
  }
64
64
 
@@ -70,7 +70,7 @@
70
70
  }
71
71
 
72
72
  .aksel-date .rdp-button:where(:not(.rdp-day_selected, [disabled])):hover, .aksel-date .aksel-date__month-button:where(:not(.rdp-day_selected, [disabled])):hover {
73
- background: var(--ax-bg-accent-moderate-hoverA);
73
+ background: var(--ax-bg-moderate-hoverA);
74
74
  cursor: pointer;
75
75
  }
76
76
 
@@ -79,7 +79,7 @@
79
79
  }
80
80
 
81
81
  .aksel-date .rdp-day_today:before {
82
- background-color: var(--ax-text-accent-subtle);
82
+ background-color: var(--ax-text-subtle);
83
83
  border-radius: var(--ax-radius-full);
84
84
  content: "";
85
85
  width: 6px;
@@ -92,7 +92,7 @@
92
92
  }
93
93
 
94
94
  :is(.aksel-date .rdp-day_today.rdp-day_selected:not(.rdp-day_range_middle), .aksel-date .rdp-day_today:active):before {
95
- background-color: var(--ax-text-accent-contrast);
95
+ background-color: var(--ax-text-contrast);
96
96
  }
97
97
 
98
98
  .aksel-date .rdp-day_outside {
@@ -148,8 +148,8 @@
148
148
  }
149
149
 
150
150
  :is(:is(.aksel-date__wrapper, .aksel-date__standalone-wrapper) .rdp-cell > button.rdp-day, :is(.aksel-date__wrapper, .aksel-date__standalone-wrapper) button.aksel-date__month-button):active:not(:disabled) {
151
- color: var(--ax-text-accent-contrast);
152
- background-color: var(--ax-bg-accent-strong-pressed);
151
+ color: var(--ax-text-contrast);
152
+ background-color: var(--ax-bg-strong-pressed);
153
153
  }
154
154
 
155
155
  .aksel-date__field-input.aksel-text-field__input {
@@ -0,0 +1 @@
1
+ @layer aksel.components{.aksel-date{padding:var(--ax-space-16)}.aksel-date .rdp-day_range_middle.rdp-day_disabled{color:var(--ax-text-neutral);background:var(--ax-bg-neutral-moderateA)}.aksel-date .rdp-day_range_middle.rdp-day_selected{background-color:var(--ax-bg-moderate-pressedA);box-shadow:inset 0 0 0 1px var(--ax-border-subtleA);color:var(--ax-text-neutral)}.aksel-date .rdp-month,.aksel-date.rdp-month{gap:var(--ax-space-20);display:grid}.aksel-date .aksel-date__caption-label{text-transform:capitalize}.aksel-date .rdp-head_cell{text-transform:capitalize;font-size:var(--ax-font-size-small)}.aksel-date .rdp-button{all:unset;text-align:center;border-radius:var(--ax-radius-8);width:2.5rem;height:2.5rem;display:block}.aksel-date .rdp-day_range_start{border-radius:100% var(--ax-radius-12) var(--ax-radius-12) 100%}.aksel-date .rdp-day_range_end:not(.rdp-day_range_start){border-radius:var(--ax-radius-8) 100% 100% var(--ax-radius-8)}.aksel-date .rdp-day_range_start.rdp-day_range_end{border-radius:var(--ax-radius-8)}.aksel-date .aksel-date__field{flex-direction:column;width:100%;display:flex;position:relative}.aksel-date .rdp-day_selected,.aksel-date .aksel-monthpicker__month--selected{color:var(--ax-text-contrast);background:var(--ax-bg-strong-pressed);cursor:pointer}.aksel-date .rdp-day_disabled{cursor:not-allowed;background-color:var(--ax-bg-neutral-moderateA);color:var(--ax-text-neutral-subtle);text-decoration:line-through}.aksel-date .rdp-button:where(:not(.rdp-day_selected,[disabled])):hover,.aksel-date .aksel-date__month-button:where(:not(.rdp-day_selected,[disabled])):hover{background:var(--ax-bg-moderate-hoverA);cursor:pointer}.aksel-date .rdp-day_today{position:relative}.aksel-date .rdp-day_today:before{background-color:var(--ax-text-subtle);border-radius:var(--ax-radius-full);content:"";width:6px;height:6px;display:block;position:absolute;bottom:5px;left:50%;transform:translate(-50%)}:is(.aksel-date .rdp-day_today.rdp-day_selected:not(.rdp-day_range_middle),.aksel-date .rdp-day_today:active):before{background-color:var(--ax-text-contrast)}.aksel-date .rdp-day_outside{visibility:hidden;pointer-events:none}.aksel-date__modal .aksel-date,.aksel-date__modal-body>.aksel-date{padding:0}.aksel-date__caption{justify-content:space-between;align-items:center;gap:var(--ax-space-4);padding-inline:var(--ax-space-4);display:flex}.aksel-date__caption-button{width:2rem;height:2rem;color:var(--ax-text-neutral)}.aksel-date__caption__month .aksel-select__container select{text-transform:capitalize}.aksel-date__month-button{all:unset;text-align:center;text-transform:capitalize;border-radius:var(--ax-radius-8);cursor:pointer;width:3rem;height:3rem}.aksel-date__year-label{align-items:center;display:flex}.aksel-date__wrapper,.aksel-date__standalone-wrapper{width:fit-content;height:fit-content}:is(:is(.aksel-date__wrapper,.aksel-date__standalone-wrapper) .rdp-cell>button.rdp-day,:is(.aksel-date__wrapper,.aksel-date__standalone-wrapper) button.aksel-date__month-button):focus-visible{outline:3px solid var(--ax-border-focus);outline-offset:3px}:is(:is(.aksel-date__wrapper,.aksel-date__standalone-wrapper) .rdp-cell>button.rdp-day,:is(.aksel-date__wrapper,.aksel-date__standalone-wrapper) button.aksel-date__month-button):active:not(:disabled){color:var(--ax-text-contrast);background-color:var(--ax-bg-strong-pressed)}.aksel-date__field-input.aksel-text-field__input{padding-right:var(--ax-space-48)}.aksel-form-field--small .aksel-date__field-input{padding-right:var(--ax-space-32)}.aksel-date__field-button{color:var(--ax-text-neutral);cursor:pointer;border-radius:calc(var(--ax-radius-8) - 1px);padding:var(--ax-space-12);background:none;border:none;border-start-start-radius:0;border-end-start-radius:0;justify-content:center;align-items:center;height:calc(100% - .125rem);margin:0;font-size:1.5rem;text-decoration:none;display:inline-flex;position:absolute;top:50%;right:.0625rem;transform:translateY(-50%)}.aksel-form-field--small .aksel-date__field-button{padding:var(--ax-space-4)}.aksel-form-field--disabled .aksel-date__field-button{opacity:1;cursor:not-allowed}.aksel-date__field--readonly .aksel-date__field-button{cursor:default}.aksel-date__field-button:focus-visible{outline-color:var(--ax-border-focus)}.aksel-date__field-wrapper{align-items:center;width:fit-content;display:inline-flex;position:relative}.aksel-date__week-row{align-items:center;gap:var(--ax-space-2);display:flex}.aksel-date__weeknumber{--__axc-button-border-width: 1px}.aksel-date__weeknumber-number{color:var(--ax-text-neutral-subtle);font-size:.875rem}.aksel-date__week-wrapper{justify-content:center;align-items:center;width:2.5rem;margin:0;display:flex}.aksel-date__modal-body{padding:var(--ax-space-16);align-items:flex-end;gap:var(--ax-space-8);flex-direction:column;display:flex}@media (min-width: 480px){.aksel-date,.aksel-date__modal-body{padding:var(--ax-space-20)}.aksel-date__caption{gap:var(--ax-space-8)}.aksel-date .rdp-button,.aksel-date__caption-button{width:3rem;height:3rem}}}
@@ -51,11 +51,11 @@
51
51
  }
52
52
 
53
53
  .aksel-dropdown__item:hover {
54
- background-color: var(--ax-bg-accent-moderate-hoverA);
54
+ background-color: var(--ax-bg-moderate-hoverA);
55
55
  }
56
56
 
57
57
  .aksel-dropdown__item:active {
58
- background-color: var(--ax-bg-accent-moderate-pressedA);
58
+ background-color: var(--ax-bg-moderate-pressedA);
59
59
  }
60
60
 
61
61
  .aksel-dropdown__item:focus-visible {
@@ -1 +1 @@
1
- @layer aksel.components{.aksel-dropdown__menu{padding:var(--ax-space-8);color:var(--ax-text-neutral);width:27ch;max-height:616px;overflow:hidden auto}.aksel-dropdown__divider{margin:var(--ax-space-12) 0;border:none;border-bottom:1px solid var(--ax-border-neutral-subtle)}.aksel-dropdown__menu>:not(.aksel-dropdown__divider,.aksel-dropdown__list){margin:0 var(--ax-space-16) var(--ax-space-12)}.aksel-dropdown__list{margin:0;padding:0;list-style:none}.aksel-dropdown__list-item{margin:0}.aksel-dropdown__list-heading{margin-block:var(--ax-space-4) var(--ax-space-12);margin-inline:var(--ax-space-4)}.aksel-dropdown__item{font:inherit;text-align:left;cursor:pointer;align-items:center;gap:var(--ax-space-8);width:100%;padding:var(--ax-space-4);border-radius:var(--ax-radius-4);color:var(--ax-text-neutral);background:none;border:none;margin:0;text-decoration:none;display:flex;overflow:visible}.aksel-dropdown__item:hover{background-color:var(--ax-bg-accent-moderate-hoverA)}.aksel-dropdown__item:active{background-color:var(--ax-bg-accent-moderate-pressedA)}.aksel-dropdown__item:focus-visible{outline:3px solid var(--ax-border-focus);outline-offset:-3px}.aksel-dropdown__item:disabled{opacity:var(--ax-opacity-disabled);cursor:not-allowed;background:none}@media (forced-colors: active){.aksel-dropdown__item:hover{color:highlight}.aksel-dropdown__item:disabled{opacity:1;color:graytext}}}
1
+ @layer aksel.components{.aksel-dropdown__menu{padding:var(--ax-space-8);color:var(--ax-text-neutral);width:27ch;max-height:616px;overflow:hidden auto}.aksel-dropdown__divider{margin:var(--ax-space-12) 0;border:none;border-bottom:1px solid var(--ax-border-neutral-subtle)}.aksel-dropdown__menu>:not(.aksel-dropdown__divider,.aksel-dropdown__list){margin:0 var(--ax-space-16) var(--ax-space-12)}.aksel-dropdown__list{margin:0;padding:0;list-style:none}.aksel-dropdown__list-item{margin:0}.aksel-dropdown__list-heading{margin-block:var(--ax-space-4) var(--ax-space-12);margin-inline:var(--ax-space-4)}.aksel-dropdown__item{font:inherit;text-align:left;cursor:pointer;align-items:center;gap:var(--ax-space-8);width:100%;padding:var(--ax-space-4);border-radius:var(--ax-radius-4);color:var(--ax-text-neutral);background:none;border:none;margin:0;text-decoration:none;display:flex;overflow:visible}.aksel-dropdown__item:hover{background-color:var(--ax-bg-moderate-hoverA)}.aksel-dropdown__item:active{background-color:var(--ax-bg-moderate-pressedA)}.aksel-dropdown__item:focus-visible{outline:3px solid var(--ax-border-focus);outline-offset:-3px}.aksel-dropdown__item:disabled{opacity:var(--ax-opacity-disabled);cursor:not-allowed;background:none}@media (forced-colors: active){.aksel-dropdown__item:hover{color:highlight}.aksel-dropdown__item:disabled{opacity:1;color:graytext}}}
@@ -4,14 +4,18 @@
4
4
  --__axc-expansioncard-padding-block: var(--ax-space-20);
5
5
  --__axc-expansioncard-padding-inline: var(--ax-space-20);
6
6
  border-radius: var(--ax-radius-12);
7
- background-color: var(--ax-bg-raised);
8
- border: 1px solid var(--ax-border-neutral);
7
+ background-color: var(--ax-bg-softA);
8
+ border: 1px solid var(--ax-border-default);
9
9
  height: fit-content;
10
10
  }
11
11
 
12
+ .aksel-expansioncard[data-color="neutral"] {
13
+ background-color: var(--ax-bg-raised);
14
+ }
15
+
12
16
  .aksel-expansioncard:has(.aksel-expansioncard__header:hover) {
13
- box-shadow: 0 0 0 1px var(--ax-border-neutral-strong);
14
- border-color: var(--ax-border-neutral-strong);
17
+ box-shadow: 0 0 0 1px var(--ax-border-strong);
18
+ border-color: var(--ax-border-strong);
15
19
  }
16
20
 
17
21
  .aksel-expansioncard--small {
@@ -44,7 +48,7 @@
44
48
  }
45
49
 
46
50
  .aksel-expansioncard__header:hover {
47
- background-color: var(--ax-bg-neutral-moderate-hoverA);
51
+ background-color: var(--ax-bg-moderate-hoverA);
48
52
  }
49
53
 
50
54
  .aksel-expansioncard__header[data-open="true"] {
@@ -54,7 +58,7 @@
54
58
 
55
59
  .aksel-expansioncard__header[data-open="true"]:after {
56
60
  content: "";
57
- background-color: var(--ax-border-neutral-subtleA);
61
+ background-color: var(--ax-border-subtleA);
58
62
  bottom: 0;
59
63
  left: var(--__axc-expansioncard-padding-inline);
60
64
  height: 1px;
@@ -109,7 +113,7 @@
109
113
  }
110
114
 
111
115
  .aksel-expansioncard__header:hover > .aksel-expansioncard__header-button {
112
- background-color: var(--ax-bg-neutral-moderate-hoverA);
116
+ background-color: var(--ax-bg-moderate-hoverA);
113
117
  }
114
118
 
115
119
  .aksel-expansioncard__header-chevron {