Use variables for default colors in boolean interface/display (#10346)

* Use variables for default colors in boolean interface/display Fixes #10333 * Fix translations name
directus · Dec 6, 2021 · 2897264 · 2897264
1 parent d29acf3
commit 2897264
Show file tree

Hide file tree

Showing 4 changed files with 6 additions and 18 deletions.
diff --git a/app/src/displays/boolean/boolean.vue b/app/src/displays/boolean/boolean.vue
@@ -35,11 +35,11 @@ export default defineComponent({
 		},
 		colorOn: {
 			type: String,
-			default: '#00C897',
+			default: 'var(--primary)',
 		},
 		colorOff: {
 			type: String,
-			default: '#B0BEC5',
+			default: 'var(--foreground-subdued)',
 		},
 	},
 	setup(props) {

diff --git a/app/src/displays/boolean/index.ts b/app/src/displays/boolean/index.ts
@@ -65,9 +65,6 @@ export default defineDisplay({
 				interface: 'select-color',
 				width: 'half',
 			},
-			schema: {
-				default_value: '#00C897',
-			},
 		},
 		{
 			field: 'colorOff',
@@ -77,9 +74,6 @@ export default defineDisplay({
 				interface: 'select-color',
 				width: 'half',
 			},
-			schema: {
-				default_value: '#B0BEC5',
-			},
 		},
 	],
 });
diff --git a/app/src/interfaces/boolean/boolean.vue b/app/src/interfaces/boolean/boolean.vue
@@ -43,11 +43,11 @@ export default defineComponent({
 		},
 		colorOn: {
 			type: String,
-			default: '#00C897',
+			default: 'var(--primary)',
 		},
 		colorOff: {
 			type: String,
-			default: '#B0BEC5',
+			default: 'var(--foreground-subdued)',
 		},
 	},
 	emits: ['input'],

diff --git a/app/src/interfaces/boolean/index.ts b/app/src/interfaces/boolean/index.ts
@@ -40,23 +40,17 @@ export default defineInterface({
 			name: '$t:interfaces.boolean.color_on',
 			type: 'string',
 			meta: {
-				width: 'half',
 				interface: 'select-color',
-			},
-			schema: {
-				default_value: '#00C897',
+				width: 'half',
 			},
 		},
 		{
 			field: 'colorOff',
 			name: '$t:interfaces.boolean.color_off',
 			type: 'string',
 			meta: {
-				width: 'half',
 				interface: 'select-color',
-			},
-			schema: {
-				default_value: '#B0BEC5',
+				width: 'half',
 			},
 		},
 		{