diff --git a/.eslintignore b/.eslintignore
index 61967d553..eb0660506 100644
--- a/.eslintignore
+++ b/.eslintignore
@@ -8,4 +8,3 @@ static
cypress-coverage
vitest-coverage
.storybook-dist
-common/styles/themeMap.js
diff --git a/.lintstagedrc b/.lintstagedrc
index 938f9a8ba..49717b314 100644
--- a/.lintstagedrc
+++ b/.lintstagedrc
@@ -1,4 +1,4 @@
{
"*.{js,jsx,ts,tsx}": ["prettier --write", "eslint --fix"],
- "*.css": ["prettier --write", "stylelint --fix"]
+ "*.css": ["prettier --write"]
}
diff --git a/.prettierignore b/.prettierignore
index 85840f81b..3cf1bebf2 100644
--- a/.prettierignore
+++ b/.prettierignore
@@ -10,7 +10,6 @@ static
cypress-coverage
vitest-coverage
.storybook-dist
-common/styles/themeMap.js
**/*.snap
**/*.mp4
**/*.png
diff --git a/.storybook/backgrounds.js b/.storybook/backgrounds.js
deleted file mode 100644
index 153e36314..000000000
--- a/.storybook/backgrounds.js
+++ /dev/null
@@ -1,9 +0,0 @@
-import { brandColorsObject } from 'common/styles/styleExports';
-import { capitalizeFirstLetter } from 'common/utils/string-utils';
-
-const backgroundsPaletteArray = Object.keys(brandColorsObject).map(name => ({
- name: capitalizeFirstLetter(name),
- value: brandColorsObject[name],
-}));
-
-export default backgroundsPaletteArray;
diff --git a/.storybook/preview-head.html b/.storybook/preview-head.html
index 663c8841e..683f6688c 100644
--- a/.storybook/preview-head.html
+++ b/.storybook/preview-head.html
@@ -1,20 +1,2 @@
-
-
+
diff --git a/.storybook/preview.js b/.storybook/preview.js
index d3e5f9115..a9f4bed49 100644
--- a/.storybook/preview.js
+++ b/.storybook/preview.js
@@ -1,4 +1,3 @@
-import backgroundsPalleteArray from './backgrounds';
import 'common/styles/globals.css';
import * as viewports from '@storybook/addon-viewport';
@@ -13,10 +12,6 @@ export const decorators = [
const preview = {
parameters: {
actions: { argTypesRegex: '^on[A-Z].*' },
- backgrounds: {
- values: backgroundsPalleteArray,
- default: 'White',
- },
viewport: {
viewports: {
...viewports.MINIMAL_VIEWPORTS,
diff --git a/.stylelintrc b/.stylelintrc
deleted file mode 100644
index d2798323d..000000000
--- a/.stylelintrc
+++ /dev/null
@@ -1,26 +0,0 @@
-{
- "extends": ["stylelint-config-standard", "stylelint-prettier/recommended"],
- "plugins": ["stylelint-prettier"],
- "ignoreFiles": [
- "**/*.js",
- "coverage/**/*",
- "cypress-coverage/**/*",
- "vitest-coverage/**/*",
- "node_modules/**/*"
- ],
- "rules": {
- "prettier/prettier": true,
- "alpha-value-notation": null,
- "color-hex-length": "long",
- "custom-property-pattern": null,
- "hue-degree-notation": null,
- "keyframes-name-pattern": null,
- "color-function-notation": "legacy",
- "no-duplicate-selectors": true,
- "property-no-unknown": [true, { "ignoreProperties": ["composes", "composes-with"] }],
- "selector-id-pattern": null,
- "selector-class-pattern": null,
- "selector-pseudo-class-no-unknown": [true, { "ignorePseudoClasses": ["global"] }],
- "shorthand-property-no-redundant-values": null
- }
-}
diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md
index f53be6d6c..9706f3954 100644
--- a/CONTRIBUTING.md
+++ b/CONTRIBUTING.md
@@ -30,8 +30,6 @@ Being an open source project involving contributors of varying levels of experie
- [What Is The Front-End?](#what-is-the-front-end)
- [What Is The Back-End?](#what-is-the-back-end)
- [What is REST? What is an API?](#what-is-rest-what-is-an-api)
-- [Technologies](#technologies)
- - [PostCSS](#postcss)
- [Development Workflow](#development-workflow)
- [Installing Dependencies](#installing-dependencies)
- [Run The Development Server](#run-the-development-server)
@@ -90,102 +88,6 @@ The back-end is responsible for providing data for the front-end to display. Thi
[What is an API?](https://medium.freecodecamp.org/what-is-an-api-in-english-please-b880a3214a82)
-## Technologies
-
-Here is an alphabetically-sorted list of technologies this project leverages:
-
-- [Babel](https://babeljs.io/) - JavaScript compiler to unify all the different versions of JS that may have been used or will be used in the future. [Here's a blog post from Scotch.io on why JavaScript utilizes "transpiling" with Babel](https://scotch.io/tutorials/javascript-transpilers-what-they-are-why-we-need-them).
-- [CSS Modules](https://github.com/css-modules/css-modules) - CSS Modules allow us to encapsulate CSS within components. Instead of HTML/CSS - our project structure is basically JSX/CSS.
-- [Cypress](https://cypress.io/) - Hand-picked resources [here](https://github.com/OperationCode/front-end/tree/main/cypress/README.md).
-- [Jest](https://jestjs.io/) - A JavaScript testing framework from Facebook. We use it for all of our unit and some of our integration/regression tests.
-- [Next.js](https://nextjs.org/) - Next is a framework for creating ["server-side rendered"](https://medium.freecodecamp.org/demystifying-reacts-server-side-render-de335d408fe4) React applications with a lot of performance and [search engine optimizations](https://searchengineland.com/guide/what-is-seo) out-of-the-box.
-- [Node.js](https://www.nodejs.org/) - Node.js is a JavaScript runtime built on Chrome's V8 JavaScript engine. React utilizes a tiny Node/Express server for it's development environment.
-- [PostCSS](#PostCSS) - Extensive documentation listed below...
-- [React.js](https://facebook.github.io/react/) - Facebook's popular JavaScript front-end framework.
-- [Storybook](https://storybook.js.org) - Storybook acts as a "component workbench" and source for component documentation. You can learn more about Storybook on your own [here](https://www.learnstorybook.com/). You can see our Storybook here: [](http://storybook.operationcode.org)
-- [Webpack](https://webpack.js.org/) - The premier module bundler for JavaScript. Read [this article](https://survivejs.com/webpack/what-is-webpack/) for more information.
-- [pnpm](https://pnpm.io/) - Fast, disk space efficient package manager that uses a content-addressable storage system.
-
-### PostCSS
-
-In our repo, we use PostCSS plug-ins to help simplify how we write our CSS. PostCSS is included in our webpack configuration, so there are no additional steps necessary to leverage these plug-ins.
-
-#### What is PostCSS?
-
-"PostCSS is a tool for transforming styles with JS plugins. These plugins can lint your CSS, support variables and mixins, transpile future CSS syntax, inline images, and more." - [PostCSS Repo](https://github.com/postcss/postcss)
-
-#### PostCSS Plug-ins in Use
-
-- [Autoprefixer](https://github.com/postcss/autoprefixer): used to parse vendor prefixes for certain CSS property values
- ([What is a vendor prefix?](https://developer.mozilla.org/en-US/docs/Glossary/Vendor_Prefix)). In our repo, you will not have to include vendor prefixes when you create a non-standard CSS selector.
-
-**Example:**
-During development, we would write:
-
-```
-.someClass {
- disply: flex;
-}
-```
-
-Which will output the following once compiled:
-
-```
-.someClass {
- display: -webkit-box;
- display: -ms-flexbox;
- display: flex;
-}
-```
-
-- [PostCSS Media Variables](https://github.com/WolfgangKluge/postcss-media-variables): This plugin allows us to set 'default' breakpoints, and manipulate those values as needed without changing the defaults. Our defaults are defined in `common/styles/variables.css`
-
-**Example:**
-During development, we would write:
-
-```
-:root {
- --largeViewportWidth: 992px;
-}
-@media (min-width: var(--largeViewportWidth)) {}
-```
-
-Which will output the following when deployed:
-
-```
-@media (min-width: 992px){}
-```
-
-- [PostCSS CSS Variables](https://github.com/MadLittleMods/postcss-css-variables): This plug-in allows us to use [CSS3 variables](https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_variables) across older browsers. On run-time, this plug-in extracts and translates our custom variables into 'vanilla' CSS.
-
-**Example:**
-During development, we would write:
-
-```
-:root {
- --some-color: red;
- /*here we have defined the property `--some-color` as red*/
-}
-
-.foo {
- color: --some-color;
-/*the element with class selector `.foo` will be red */
-}
-
-```
-
-Which will output the following when deployed:
-
-```
-.foo {
- color: red;
-}
-```
-
-- [PostCSS Export Custom Variables](https://github.com/jonathantneal/postcss-export-custom-variables): We use this plug-in simply to export our collection of CSS variables to [common/styles/themeMap.js](https://github.com/OperationCode/front-end/blob/main/common/styles/themeMap.js) so that they're leveragable within any JavaScript context.
-
-- [PostCSS Import](https://github.com/postcss/postcss-import): This plug-in essentially tries to emulate the existing [CSS Import spec](https://developer.mozilla.org/en-US/docs/Web/CSS/@import) allowing for modularization and concatenation of CSS files.
-
## Development Workflow
### Installing Dependencies
@@ -248,9 +150,6 @@ You can see interactive documentation on all of our components via [![Storybook]
| ├── index.js # Landing page
| └── *.js # All the other pages
|
-├── scripts
-| └── createComponent
-|
├── static
| ├── fonts
| └── images
@@ -316,12 +215,6 @@ pnpm test $fileName
# Opens up a Cypress browser with which you can check e2e tests locally. Be sure the local dev server is running before this command!
pnpm test:e2e
-
-#Create all the necessary files/folders for a new, reusable component. Please make `ComponentName` TitleCase.
-pnpm create-component $ComponentName
-
-#Create a new page in the pages directory.
-pnpm create-page $pageName
```
## Mocking Back-end Server API
diff --git a/common/constants/navigation.ts b/common/constants/navigation.ts
index eef4dcf30..eb220d62a 100644
--- a/common/constants/navigation.ts
+++ b/common/constants/navigation.ts
@@ -101,7 +101,7 @@ const aboutUsGroup = {
const getInvolvedGroup = {
...getInvolved,
- sublinks: [chapters, sponsorship, merchStore, contact, donate],
+ sublinks: [chapters, sponsorship, merchStore, contact],
};
// MARK: Nav items
diff --git a/common/styles/breakpoints.js b/common/styles/breakpoints.js
deleted file mode 100644
index e473ec3ef..000000000
--- a/common/styles/breakpoints.js
+++ /dev/null
@@ -1,6 +0,0 @@
-import { breakpointsObject } from 'common/styles/styleExports';
-import { getBreakpoints } from 'common/utils/style-utils';
-
-const breakpoints = getBreakpoints(Object.values(breakpointsObject));
-
-export default breakpoints;
diff --git a/common/styles/globals.css b/common/styles/globals.css
index 15c83e473..34c0dcd2f 100644
--- a/common/styles/globals.css
+++ b/common/styles/globals.css
@@ -1,120 +1,53 @@
-/* Do not attempt to change values in themeMap - only change in ./variables.css */
-@import url('./variables.css');
-
-/* stylelint-disable at-rule-no-unknown */
-@tailwind base;
-@tailwind components;
-@tailwind utilities;
+@import 'tailwindcss' source('../../');
+
+@theme {
+ /* Colors for Tailwind utilities */
+ --color-white: #f7f7f7;
+ --color-primary: #3ed6f0;
+ --color-secondary: #252e3e;
+ --color-burnt-orange: hsl(14 55% 45%);
+ --color-theme-gray-800: #e2e2e2;
+ --color-error: hsl(355 70% 91%);
+ --color-error-deep: hsl(355 63% 34%);
+ --color-success: hsl(132 35% 88%);
+ --color-success-deep: hsl(132 60% 23%);
+ --color-warning: hsl(46 100% 90%);
+ --color-warning-deep: hsl(39 80% 31%);
+ --font-family-bebas: 'Bebas Neue', sans-serif;
+ --font-family-encode: 'Encode Sans', sans-serif;
+ --spacing-prose: 65ch;
+}
@layer base {
- :root {
- --primary-rgb: 62 214 240;
- --secondary-rgb: 37 46 62;
- --gray-rgb: 226 226 226;
- --white-rgb: 247 247 247;
- --burnt-orange-hsl: 14 55% 45%;
- --success-hsl: 132 35% 88%;
- --success-deep-hsl: 132 60% 23%;
- --warning-hsl: 46 100% 90%;
- --warning-deep-hsl: 39 80% 31%;
- --error-hsl: 355 70% 91%;
- --error-deep-hsl: 355 63% 34%;
+ html {
+ @apply font-family-encode size-full m-0 p-0 text-lg font-normal;
+ color: #47566b;
}
-}
-/* stylelint-enable at-rule-no-unknown */
-
-/* Global Styles */
-@font-face {
- font-family: 'DIN Condensed Bold';
- font-style: normal;
- font-weight: normal;
- font-display: auto;
- /* stylelint-disable-next-line at-rule-descriptor-no-unknown */
- -webkit-font-smoothing: antialiased;
- /* stylelint-disable-next-line at-rule-descriptor-no-unknown */
- -moz-osx-font-smoothing: grayscale;
-
- /* prettier-ignore */
- src:
- url("/static/fonts/DINCondensed-Bold.ttf") format("truetype"),
- url("/static/fonts/DINCondensed-Bold.woff2") format("woff2"),
- url("/static/fonts/DINCondensed-Bold.woff") format("woff");
-}
-
-html {
- width: 100%;
- height: 100%;
- margin: 0;
- padding: 0;
- font-family: var(--secondaryFontFamily), serif;
- font-size: 18px;
- font-weight: 400;
- color: #47566b;
-}
-
-body {
- hyphens: none;
- margin: 0;
- min-width: 300px;
-}
-
-h1,
-h2,
-h3,
-h4,
-h5,
-h6,
-button,
-nav,
-footer {
- font-family: var(--primaryFontFamily), sans-serif;
- text-transform: uppercase;
-}
-
-button,
-footer {
- letter-spacing: 2px;
-}
-
-footer {
- background-color: var(--secondary);
- color: var(--white);
-}
-
-h1,
-h2,
-h3,
-h4,
-h5,
-h6 {
- letter-spacing: 3px;
- margin: 0;
- padding: 0;
- text-wrap: initial;
- text-wrap: balance;
-}
-a {
- color: var(--burntOrange500);
- text-decoration: none;
-}
+ body {
+ @apply min-h-screen min-w-xs m-0 hyphens-none;
+ }
-nav a,
-footer a {
- color: currentcolor;
-}
+ h1,
+ h2,
+ h3,
+ h4,
+ h5,
+ h6 {
+ @apply font-family-bebas uppercase tracking-widest;
+ }
-a:hover {
- text-decoration: underline;
-}
+ footer {
+ @apply bg-secondary text-white;
+ }
-p {
- line-height: 1.75;
- max-width: var(--typicalMaxWidth);
-}
+ a {
+ @apply hover:underline;
+ }
-#root {
- min-height: 100%;
+ p {
+ @apply max-w-prose;
+ }
}
/* Custom font scaling formula https://blog.envylabs.com/responsive-typographic-scales-in-css-b9f60431d1c4 */
@@ -142,29 +75,6 @@ h6 {
font-size: 1.125rem;
}
-@media screen and (--large-viewport) {
- html {
- font-size: 16px !important;
- }
-}
-
-@media screen and (--small-viewport) {
- html {
- font-size: 14px !important;
- }
-}
-
-/* React Scroll Button styles */
-.ScrollUpButton {
- position: fixed;
- bottom: 50px;
- right: 30px;
- cursor: pointer;
- transition-duration: 0.2s;
- transition-timing-function: linear;
- transition-delay: 0s;
-}
-
code {
background-color: #f0f2f2;
border-radius: 4px;
diff --git a/common/styles/media-queries.css b/common/styles/media-queries.css
deleted file mode 100644
index 675ce3a0d..000000000
--- a/common/styles/media-queries.css
+++ /dev/null
@@ -1,9 +0,0 @@
-@custom-media --extra-small-viewport (max-width: 350px);
-
-/* NOTE: Any changes made to these values should also be reflected in `../variables.css` under "Breakpoint" */
-@custom-media --small-viewport (max-width: 576px);
-@custom-media --medium-viewport (max-width: 768px);
-@custom-media --large-viewport (max-width: 992px);
-@custom-media --extra-large-viewport (max-width: 1200px);
-@custom-media --mobile-viewport (--large-viewport);
-@custom-media --desktop-viewport (min-width: 992px);
diff --git a/common/styles/styleExports.ts b/common/styles/styleExports.ts
deleted file mode 100644
index 134c44934..000000000
--- a/common/styles/styleExports.ts
+++ /dev/null
@@ -1,33 +0,0 @@
-import { isHexColor } from 'common/utils/style-utils';
-import * as themeMap from './themeMap';
-
-const themeMapValues = Object.entries(themeMap);
-
-type StyleObjectType = Record {demoText} {demoText}
+
Sphinx of black quartz, judge my vow!
+
Sphinx of black quartz, judge my vow!
Primary
- Secondary
-
- Primary
-
-
- Secondary
-
-
- {Object.keys(fontsObject).map(item => {
- const fontStyle = {
- fontFamily: fontsObject[item],
- };
- return (
-
{fontsObject[item]}
-
+ {fonts.map(font => (
+
,
]}
/>
diff --git a/components/Branding/FontSection/__tests__/__snapshots__/FontSection.test.tsx.snap b/components/Branding/FontSection/__tests__/__snapshots__/FontSection.test.tsx.snap
index c40222ffc..cc0f28dea 100644
--- a/components/Branding/FontSection/__tests__/__snapshots__/FontSection.test.tsx.snap
+++ b/components/Branding/FontSection/__tests__/__snapshots__/FontSection.test.tsx.snap
@@ -5,52 +5,28 @@ exports[`FontSection > should render with required props 1`] = `
columns={
[
{font.name}
+
+
DIN Condensed Bold
-
+
Encode Sans
-
{/* - SMALL LOGOS - */}
Small Logos
@@ -50,10 +48,10 @@ function LogoSection() {
Code logo name still under 1 inch in height.
- Use the following medals when you are prompted to upload a thumbnail logo only or - profile photo. In most cases, use the OC Blue Medal. The Red Medal should only be - used for holidays and special events (such as Thanksgiving, fall, or Christmas). - The Navy Medal should be used memorandums or lighter bright colored backgrounds. +
+ Use the following images when you are prompted to upload a thumbnail logo only or + profile photo. In most cases, use the OC Blue option. The Red option should only + be used for holidays and special events (such as Thanksgiving, fall, or + Christmas). The Navy option should be used memorandums or lighter bright colored + backgrounds. +
++ You may also use them as a profile photo or thumbnail. They should be used to + accompany corporate sponsors or alliance partnerships on shared branding. Use the + original OC Blue option in most cases, except the Red option for special events + and holidays (Thanksgiving, fall and Christmas). The Navy option may be used with + light backgrounds and bright colored backgrounds.
-- You may also use badges as a profile photo or thumbnail. Badges should be used to - accompany corporate sponsors or alliance partnerships on shared branding. Use the - original OC Blue Badge in most cases, except the Red Badge for special events and - holidays (Thanksgiving, fall and Christmas). The Navy Badge may be used with light - backgrounds and bright colored backgrounds. -
-+ Use the following images when you are prompted to upload a thumbnail logo only or profile photo. In most cases, use the OC Blue option. The Red option should only be used for holidays and special events (such as Thanksgiving, fall, or Christmas). The Navy option should be used memorandums or lighter bright colored backgrounds. +
+- Use the following medals when you are prompted to upload a thumbnail logo only or profile photo. In most cases, use the OC Blue Medal. The Red Medal should only be used for holidays and special events (such as Thanksgiving, fall, or Christmas). The Navy Medal should be used memorandums or lighter bright colored backgrounds. + You may also use them as a profile photo or thumbnail. They should be used to accompany corporate sponsors or alliance partnerships on shared branding. Use the original OC Blue option in most cases, except the Red option for special events and holidays (Thanksgiving, fall and Christmas). The Navy option may be used with light backgrounds and bright colored backgrounds.
- You may also use badges as a profile photo or thumbnail. Badges should be used to accompany corporate sponsors or alliance partnerships on shared branding. Use the original OC Blue Badge in most cases, except the Red Badge for special events and holidays (Thanksgiving, fall and Christmas). The Navy Badge may be used with light backgrounds and bright colored backgrounds. -
-