chore: rename css variables

medama-io · Aug 11, 2024 · 9d842f4 · 9d842f4
1 parent 58f1314
commit 9d842f4
Show file tree

Hide file tree

Showing 25 changed files with 163 additions and 164 deletions.
diff --git a/dashboard/app/components/Anchor.module.css b/dashboard/app/components/Anchor.module.css
@@ -5,7 +5,7 @@
 	padding: 0;
 	margin: 0;
 
-	color: var(--me-color-text-dark);
+	color: var(--text-dark);
 	background-color: transparent;
 
 	border-radius: 4px;
@@ -14,11 +14,11 @@
 	text-decoration: underline;
 
 	&:focus-visible {
-		outline: 2px solid var(--me-color-focus-outline);
+		outline: 2px solid var(--focus-outline);
 		outline-offset: 2px;
 	}
 
 	&:visited {
-		color: var(--me-color-text-dark);
+		color: var(--text-dark);
 	}
 }
diff --git a/dashboard/app/components/Checkbox.module.css b/dashboard/app/components/Checkbox.module.css
@@ -4,7 +4,7 @@
 	height: 22px;
 	min-width: 22px;
 
-	border: 1px solid var(--me-color-border-light);
+	border: 1px solid var(--border-light);
 	border-radius: 4px;
 	display: flex;
 	align-items: center;
@@ -15,7 +15,7 @@
 	}
 
 	&:focus-visible {
-		outline: 2px solid var(--me-color-focus-outline);
+		outline: 2px solid var(--focus-outline);
 	}
 
 	&[data-disabled] {
@@ -27,7 +27,7 @@
 	color: var(--violet-indicator);
 
 	&[data-disabled] {
-		color: var(--me-color-text-disabled);
+		color: var(--text-disabled);
 	}
 }
 

diff --git a/dashboard/app/components/DatePicker.module.css b/dashboard/app/components/DatePicker.module.css
@@ -21,7 +21,7 @@
 }
 
 .content {
-	background-color: var(--me-color-bg-light);
+	background-color: var(--bg-light);
 	border-radius: 6px;
 	box-shadow: hsl(206 22% 7% / 35%) 0px 10px 38px -10px,
 		hsl(206 22% 7% / 20%) 0px 10px 20px -15px;
@@ -51,7 +51,7 @@
 	margin-top: 8px;
 
 	--rdp-accent-color: var(--violet);
-	--rdp-accent-background-color: var(--me-color-selected-snow);
+	--rdp-accent-background-color: var(--selected-snow);
 	--rdp-font-family: var(--default-font-family);
 
 	--rdp-day-font: 400 16px var(--rdp-font-family);

diff --git a/dashboard/app/components/DropdownSelect.module.css b/dashboard/app/components/DropdownSelect.module.css
@@ -9,14 +9,14 @@
 
 	padding-left: 16px;
 	padding-right: 12px;
-	color: var(--me-color-text-light);
-	background-color: var(--me-color-bg-grey-blue);
-	border: 1px solid var(--me-color-bg-grey-blue);
+	color: var(--text-light);
+	background-color: var(--bg-grey-blue);
+	border: 1px solid var(--bg-grey-blue);
 	border-radius: 8px;
 	cursor: pointer;
 
 	&:hover {
-		background-color: var(--me-color-bg-grey-blue-dark);
+		background-color: var(--bg-grey-blue-dark);
 	}
 
 	&:focus-visible {
@@ -34,7 +34,7 @@
 	}
 
 	svg {
-		color: var(--me-color-text-disabled);
+		color: var(--text-disabled);
 		height: 15px;
 	}
 
@@ -45,8 +45,8 @@
 }
 
 .dropdown {
-	color: var(--me-color-text-light);
-	background-color: var(--me-color-bg-grey-blue);
+	color: var(--text-light);
+	background-color: var(--bg-grey-blue);
 	border: 0;
 	border-radius: 8px;
 	padding: 0;
@@ -61,7 +61,7 @@
 
 .separator {
 	border-bottom: 1px solid transparent;
-	border-bottom-color: var(--me-color-text-grey);
+	border-bottom-color: var(--text-grey);
 }
 
 .option {
@@ -81,15 +81,15 @@
 	}
 
 	&:hover {
-		background-color: var(--me-color-bg-grey-blue-dark);
+		background-color: var(--bg-grey-blue-dark);
 	}
 
 	&:focus-visible {
-		outline: 2px solid var(--me-color-focus-outline);
+		outline: 2px solid var(--focus-outline);
 	}
 
 	&[data-state="checked"] {
-		color: var(--me-color-logo-green);
+		color: var(--logo-green);
 		font-weight: 600;
 	}
 }
