From 26a2852580996c89d6e06401083be726ff40a3c8 Mon Sep 17 00:00:00 2001 From: Maxime De Greve Date: Wed, 1 May 2024 15:52:54 +0100 Subject: [PATCH 1/2] Kickoff --- package.json | 4 +- src/App.js | 3 ++ src/Playground.js | 82 +++++++++++++++------------------------ src/Playground.module.css | 68 ++++++++++++++++++++++++++++++++ src/base.css | 26 +++++++++++++ src/index.js | 1 - src/reset.css | 6 --- yarn.lock | 23 ++++++----- 8 files changed, 145 insertions(+), 68 deletions(-) create mode 100644 src/Playground.module.css create mode 100644 src/base.css delete mode 100644 src/reset.css 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..da5f7c6 100644 --- a/src/Playground.js +++ b/src/Playground.js @@ -6,96 +6,78 @@ 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 - - +
    • +
- +
) } function CodeLine({ icon, iconColor, children }) { return ( - - - - - - {children} - - +
  • +
    + +
    +
    {children}
    +
    • ) } function Footer() { return ( - - +
    +
    - Tip - + Tip +
    Before you get started check out our{' '} - + Primer React Documentation - +
    ) } diff --git a/src/Playground.module.css b/src/Playground.module.css new file mode 100644 index 0000000..16e04ff --- /dev/null +++ b/src/Playground.module.css @@ -0,0 +1,68 @@ +/* + 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-neutral-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); +} + +.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" From d52bb42be345af98c670439bf9c78ae4332246bd Mon Sep 17 00:00:00 2001 From: Maxime De Greve Date: Sun, 5 May 2024 08:56:35 +0100 Subject: [PATCH 2/2] Cleanup --- src/Playground.js | 59 ++++++++++++++++++++++----------------- src/Playground.module.css | 6 +++- 2 files changed, 38 insertions(+), 27 deletions(-) diff --git a/src/Playground.js b/src/Playground.js index da5f7c6..0ad5854 100644 --- a/src/Playground.js +++ b/src/Playground.js @@ -20,30 +20,37 @@ function Playground() { return (
    - -
      - - Mona's playground successfully initialised... - - - Visit src/Playground.js{' '} - and start building your own layouts using Primer. - -
    • - Loading animation -
      • -
    +
    + +
    +
    +
      + + Mona's playground successfully initialised... + + + Visit{' '} + + src/Playground.js + {' '} + and start building your own layouts using Primer. + +
    • + Loading animation +
      • +
    +
    ) @@ -71,12 +78,12 @@ function Footer() { /> Tip - + Before you get started check out our{' '} Primer React Documentation - + ) } diff --git a/src/Playground.module.css b/src/Playground.module.css index 16e04ff..856337a 100644 --- a/src/Playground.module.css +++ b/src/Playground.module.css @@ -20,7 +20,7 @@ max-width: 600px; width: 100%; height: 300px; - background: var(--bgColor-neutral-emphasis); + background: var(--bgColor-emphasis); border-radius: var(--borderRadius-medium); padding: var(--base-size-20); margin-top: var(--base-size-28); @@ -53,6 +53,10 @@ margin-top: var(--base-size-8); } +.fileName { + color: var(--fgColor-attention); +} + .footer { text-align: center; }