feat: code/pre + review buttons

Talend · Jul 21, 2023 · d963662 · d963662
1 parent df2db3f
commit d963662
Show file tree

Hide file tree

Showing 6 changed files with 35 additions and 91 deletions.
diff --git a/packages/theme/src/theme/_buttons.scss b/packages/theme/src/theme/_buttons.scss
@@ -6,23 +6,8 @@
 @use '@talend/design-tokens/lib/tokens';
 
 :root {
-	--t-button-color: currentColor;
-	--t-button-background-color: transparent;
-	--t-button-border-color: transparent;
-
 	--t-button-padding: 0 #{$padding-normal};
 	--t-button-height: #{$btn-line-height - 0.2rem};
-
-	--t-button-primary-color: tokens.$coral-color-accent-text-weak;
-	--t-button-primary-background: tokens.$coral-color-accent-background-strong;
-	--t-button-primary-background--hover: tokens.$coral-color-accent-background-strong-hover;
-	--t-button-primary-background--active: tokens.$coral-color-accent-background-strong-active;
-
-	--t-button-secondary-background--hover: #{$lochmara100};
-
-	--t-button-destructive-background: #{$btn-danger-bg};
-	--t-button-destructive-background--hover: #{$btn-danger-bg-hover};
-	--t-button-destructive-background--active: #{$btn-danger-bg-active};
 }
 
 .btn {
@@ -39,9 +24,9 @@
 	&,
 	&:focus,
 	&:hover {
-		color: var(--t-button-color);
-		background-color: var(--t-button-background-color);
-		border-color: var(--t-button-border-color);
+		color: currentColor;
+		background-color: transparent;
+		border-color: transparent;
 	}
 
 	&:active,
@@ -102,115 +87,91 @@
 	&-info,
 	&-warning,
 	&--primary {
-		--t-button-color: tokens.$coral-color-accent-text-weak;
-		--t-button-background-color: tokens.$coral-color-accent-background-strong;
-		color: tokens.$coral-color-accent-text-weak;
 		background: tokens.$coral-color-accent-background-strong;
+		color: tokens.$coral-color-accent-text-weak;
 
 		&:hover {
-			--t-button-color: tokens.$coral-color-accent-text-weak-hover;
-			--t-button-background-color: tokens.$coral-color-accent-background-strong-hover;
-			color: tokens.$coral-color-accent-text-weak-hover;
 			background: tokens.$coral-color-accent-background-strong-hover;
+			color: tokens.$coral-color-accent-text-weak-hover;
 		}
 
 		&:active {
-			--t-button-color: tokens.$coral-color-accent-text-weak-active;
-			--t-button-background-color: tokens.$coral-color-accent-background-strong-active;
-			color: tokens.$coral-color-accent-text-weak-active;
 			background: tokens.$coral-color-accent-background-strong-active;
+			color: tokens.$coral-color-accent-text-weak-active;
 		}
 	}
 
 	&-inverse {
-		--t-button-color: tokens.$coral-color-accent-text;
-		--t-button-border-color: tokens.$coral-border-s-solid tokens.$coral-color-accent-border;
-		--t-button-background-color: transparent;
 		background-color: transparent;
-
+		border: tokens.$coral-border-s-solid tokens.$coral-color-accent-border;
 		color: tokens.$coral-color-accent-text;
 
 		&:hover {
-			--t-button-background-color: var(--t-button-secondary-background--hover);
-			--t-button-color: tokens.$coral-color-accent-text-strong-hover;
-			color: tokens.$coral-color-accent-text-strong-hover;
 			background: tokens.$coral-color-accent-background-weak-hover;
+			border: tokens.$coral-border-s-solid tokens.$coral-color-accent-border;
+			color: tokens.$coral-color-accent-text-strong-hover;
 		}
 
 		&:active {
-			--t-button-background-color: var(--t-button-secondary-background--hover);
-			--t-button-color: tokens.$coral-color-accent-text-strong-active;
-			color: tokens.$coral-color-accent-text-strong-active;
 			background: tokens.$coral-color-accent-background-weak-active;
+			color: tokens.$coral-color-accent-text-strong-active;
 		}
 
 		&:disabled,
 		&[aria-disabled='true'],
 		&[aria-busy='true'] {
 			background: transparent;
-			color: tokens.$coral-color-neutral-text-disabled;
 			border: tokens.$coral-border-s-solid tokens.$coral-color-neutral-border-disabled;
+			color: tokens.$coral-color-neutral-text-disabled;
 
 			&:hover {
-				--t-button-background-color: transparent;
 				background-color: transparent;
 			}
 		}
 	}
 
 	&--secondary {
-		--t-button-border-color: tokens.$coral-border-s-solid tokens.$coral-color-accent-border;
-		--t-button-color: tokens.$coral-color-accent-text;
-		--t-button-background-color: transparent;
 		background-color: transparent;
-
+		border-color: tokens.$coral-color-accent-text;
 		color: tokens.$coral-color-accent-text;
 
 		&:hover {
-			--t-button-background-color: var(--t-button-secondary-background--hover);
-			--t-button-color: tokens.$coral-color-accent-text-strong-hover;
-			color: tokens.$coral-color-accent-text-strong-hover;
 			background: tokens.$coral-color-accent-background-weak-hover;
+			border-color: tokens.$coral-color-accent-text;
+			color: tokens.$coral-color-accent-text-strong-hover;
 		}
 
 		&:active {
-			--t-button-background-color: var(--t-button-secondary-background--hover);
-			--t-button-color: tokens.$coral-color-accent-text-strong-active;
-			color: tokens.$coral-color-accent-text-strong-active;
 			background: tokens.$coral-color-accent-background-weak-active;
+			color: tokens.$coral-color-accent-text-strong-active;
 		}
 
 		&:disabled,
 		&[aria-disabled='true'],
 		&[aria-busy='true'] {
 			background: transparent;
-			color: tokens.$coral-color-neutral-text-disabled;
 			border: tokens.$coral-border-s-solid tokens.$coral-color-neutral-border-disabled;
+			color: tokens.$coral-color-neutral-text-disabled;
 
 			&:hover {
-				--t-button-background-color: transparent;
 				background-color: transparent;
 			}
 		}
 	}
 
 	&-tertiary,
 	&--tertiary {
-		--t-button-color: tokens.$coral-color-accent-text;
-		--t-button-background-color: transparent;
 		background-color: transparent;
 		color: tokens.$coral-color-accent-text;
 
 		&:hover {
-			--t-button-color: tokens.$coral-color-accent-text-strong-hover;
-			color: tokens.$coral-color-accent-text-strong-hover;
 			background: tokens.$coral-color-accent-background-weak-hover;
+			color: tokens.$coral-color-accent-text-strong-hover;
 		}
 
 		&:active {
-			--t-button-color: tokens.$coral-color-accent-text-strong-active;
-			color: tokens.$coral-color-accent-text-strong-active;
 			background: tokens.$coral-color-accent-background-weak-active;
+			color: tokens.$coral-color-accent-text-strong-active;
 		}
 
 		&:disabled,
@@ -221,57 +182,44 @@
 			color: tokens.$coral-color-neutral-text-disabled;
 
 			&:hover {
-				--t-button-background-color: transparent;
 				background-color: transparent;
 			}
 		}
 	}
 
 	&-link {
-		--t-button-color: tokens.$coral-color-accent-text;
 		color: tokens.$coral-color-accent-text;
 
 		&:hover {
-			--t-button-color: tokens.$coral-color-accent-text-strong-hover;
 			color: tokens.$coral-color-accent-text-strong-hover;
 		}
 
 		&:active {
-			--t-button-color: tokens.$coral-color-accent-text-strong-active;
 			color: tokens.$coral-color-accent-text-strong-active;
 		}
 
 		&:disabled,
 		&[aria-disabled='true'],
 		&[aria-busy='true'] {
-			color: tokens.$coral-color-neutral-text-disabled;
 			border: tokens.$coral-border-s-solid tokens.$coral-color-neutral-border-disabled;
+			color: tokens.$coral-color-neutral-text-disabled;
 		}
 	}
 
 	&.btn-danger,
 	&.btn--destructive {
-		--t-button-background-color: var(--t-button-destructive-background);
-		--t-button-border-color: tokens.$coral-color-danger-text-weak;
-		--t-button-color: tokens.$coral-color-danger-text-weak;
-
-		color: tokens.$coral-color-danger-text-weak;
-		border: tokens.$coral-color-danger-background-strong;
 		background: tokens.$coral-color-danger-background-strong;
+		border: tokens.$coral-color-danger-background-strong;
+		color: tokens.$coral-color-danger-text-weak;
 
 		&:hover {
-			--t-button-background-color: tokens.$coral-color-danger-background-strong-hover;
-			--t-button-border-color: tokens.$coral-color-danger-background-strong-hover;
-			color: tokens.$coral-color-danger-text-weak-hover;
 			background: tokens.$coral-color-danger-background-strong-hover;
+			color: tokens.$coral-color-danger-text-weak-hover;
 		}
 
 		&:active {
-			--t-button-color: tokens.$coral-color-danger-text-weak-active;
-			--t-button-background-color: tokens.$coral-color-danger-background-strong-active;
-			--t-button-border-color: tokens.$coral-color-danger-background-strong-active;
-			color: tokens.$coral-color-danger-text-weak-active;
 			background: tokens.$coral-color-danger-background-strong-active;
+			color: tokens.$coral-color-danger-text-weak-active;
 		}
 
 		&[disabled] &:hover,
@@ -283,8 +231,6 @@
 
 	&-icon-text {
 		--t-button-padding: 0;
-		--t-button-background-color: transparent;
-		--t-button-border-color: transparent;
 	}
 
 	&-xs,

diff --git a/packages/theme/src/theme/_code.scss b/packages/theme/src/theme/_code.scss
@@ -0,0 +1,11 @@
+@use '@talend/design-tokens/lib/tokens';
+
+code {
+	color: tokens.$coral-color-danger-text-strong;
+	background-color: tokens.$coral-color-danger-background;
+}
+
+pre {
+	background-color: tokens.$coral-color-neutral-background-medium;
+	color: tokens.$coral-color-neutral-text;
+}
diff --git a/packages/theme/src/theme/_modals.scss b/packages/theme/src/theme/_modals.scss
@@ -35,7 +35,6 @@
 		.modal {
 			&-subtitle {
 				font-size: 14px;
-				// color: $dark-silver;
 				margin-top: 1px;
 
 				&.error {
@@ -45,7 +44,6 @@
 		}
 
 		.close {
-			// color: $dove-gray;
 			color: tokens.$coral-color-neutral-text-weak;
 			opacity: 1;
 		}

diff --git a/packages/theme/src/theme/_navs.scss b/packages/theme/src/theme/_navs.scss
@@ -33,12 +33,6 @@ $tc-tabbar-active-border-size: 0.2rem !default;
 				margin: 0;
 			}
 
-			// .btn.btn-link,
-			// .btn.btn-link:hover {
-			// 	color: inherit;
-			// 	background-color: inherit;
-			// }
-
 			&:hover,
 			&.active,
 			&.open {

diff --git a/packages/theme/src/theme/_type.scss b/packages/theme/src/theme/_type.scss
@@ -65,9 +65,3 @@ p,
 a {
 	color: tokens.$coral-color-accent-text;
 }
-
-// for later on as it is override
-// code {
-// 	color: tokens.$coral-color-danger-text-strong;
-// 	background-color: tokens.$coral-color-danger-background;
-// }
diff --git a/packages/theme/src/theme/theme.scss b/packages/theme/src/theme/theme.scss
@@ -8,6 +8,7 @@
 @import '~@talend/bootstrap-sass/assets/stylesheets/bootstrap/type';
 @import './type';
 @import '~@talend/bootstrap-sass/assets/stylesheets/bootstrap/code';
+@import './code';
 @import '~@talend/bootstrap-sass/assets/stylesheets/bootstrap/grid';
 @import '~@talend/bootstrap-sass/assets/stylesheets/bootstrap/tables';
 @import './tables';