-
Notifications
You must be signed in to change notification settings - Fork 13
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
feat: vanilla-extract style system (#97)
* chore: add semantic colors, typography * chore: co-locate & flatten tokens * chore: swap sprinkles for rainbow-sprinkles * chore: create initial sprinkles file * fix: remove token prefix, update base theme * feat: add additional sprinkles properties * chore: migrate resources tab to sprinkles * chore: add missing deps, pin deps * chore: fix lint errors
- Loading branch information
1 parent
8e04a60
commit 4aa3bb8
Showing
14 changed files
with
1,250 additions
and
624 deletions.
There are no files selected for viewing
Large diffs are not rendered by default.
Oops, something went wrong.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,191 @@ | ||
| import { sprinkles } from '../../design/sprinkles.css.ts'; | ||
|
|
||
| const container = sprinkles({ | ||
| display: 'flex', | ||
| flexDirection: 'column', | ||
| maxWidth: '800px', | ||
| padding: '5px', | ||
| placeContent: 'center', | ||
| }); | ||
|
|
||
| const topic = sprinkles({ | ||
| fontSize: 'calc(1.25rem + 1.25vw)', | ||
| alignSelf: 'center', | ||
| fontWeight: 500, | ||
| }); | ||
|
|
||
| const section = sprinkles({ | ||
| padding: '20px', | ||
| borderRadius: '$4', | ||
| shadowColor: '$black', | ||
| }); | ||
|
|
||
| const sectionH2 = sprinkles({ | ||
| fontSize: '$8', | ||
| paddingBottom: '$2', | ||
| color: '$twd-blue-400', | ||
| borderBottomStyle: 'solid', | ||
| borderColor: '$twd-blue-700', | ||
| borderWidth: '$0', | ||
| borderBottomWidth: '$0.5', | ||
| }); | ||
|
|
||
| const sectionH3 = sprinkles({ | ||
| fontSize: '$6', | ||
| paddingBottom: '$2', | ||
| color: '$twd-blue-400', | ||
| }); | ||
|
|
||
| const sectionFooter = sprinkles({ | ||
| fontSize: '$7', | ||
| paddingX: '$2', | ||
| fontWeight: 600, | ||
| textAlign: 'center', | ||
| }); | ||
|
|
||
| const sectionFooterHover = sprinkles({ | ||
| textDecoration: 'underline', | ||
| }); | ||
|
|
||
| const emphasis = sprinkles({ | ||
| fontWeight: 700, | ||
| textDecoration: 'underline', | ||
| }); | ||
|
|
||
| const list = sprinkles({ | ||
| paddingLeft: '$4', | ||
| }); | ||
|
|
||
| const tip = sprinkles({ | ||
| display: 'flex', | ||
| backgroundColor: '$twd-blue-700', | ||
| opacity: 0.8, | ||
| padding: '$2', | ||
| borderRadius: '$4', | ||
| }); | ||
|
|
||
| const tipText = sprinkles({ | ||
| fontStyle: 'italic', | ||
| flexGrow: 1, | ||
| textAlign: 'center', | ||
| }); | ||
|
|
||
| const link = sprinkles({ | ||
| color: '$twd-blue-400', | ||
| textDecoration: 'underline', | ||
| }); | ||
|
|
||
| const twoColumnOuter = sprinkles({ | ||
| display: 'flex', | ||
| flexDirection: 'row', | ||
| placeItems: 'space-around', | ||
| }); | ||
|
|
||
| const twoColumnSide = sprinkles({ | ||
| flex: '$1', | ||
| maxWidth: '100%', | ||
| }); | ||
|
|
||
| export { | ||
| container, | ||
| topic, | ||
| section, | ||
| sectionH2, | ||
| sectionH3, | ||
| sectionFooter, | ||
| sectionFooterHover, | ||
| emphasis, | ||
| list, | ||
| tip, | ||
| tipText, | ||
| link, | ||
| twoColumnOuter, | ||
| twoColumnSide, | ||
| }; | ||
| // .container { | ||
| // max-width: 800px; | ||
| // margin: auto; | ||
| // padding: 5px; | ||
| // } | ||
|
|
||
| // .topic { | ||
| // font-size: calc(1.25rem + 1.25vw); | ||
| // align-self: center; | ||
| // font-weight: 500; | ||
| // } | ||
|
|
||
| // .section { | ||
| // margin: 20px 0; | ||
| // padding: 20px; | ||
| // border-radius: 8px; | ||
| // box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2); | ||
| // } | ||
|
|
||
| // .section_h2 { | ||
| // font-size: 22px; | ||
| // padding-bottom: 5px; | ||
| // color: rgb(var(--accent-light)); | ||
| // border-bottom: solid; | ||
| // border-color: rgb(var(--accent-dark)); | ||
| // } | ||
|
|
||
| // .section_h3 { | ||
| // font-size: 18px; | ||
| // padding-bottom: 5px; | ||
| // color: rgb(var(--accent-light)); | ||
| // } | ||
|
|
||
| // .section_footer { | ||
| // font-size: 20px; | ||
| // padding-block: 10px; | ||
| // font-weight: 600; | ||
| // text-align: center; | ||
| // } | ||
|
|
||
| // .section_footer:hover { | ||
| // text-decoration-line: underline; | ||
| // } | ||
|
|
||
| // .emphasis { | ||
| // font-weight: 700; | ||
| // text-decoration: underline; | ||
| // } | ||
|
|
||
| // .list { | ||
| // padding-inline-start: 20px; | ||
| // } | ||
|
|
||
| // .list_item::before { | ||
| // content: '☞'; | ||
| // margin-right: 5px; | ||
| // } | ||
|
|
||
| // .tip { | ||
| // display: flex; | ||
| // background-color: rgb(var(--accent-dark)); | ||
| // opacity: 0.8; | ||
| // padding: 10px; | ||
| // border-radius: 8px; | ||
| // } | ||
|
|
||
| // .tip_text { | ||
| // font-style: italic; | ||
| // flex-grow: 1; | ||
| // text-align: center; | ||
| // } | ||
|
|
||
| // .tip::before { | ||
| // content: '💡'; | ||
| // margin-right: 5px; | ||
| // } | ||
|
|
||
| // .link { | ||
| // color: rgb(var(--accent-light)); | ||
| // text-decoration: underline; | ||
| // } | ||
|
|
||
| // .two_column_grid { | ||
| // display: grid; | ||
| // grid-template-columns: 1fr 1fr; | ||
| // gap: 20px; | ||
| // } |
This file was deleted.
Oops, something went wrong.
Oops, something went wrong.