diff --git a/.gitignore b/.gitignore index 65ec875b..94a0fe7a 100644 --- a/.gitignore +++ b/.gitignore @@ -1,14 +1,15 @@ *.log *.tgz .DS_Store -.changelog +.cache/ +.changelog/ .next/ .sass-cache -.stylelintcache .storybuild/ +.stylelintcache _site dist/ +docs/dist node_modules/ -searchIndex.js -.cache/ public/ +searchIndex.js diff --git a/.nowignore b/.nowignore new file mode 100644 index 00000000..a6df94c6 --- /dev/null +++ b/.nowignore @@ -0,0 +1,5 @@ +.*.sw? +.changelog/ +dist/ +docs/dist +docs/public/ diff --git a/CHANGELOG.md b/CHANGELOG.md index 02811610..d10a4294 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,26 +1,46 @@ +### :rocket: Enhancements +- [#994](https://github.com/primer/css/pull/994) Responsive line-height utilities +- [#995](https://github.com/primer/css/pull/995) Add bold weight to marketing font variables + +### :bug: Bug fixes +- [#998](https://github.com/primer/css/pull/998) Use a gray background when hovering SelectMenu items + +### :memo: Documentation +- [#989](https://github.com/primer/css/pull/989) Add link to the Stylelint guide +- [#1000](https://github.com/primer/css/pull/1000) Update contributing guide for a general audience +- [#972](https://github.com/primer/css/pull/972) Variables page + +### :house: Internal +- [#997](https://github.com/primer/css/pull/997) Fix CHANGELOG links + +### Committers +- [@shawnbot](https://github.com/shawnbot) +- [@simurai](https://github.com/simurai) +- [@skullface](https://github.com/skullface) + ## 14.0.0 ### :boom: Breaking changes -- [#922](https://github.com/primer/css/922) More SelectMenu improvements -- [#966](https://github.com/primer/css/966) Rename `.flex-item-equal` to `.flex-1` -- [#973](https://github.com/primer/css/973) Deprecate variables in 14.0.0 +- [#922](https://github.com/primer/css/pull/922) More SelectMenu improvements +- [#966](https://github.com/primer/css/pull/966) Rename `.flex-item-equal` to `.flex-1` +- [#973](https://github.com/primer/css/pull/973) Deprecate variables in 14.0.0 ### :rocket: Enhancements -- [#987](https://github.com/primer/css/987) Add .position-sticky utility -- [#979](https://github.com/primer/css/979) Add `.radio-group` component -- [#981](https://github.com/primer/css/981) Autocomplete + Suggester components -- [#978](https://github.com/primer/css/978) Add `.css-truncate-overflow` -- [#974](https://github.com/primer/css/974) Add Animated Ellipsis -- [#971](https://github.com/primer/css/971) Add variable deprecation data and tests +- [#987](https://github.com/primer/css/pull/987) Add .position-sticky utility +- [#979](https://github.com/primer/css/pull/979) Add `.radio-group` component +- [#981](https://github.com/primer/css/pull/981) Autocomplete + Suggester components +- [#978](https://github.com/primer/css/pull/978) Add `.css-truncate-overflow` +- [#974](https://github.com/primer/css/pull/974) Add Animated Ellipsis +- [#971](https://github.com/primer/css/pull/971) Add variable deprecation data and tests ### :memo: Documentation -- [#988](https://github.com/primer/css/988) Add docs for flexbug no. 9 -- [#977](https://github.com/primer/css/977) Update spacing.md +- [#988](https://github.com/primer/css/pull/988) Add docs for flexbug no. 9 +- [#977](https://github.com/primer/css/pull/977) Update spacing.md ### :house: Internal -- [#952](https://github.com/primer/css/952) Async/awaitify script/dist.js -- [#963](https://github.com/primer/css/963) Generate changelog with semantic-release -- [#968](https://github.com/primer/css/968) Stylelint update +- [#952](https://github.com/primer/css/pull/952) Async/awaitify script/dist.js +- [#963](https://github.com/primer/css/pull/963) Generate changelog with semantic-release +- [#968](https://github.com/primer/css/pull/968) Stylelint update ### Committers - [@BinaryMuse](https://github.com/BinaryMuse) @@ -31,20 +51,20 @@ # 13.2.0 ### :rocket: Enhancements -- [#959](https://github.com/primer/css/959) More buttons -- [#950](https://github.com/primer/css/950) Add Diffstat component -- [#913](https://github.com/primer/css/913) Importing TimelineItem from .com and creating matching docs -- [#953](https://github.com/primer/css/953) Add IssueLabel component +- [#959](https://github.com/primer/css/pull/959) More buttons +- [#950](https://github.com/primer/css/pull/950) Add Diffstat component +- [#913](https://github.com/primer/css/pull/913) Importing TimelineItem from .com and creating matching docs +- [#953](https://github.com/primer/css/pull/953) Add IssueLabel component ### :bug: Bug fixes -- [#945](https://github.com/primer/css/945) Add `[role=tab][aria-selected=true]` to `.UnderlineNav-item.selected` +- [#945](https://github.com/primer/css/pull/945) Add `[role=tab][aria-selected=true]` to `.UnderlineNav-item.selected` ### :memo: Documentation -- [#939](https://github.com/primer/css/939) Fix `Box--overlay` example -- [#943](https://github.com/primer/css/943) Fix broken links to typography utilities +- [#939](https://github.com/primer/css/pull/939) Fix `Box--overlay` example +- [#943](https://github.com/primer/css/pull/943) Fix broken links to typography utilities ### :house: Internal -- [#946](https://github.com/primer/css/946) Add `TODO@version` stylelint rule (local) +- [#946](https://github.com/primer/css/pull/946) Add `TODO@version` stylelint rule (local) ### Committers - [@MohamedElidrissi](https://github.com/MohamedElidrissi) diff --git a/docs/.eslintrc.json b/docs/.eslintrc.json index cb1a8800..b9893185 100644 --- a/docs/.eslintrc.json +++ b/docs/.eslintrc.json @@ -13,5 +13,8 @@ "react": { "version": "detect" } + }, + "globals": { + "__DEV__": "readonly" } } diff --git a/docs/content/components/select-menu.md b/docs/content/components/select-menu.md index ec62e99d..a033a9a7 100644 --- a/docs/content/components/select-menu.md +++ b/docs/content/components/select-menu.md @@ -254,12 +254,48 @@ The Select Menu's list can be divided into multiple parts by adding a `.SelectMe
``` -## Additional filter and footer +## Footer + +Use a `.SelectMenu-footer` at the bottom for additional information. As a side effect it can greatly improve the scrolling performance because the list doesn't need to be repainted due to the rounded corners. + +```html live +
+ + Choose an item + +
+
+
+

