update text to use uniform variables

Hubs-Foundation · Jul 17, 2023 · d48145b · d48145b
1 parent 357492e
commit d48145b
Show file tree

Hide file tree

Showing 10 changed files with 71 additions and 51 deletions.
diff --git a/src/react-components/input/Button.scss b/src/react-components/input/Button.scss
@@ -25,21 +25,21 @@
 
 :local(.basic),
 :local(.transparent) {
-  color: theme.$text4-color;
+  color: theme.$text2-color;
   border: 2px solid theme.$basic-border-color;
   background-color: theme.$basic-color;
 
   svg {
-    color: theme.$text4-color;
+    color: theme.$text2-color;
   }
 
   &:hover {
-    color: theme.$text4-color-hover;
+    color: theme.$text2-color-hover;
     background-color: theme.$basic-color-hover;
   }
 
   &:active {
-    color: theme.$text4-color-pressed;
+    color: theme.$text2-color-pressed;
     background-color: theme.$basic-color-pressed;
   }
 }

diff --git a/src/react-components/input/InputField.scss b/src/react-components/input/InputField.scss
@@ -31,6 +31,7 @@
   align-self: flex-start;
 }
 
-:local(.info), :local(.error) {
+:local(.info),
+:local(.error) {
   font-size: 10px;
 }
diff --git a/src/react-components/input/RadioInput.scss b/src/react-components/input/RadioInput.scss
@@ -77,10 +77,12 @@
 :local(.label) {
   font-size: theme.$font-size-sm;
   font-weight: theme.$font-weight-bold;
+  color: theme.$text1-color;
 }
 
 :local(.description) {
   margin-top: 4px;
   font-size: theme.$font-size-xs;
   font-weight: theme.$font-weight-regular;
-}
+  color: theme.$text2-color;
+}
diff --git a/src/react-components/input/TextInput.scss b/src/react-components/input/TextInput.scss
@@ -11,7 +11,7 @@ $input-height: 40px;
   color: theme.$text1-color;
   overflow: hidden;
 
-  &:focus-within  {
+  &:focus-within {
     border-color: theme.$input-outline-color;
     box-shadow: 0 0 0 2px theme.$input-outline-color;
   }
@@ -22,7 +22,8 @@ $input-height: 40px;
   height: 100%;
 }
 
-:local(.before-input), :local(.after-input) {
+:local(.before-input),
+:local(.after-input) {
   display: flex;
   height: $input-height;
   align-items: center;
@@ -35,11 +36,10 @@ $input-height: 40px;
     border-width: 0;
     min-height: auto;
     border: none;
-    
+
     &:hover {
-      border:none;
+      border: none;
     }
-
 
     :global(.keyboard-user) &:focus {
       border-width: 0;
@@ -50,21 +50,21 @@ $input-height: 40px;
         border-top-left-radius: theme.$border-radius-regular;
         border-bottom-left-radius: theme.$border-radius-regular;
       }
-  
+
       &:last-child {
         margin-left: 1px;
         box-shadow: inset 0 0 0 3px theme.$outline-color, 1px 0 0 2px theme.$outline-color;
         border-top-right-radius: theme.$border-radius-regular;
         border-bottom-right-radius: theme.$border-radius-regular;
       }
     }
-
   }
 
