@olenbetong/appframe-ds 1.0.2 → 1.0.3

package/CHANGELOG.md

@@ -1,5 +1,15 @@
 # @olenbetong/appframe-ds
 
+## 1.0.3
+
+### Patch Changes
+
+- d503ffe: Name the neutral and brand colour sets explicitly instead of the `[data-color]` scoped aliases (`--ds-color-text-default`, `--ds-color-surface-hover`, `--ds-color-base-default`, ...) in the autocomplete, lookup combobox, filter and progress styles. The aliases came from the 1.13 theme token build; the 1.21 build the site now uses replaces them with the `--ds-color-main-*` set, and Designsystemet's own CSS no longer relies on them.
+- Updated dependencies [f0403b7]
+  - @olenbetong/appframe-core@2.14.0
+  - @olenbetong/appframe-data@1.7.2
+  - @olenbetong/appframe-react@2.2.1
+
 ## 1.0.2
 
 ### Patch Changes

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@olenbetong/appframe-ds",
-  "version": "1.0.2",
+  "version": "1.0.3",
   "description": "Components that bind Designsystemet components to Appframe data objects",
   "type": "module",
   "types": "./es/index.d.ts",
@@ -13,6 +13,10 @@
       "types": "./es/grid/index.d.ts",
       "import": "./es/grid/index.js"
     },
+    "./progress": {
+      "types": "./es/progress/index.d.ts",
+      "import": "./es/progress/index.js"
+    },
     "./mdi": {
       "types": "./es/mdi/index.d.ts",
       "import": "./es/mdi/index.js"
@@ -66,9 +70,9 @@
     "react": "19.3.0",
     "react-dom": "19.3.0",
     "react-window": "2.3.1",
-    "@olenbetong/appframe-core": "2.13.1",
-    "@olenbetong/appframe-data": "1.7.1",
-    "@olenbetong/appframe-react": "2.2.0"
+    "@olenbetong/appframe-core": "2.14.0",
+    "@olenbetong/appframe-react": "2.2.1",
+    "@olenbetong/appframe-data": "1.7.2"
   },
   "devDependencies": {
     "@digdir/designsystemet-react": "1.21.1",

package/src/AfLookup/LookupCombobox.css

@@ -64,7 +64,7 @@
 	left: -100%;
 	height: 100%;
 	width: 50%;
-	background-color: var(--ds-color-base-default);
+	background-color: var(--ds-color-brand-base-default);
 	animation: ObCombobox-progress-anim 1.5s ease-in-out infinite;
 }
 

package/src/autocomplete/Autocomplete.css

@@ -199,23 +199,23 @@
 }
 
 /*
- * The `accent` colour set does not exist in every Designsystemet theme, so the
- * option states use the contextual `--ds-color-*` aliases — the same tokens
- * Designsystemet's own Suggestion list uses.
+ * The `accent` colour set does not exist in every Designsystemet theme, and the
+ * contextual `--ds-color-*` aliases of the 1.13 token build are gone since 1.21,
+ * so the option states use the neutral set explicitly.
  */
 .ObAutocomplete-item[data-highlighted] {
-	color: var(--ds-color-text-default);
-	background-color: var(--ds-color-surface-hover);
+	color: var(--ds-color-neutral-text-default);
+	background-color: var(--ds-color-neutral-surface-hover);
 }
 
 .ObAutocomplete-item[data-selected] {
 	font-weight: var(--ds-font-weight-medium);
-	color: var(--ds-color-text-default);
-	background-color: var(--ds-color-surface-tinted);
+	color: var(--ds-color-neutral-text-default);
+	background-color: var(--ds-color-neutral-surface-tinted);
 }
 
 .ObAutocomplete-item[data-selected][data-highlighted] {
-	background-color: var(--ds-color-surface-active);
+	background-color: var(--ds-color-neutral-surface-active);
 }
 
 .ObAutocomplete-item[data-disabled] {

package/src/filter/FilterBuilder.css

@@ -25,7 +25,7 @@
 	grid-area: sidebar;
 	overflow: auto;
 	padding: var(--ds-size-2);
-	border: var(--ds-border-width-default) solid var(--ds-color-border-subtle);
+	border: var(--ds-border-width-default) solid var(--ds-color-neutral-border-subtle);
 	border-radius: var(--ds-border-radius-md);
 }
 

package/src/filter/FilterEditor.css

@@ -199,8 +199,8 @@
 	}
 
 	&[aria-pressed="true"] {
-		background-color: var(--ds-color-surface-active);
-		color: var(--ds-color-text-default);
+		background-color: var(--ds-color-neutral-surface-active);
+		color: var(--ds-color-neutral-text-default);
 	}
 
 	svg {

package/src/filter/FilterShareDialog.css

@@ -15,7 +15,7 @@
 
 .ObFilterShareDialog-candidateLogin {
 	margin-inline-start: auto;
-	color: var(--ds-color-text-subtle);
+	color: var(--ds-color-neutral-text-subtle);
 }
 
 .ObFilterShareDialog-table {

package/src/filter/SavedFilterTree.css

@@ -37,14 +37,14 @@
 	border: none;
 	border-radius: var(--ds-border-radius-sm);
 	background: none;
-	color: var(--ds-color-text-default);
+	color: var(--ds-color-neutral-text-default);
 	font: inherit;
 	text-align: start;
 	cursor: pointer;
 }
 
 .ObSavedFilterTree-node:hover {
-	background: var(--ds-color-surface-hover);
+	background: var(--ds-color-neutral-surface-hover);
 }
 
 .ObSavedFilterTree-node:focus-visible {
@@ -53,7 +53,7 @@
 }
 
 .ObSavedFilterTree-selected {
-	background: var(--ds-color-surface-active);
+	background: var(--ds-color-neutral-surface-active);
 }
 
 .ObSavedFilterTree-dirty .ObSavedFilterTree-label {
@@ -68,7 +68,7 @@
 	justify-content: center;
 	inline-size: var(--ds-size-6);
 	block-size: var(--ds-size-6);
-	color: var(--ds-color-text-subtle);
+	color: var(--ds-color-neutral-text-subtle);
 }
 
 .ObSavedFilterTree-chevron > *,
@@ -87,7 +87,7 @@
 	/* Lines up with the child labels, past their icon. */
 	padding: var(--ds-size-1) var(--ds-size-2) var(--ds-size-1)
 		calc(var(--ds-size-2) + var(--ds-size-6) + var(--ds-size-1));
-	color: var(--ds-color-text-subtle);
+	color: var(--ds-color-neutral-text-subtle);
 	font-style: italic;
 }
 

package/src/progress/LinearProgress.css

@@ -8,7 +8,7 @@
 	inline-size: 100%;
 	block-size: var(--obLinearProgress-thickness);
 	overflow: hidden;
-	background-color: var(--ds-color-surface-active, #cddffb);
+	background-color: var(--ds-color-brand-surface-active, #cddffb);
 	border-radius: var(--ds-border-radius-full, 624.9375rem);
 }
 
@@ -33,7 +33,7 @@
 	inset-block: 0;
 	inset-inline-start: 0;
 	inline-size: 100%;
-	background-color: var(--ds-color-base-default, #0062ba);
+	background-color: var(--ds-color-brand-base-default, #0062ba);
 	border-radius: inherit;
 }