Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

v7 - Remove su- prefix; update sans and serif fonts; add variant group-hocus-within: #918

Merged
merged 6 commits into from
Jul 11, 2023
Merged

v7 - Remove su- prefix; update sans and serif fonts; add variant group-hocus-within: #918

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
6da05e3
Update TW and other packages
yvonnetangsu Jul 11, 2023
a05d208
Remove su- prefix; add group-hocus-within variant
yvonnetangsu Jul 11, 2023
85fc0ab
Update readme
yvonnetangsu Jul 11, 2023
1cf3374
Update fontFamily in theme to include source serif 4 and source sans …
yvonnetangsu Jul 11, 2023
0004524
Update the doc for the font names
yvonnetangsu Jul 11, 2023
9dd8571
Update font import in index.css
yvonnetangsu Jul 11, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
6 changes: 3 additions & 3 deletions README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,18 +13,18 @@ To see a live demo of Decanter v7 please [view the v7 styleguide](https://decant
Decanter is a web design and development system for Stanford University.
It includes a responsive layout system and a browsable collection of design patterns
that can be used in any Stanford project.
For Decanter v7, instead of using SASS/SCSS with the BEM naming convention, we use [TailwindCSS](https://tailwindcss.com/) to generate utility classes with some customization needed for our Stanford design system.
For Decanter v7, instead of using SASS/SCSS with the BEM naming convention, we use [Tailwind CSS](https://tailwindcss.com/) to generate utility classes with some customization needed for our Stanford design system.

## Assets
We have removed all assets from the repo in Decanter 7. Instead, we are using remote third party resources for our fonts and icons.
We have removed all assets from the repo in Decanter v7. Instead, we are using remote third party resources for our fonts and icons.

### Fonts
- For Source Sans Pro, Source Serif Pro, Roboto Slab, Roboto Mono - we include them using the `@import` method from [Google Fonts](https://fonts.google.com/).
- For the Stanford ligature font that we use for the logo, we link them from the [University Communications media CDN](https://www-media.stanford.edu/assets/fonts/stanford.woff).

### Icons
- We have removed FontAwesome (dependency and asset) completely from Decanter v7. For those who would like to continue using FontAwesome, please feel free to do so and include them using methods that are suitable for your own projects.
- We recommend using the [react-hero-icon](https://www.npmjs.com/package/react-hero-icon) package as [Hero Icons](https://heroicons.com/) are created by the TailwindCSS team and are open source. They can be included as SVG or JSX elements.
- We recommend using the [heroicons](https://github.com/tailwindlabs/heroicons) package as [Hero Icons](https://heroicons.com/) are created by the Tailwind CSS team and are open source. They can be included as SVG or JSX elements.


## Accessibility
Expand Down
5 changes: 2 additions & 3 deletions fonts.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,8 +1,7 @@
@charset "UTF-8";

/** Source Sans Pro, Source Serif Pro, Roboto Slab, Roboto Mono (regular only) */
@import url('https://fonts.googleapis.com/css2?family=Roboto+Mono&family=Roboto+Slab:wght@300;400;700&family=Source+Sans+Pro:ital,wght@0,300;0,400;0,600;0,700;1,300;1,400;1,600;1,700&family=Source+Serif+Pro:ital,wght@0,300;0,400;0,600;0,700;1,300;1,400;1,600;1,700&display=swap');

/** Source Sans 3, Source Serif 4, Roboto Slab, Roboto Mono (regular only) */
@import url('https://fonts.googleapis.com/css2?family=Roboto+Mono&family=Roboto+Slab:wght@300;400;700&family=Source+Sans+3:ital,wght@0,400;0,600;0,700;1,400;1,600;1,700&family=Source+Serif+4:ital,wght@0,400;0,600;0,700;1,400;1,600;1,700&display=swap');
Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

These font imports are only used for the preview site here; I replaced our sans and serif fonts, plus got rid of the 300 font weight since we never use them in the preview and won't (we don't even use that for our projects even).

Copy link
Member

@sherakama sherakama Jul 11, 2023 •
edited

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

https://github.com/SU-SWS/saa_alumni/blob/dev/src/styles/global.css#L1

We totally can and do use the fonts.css file in projects

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@sherakama You're right we need to update the font import in the index.css file. I only updated it here in this font.css file 😬 Good catch.

@font-face {
font-family: "Stanford";
src: url("https://www-media.stanford.edu/assets/fonts/stanford.woff") format("woff"), url("https://www-media.stanford.edu/assets/fonts/stanford.ttf") format("truetype");
Expand Down