refactor: use library global styles

lsst-epo · Nov 25, 2024 · b2bc0ad · b2bc0ad
1 parent c4e7e76
commit b2bc0ad
Show file tree

Hide file tree

Showing 4 changed files with 43 additions and 225 deletions.
diff --git a/app/[locale]/layout.tsx b/app/[locale]/layout.tsx
@@ -1,7 +1,7 @@
 import { FunctionComponent, PropsWithChildren, Suspense } from "react";
 import { Metadata } from "next";
 import { GoogleOAuthProvider } from "@react-oauth/google";
-import GlobalStyles from "@/styles/globalStyles";
+import { GlobalStyles } from "@rubin-epo/epo-react-lib/styles";
 import { getGlobalData } from "@/lib/api/globals";
 import { languages } from "@/lib/i18n/settings";
 import SourceSansPro from "@/lib/styles/font";

diff --git a/app/not-found.tsx b/app/not-found.tsx
@@ -1,7 +1,7 @@
 import { FunctionComponent, Suspense } from "react";
 import SourceSansPro from "@/lib/styles/font";
 import StyledComponentsRegistry from "@/lib/styles/registry";
-import GlobalStyles from "@/styles/globalStyles";
+import { GlobalStyles } from "@rubin-epo/epo-react-lib/styles";
 import I18NextClientProvider from "@/contexts/i18next";
 import { AuthenticationContextProvider } from "@/contexts/Authentication";
 import { GoogleOAuthProvider } from "@react-oauth/google";