-  :local(.icon-button), & > svg  {
+  :local(.icon-button),
+  & > svg {
     padding: 0;
     margin-left: 8px;
-    
+
     &:last-child {
       margin-right: 8px;
     }
@@ -92,7 +92,7 @@ $input-height: 40px;
 :local(.invalid) {
   border-color: theme.$error-color !important;
 
-  &:focus-within  {
+  &:focus-within {
     box-shadow: 0 0 0 2px theme.$error-color;
   }
 }
@@ -108,6 +108,10 @@ $input-height: 40px;
   &:focus {
     box-shadow: none;
   }
+
+  &::placeholder {
+    color: theme.$text3-color;
+  }
 }
 
 :local(.invalid-icon) {

diff --git a/src/react-components/layout/LoadingScreenLayout.scss b/src/react-components/layout/LoadingScreenLayout.scss
@@ -12,10 +12,11 @@
   bottom: 0;
   top: 0;
   background: theme.$loading-screen-background;
+  color: theme.$text1-color;
 
   font-size: theme.$font-size-sm;
 
-  @media(min-width: theme.$breakpoint-lg) and (min-height: theme.$breakpoint-vr) {
+  @media (min-width: theme.$breakpoint-lg) and (min-height: theme.$breakpoint-vr) {
     font-size: theme.$font-size-md;
   }
 }

diff --git a/src/react-components/layout/Page.scss b/src/react-components/layout/Page.scss
@@ -4,19 +4,24 @@
   box-sizing: border-box;
 }
 
-html, body, :global(#root), :global(#ui-root), :global(.home-root) {
+html,
+body,
+:global(#root),
+:global(#ui-root),
+:global(.home-root) {
   margin: 0;
-  height:100%;
+  height: 100%;
 }
 
 body {
   background: theme.$background1-color;
-  color: theme.$text1-color;
 }
 
-:global(#root), :global(#ui-root), :global(.home-root) {
-  display:flex; 
-  flex-direction:column;
+:global(#root),
+:global(#ui-root),
+:global(.home-root) {
+  display: flex;
+  flex-direction: column;
 }
 
 h1 {
@@ -32,7 +37,7 @@ main {
   order: -1;
   flex: 1;
 
-  @media(min-width: theme.$breakpoint-lg) {
+  @media (min-width: theme.$breakpoint-lg) {
     order: 0;
     display: flex;
     flex-direction: column;

diff --git a/src/react-components/room/ContentMenu.scss b/src/react-components/room/ContentMenu.scss
@@ -11,8 +11,9 @@
   border-radius: 12px;
   pointer-events: auto;
   padding: 4px;
+  color: theme.$text1-color;
 
-  @media(min-width: theme.$breakpoint-lg) {
+  @media (min-width: theme.$breakpoint-lg) {
     top: 24px;
     right: 24px;
   }
@@ -76,4 +77,4 @@
 :local(.disabled) {
   pointer-events: none;
   background-color: theme.$transparent;
-}
+}
diff --git a/src/react-components/room/RoomEntryModal.scss b/src/react-components/room/RoomEntryModal.scss
@@ -28,13 +28,14 @@
 
   h5 {
     font-size: theme.$font-size-xs;
-    color: theme.$grey;
+    color: theme.$text3-color;
     margin-bottom: 4px;
   }
 
   p {
     font-size: theme.$font-size-sm;
     text-align: center;
+    color: theme.$text1-color;
 
     @media (min-width: theme.$breakpoint-lg) and (min-height: theme.$breakpoint-vr) {
       font-size: 20px;

diff --git a/src/react-components/styles/global.scss b/src/react-components/styles/global.scss
@@ -196,6 +196,7 @@ body {
   height: 100%;
   overflow: auto;
   overscroll-behavior-y: none;
+  color: var(--text1-color);
 }
 
 body[data-theme="light"],
@@ -637,6 +638,7 @@ small,
 strong {
   font-size: theme.$font-size-xs;
   font-weight: theme.$font-weight-bold;
+  color: theme.$text2-color;
 }
 
 small {

diff --git a/src/react-components/styles/theme.scss b/src/react-components/styles/theme.scss
@@ -1,3 +1,4 @@
+//  Breakpoints
 // default below 576px (Portrait Phones)
 $breakpoint-sm: 576px; // Landscape Phones
 $breakpoint-md: 768px; // Tablets
@@ -6,6 +7,31 @@ $breakpoint-xl: 1200px; // Large Desktops
 $breakpoint-xxl: 1600px; // Extra Large Desktops
 $breakpoint-vr: 600px; // Standalone VR Browsers
 
+// Font styles
+$font-size-xs: 10px;
+$font-size-sm: 12px;
+$font-size-md: 14px;
+$font-size-lg: 20px;
+$font-size-xl: 24px;
+$font-size-2xl: 28px;
+
+$font-weight-regular: 400;
+$font-weight-medium: 500;
+$font-weight-bold: 700;
+
+// Border styles
+$border-radius-regular: 8px;
+$border-radius-small: 6px;
+
+// Spacing
+$spacing-2xs: 4px;
+$spacing-xs: 8px;
+$spacing-sm: 12px;
+$spacing-md: 16px;
+$spacing-lg: 20px;
+$spacing-xl: 24px;
+
+// Utility colors
 $transparent: transparent;
 $transparent-hover: rgba(0, 0, 0, 0.08);
 $transparent-pressed: rgba(0, 0, 0, 0.12);
@@ -67,29 +93,6 @@ $discord-text2-color: #a3a3a3;
 $discord-text3-color: rgb(127, 127, 127);
 $discord-text4-color: rgb(64, 64, 64);
 
-$font-size-xs: 10px;
-$font-size-sm: 12px;
-$font-size-md: 14px;
-$font-size-lg: 20px;
-$font-size-xl: 24px;
-$font-size-2xl: 28px;
-
-$font-weight-regular: 400;
-$font-weight-medium: 500;
-$font-weight-bold: 700;
-
-$border-radius-regular: 8px;
-$border-radius-small: 6px;
-
-$outline-width: 3px;
-
-$spacing-2xs: 4px;
-$spacing-xs: 8px;
-$spacing-sm: 12px;
-$spacing-md: 16px;
-$spacing-lg: 20px;
-$spacing-xl: 24px;
-
 // Theme SCSS Variables:
 // Reference these variables in the Hubs codebase.
 // The CSS variables they reference are defined in ./global.scss such that they are only included on the page once.
@@ -272,7 +275,7 @@ $tile-button-bg-color-hover: var(--tile-button-bg-color-hover);
 $tile-button-bg-color-pressed: var(--tile-button-bg-color-pressed);
 $tile-button-border-color: var(--tile-button-border-color);
 
-// Lilypad compatible variables (to eventually replace the above)
+// Mozilla Lilypad compatible variables
 
 /**
   PRIMARY INTERACTION