Updated CSS transitions

Author: Prozilla

packages/apps/app-center/src/components/list/List.module.css

@@ -24,7 +24,7 @@
 	border-radius: var(--border-radius-1);
 	overflow: hidden;
 	aspect-ratio: 16 / 14;
-	transition: background-color 200ms ease-in-out;
+	transition: background-color var(--transition-duration-1) var(--ease-in-out-default);
 	cursor: pointer;
 }
 

packages/apps/browser/src/components/Browser.module.css

@@ -54,7 +54,7 @@
 	border-radius: var(--border-radius-99);
 	transform: scale(100%);
 	transform-origin: center;
-	transition: all 200ms ease-in-out;
+	transition: all var(--transition-duration-1) var(--ease-in-out-default);
 }
 
 .IconButton:hover::after,
@@ -73,7 +73,7 @@
 
 .IconButton svg path {
 	fill: var(--color);
-	transition: fill 100ms ease-in-out;
+	transition: fill var(--transition-duration-0) var(--ease-in-out-default);
 }
 
 .SearchBar {

packages/apps/file-explorer/src/components/FileExplorer.module.css

@@ -45,7 +45,7 @@
 	border-radius: var(--border-radius-99);
 	transform: scale(100%);
 	transform-origin: center;
-	transition: all 200ms ease-in-out;
+	transition: all var(--transition-duration-1) var(--ease-in-out-default);
 }
 
 .IconButton:hover::after, .IconButton:focus-visible::after {
@@ -63,7 +63,7 @@
 
 .IconButton svg path {
 	fill: var(--color);
-	transition: fill 100ms ease-in-out;
+	transition: fill var(--transition-duration-0) var(--ease-in-out-default);
 }
 
 .PathInput {
@@ -110,7 +110,7 @@
 	border-radius: var(--border-radius-1);
 	outline: none;
 	cursor: pointer;
-	transition: background-color 100ms ease-in-out;
+	transition: background-color var(--transition-duration-0) var(--ease-in-out-default);
 }
 
 .NavButton:hover, .NavButton:focus-visible {

packages/apps/settings/src/components/Settings.module.css

@@ -144,7 +144,7 @@
 	width: 100%;
 	height: 100%;
 	border-radius: var(--border-radius-1);
-	transition: filter 100ms ease-in-out;
+	transition: filter var(--transition-duration-0) var(--ease-in-out-default);
 	cursor: pointer;
 }
 
@@ -199,7 +199,7 @@
 	border-radius: var(--border-radius-99);
 	transform: scale(100%);
 	transform-origin: center;
-	transition: all 200ms ease-in-out;
+	transition: all var(--transition-duration-1) var(--ease-in-out-default);
 }
 
 .IconButton:hover::after, .IconButton:focus-visible::after {
@@ -217,7 +217,7 @@
 
 .IconButton svg path {
 	fill: var(--color);
-	transition: fill 100ms ease-in-out;
+	transition: fill var(--transition-duration-0) var(--ease-in-out-default);
 }
 
 .ProgressBarContainer {

packages/apps/text-editor/src/components/TextEditor.module.css

@@ -127,7 +127,7 @@
 	position: relative;
 	display: inline-block;
 	color: var(--light-blue-0);
-	transition: color 200ms ease-in-out;
+	transition: color var(--transition-duration-1) var(--ease-in-out-default);
 }
 
 .MarkdownLink:hover, .MarkdownLink:focus-visible {

packages/core/src/components/_utils/button/Button.module.css

@@ -8,7 +8,7 @@
 	border: none;
 	outline: none;
 	font-size: 0.875em;
-	transition: background-color 100ms ease-in-out;
+	transition: background-color var(--transition-duration-0) var(--ease-in-out-default);
 	cursor: pointer;
 }
 

packages/core/src/components/_utils/directory-list/DirectoryList.module.css

@@ -22,7 +22,7 @@
 	border-radius: var(--border-radius-1);
 	outline: none;
 	cursor: pointer;
-	transition: background-color 100ms ease-in-out;
+	transition: background-color var(--transition-duration-0) var(--ease-in-out-default);
 }
 
 .FileButton[data-selected=true],

packages/core/src/components/actions/Actions.module.css

@@ -9,7 +9,7 @@
 	top: 0;
 	left: 0;
 	opacity: 1;
-	transition: opacity 100ms ease-out;
+	transition: opacity var(--transition-duration-0) ease-out;
 }
 
 .Actions.Uninitiated {
@@ -130,7 +130,7 @@
 	border-radius: var(--border-radius-1);
 	border-top-left-radius: 0;
 	background-color: var(--background-color-1);
-	transition: opacity 100ms ease-out;
+	transition: opacity var(--transition-duration-0) ease-out;
 	cursor: auto;
 }
 
@@ -205,7 +205,7 @@
 	background-color: var(--background-color-1);
 	border-bottom-left-radius: var(--border-radius-1);
 	border-bottom-right-radius: var(--border-radius-1);
-	transition: opacity 100ms ease-out;
+	transition: opacity var(--transition-duration-0) ease-out;
 	cursor: default;
 }
 

packages/core/src/components/modals/dialog-box/DialogBox.module.css

@@ -18,7 +18,7 @@
 	border: none;
 	border-radius: var(--border-radius-1);
 	outline: none;
-	transition: background-color 100ms ease-in-out;
+	transition: background-color var(--transition-duration-0) var(--ease-in-out-default);
 	cursor: pointer;
 }
 

packages/core/src/components/standalone/StandaloneHeader.module.css

@@ -15,7 +15,7 @@
 	align-items: center;
 	color: var(--foreground-color-1);
 	text-decoration: none;
-	transition: color 300ms ease-in-out;
+	transition: color var(--transition-duration-1) var(--ease-in-out-default);
 	user-select: none;
 }
 
@@ -55,7 +55,7 @@
 	color: var(--foreground-color-1);
 	background: none !important;
 	font-size: 1rem;
-	transition: color 300ms ease-in-out;
+	transition: color var(--transition-duration-1) var(--ease-in-out-default);
 }
 
 .ExitButton:hover {