diff --git a/dashboard/app/components/InfoTooltip.module.css b/dashboard/app/components/InfoTooltip.module.css
@@ -3,9 +3,9 @@
 	min-width: fit-content;
 	width: 380px;
 	max-width: 380px;
-	background-color: var(--me-color-bg-light);
+	background-color: var(--bg-light);
 
-	border: 1px solid var(--me-color-border-muted);
+	border: 1px solid var(--border-muted);
 	border-radius: 4px;
 
 	box-shadow: 0 4px 8px var(--black-a2);
@@ -43,14 +43,14 @@
 	border-radius: 4px;
 	cursor: pointer;
 
-	color: var(--me-color-text-grey);
+	color: var(--text-grey);
 
 	&:hover {
 		background-color: var(--violet-3);
 	}
 
 	&:focus-visible {
-		outline: 2px solid var(--me-color-focus-outline);
+		outline: 2px solid var(--focus-outline);
 	}
 }
 

diff --git a/dashboard/app/components/Input.module.css b/dashboard/app/components/Input.module.css
@@ -22,34 +22,34 @@
 	margin-top: 4px;
 	padding: 0 16px;
 
-	color: var(--me-color-text-dark);
+	color: var(--text-dark);
 
-	border: 1px solid var(--me-color-border-light);
+	border: 1px solid var(--border-light);
 	border-radius: 4px;
 
 	transition: border-color 100ms ease;
 
 	&:focus,
 	&:focus-visible {
-		outline: 2px solid var(--me-color-focus-outline);
+		outline: 2px solid var(--focus-outline);
 		outline-offset: -1px;
 	}
 
 	&::placeholder {
-		color: var(--me-color-text-disabled);
+		color: var(--text-disabled);
 		opacity: 1;
 	}
 
 	&[data-error="true"]::placeholder {
-		color: var(--me-color-bg-red-danger);
+		color: var(--bg-red-danger);
 	}
 
 	&:disabled,
 	&[data-disabled] {
 		cursor: not-allowed;
 		opacity: 0.6;
-		background-color: var(--me-color-bg-grey-disabled);
-		color: var(--me-color-text-disabled);
+		background-color: var(--bg-grey-disabled);
+		color: var(--text-disabled);
 	}
 
 	&::-webkit-inner-spin-button,
@@ -73,7 +73,7 @@
 	&:where(:autofill, [data-com-onepassword-filled]) {
 		/* Reliably removes native autofill colors */
 		background-clip: text;
-		-webkit-text-fill-color: var(--me-color-selected-light);
+		-webkit-text-fill-color: var(--selected-light);
 	}
 }
 
@@ -95,7 +95,7 @@
 	padding: 6px;
 
 	svg {
-		color: var(--me-color-text-disabled);
+		color: var(--text-disabled);
 	}
 }
 
@@ -109,7 +109,7 @@
 }
 
 .required {
-	color: var(--me-color-bg-red-danger);
+	color: var(--bg-red-danger);
 }
 
 .error,
@@ -125,10 +125,10 @@
 
 .description {
 	margin-bottom: 2px;
-	color: var(--me-color-text-muted);
+	color: var(--text-muted);
 }
 
 .error {
 	margin-top: 4px;
-	color: var(--me-color-bg-red-danger);
+	color: var(--bg-red-danger);
 }
diff --git a/dashboard/app/components/Modal.module.css b/dashboard/app/components/Modal.module.css
@@ -11,9 +11,9 @@
 	width: 100%;
 	height: 40px;
 	padding: 0 16px;
-	color: var(--me-color-text-dark);
+	color: var(--text-dark);
 
-	border: 1px solid var(--me-color-border-light);
+	border: 1px solid var(--border-light);
 	border-radius: 8px;
 }
 