Title

+ +
+
+ + + + + +
+ +
+
+
+ +
+
+``` + +## Filter If the list is expected to get long, consider adding a `.SelectMenu-filter` input. Be sure to also include the `.SelectMenu--hasFilter` modifier class. On mobile devices it will add a fixed height and anchor the Select Menu to the top of the screen. This makes sure the filter input stays at the same position while typing. -Also consider adding a `.SelectMenu-footer` at the bottom. It can be used for additional information, but can also greatly improve the scrolling performance because the list doesn't need to be repainted due to the rounded corners. - ```html live
diff --git a/docs/content/getting-started/contributing.md b/docs/content/getting-started/contributing.md index ece93dc4..cdd720da 100644 --- a/docs/content/getting-started/contributing.md +++ b/docs/content/getting-started/contributing.md @@ -3,13 +3,15 @@ title: Contributing description: Guidelines for contributing to GitHub's CSS --- +While this contributing guide is for GitHub employees, all contributions from the community are welcome. + ## Decision process for adding new styles ### Components [Components](/css/components) are frequently used visual patterns we've abstracted into a set of convenient styles, that would be otherwise difficult to achieve with utilities and layout objects. -Making a decision on whether new components should be added is done on a case by case basis. It's not always easy to make that decision but here are some questions you should ask yourself before moving forward with a pull request. The design systems team will help you make this decision. +Decisions to add new components are made on a case-by-case basis, with help from the GitHub Design Systems team. Some questions that we use to guide these decisions include: - How often is this pattern used across the site? - Could these styles be achieved with existing components, objects, and utilities? @@ -39,7 +41,7 @@ Many of the same questions can be applied to objects and utilities, however the It's usually better to open an issue before investing time in spiking out a new pattern. This gives the design systems team a heads up and allows other designers to share thoughts. Here's an outline of what's helpful to include in a new style issue: -1. What the pattern is and how it's being used across the site - post screenshots and urls where possible. If you need help identifying where the pattern is being used, call that out here and cc the relevant team and/or cc `@product-design` to help. +1. What the pattern is, and how it's being used on GitHub.com. Post screenshots and/or URLs whenever possible. If you need help identifying where the pattern is used, call that out in the issue. 2. Why you think a new pattern is needed (this should answer the relevant questions above). 3. If you intend to work on these new styles yourself, let us know what your timeline and next steps are. If you need help and this is a dependency for shipping another project, please make that clear here and what the timeline is. 4. Add the appropriate label(s): @@ -66,7 +68,7 @@ New styles we add should be used in as many places as makes sense to in producti If you get to this step you've helped contribute to a style guide that many of your colleagues use on a daily basis, you've contributed to an open source project that's referenced and used by many others, and you've helped improve the usability and consistency of GitHub for our users. Thank you! -Let the [design systems team](https://github.com/github/design-systems) know if we can improve these guidelines and make following this process any easier. +[Please open an issue](#step-1-open-an-issue) if we can improve these guidelines and make following this process any easier. ## Removing styles and variables @@ -161,7 +163,7 @@ Check out Doctocat's [live code](https://primer.style/doctocat/usage/live-code) Primer CSS follows [semantic versioning](http://semver.org/) conventions. This helps others know when a change is a patch, minor, or breaking change. -To understand what choice to make, you'll need to understand semver and know if one of the changes shown is a major, minor, or patch. Semver is confusing at first, so I recommend reviewing [semver](http://semver.org/) and/or ask in [#design-systems](https://github.slack.com/archives/design-systems) or and experienced open-source contributor. +To understand what choice to make, you'll need to understand semver and know if one of the changes shown is a major, minor, or patch. Semver is confusing at first, so we recommend reviewing [semver](http://semver.org/) and/or asking the team by [opening an issue](#step-1-open-an-issue). [semantic versioning]: https://semver.org [script/test-deprecations.js]: https://github.com/primer/css/tree/master/script/test-deprecations.js diff --git a/docs/content/support/variables.mdx b/docs/content/support/variables.mdx new file mode 100644 index 00000000..6c4f97cc --- /dev/null +++ b/docs/content/support/variables.mdx @@ -0,0 +1,16 @@ +--- +title: Variables +path: support/variables +status: Experimental +bundle: alerts +--- + +import {Variables, DeprecationIcon} from '../../src/variables' + + + +The tables below list all of the global SCSS variables defined in [the `support/variables` directory](https://github.com/primer/css/tree/master/src/support/variables). + +Variables with a are planned for [deprecation](../tools/deprecations) in a future version of `@primer/css`, and should be avoided. + + diff --git a/docs/content/tools/linting.md b/docs/content/tools/linting.md index 678b083e..39e36ee4 100644 --- a/docs/content/tools/linting.md +++ b/docs/content/tools/linting.md @@ -103,3 +103,7 @@ We test for the proper use of the [Octicons helper](https://github.com/primer/oc ## IE rule limit We check that our compiled CSS assets don't contain more selectors than the [IE CSS selector limits](https://blogs.msdn.microsoft.com/ieinternals/2011/05/14/stylesheet-limits-in-internet-explorer/). + +## Linting dotcom + +There are a few handy scripts to make your life easier when working with CSS on dotcom, especially when doing bigger refactors. Checkout the [Stylelint guide](https://github.com/github/design-systems/blob/master/tools/stylelint.md). diff --git a/docs/content/utilities/typography.md b/docs/content/utilities/typography.md index 1a7deff8..2844cd03 100644 --- a/docs/content/utilities/typography.md +++ b/docs/content/utilities/typography.md @@ -8,7 +8,7 @@ bundle: utilities Type utilities are designed to work in combination with line-height utilities so as to result in more sensible numbers wherever possible. These also exist as [variables](/css/support/typography#typography-variables) that you can use in components or custom CSS. - + Font sizes are smaller on mobile and scale up at the `md` [breakpoint](/css/support/breakpoints) to be larger on desktop. @@ -67,7 +67,8 @@ Lighter font-weight utilities are available in a limited range. Lighter font-wei ``` ## Line height styles -Change the line height density with these utilities. + +Change the line height density with these utilities. Responsive variants are also available (e.g. `.lh-sm-condensed`). ```html live

diff --git a/docs/gatsby-node.js b/docs/gatsby-node.js new file mode 100644 index 00000000..37b8ebba --- /dev/null +++ b/docs/gatsby-node.js @@ -0,0 +1,12 @@ +exports.onCreateWebpackConfig = ({actions, stage, plugins}) => { + actions.setWebpackConfig({ + node: { + fs: 'empty' + }, + plugins: [ + plugins.define({ + __DEV__: stage === 'develop' || stage === 'develop-html' + }) + ] + }) +} diff --git a/docs/package-lock.json b/docs/package-lock.json index 924bdfe6..664e3f46 100644 --- a/docs/package-lock.json +++ b/docs/package-lock.json @@ -1,8 +1,7 @@ { "name": "docs", - "version": "1.0.0", - "lockfileVersion": 1, "requires": true, + "lockfileVersion": 1, "dependencies": { "@babel/code-frame": { "version": "7.5.5", @@ -1449,11 +1448,6 @@ } } }, - "@primer/css": { - "version": "12.5.0", - "resolved": "https://registry.npmjs.org/@primer/css/-/css-12.5.0.tgz", - "integrity": "sha512-MyA2hoCY3UAmMKPHPN+LM1HrwGz5VR92fkEkIzAQgHBYMPstT77tjHkO8OPoWW//DShdYMYAgukZdMJ8lnsfbg==" - }, "@primer/gatsby-theme-doctocat": { "version": "0.15.0", "resolved": "https://registry.npmjs.org/@primer/gatsby-theme-doctocat/-/gatsby-theme-doctocat-0.15.0.tgz", @@ -6247,11 +6241,18 @@ } }, "eslint-utils": { - "version": "1.4.0", - "resolved": "https://registry.npmjs.org/eslint-utils/-/eslint-utils-1.4.0.tgz", - "integrity": "sha512-7ehnzPaP5IIEh1r1tkjuIrxqhNkzUJa9z3R92tLJdZIVdWaczEhr3EbhGtsMrVxi1KeR8qA7Off6SWc5WNQqyQ==", + "version": "1.4.3", + "resolved": "https://registry.npmjs.org/eslint-utils/-/eslint-utils-1.4.3.tgz", + "integrity": "sha512-fbBN5W2xdY45KulGXmLHZ3c3FHfVYmKg0IrAKGOkT/464PQsx2UeIzfz1RmEci+KLm1bBaAzZAh8+/E+XAeZ8Q==", "requires": { - "eslint-visitor-keys": "^1.0.0" + "eslint-visitor-keys": "^1.1.0" + }, + "dependencies": { + "eslint-visitor-keys": { + "version": "1.1.0", + "resolved": "https://registry.npmjs.org/eslint-visitor-keys/-/eslint-visitor-keys-1.1.0.tgz", + "integrity": "sha512-8y9YjtM1JBJU/A9Kc+SbaOV4y29sSWckBwMHa+FGtVj5gN/sbnKDf6xJUl+8g7FAij9LVaP8C24DUiH/f/2Z9A==" + } } }, "eslint-visitor-keys": { @@ -9138,9 +9139,9 @@ "integrity": "sha512-d4sze1JNC454Wdo2fkuyzCr6aHcbL6PGGuFAz0Li/NcOm1tCHGnWDRmJP85dh9IhQErTc2svWFEX5xHIOo//kQ==" }, "handlebars": { - "version": "4.2.0", - "resolved": "https://registry.npmjs.org/handlebars/-/handlebars-4.2.0.tgz", - "integrity": "sha512-Kb4xn5Qh1cxAKvQnzNWZ512DhABzyFNmsaJf3OAkWNa4NkaqWcNI8Tao8Tasi0/F4JD9oyG0YxuFyvyR57d+Gw==", + "version": "4.5.2", + "resolved": "https://registry.npmjs.org/handlebars/-/handlebars-4.5.2.tgz", + "integrity": "sha512-29Zxv/cynYB7mkT1rVWQnV7mGX6v7H/miQ6dbEpYTKq5eJBN7PsRB+ViYJlcT6JINTSu4dVB9kOqEun78h6Exg==", "requires": { "neo-async": "^2.6.0", "optimist": "^0.6.1", @@ -17924,15 +17925,21 @@ "integrity": "sha512-8OaIKfzL5cpx8eCMAhhvTlft8GYF8b2eQr6JkCyVdrgjcytyOmPCXrqXFcUnhonRpLlh5yxEZVohm6mzaowUOw==" }, "uglify-js": { - "version": "3.6.0", - "resolved": "https://registry.npmjs.org/uglify-js/-/uglify-js-3.6.0.tgz", - "integrity": "sha512-W+jrUHJr3DXKhrsS7NUVxn3zqMOFn0hL/Ei6v0anCIMoKC93TjcflTagwIHLW7SfMFfiQuktQyFVCFHGUE0+yg==", + "version": "3.6.9", + "resolved": "https://registry.npmjs.org/uglify-js/-/uglify-js-3.6.9.tgz", + "integrity": "sha512-pcnnhaoG6RtrvHJ1dFncAe8Od6Nuy30oaJ82ts6//sGSXOP5UjBMEthiProjXmMNHOfd93sqlkztifFMcb+4yw==", "optional": true, "requires": { - "commander": "~2.20.0", + "commander": "~2.20.3", "source-map": "~0.6.1" }, "dependencies": { + "commander": { + "version": "2.20.3", + "resolved": "https://registry.npmjs.org/commander/-/commander-2.20.3.tgz", + "integrity": "sha512-GpVkmM8vF2vQUkj2LvZmD35JxeJOLCwJ9cUkugyk2nuhbv3+mJvpLYYt+0+USMxE+oj+ey/lJEnhZw75x/OMcQ==", + "optional": true + }, "source-map": { "version": "0.6.1", "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz", diff --git a/docs/package.json b/docs/package.json index 08a1bf57..09ede56a 100644 --- a/docs/package.json +++ b/docs/package.json @@ -1,18 +1,16 @@ { - "name": "docs", "private": true, - "version": "1.0.0", - "license": "MIT", + "name": "docs", + "repository": "primer/css", "scripts": { "clean": "gatsby clean", - "develop": "gatsby develop -H 0.0.0.0", - "build": "gatsby build --prefix-paths", - "now-build": "npm run build" + "develop": "ln -sf ../dist . && gatsby develop -H 0.0.0.0", + "build-content": "gatsby build --prefix-paths", + "build": "./script/now-build.sh" }, "dependencies": { "@loadable/component": "^5.10.2", "@primer/components": "^13.2.0", - "@primer/css": "^12.4.1", "@primer/gatsby-theme-doctocat": "^0.15.0", "@primer/octicons": "^9.1.1", "@primer/octicons-react": "^9.1.1", @@ -36,5 +34,7 @@ "styled-components": "^4.3.2", "title-case": "^2.1.1" }, - "repository": "primer/css" + "engines": { + "node": "12.x" + } } diff --git a/docs/script/now-build.sh b/docs/script/now-build.sh new file mode 100755 index 00000000..f2bf806b --- /dev/null +++ b/docs/script/now-build.sh @@ -0,0 +1,12 @@ +#!/bin/bash -e + +# Build the base project so we can pull out the JSON data +cd .. +npm ci +npm run dist +cp -rf dist docs + +# Now build the docs site using that data +cd docs +npm ci +CI=true npm run build-content diff --git a/docs/src/@primer/gatsby-theme-doctocat/nav.yml b/docs/src/@primer/gatsby-theme-doctocat/nav.yml index ceeda3f2..60111abd 100644 --- a/docs/src/@primer/gatsby-theme-doctocat/nav.yml +++ b/docs/src/@primer/gatsby-theme-doctocat/nav.yml @@ -16,6 +16,8 @@ url: /support/typography - title: Marketing support url: /support/marketing-variables + - title: Variables + url: /support/variables - title: Utilities url: /utilities children: diff --git a/docs/src/variables.js b/docs/src/variables.js new file mode 100644 index 00000000..db872526 --- /dev/null +++ b/docs/src/variables.js @@ -0,0 +1,206 @@ +import React from 'react' +import {Flex, Link, Text, Tooltip, Flash} from '@primer/components' +import Octicon, {Alert} from '@primer/octicons-react' +import themeGet from '@styled-system/theme-get' +import DoctocatTable from '@primer/gatsby-theme-doctocat/src/components/table' +import styled from 'styled-components' + +const Table = styled(DoctocatTable)` + font-size: ${themeGet('fontSizes.1')}px; + + td, + th { + text-align: left; + vertical-align: top; + } + + tr:target { + th, + td { + background-color: ${themeGet('colors.yellow.0')}; + } + } +` + +function useVariables() { + const deprecations = useDeprecations() + + return React.useMemo(() => { + let variablesByFile = new Map() + + try { + const variables = require('../dist/variables.json') + + for (const name of Object.keys(variables)) { + if (name.endsWith('-font')) { + delete variables[name] + } + } + + variablesByFile = Object.entries(variables).reduce((map, [name, variable]) => { + const { + source: {path} + } = variable + + variable.name = name + variable.deprecated = deprecations.variables.hasOwnProperty(name) + + if (map.has(path)) { + map.get(path).push(variable) + } else { + map.set(path, [variable]) + } + + return map + }, variablesByFile) + + for (const variables of variablesByFile.values()) { + variables.sort((a, b) => { + return a.deprecated - b.deprecated || a.source.line - b.source.line + }) + } + } catch (err) { + // do nothing + } + + return variablesByFile + }, []) +} + +function useDeprecations() { + return React.useMemo(() => { + try { + const deprecations = require('../dist/deprecations.json') + return deprecations + } catch (err) { + return {} + } + }, []) +} + +function Variables({children, ...props}) { + const variablesByFile = useVariables() + + if (variablesByFile.size === 0) { + return ( + <> +

No data available

+ {__DEV__ && ( + + This probably means that the root project has not been built; run `npm run dist` and restart your + development server. + + )} + + ) + } + + return ( + <> + {children} + + + ) +} + +function VariablesDetails({variablesByFile, ...props}) { + return Array.from(variablesByFile.entries()).map(([path, variables]) => ( + +

+ Defined in {path} +

+ + + + + + + + + + {variables.map(({name, computed, source, refs}) => ( + + + + + + ))} + +
NameValueAliases
+ + + # + + + + {name} + + + + + + + + + {computed} + + +
+ + )) +} + +function Mono({nowrap, ...rest}) { + return +} + +function Swatch({value, ...rest}) { + return /^(#|rgb|hsl)/.test(value) ? : null +} + +const SwatchBox = styled(Text)` + display: inline-block; + vertical-align: baseline; + width: ${p => p.size}; + height: ${p => p.size}; + border: 1px solid ${themeGet('colors.gray.3')}; + border-radius: ${themeGet('radii.1')}px; + margin-bottom: -2px; +` + +Swatch.defaultProps = { + size: '1em' +} + +function RefList({refs}) { + const last = refs.length - 1 + return refs.map((ref, i) => [ + + {ref} + , + i < last ? ', ' : '' + ]) +} + +function DeprecationFlag({variable, ...rest}) { + const deprecations = useDeprecations() + + const dep = deprecations.variables[variable] + return dep ? ( + + + + + + ) : null +} + +function DeprecationIcon() { + return ( + + + + ) +} + +export {Variables, DeprecationIcon} diff --git a/package-lock.json b/package-lock.json index ce41d4eb..2df9b95c 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,6 +1,6 @@ { "name": "@primer/css", - "version": "14.0.0", + "version": "14.1.0", "lockfileVersion": 1, "requires": true, "dependencies": { diff --git a/package.json b/package.json index 97a589d4..85956f34 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "@primer/css", - "version": "14.0.0", + "version": "14.1.0", "description": "Primer is the CSS framework that powers GitHub's front-end design. primer includes 23 packages that are grouped into 3 core meta-packages for easy install. Each package and meta-package is independently versioned and distributed via npm, so it's easy to include all or part of Primer within your own project.", "homepage": "https://primer.style/css", "author": "GitHub, Inc.", diff --git a/src/marketing/support/variables.scss b/src/marketing/support/variables.scss index 9f45d0b0..7d0ec1ca 100644 --- a/src/marketing/support/variables.scss +++ b/src/marketing/support/variables.scss @@ -17,6 +17,14 @@ $marketing-font-path: "/fonts/" !default; font-display: swap; } +@font-face { + font-family: Inter; + font-style: normal; + font-weight: $font-weight-bold; + src: local("Inter Bold"), local("Inter-Bold"), url("#{$marketing-font-path}Inter-Bold.woff") format("woff"); + font-display: swap; +} + $font-mktg: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol" !default; // Builds upon @primer/css/support/variables/typography.scss diff --git a/src/select-menu/select-menu.scss b/src/select-menu/select-menu.scss index 1c035ad3..bf3b103d 100644 --- a/src/select-menu/select-menu.scss +++ b/src/select-menu/select-menu.scss @@ -1,7 +1,13 @@ // stylelint-disable selector-max-type - // selector-max-type is needed for body:not(.intent-mouse) to target keyboard only styles. -// TODO: Introduce an additional .intent-keyboard class + +// TODO@15.0.0: remove styles below +@media (hover: hover) { + .SelectMenu-tab:not([aria-checked="true"]):hover, + .SelectMenu-tab:not([aria-checked="true"]):active { + background-color: $bg-white; + } +} $SelectMenu-max-height: 480px !default; @@ -264,6 +270,7 @@ $SelectMenu-max-height: 480px !default; &[aria-selected="true"] { z-index: 1; // Keeps box-shadow visible when hovering color: $text-gray-dark; + cursor: default; background-color: $bg-white; // stylelint-disable-next-line primer/box-shadow box-shadow: 0 0 0 1px $border-color; @@ -377,14 +384,11 @@ $SelectMenu-max-height: 480px !default; @media (hover: hover) { body:not(.intent-mouse) .SelectMenu-item:focus, .SelectMenu-item:hover { - color: $text-white; - background-color: $bg-blue; + background-color: $bg-gray; } .SelectMenu-item:active { - color: $text-white; - // stylelint-disable-next-line primer/colors - background-color: $blue-400; + background-color: $bg-gray-light; } body:not(.intent-mouse) .SelectMenu-tab:focus { @@ -392,13 +396,13 @@ $SelectMenu-max-height: 480px !default; background-color: $blue-100; } - .SelectMenu-tab:not([aria-checked="true"]):hover { + .SelectMenu-tab:not([aria-selected="true"]):hover { color: $text-gray-dark; // stylelint-disable-next-line primer/colors background-color: $gray-200; } - .SelectMenu-tab:not([aria-checked="true"]):active { + .SelectMenu-tab:not([aria-selected="true"]):active { color: $text-gray-dark; background-color: $bg-gray; } diff --git a/src/utilities/typography.scss b/src/utilities/typography.scss index bc5e3ab4..f790a710 100644 --- a/src/utilities/typography.scss +++ b/src/utilities/typography.scss @@ -161,14 +161,19 @@ // Close to commonly used line-heights. Most line-heights // combined with type size equate to whole pixels. // Will be improved with future typography scale updates. -/* Set the line height to ultra condensed */ -.lh-condensed-ultra { line-height: $lh-condensed-ultra !important; } -/* Set the line height to condensed */ -.lh-condensed { line-height: $lh-condensed !important; } -/* Set the line height to default */ -.lh-default { line-height: $lh-default !important; } -/* Set the line height to zero */ -.lh-0 { line-height: 0 !important; } +// Responsive line-height +@each $breakpoint, $variant in $responsive-variants { + @include breakpoint($breakpoint) { + /* Set the line height to ultra condensed */ + .lh#{$variant}-condensed-ultra { line-height: $lh-condensed-ultra !important; } + /* Set the line height to condensed */ + .lh#{$variant}-condensed { line-height: $lh-condensed !important; } + /* Set the line height to default */ + .lh#{$variant}-default { line-height: $lh-default !important; } + /* Set the line height to zero */ + .lh#{$variant}-0 { line-height: 0 !important; } + } +} // Text alignments // Responsive text alignment