diff --git a/package.json b/package.json index 8f195c8..c00ba09 100644 --- a/package.json +++ b/package.json @@ -7,8 +7,8 @@ "@babel/plugin-syntax-flow": "^7.24.1", "@babel/plugin-transform-react-jsx": "^7.23.4", "@primer/octicons-react": "^19.8.0", - "@primer/primitives": "^7.17.0", - "@primer/react": "^36.13.0", + "@primer/primitives": "^8.1.0", + "@primer/react": "^36.16.0", "eslint": "^8.57.0", "react": "^18.2.0", "react-dom": "^18.2.0", diff --git a/src/App.js b/src/App.js index 3731c48..d4cfd91 100644 --- a/src/App.js +++ b/src/App.js @@ -2,6 +2,9 @@ import { ThemeProvider, BaseStyles } from '@primer/react' import Playground from './Playground' import ColorModeSwitcher from './ColorModeSwitcher' + +import './base.css' + function App() { return ( diff --git a/src/Playground.js b/src/Playground.js index aa7638b..0ad5854 100644 --- a/src/Playground.js +++ b/src/Playground.js @@ -6,96 +6,85 @@ import { MortarBoardIcon, } from '@primer/octicons-react' +import styles from './Playground.module.css' + import MonaLoadingImage from './images/mona-loading.gif' function Playground() { /* WELCOME TO MONA's 😽🐙 PLAYGROUND Delete everything in here or play with the existing Mona playground code to get familiar with Primer React. - Documentation: https://primer.style/react - Documentation colors: https://primer.style/primitives/colors + You can style the elements through the `Playground.module.css` file. + Documentation: https://primer.style/guides/react */ return ( - - - - - Mona's playground successfully initialised... - - - Visit src/Playground.js{' '} - and start building your own layouts using Primer. - - - mona - - +
+
+ +
+
+
    + + Mona's playground successfully initialised... + + + Visit{' '} + + src/Playground.js + {' '} + and start building your own layouts using Primer. + +
  • + Loading animation +
    • +
+
- +
) } function CodeLine({ icon, iconColor, children }) { return ( - - - - - - {children} - - +
  • +
    + +
    +
    {children}
    +
    • ) } function Footer() { return ( - - + ) } diff --git a/src/Playground.module.css b/src/Playground.module.css new file mode 100644 index 0000000..856337a --- /dev/null +++ b/src/Playground.module.css @@ -0,0 +1,72 @@ +/* + WELCOME TO MONA's CSS 😽🐙 PLAYGROUND + This CSS file is used to styled the divs in your playground. + We use var() to access the CSS variables defined in the theme. + Find all the vars here: https://primer.style/primitives/storybook/ + */ + +.page { + background: var(--bgColor-default); + width: 100%; + min-height: 100vh; + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + padding: var(--base-size-16); +} + +.terminal { + max-width: 600px; + width: 100%; + height: 300px; + background: var(--bgColor-emphasis); + border-radius: var(--borderRadius-medium); + padding: var(--base-size-20); + margin-top: var(--base-size-28); + margin-bottom: var(--base-size-28); +} + +.codeline { + display: flex; + color: var(--fgColor-onEmphasis); + margin-bottom: var(--base-size-8); +} + +.codelineIcon { + display: flex; + margin-top: 2px; + width: 20px; + min-width: 20px; +} + +.codelineText { + flex: 1; + font-size: var(--text-body-size-medium); + font-family: var(--fontStack-monospace); + margin-left: var(--base-size-8); +} + +.loader { + display: inline-block; + margin-left: var(--base-size-12); + margin-top: var(--base-size-8); +} + +.fileName { + color: var(--fgColor-attention); +} + +.footer { + text-align: center; +} + +.tip { + margin-right: var(--base-size-12); + color: var(--fgColor-attention); + display: inline-block; +} + +.tipIcon { + margin-right: var(--base-size-8); +} diff --git a/src/base.css b/src/base.css new file mode 100644 index 0000000..e1a401c --- /dev/null +++ b/src/base.css @@ -0,0 +1,26 @@ +/* size/typography */ +@import '@primer/primitives/dist/css/base/size/size.css'; +@import '@primer/primitives/dist/css/base/typography/typography.css'; +@import '@primer/primitives/dist/css/functional/size/border.css'; +@import '@primer/primitives/dist/css/functional/size/breakpoints.css'; +@import '@primer/primitives/dist/css/functional/size/size-coarse.css'; +@import '@primer/primitives/dist/css/functional/size/size-fine.css'; +@import '@primer/primitives/dist/css/functional/size/size.css'; +@import '@primer/primitives/dist/css/functional/size/viewport.css'; +@import '@primer/primitives/dist/css/functional/typography/typography.css'; + +/* color */ +@import '@primer/primitives/dist/css/functional/themes/light.css'; +@import '@primer/primitives/dist/css/functional/themes/light-tritanopia.css'; +@import '@primer/primitives/dist/css/functional/themes/light-high-contrast.css'; +@import '@primer/primitives/dist/css/functional/themes/light-colorblind.css'; +@import '@primer/primitives/dist/css/functional/themes/dark.css'; +@import '@primer/primitives/dist/css/functional/themes/dark-colorblind.css'; +@import '@primer/primitives/dist/css/functional/themes/dark-dimmed.css'; +@import '@primer/primitives/dist/css/functional/themes/dark-high-contrast.css'; +@import '@primer/primitives/dist/css/functional/themes/dark-tritanopia.css'; + +* { + margin: 0; + padding: 0; +} diff --git a/src/index.js b/src/index.js index 4a3e896..a985d77 100644 --- a/src/index.js +++ b/src/index.js @@ -2,7 +2,6 @@ import { StrictMode } from 'react' import { createRoot } from 'react-dom/client' import App from './App' -import './reset.css' const rootElement = document.getElementById('root') const root = createRoot(rootElement) diff --git a/src/reset.css b/src/reset.css deleted file mode 100644 index e6e30bc..0000000 --- a/src/reset.css +++ /dev/null @@ -1,6 +0,0 @@ -@import-normalize; /* bring in normalize.css styles */ - -* { - margin: 0; - padding: 0; -} diff --git a/yarn.lock b/yarn.lock index 2834d6e..3b58a1c 100644 --- a/yarn.lock +++ b/yarn.lock @@ -1730,15 +1730,20 @@ resolved "https://registry.yarnpkg.com/@primer/octicons-react/-/octicons-react-19.9.0.tgz#eb90a9b47da924c0ab33055d050e6ea21104d219" integrity sha512-Uk4XrHyfylyfzZN9d8VFjF8FpfYHEyT4sabw+9+oP+GWAJHhPvNPTz6gXvUzJZmoblAvgcTrDslIPjz8zMh76w== -"@primer/primitives@^7.15.14", "@primer/primitives@^7.17.0": - version "7.17.0" - resolved "https://registry.yarnpkg.com/@primer/primitives/-/primitives-7.17.0.tgz#a9d08acd545c885e647e54ffe45dbdb4f424d324" - integrity sha512-IlfBmMElmUbnQ4LIXSD2QLkty7akaNNQim9ofOjlE+LiVCwvxOuMEyZXVi9bm3hWLDszKyJ5mDLHKRuiY1/P+w== +"@primer/primitives@^7.16.0": + version "7.17.1" + resolved "https://registry.yarnpkg.com/@primer/primitives/-/primitives-7.17.1.tgz#05eefa91d2a05608104a006288a3478d97104a67" + integrity sha512-SiPzEb+up1nDpV2NGwNiY8m6sGnF3OUqRb0has5s6T40vq6Li/g3cYVgl+oolEa4DUoNygEPs09jwJt24f/3zg== -"@primer/react@^36.13.0": - version "36.13.0" - resolved "https://registry.yarnpkg.com/@primer/react/-/react-36.13.0.tgz#168c2f982df195999be367763de74582f22bfec1" - integrity sha512-SBpqU+jTTGF2ezOKjA9R+7+zlxYlaO/VgchMzSBlXT5DooGM0/FD+t/njTavyl4KNrZyFkVU1Q/SrsiYQTmmVg== +"@primer/primitives@^8.1.0": + version "8.1.0" + resolved "https://registry.yarnpkg.com/@primer/primitives/-/primitives-8.1.0.tgz#b0fddc88ff132432095fa7ed755d5bfeffead881" + integrity sha512-WixqDhIJHmQJD82JMmSwM9/LGkrA3HxNUgkkm4xubUY68il2ny7xYw5Jk8W2MwjTOyHHQ3hg9JaNV+BqVJ7N5A== + +"@primer/react@^36.16.0": + version "36.16.0" + resolved "https://registry.yarnpkg.com/@primer/react/-/react-36.16.0.tgz#e20a801f15351f57f7bf694d251200c6edbf76db" + integrity sha512-B4ZeuLUKPYBnKTQ40K6yk4MB+mKe4YVqgdGDgmVH1hAnvw9AhuLeUOounc7tXccUwhthJ+pHVJMsSV/YCxo3eA== dependencies: "@github/combobox-nav" "^2.1.5" "@github/markdown-toolbar-element" "^2.1.0" @@ -1750,7 +1755,7 @@ "@primer/behaviors" "^1.5.1" "@primer/live-region-element" "^0.2.0" "@primer/octicons-react" "^19.9.0" - "@primer/primitives" "^7.15.14" + "@primer/primitives" "^7.16.0" "@styled-system/css" "^5.1.5" "@styled-system/props" "^5.1.5" "@styled-system/theme-get" "^5.1.2"