@@ -25,11 +25,11 @@
 	margin-top: 24px;
 
 	&[data-danger="true"] {
-		background-color: var(--me-color-bg-red-danger);
-		border: 1px solid var(--me-color-bg-red-danger);
+		background-color: var(--bg-red-danger);
+		border: 1px solid var(--bg-red-danger);
 
 		&:hover {
-			background-color: var(--me-color-bg-red-danger-dark);
+			background-color: var(--bg-red-danger-dark);
 		}
 	}
 }
diff --git a/dashboard/app/components/index/WebsiteCard.module.css b/dashboard/app/components/index/WebsiteCard.module.css
@@ -1,7 +1,7 @@
 .card {
-	color: var(--me-color-text-grey);
+	color: var(--text-grey);
 	padding: 16px;
-	border: 1px solid var(--me-color-border-muted);
+	border: 1px solid var(--border-muted);
 	border-radius: 8px;
 
 	text-decoration: none;
@@ -13,7 +13,7 @@
 	}
 
 	&:visited {
-		color: var(--me-color-text-grey);
+		color: var(--text-grey);
 	}
 
 	p {
@@ -24,7 +24,7 @@
 	}
 
 	span {
-		color: var(--me-color-text-muted);
+		color: var(--text-muted);
 		font-size: 12px;
 	}
 }
diff --git a/dashboard/app/components/layout/Error.module.css b/dashboard/app/components/layout/Error.module.css
@@ -8,7 +8,7 @@
 	font-size: rem(38px);
 	line-height: 1;
 	margin-bottom: var(--mantine-spacing-xs);
-	color: var(--me-color-border-light);
+	color: var(--border-light);
 
 	@media (--lt-sm) {
 		font-size: rem(32px);
@@ -32,11 +32,11 @@
 }
 
 .anchor {
-	color: var(--me-color-text-muted);
+	color: var(--text-muted);
 	text-decoration: underline;
 
 	&:hover,
 	&:focus {
-		color: var(--me-color-text-dark);
+		color: var(--text-dark);
 	}
 }
diff --git a/dashboard/app/components/layout/Header.module.css b/dashboard/app/components/layout/Header.module.css
@@ -1,7 +1,7 @@
 .header {
-	color: var(--me-color-text-light);
-	background-color: var(--me-color-bg-dark);
-	border-bottom: 1px solid var(--me-color-border-dark);
+	color: var(--text-light);
+	background-color: var(--bg-dark);
+	border-bottom: 1px solid var(--border-dark);
 }
 
 .inner {
@@ -36,7 +36,7 @@
 	position: relative;
 	font-size: 14px;
 	font-weight: 400;
-	color: var(--me-color-text-light);
+	color: var(--text-light);
 
 	&[data-active="true"] {
 		font-weight: 600;
@@ -50,15 +50,15 @@
 		transform: translateX(-50%);
 		width: 60%;
 		height: 2px;
-		border-bottom: 2px solid var(--me-color-logo-green);
+		border-bottom: 2px solid var(--logo-green);
 		border-radius: 8px;
 	}
 
 	@media (--lt-xs) {
 		font-size: 20px;
 		padding: 22px 24px;
 
-		border-bottom: 1px solid var(--me-color-border-dark);
+		border-bottom: 1px solid var(--border-dark);
 
 		&:hover {
 			font-weight: 600;
@@ -73,14 +73,14 @@
 			width: 2px;
 			height: 40%;
 			border-bottom: initial;
-			border-right: 2px solid var(--me-color-logo-green);
+			border-right: 2px solid var(--logo-green);
 			border-radius: 8px;
 		}
 	}
 }
 
 .burger {
-	--burger-color: var(--me-color-text-light);
+	--burger-color: var(--text-light);
 
 	@media (--gt-xs) {
 		display: none;
@@ -99,9 +99,9 @@
 .drawer {
 	margin-top: 72px;
 	height: 100%;
-	background-color: var(--me-color-bg-dark);
+	background-color: var(--bg-dark);
 
-	border-top: 1px solid var(--me-color-border-dark);
+	border-top: 1px solid var(--border-dark);
 
 	@media (--gt-xs) {
 		display: none;

diff --git a/dashboard/app/components/layout/InnerHeader.module.css b/dashboard/app/components/layout/InnerHeader.module.css
@@ -1,6 +1,6 @@
 .header {
-	color: var(--me-color-text-light);
-	background-color: var(--me-color-bg-dark);
+	color: var(--text-light);
+	background-color: var(--bg-dark);
 }
 
 .inner {