diff --git a/.changeset/small-papayas-prove.md b/.changeset/small-papayas-prove.md new file mode 100644 index 00000000..8703bbc9 --- /dev/null +++ b/.changeset/small-papayas-prove.md @@ -0,0 +1,5 @@ +--- +"@primer/css": minor +--- + +Update docs with V2 colors diff --git a/docs/content/components/avatars.md b/docs/content/components/avatars.md index 3d622469..d0f14ec8 100644 --- a/docs/content/components/avatars.md +++ b/docs/content/components/avatars.md @@ -210,16 +210,16 @@ Use `AvatarStack--right` to right-align the avatar stack. Remember to switch the - - - + + + ``` ### Medium ```html live -
+
Travis CI
``` diff --git a/docs/content/components/box.md b/docs/content/components/box.md index a943c323..fccfeb33 100644 --- a/docs/content/components/box.md +++ b/docs/content/components/box.md @@ -472,7 +472,7 @@ A similar approach can be used for buttons with multiple lines of text within a
Row title -
+
Description
@@ -481,7 +481,7 @@ A similar approach can be used for buttons with multiple lines of text within a
Row title -
+
Description
@@ -490,7 +490,7 @@ A similar approach can be used for buttons with multiple lines of text within a
Row title -
+
Description
diff --git a/docs/content/components/buttons.md b/docs/content/components/buttons.md index 99534719..eff772ab 100644 --- a/docs/content/components/buttons.md +++ b/docs/content/components/buttons.md @@ -5,9 +5,6 @@ status: Stable source: 'https://github.com/primer/css/tree/main/src/buttons' bundle: buttons --- - - Please note Primer v16 has changed the naming of these color classes. Check the migration guide to make sure your app is up to date. - Buttons are used for **actions**, like in forms, while textual hyperlinks are used for **destinations**, or moving from one page to another. diff --git a/docs/content/components/dropdown.md b/docs/content/components/dropdown.md index 28d31b42..74adf55a 100644 --- a/docs/content/components/dropdown.md +++ b/docs/content/components/dropdown.md @@ -3,10 +3,6 @@ title: Dropdown status: Beta --- - - Please note Primer v16 has changed the naming of these color classes. Check the migration guide to make sure your app is up to date. - - Dropdowns are lightweight context menus for housing navigation and actions. They're great for instances where you don't need the full power (and code) of the select menu. ## Basic examples @@ -37,7 +33,7 @@ Using a button customized with additional utilities: ```html live
- + Dropdown
diff --git a/docs/content/components/forms.md b/docs/content/components/forms.md index e761d41f..9abe6396 100644 --- a/docs/content/components/forms.md +++ b/docs/content/components/forms.md @@ -369,7 +369,7 @@ Content that is hidden by default should only be done so if it is non-essential Available hours per week - hours per week + hours per week
diff --git a/docs/content/components/labels.md b/docs/content/components/labels.md index 6e5b44e3..b5a5fe4a 100644 --- a/docs/content/components/labels.md +++ b/docs/content/components/labels.md @@ -7,10 +7,6 @@ source: 'https://github.com/primer/css/tree/main/src/labels' bundle: labels --- - - Please note Primer v16 has changed the naming of these color classes. Check the migration guide to make sure your app is up to date. - - Labels add metadata or indicate status of items and navigational elements. Three different types of labels are available: [Labels](#default-label-styles) for adding metadata, [States](#states) for indicating status, and [Counters](#counters) for showing the count for a number of items. ## Labels @@ -78,19 +74,19 @@ Sometimes when adding a label the line-height can be incrased. Or the parent ele Issue labels are used for adding labels to issues and pull requests. They also come with emoji support. ```html live -Primer -bug 🐛 -help wanted -🚂 deploy: train +Primer +bug 🐛 +help wanted +🚂 deploy: train ``` If an issue label needs to be bigger, add the `.IssueLabel--big` modifier. ```html live -Primer -bug 🐛 -help wanted -🚂 deploy: train +Primer +bug 🐛 +help wanted +🚂 deploy: train ``` ## States @@ -180,9 +176,9 @@ You can also have icons and emoji in counters. Or use utilities for counters wit 10 👍 2 -22 -22 -22 +22 +22 +22 ``` ## Diffstat @@ -196,12 +192,12 @@ Diffstats show how many deletions or additions a diff has. It's typically a row ``` -Use the `color-text-success` and `color-text-danger` utilities to add additional information about the size of the diff. +Use the `color-fg-success` and `color-fg-danger` utilities to add additional information about the size of the diff. ```html live - +7 - −2 + +7 + −2 diff --git a/docs/content/components/layout.md b/docs/content/components/layout.md index 187ace48..7fb33d00 100644 --- a/docs/content/components/layout.md +++ b/docs/content/components/layout.md @@ -76,7 +76,7 @@ Flowing as row:
-
+
centered md
@@ -86,7 +86,7 @@ Flowing as row:
-
+
centered lg
@@ -96,7 +96,7 @@ Flowing as row:
-
+
centered xl
diff --git a/docs/content/components/links.md b/docs/content/components/links.md index 01e65a38..ff00cd58 100644 --- a/docs/content/components/links.md +++ b/docs/content/components/links.md @@ -6,10 +6,6 @@ source: 'https://github.com/primer/css/tree/main/src/links' bundle: links --- - - Please note Primer v16 has changed the naming of these color classes. Check the migration guide to make sure your app is up to date. - - By default `` elements already use the right link color and apply an underline on hover. So in most cases the `.Link` class is not really needed. ```html live @@ -24,7 +20,7 @@ If you like to override the default link styles you can do so with the following Use `.Link--primary` to turn the link color to blue only on hover. ```html live -

Some text with a Link--primary

+

Some text with a Link--primary

``` ## Secondary link @@ -49,7 +45,7 @@ Use `.Link--muted` also removes the underline on hover. Tip: You can also use th Use `.Link--onHover` to make any text color used with links to turn blue on hover. This is useful when you want only part of a link to turn blue on hover. ```html live - + A link with a partial Link--onHover ``` @@ -59,7 +55,7 @@ Use `.Link--onHover` to make any text color used with links to turn blue on hove The `.Link` class can be nested inside an `` element if only part of it should be styled like a link. ```html live - + A nested Link ``` @@ -70,8 +66,8 @@ Link classes in combination with [color utilities](../utilities/colors) lets you ```html live - + Hot - potato + potato ``` diff --git a/docs/content/components/navigation.md b/docs/content/components/navigation.md index e6c6f103..bf4a483f 100644 --- a/docs/content/components/navigation.md +++ b/docs/content/components/navigation.md @@ -271,8 +271,8 @@ Different kind of content can be added inside a Side Nav item. Use utility class The `.SideNav-subItem` is an alternative, more lightweight version without borders and more condensed. It can be used stand-alone. ```html live -
diff --git a/docs/content/components/timeline.md b/docs/content/components/timeline.md index ae3283b2..4688039c 100644 --- a/docs/content/components/timeline.md +++ b/docs/content/components/timeline.md @@ -49,7 +49,7 @@ To have color variants, use the [color utilities](/utilities/colors) on the badg ```html live
-
+
@@ -59,7 +59,7 @@ To have color variants, use the [color utilities](/utilities/colors) on the badg
-
+
@@ -68,9 +68,8 @@ To have color variants, use the [color utilities](/utilities/colors) on the badg Green background when opened or passed events occur
- +
-
+
@@ -150,7 +149,7 @@ To create a visual break in the timeline, use `TimelineItem-break`. This adds a ```html live
-
+
@@ -161,7 +160,7 @@ To create a visual break in the timeline, use `TimelineItem-break`. This adds a
-
+
diff --git a/docs/content/getting-started/theming.md b/docs/content/getting-started/theming.md deleted file mode 100644 index e21f2113..00000000 --- a/docs/content/getting-started/theming.md +++ /dev/null @@ -1,177 +0,0 @@ ---- -title: Theming -path: getting-started/theming ---- - -Primer CSS offers multiple color themes for components and utilities. The colors change based on the active theme and color mode. - -Currently there are 3 themes (`light`, `dark`, `dark_dimmed`) to choose from. When nothing is specified, Primer CSS uses the `light` theme. - -## Set a theme - -Configure Primer CSS to use a certain theme by setting HTML attributes. - -- **Light** theme: `data-color-mode="light" data-dark-theme="light"` -- **Dark** theme: `data-color-mode="dark" data-dark-theme="dark"` -- **Dark Dimmed** theme: `data-color-mode="dark" data-dark-theme="dark_dimmed"` - -Typically these attributes are added to the document root (``) to use on the entire page: - -```html - -``` - -Below an example of all themes to compare: - -```html live -
-

Light

- - data-color-mode="light" data-light-theme="light" - - - Label - 123 -
-
-

Dark

- - data-color-mode="dark" data-dark-theme="dark" - - - Label - 123 -
-
-

Dark Dimmed

- - data-color-mode="dark" data-dark-theme="dark_dimmed" - - - Label - 123 -
-``` - - - -## Sync to the system - -If the theme should be synced to the OS's color mode, use `data-color-mode="auto"` and set a `data-light-theme` as well as a `data-dark-theme`. - -```html live -
-

Synced to system

- - data-color-mode="auto" data-light-theme="light" data-dark-theme="dark_dimmed" - - - Label - 123 -
-``` - -Change the color mode of your OS to see the switch between the `data-light-theme="light"` and `data-dark-theme="dark_dimmed"`. - -## Custom color variables - -It's recommended to use the [functional variables](/support/color-system#functional-variables) as much as possible. It will guarantee that the variables will work as expected with any new theme that might get added in the future. Sometimes you might still need a custom variable that changes based on the color mode. You can create a custom variable with the `color-variables` mixin. - -```css -@include color-variables( - ("custom-css-variable-1": ( - light: var(--color-scale-gray-3), - dark: var(--color-scale-gray-5) - ), - "custom-css-variable-2": ( - light: var(--color-scale-gray-2), - dark: var(--color-scale-gray-6) - ), - "custom-css-variable-3": ( - light: var(--color-scale-gray-2), - dark: var(--color-scale-gray-6) - ) -)); -``` - -The custom variables will be prefixed with `--color-` and can be used in the same way as other functional variables. - -```css -.my-class { - color: var(--color-custom-css-variable-1); - background-color: var(--color-custom-css-variable-2); - border-color: var(--color-custom-css-variable-2); -} -``` - -## Auto variables - -If you tried using the [`scale` color variables](/support/color-system#color-variables) you might have noticed that they are not that useful with multiple color modes. That's because they stay light or dark in any color mode. As seen above, you could create custom variables that invert the scale like so: - -```css -@include color-variables( - ("custom-css-variable": ( - light: var(--color-scale-gray-7), - dark: var(--color-scale-gray-2) - ) -)); - -.my-class { - color: var(--color-custom-css-variable); -} -``` - -In this case, the `auto` variables might come in handy. - -```css -.my-class { - color: var(--color-auto-gray-7); -} -``` - -The benefit of `auto` over the `scale` variables is that `auto` variables automatically get inverted in dark mode. - -```html live -
- --color-auto-gray-7 - --color-scale-gray-7
- --color-auto-blue-7 - --color-scale-blue-7
- --color-auto-green-7 - --color-scale-green-7 -
-
- --color-auto-gray-7 - --color-scale-gray-7
- --color-auto-blue-7 - --color-scale-blue-7
- --color-auto-green-7 - --color-scale-green-7 -
-
- --color-auto-gray-7 - --color-scale-gray-7
- --color-auto-blue-7 - --color-scale-blue-7
- --color-auto-green-7 - --color-scale-green-7 -
- - -``` - -**Note**: If you use `stylelint`, the [`primer/no-scale-colors`](https://github.com/primer/stylelint-config-primer/tree/main/plugins#primerno-scale-colors) will fail with "[variable] is a non-functional scale color and cannot be used without being wrapped in the color-variables mixin". You can disable stylelint for this case by adding `// stylelint-disable-line`: - -```css -.my-class { - color: var(--color-auto-gray-7); // stylelint-disable-line -} -``` - ---- - -In general, - -1. use [functional variables](/support/color-system) as much as possible. -2. create new [custom color variables](/getting-started/theming#custom-color-variables) if there is no functional variable that fits the use case. -3. as an alternative to custom color variables, use [`auto` variables](/getting-started/theming#auto-variables) if the results give enough contrast. diff --git a/docs/content/objects/grid.md b/docs/content/objects/grid.md index 5361d3ef..31a5d4e3 100644 --- a/docs/content/objects/grid.md +++ b/docs/content/objects/grid.md @@ -90,7 +90,7 @@ Column widths can be used with any other block or inline-block elements to add p ```html live
-
+
Don't go bacon my heart. @@ -136,24 +136,24 @@ Use padding utilities to create gutters for more customized layouts. ```html live title="Gutters with padding"
-
.pr-2
+
.pr-2
-
.px-2
+
.px-2
-
.px-2
+
.px-2
-
.pl-2
+
.pl-2
-
.pr-2
+
.pr-2
-
.pl-2
+
.pl-2
``` @@ -258,8 +258,8 @@ You can also create an alternative [media object](/utilities/layout#the-media-ob

GitHub

-

How people build software.

- https://github.com/about +

How people build software.

+ https://github.com/about
``` @@ -297,8 +297,8 @@ This can be useful for keeping columns the same height, justifying content and v

GitHub

-

How people build software.

- https://github.com/about +

How people build software.

+ https://github.com/about
``` diff --git a/docs/content/stickersheet/index.md b/docs/content/stickersheet/index.md index 0cd4d1f3..d6347aec 100644 --- a/docs/content/stickersheet/index.md +++ b/docs/content/stickersheet/index.md @@ -27,8 +27,8 @@ path: stickersheet/
-IssueLabel -IssueLabel +IssueLabel +IssueLabel
@@ -126,8 +126,8 @@ path: stickersheet/
-IssueLabel -IssueLabel +IssueLabel +IssueLabel
diff --git a/docs/content/stickersheet/labels.md b/docs/content/stickersheet/labels.md index 9f7eae46..1f13e6df 100644 --- a/docs/content/stickersheet/labels.md +++ b/docs/content/stickersheet/labels.md @@ -44,14 +44,14 @@ The base label component styles the t
-Primer +Primer 🐻 Next
-Primer +Primer 🐻 Next @@ -112,9 +112,9 @@ The base label component styles the t 10 👍 2 -22 -22 -22 +22 +22 +22
@@ -140,8 +140,8 @@ The base label component styles the t
- +7 - −2 + +7 + −2 diff --git a/docs/content/stickersheet/sizes.md b/docs/content/stickersheet/sizes.md index 95c74b73..9baf6778 100644 --- a/docs/content/stickersheet/sizes.md +++ b/docs/content/stickersheet/sizes.md @@ -7,7 +7,7 @@ path: stickersheet/sizes ```html live -16px +16px @@ -15,25 +15,25 @@ path: stickersheet/sizes
-20px +20px Label -IssueLabel +IssueLabel 1.5K
-24px +24px Label -IssueLabel +IssueLabel State
-28px +28px @@ -41,7 +41,7 @@ path: stickersheet/sizes
-32px +32px @@ -54,7 +54,7 @@ path: stickersheet/sizes
-40px +40px