diff --git a/theme/styles/globalStyles.js b/theme/styles/globalStyles.js
@@ -1,73 +1,23 @@
-"use client";
-/* eslint-disable */
-import { createGlobalStyle } from "styled-components";
-import { fluidScaleBase, stripUnit, respondBase } from "@castiron/style-mixins";
-import { aButton, aButtonTheme } from "@/styles/mixins/appearance";
-
-export const tokens = {
-  white: "#ffffff",
-  offWhite: "#e9e9e9",
-  neutral02: "#fafafa",
-  neutral08: "#ebebeb",
-  neutral10: "#f5f5f5",
-  neutral15: "#e3e4e8",
-  neutral20: "#dce0e3",
-  neutral30: "#d3d4d5",
-  neutral40: "#9E9EA3",
-  neutral60: "#666666",
-  neutral80: "#404040",
-  neutral90: "#2b2e34",
-  neutral95: "#1F2121",
-  black: "#000000",
-  turquoise05: "#EDFFFE",
-  turqouise07: "#EDFFFE",
-  turquoise10: "#D9F7F6",
-  turquoise20: "#B2F2EF",
-  turquoise50: "#00bebf",
-  turquoise55: "#009fa1",
-  turquoise60: "#078b8c",
-  turquoise70: "#058b8c",
-  turquoise80: "#117273",
-  turquoise85: "#12726c",
-  turquoise90: "#0c4a4c",
-  orange02: "#FFFDFA",
-  orange04: "#FFF8F0",
-  orange05: "#FFF9F2",
-  orange10: "#FFEDD9",
-  orange20: "#FFE7CC",
-  orange55: "#FAB364",
-  blue10: "#eef5fb",
-  blue20: "#C7D4F4",
-  green05: "#D7E6CF",
-  red: "#cf4040",
-  red20: "#f2c3c0",
-  red40: "#FF8489",
-  purple: "#583671",
-  BREAK_HEADER_LAYOUT: "1625px",
-  BREAK_DESKTOP: "1280px",
-  BREAK_DESKTOP_SMALL: "1130px",
-  BREAK_LARGE_TABLET: "850px",
-  BREAK_LARGE_TABLET_MIN: "851px",
-  BREAK_TABLET: "768px",
-  BREAK_TABLET_MIN: "769px",
-  BREAK_PHABLET: "600px",
-  BREAK_PHABLET_MIN: "601px",
-  BREAK_MOBILE: "446px",
-  // For extremely thin devices, or users with largeer font bases
-  BREAK_MOBILE_MIN: "280px",
-  CONTAINER_MAX: "2560px",
-  CONTAINER_FULL: "1920px",
-  CONTAINER_WIDE: "1435px",
-  CONTAINER_REGULAR: "1160px",
-  CONTAINER_NARROW: "900px",
-  FONT_SIZE_BASE_DESKTOP: "22px",
-  FONT_SIZE_BASE_MOBILE: "16px",
-  FONT_STACK_BASE: `"Source Sans Pro", system-ui`,
-  LINE_HEIGHT_BASE: "1.636",
-  PADDING_LARGE: "100px",
-  PADDING_MEDIUM: "40px",
-  PADDING_SMALL: "20px",
-};
+import {
+  tokens,
+  token,
+  fluidScale,
+  respond,
+  containerMax,
+  containerFull,
+  containerFullBleed,
+  containerWide,
+  containerNews,
+  containerRegular,
+  containerNarrow,
+  layoutGrid,
+  encodeColor,
+  needsDarkColor,
+  palette,
+  protoContainer,
+  pxToEm,
+  ptToEm,
+} from "@rubin-epo/epo-react-lib/styles";
 
 export const zStack = {
   dialog: 35,
@@ -127,155 +77,23 @@ export const PADDING_LARGE = tokens.PADDING_LARGE;
 export const PADDING_MEDIUM = tokens.PADDING_MEDIUM;
 export const PADDING_SMALL = tokens.PADDING_SMALL;
 
-export function fluidScale(
-  max,
-  min,
-  maxVw = tokens.BREAK_DESKTOP,
-  minVw = tokens.BREAK_TABLET
-) {
-  if (max === min) return max;
-  return fluidScaleBase(max, min, maxVw, minVw);
-}
-
-export const containerMax = () => protoContainer(tokens.CONTAINER_MAX);
-
-export const containerFull = () => protoContainer(tokens.CONTAINER_FULL);
-
-export const containerFullBleed = (width = "CONTAINER_MAX") => {
-  return `
-    width: 100%;
-    max-width: ${tokens[width]};
-    margin-right: auto;
-    margin-left: auto;
-  `;
-};
-
-export const containerWide = () => protoContainer(tokens.CONTAINER_WIDE);
-
-export const containerNews = () =>
-  protoContainer(tokens.CONTAINER_WIDE, "110px", "50px");
-
-export const containerRegular = () => protoContainer(tokens.CONTAINER_REGULAR);
-
-export const containerNarrow = () => protoContainer(tokens.CONTAINER_NARROW);
-
-export const layoutGrid = (
-  columns = 3,
-  gapDesktop = tokens.PADDING_SMALL,
-  gapMobile = tokens.PADDING_SMALL,
-  breakPoint = tokens.BREAK_TABLET
-) => {
-  return `
-  display: grid;
-  grid-template-columns: repeat(${columns}, 1fr);
-  gap: ${fluidScale(gapDesktop, gapMobile)};
-
-  ${respond(
-    `& > * {
-      grid-column: span ${columns};
-    }`,
-    breakPoint
-  )}
-  `;
-};
-
-export const encodeColor = (string) => {
-  const str = string.split("#").pop();
-  return `%23${str}`;
-};
-
-export const needsDarkColor = (hexColor) => {
-  var color = hexColor.charAt(0) === "#" ? hexColor.substring(1, 7) : hexColor;
-  var r = parseInt(color.substring(0, 2), 16); // hexToR
-  var g = parseInt(color.substring(2, 4), 16); // hexToG
-  var b = parseInt(color.substring(4, 6), 16); // hexToB
-  return r * 0.299 + g * 0.587 + b * 0.114 > 186 ? true : false;
-};
-
-export const palette = (color) => {
-  return tokens[color];
+export {
+  tokens,
+  token,
+  fluidScale,
+  respond,
+  containerMax,
+  containerFull,
+  containerFullBleed,
+  containerWide,
+  containerNews,
+  containerRegular,
+  containerNarrow,
+  layoutGrid,
+  encodeColor,
+  needsDarkColor,
+  palette,
+  protoContainer,
+  pxToEm,
+  ptToEm,
 };
-
-export const protoContainer = (
-  maxWidth = tokens.CONTAINER_WIDE,
-  widePadding = tokens.PADDING_LARGE,
-  narrowPadding = tokens.PADDING_SMALL
-) => {
-  const units = widePadding.toString().split(/\d+/);
-  const unit = units?.[0] || "px";
-  const maxValue = stripUnit(maxWidth) + 2 * stripUnit(widePadding);
-  const minValue = stripUnit(maxWidth) + 2 * stripUnit(narrowPadding);
-
-  return `
-    --max-width: ${fluidScale(maxValue + unit, minValue + unit)};
-    max-width: var(--max-width);
-    padding-right: ${fluidScale(widePadding, narrowPadding)};
-    padding-left: ${fluidScale(widePadding, narrowPadding)};
-    margin-right: auto;
-    margin-left: auto;
-    `;
-};
-
-export const pxToEm = (px, base = tokens.FONT_SIZE_BASE_DESKTOP) => {
-  return `${stripUnit(px) / stripUnit(base)}em`;
-};
-
-// Converts pt to em
-// pt values are rounded down to the nearest px
-export const ptToEm = (pt, base = tokens.FONT_SIZE_BASE_DESKTOP) => {
-  return `${Math.floor(stripUnit(pt) * 1.333) / stripUnit(base)}em`;
-};
-
-export const respond = (
-  content,
-  size = tokens.BREAK_TABLET,
-  operator = "max",
-  aspect = "width"
-) => {
-  return respondBase(content, size, operator, aspect);
-};
-
-export const token = (which) => {
-  if (typeof which === "string") {
-    return tokens[which];
-  } else if (which.isArray()) {
-    let obj = which.reduce(function (result, item) {
-      result[item] = tokens[item];
-      return result;
-    }, {});
-    return obj;
-  } else {
-    return tokens;
-  }
-};
-
-const createCSSGlobalStyles = () => {
-  return Object.keys(tokens).map((k) => `--${k}: ${tokens[k]};`);
-};
-
-const GlobalStyles = createGlobalStyle`
-  :root {
-      ${createCSSGlobalStyles()}
-  }
-  .c-buttonish {
-    ${aButton}
-    ${aButtonTheme()}
-    padding: 15px 2.125em;
-    font-size: 16px;
-
-    &--block {
-      display: block;
-      text-align: center;
-    }
-
-    &--educator {
-      ${aButtonTheme("educator")}
-    }
-
-    &--inert:hover {
-      outline: none;
-    }
-  }
-`;
-
-export default GlobalStyles;
diff --git a/theme/styles/mixins/appearance.js b/theme/styles/mixins/appearance.js
@@ -39,8 +39,8 @@ export const aButtonTheme = (style) => {
   switch (style) {
     case "secondary":
       return css`
-        --button-background-color: var(--purple);
-        --button-border-color: var(--purple);
+        --button-background-color: var(--color-rubin-purple-300, #583671);
+        --button-border-color: var(--color-rubin-purple-300, #583671);
         --button-color: var(--white);
       `;