mirror of
https://github.com/wassname/talk.git
synced 2026-08-15 12:55:10 +08:00
[CORL-1155] Fix theming for rebranded stream/admin (#3012)
* Repair theming and CSS variables for the rebrand This separates the CSS variables into three sections for admin, stream, as well as a shared set between them. This also adds injection of the raw colours from the design team into post css variables. Lastly, this re-maps the existing theme variables to a new consolidated set with fallbacks for compatibility. Since this is a singular commit from various WIP commits, I am crediting @cvle as well as myself for this work. Thank you all who helped make this rebrand with theming possible! CORL-1155 Co-authored-by: Chi Vinh Le <vinh@vinh.tech> * Convert old css variables in CallOut * Rename postive/negative => success/error CORL-1155 * Change some CSS Variable names * fix TextField/PasswordField colors Co-authored-by: Chi Vinh Le <vinh@vinh.tech>
This commit is contained in:
Nick Funk
@@ -1,37 +0,0 @@
|
||||
.buttonReset {
|
||||
/* reset button */
|
||||
user-select: none;
|
||||
font-family: inherit;
|
||||
outline: none;
|
||||
border: none;
|
||||
touch-action: manipulation;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
overflow: hidden;
|
||||
|
||||
/* Unify anchor and button. */
|
||||
cursor: pointer;
|
||||
display: inline-block;
|
||||
box-sizing: border-box;
|
||||
text-align: center;
|
||||
text-decoration: none;
|
||||
align-items: flex-start;
|
||||
vertical-align: middle;
|
||||
white-space: nowrap;
|
||||
background: transparent;
|
||||
font-size: inherit;
|
||||
-webkit-tap-highlight-color: rgba(0, 0, 0, 0) !important;
|
||||
-webkit-appearance: none;
|
||||
|
||||
&:disabled {
|
||||
cursor: default;
|
||||
}
|
||||
|
||||
&::-moz-focus-inner {
|
||||
border: 0;
|
||||
}
|
||||
|
||||
&:-moz-focusring {
|
||||
textshadow: 0 0 0 #000;
|
||||
}
|
||||
}
|
||||
@@ -1,384 +0,0 @@
|
||||
@font-face {
|
||||
font-family: "Source Sans Pro";
|
||||
font-style: normal;
|
||||
font-display: block;
|
||||
font-weight: 300;
|
||||
src: local("Source Sans Pro Light "), local("Source Sans Pro-Light"),
|
||||
url("~typeface-source-sans-pro/files/source-sans-pro-latin-300.woff2")
|
||||
format("woff2"),
|
||||
url("~typeface-source-sans-pro/files/source-sans-pro-latin-300.woff")
|
||||
format("woff");
|
||||
}
|
||||
@font-face {
|
||||
font-family: "Source Sans Pro";
|
||||
font-style: italic;
|
||||
font-display: block;
|
||||
font-weight: 300;
|
||||
src: local("Source Sans Pro Light "), local("Source Sans Pro-Light"),
|
||||
url("~typeface-source-sans-pro/files/source-sans-pro-latin-300italic.woff2")
|
||||
format("woff2"),
|
||||
url("~typeface-source-sans-pro/files/source-sans-pro-latin-300italic.woff")
|
||||
format("woff");
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: "Source Sans Pro";
|
||||
font-style: normal;
|
||||
font-display: block;
|
||||
font-weight: 400;
|
||||
src: local("Source Sans Pro Regular italic"),
|
||||
local("Source Sans Pro-Regularitalic"),
|
||||
url("~typeface-source-sans-pro/files/source-sans-pro-latin-400.woff2")
|
||||
format("woff2"),
|
||||
url("~typeface-source-sans-pro/files/source-sans-pro-latin-400.woff")
|
||||
format("woff");
|
||||
}
|
||||
@font-face {
|
||||
font-family: "Source Sans Pro";
|
||||
font-style: italic;
|
||||
font-display: block;
|
||||
font-weight: 400;
|
||||
src: local("Source Sans Pro Light "), local("Source Sans Pro-Light"),
|
||||
url("~typeface-source-sans-pro/files/source-sans-pro-latin-400italic.woff2")
|
||||
format("woff2"),
|
||||
url("~typeface-source-sans-pro/files/source-sans-pro-latin-400italic.woff")
|
||||
format("woff");
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: "Source Sans Pro";
|
||||
font-style: normal;
|
||||
font-display: block;
|
||||
font-weight: 600;
|
||||
src: local("Source Sans Pro SemiBold italic"),
|
||||
local("Source Sans Pro-SemiBolditalic"),
|
||||
url("~typeface-source-sans-pro/files/source-sans-pro-latin-600.woff2")
|
||||
format("woff2"),
|
||||
url("~typeface-source-sans-pro/files/source-sans-pro-latin-600.woff")
|
||||
format("woff");
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: "Source Sans Pro";
|
||||
font-style: normal;
|
||||
font-display: block;
|
||||
font-weight: 700;
|
||||
src: local("Source Sans Pro SemiBold italic"),
|
||||
local("Source Sans Pro-SemiBolditalic"),
|
||||
url("~typeface-source-sans-pro/files/source-sans-pro-latin-700.woff2")
|
||||
format("woff2"),
|
||||
url("~typeface-source-sans-pro/files/source-sans-pro-latin-700.woff")
|
||||
format("woff");
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: "Manuale";
|
||||
font-style: normal;
|
||||
font-display: block;
|
||||
font-weight: 400;
|
||||
src: local("Manuale Regular "), local("Manuale-Regular"),
|
||||
url("~typeface-manuale/files/manuale-latin-400.woff2") format("woff2"),
|
||||
url("~typeface-manuale/files/manuale-latin-400.woff") format("woff");
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: "Manuale";
|
||||
font-style: normal;
|
||||
font-display: block;
|
||||
font-weight: 600;
|
||||
src: local("Manuale SemiBold "), local("Manuale-SemiBold"),
|
||||
url("~typeface-manuale/files/manuale-latin-600.woff2") format("woff2"),
|
||||
url("~typeface-manuale/files/manuale-latin-600.woff") format("woff");
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: "Manuale";
|
||||
font-style: normal;
|
||||
font-display: block;
|
||||
font-weight: 700;
|
||||
src: local("Manuale SemiBold "), local("Manuale-SemiBold"),
|
||||
url("~typeface-manuale/files/manuale-latin-700.woff2") format("woff2"),
|
||||
url("~typeface-manuale/files/manuale-latin-700.woff") format("woff");
|
||||
}
|
||||
|
||||
/* V2 Font Faces */
|
||||
|
||||
@font-face {
|
||||
font-family: "Nunito";
|
||||
font-style: normal;
|
||||
font-display: block;
|
||||
font-weight: 400;
|
||||
src: local("Nunito Regular"), local("Nunito-Regular"),
|
||||
url("~typeface-nunito/files/nunito-latin-400.woff2") format("woff2"),
|
||||
url("~typeface-nunito/files/nunito-latin-400.woff") format("woff");
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: "Nunito";
|
||||
font-style: normal;
|
||||
font-display: block;
|
||||
font-weight: 700;
|
||||
src: local("Nunito SemiBold"), local("Nunito-SemiBold"),
|
||||
url("~typeface-nunito/files/nunito-latin-700.woff2") format("woff2"),
|
||||
url("~typeface-nunito/files/nunito-latin-700.woff") format("woff");
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: "Open Sans";
|
||||
font-style: normal;
|
||||
font-display: block;
|
||||
font-weight: 400;
|
||||
src: local("Open Sans Regular"), local("Open Sans-Regular"),
|
||||
url("~typeface-open-sans/files/open-sans-latin-400.woff2") format("woff2"),
|
||||
url("~typeface-open-sans/files/open-sans-latin-400.woff") format("woff");
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: "Open Sans";
|
||||
font-style: normal;
|
||||
font-display: block;
|
||||
font-weight: 600;
|
||||
src: local("Open Sans SemiBold"), local("Open Sans-SemiBold"),
|
||||
url("~typeface-open-sans/files/open-sans-latin-600.woff2") format("woff2"),
|
||||
url("~typeface-open-sans/files/open-sans-latin-600.woff") format("woff");
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: "Open Sans";
|
||||
font-style: normal;
|
||||
font-display: block;
|
||||
font-weight: 700;
|
||||
src: local("Open Sans Bold"), local("Open Sans-Bold"),
|
||||
url("~typeface-open-sans/files/open-sans-latin-700.woff2") format("woff2"),
|
||||
url("~typeface-open-sans/files/open-sans-latin-700.woff") format("woff");
|
||||
}
|
||||
|
||||
/* --- */
|
||||
|
||||
.heading1 {
|
||||
@mixin heading1;
|
||||
}
|
||||
|
||||
.heading2 {
|
||||
@mixin heading2;
|
||||
}
|
||||
|
||||
.heading3 {
|
||||
@mixin heading3;
|
||||
}
|
||||
|
||||
.heading4 {
|
||||
@mixin heading4;
|
||||
}
|
||||
.heading5 {
|
||||
@mixin heading5;
|
||||
}
|
||||
|
||||
.header1 {
|
||||
@mixin header1;
|
||||
}
|
||||
|
||||
.header2 {
|
||||
@mixin header2;
|
||||
}
|
||||
|
||||
.header3 {
|
||||
@mixin header3;
|
||||
}
|
||||
|
||||
.header4 {
|
||||
@mixin header4;
|
||||
}
|
||||
.header5 {
|
||||
@mixin header5;
|
||||
}
|
||||
|
||||
.bodyCopy {
|
||||
@mixin bodyCopy;
|
||||
}
|
||||
|
||||
.bodyShort {
|
||||
@mixin bodyShort;
|
||||
}
|
||||
|
||||
.fieldDescription {
|
||||
@mixin fieldDescription;
|
||||
}
|
||||
|
||||
.button {
|
||||
color: var(--palette-text-secondary);
|
||||
font-family: var(--font-family-sans-serif);
|
||||
font-weight: var(--font-weight-medium);
|
||||
font-size: calc(14rem / var(--rem-base));
|
||||
line-height: calc(18em / 14);
|
||||
letter-spacing: calc(0.57em / 14);
|
||||
}
|
||||
|
||||
.buttonLarge {
|
||||
color: var(--palette-text-secondary);
|
||||
font-family: var(--font-family-sans-serif);
|
||||
font-weight: var(--font-weight-medium);
|
||||
font-size: calc(16rem / var(--rem-base));
|
||||
line-height: calc(20em / 16);
|
||||
letter-spacing: calc(0.57em / 16);
|
||||
}
|
||||
|
||||
.timestamp {
|
||||
color: var(--palette-text-secondary);
|
||||
font-family: var(--font-family-sans-serif);
|
||||
font-weight: var(--font-weight-regular);
|
||||
font-size: calc(14rem / var(--rem-base));
|
||||
line-height: calc(18em / 14);
|
||||
letter-spacing: 0;
|
||||
}
|
||||
|
||||
.alertMessage {
|
||||
color: var(--palette-common-black);
|
||||
font-family: var(--font-family-sans-serif);
|
||||
font-weight: var(--font-weight-medium);
|
||||
font-size: calc(16rem / var(--rem-base));
|
||||
line-height: calc(18em / 16);
|
||||
letter-spacing: calc(-0.1em / 16);
|
||||
}
|
||||
|
||||
.inputText {
|
||||
font-weight: var(--font-weight-regular);
|
||||
font-family: var(--font-family-sans-serif);
|
||||
font-size: calc(16rem / var(--rem-base));
|
||||
line-height: 1;
|
||||
letter-spacing: calc(0.2em / 16);
|
||||
color: var(--palette-text-primary);
|
||||
}
|
||||
|
||||
.detail {
|
||||
font-size: calc(14rem / var(--rem-base));
|
||||
font-weight: var(--font-weight-regular);
|
||||
font-family: var(--font-family-sans-serif);
|
||||
line-height: calc(18em / 16);
|
||||
letter-spacing: calc(0.2em / 16);
|
||||
color: var(--palette-text-secondary);
|
||||
}
|
||||
|
||||
.placeholder {
|
||||
font-family: var(--font-family-sans-serif);
|
||||
font-weight: var(--font-weight-regular);
|
||||
font-size: calc(16rem / var(--rem-base));
|
||||
line-height: calc(20em / 16);
|
||||
letter-spacing: 0;
|
||||
color: var(--palette-grey-lighter);
|
||||
}
|
||||
|
||||
.placeholderPseudo::placeholder {
|
||||
font-family: var(--font-family-sans-serif);
|
||||
font-weight: var(--font-weight-regular);
|
||||
font-size: calc(16rem / var(--rem-base));
|
||||
line-height: calc(20em / 16);
|
||||
letter-spacing: 0;
|
||||
color: var(--palette-grey-lighter);
|
||||
}
|
||||
|
||||
.menuItem {
|
||||
font-size: calc(16rem / var(--rem-base));
|
||||
font-weight: var(--font-weight-regular);
|
||||
font-family: var(--font-family-sans-serif);
|
||||
line-height: calc(19em / 16);
|
||||
letter-spacing: calc(0.2em / 16);
|
||||
color: var(--palette-text-primary);
|
||||
}
|
||||
|
||||
.navItem {
|
||||
font-family: var(--font-family-sans-serif);
|
||||
font-weight: var(--font-weight-medium);
|
||||
font-size: calc(16rem / var(--rem-base));
|
||||
letter-spacing: calc(-0.1em / 16);
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.navItemActive {
|
||||
font-family: var(--font-family-sans-serif);
|
||||
font-weight: var(--font-weight-bold);
|
||||
font-size: calc(16rem / var(--rem-base));
|
||||
letter-spacing: calc(-0.35em / 16);
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.adminTabItem {
|
||||
font-family: var(--font-family-sans-serif);
|
||||
font-weight: var(--font-weight-medium);
|
||||
font-size: calc(14rem / var(--rem-base));
|
||||
letter-spacing: calc(-0.1em / 14);
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.adminTabItemActive {
|
||||
font-family: var(--font-family-sans-serif);
|
||||
font-weight: var(--font-weight-bold);
|
||||
font-size: calc(14rem / var(--rem-base));
|
||||
letter-spacing: calc(-0.35em / 14);
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.markerText {
|
||||
font-family: var(--font-family-sans-serif);
|
||||
font-weight: var(--font-weight-medium);
|
||||
font-size: calc(13rem / var(--rem-base));
|
||||
letter-spacing: calc(-0.35em / 13);
|
||||
}
|
||||
|
||||
.tagText {
|
||||
font-family: var(--font-family-sans-serif);
|
||||
font-weight: var(--font-weight-medium);
|
||||
font-size: calc(12rem / var(--rem-base));
|
||||
letter-spacing: calc(-0.2em / 12);
|
||||
}
|
||||
|
||||
.sideNavigationItem {
|
||||
font-family: var(--font-family-sans-serif);
|
||||
font-weight: var(--font-weight-regular);
|
||||
font-size: calc(18rem / var(--rem-base));
|
||||
line-height: calc(18em / 18);
|
||||
letter-spacing: calc(0.2em / 18);
|
||||
text-decoration: none;
|
||||
text-transform: uppercase;
|
||||
color: var(--palette-grey-main);
|
||||
}
|
||||
|
||||
.sideNavigationActive {
|
||||
composes: sideNavigationItem;
|
||||
font-weight: var(--font-weight-bold);
|
||||
letter-spacing: calc(0.1em / 18);
|
||||
color: var(--palette-text-primary);
|
||||
}
|
||||
|
||||
.tableHeading {
|
||||
font-family: var(--font-family-sans-serif);
|
||||
font-weight: var(--font-weight-medium);
|
||||
font-size: calc(14rem / var(--rem-base));
|
||||
line-height: calc(20em / 14);
|
||||
color: var(--palette-grey-dark);
|
||||
}
|
||||
|
||||
.tableData {
|
||||
font-family: var(--font-family-sans-serif);
|
||||
font-weight: var(--font-weight-regular);
|
||||
font-size: calc(14rem / var(--rem-base));
|
||||
line-height: calc(14em / 14);
|
||||
color: var(--palette-grey-dark);
|
||||
}
|
||||
|
||||
.inputLabel {
|
||||
font-size: calc(18rem / var(--rem-base));
|
||||
font-weight: var(--font-weight-medium);
|
||||
font-family: var(--font-family-serif);
|
||||
line-height: calc(18em / 18);
|
||||
letter-spacing: calc(0.2em / 18);
|
||||
color: var(--palette-text-dark);
|
||||
}
|
||||
|
||||
/* V2 Typography */
|
||||
|
||||
.bodyCommentV2 {
|
||||
@mixin bodyCommentV2;
|
||||
}
|
||||
|
||||
/* --- */
|
||||
Reference in New Issue
Block a user