From b2bc0ad50a59f3e225b0e07ac3f5852617577488 Mon Sep 17 00:00:00 2001 From: Alexandra Goff Date: Mon, 25 Nov 2024 11:07:30 -0700 Subject: [PATCH] refactor: use library global styles --- app/[locale]/layout.tsx | 2 +- app/not-found.tsx | 2 +- theme/styles/globalStyles.js | 260 +++++------------------------- theme/styles/mixins/appearance.js | 4 +- 4 files changed, 43 insertions(+), 225 deletions(-) diff --git a/app/[locale]/layout.tsx b/app/[locale]/layout.tsx index 9234b75f..bec944b8 100644 --- 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 index 06c3bf07..5babd76f 100644 --- 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 index 80d6433c..4d3d392a 100644 --- 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 index 8584036d..991a4b89 100644 --- 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); `;