diff --git a/.stylelintrc.json b/.stylelintrc.json index 3cffea0ebac1..6401e48da561 100644 --- a/.stylelintrc.json +++ b/.stylelintrc.json @@ -7,12 +7,6 @@ { "regexp": "^.+\\.module(\\.scss)$" } - ], - "@sourcegraph/no-restricted-imports": [ - true, - { - "paths": ["bootstrap*"] - } ] } } diff --git a/client/branded/README.md b/client/branded/README.md index d6ed72eb366c..be94166a22ed 100644 --- a/client/branded/README.md +++ b/client/branded/README.md @@ -1,4 +1,6 @@ +# Branded + This folder contains client code that is **branded**, i.e. it implements the visual design language we use across our web app and e.g. in the options menu of the browser extension. -Code in here can use Bootstrap and must not adapt styles of the code host (for more details, see [Styling UI in the handbook](../../doc/dev/background-information/web/styling.md)). +Code here can use global classes and must not adapt styles of the code host (for more details, see [Styling UI in the handbook](../../doc/dev/background-information/web/styling.md)). Any code that is code host agnostic should go into [`../shared`](../shared) instead. diff --git a/client/branded/src/components/Form.tsx b/client/branded/src/components/Form.tsx index 41e2990e2d2f..d55a69da579e 100644 --- a/client/branded/src/components/Form.tsx +++ b/client/branded/src/components/Form.tsx @@ -13,7 +13,7 @@ interface FormState { /** * Form component that handles validation. * If the user tries to submit the form and one of the inputs is invalid, - * Bootstrap's `was-validated` class will be assigned so the invalid inputs get highlighted. + * the global `was-validated` class will be assigned so the invalid inputs get highlighted. */ export class Form extends React.PureComponent { constructor(props: FormProps) { diff --git a/client/branded/src/components/panel/TabbedPanelContent.tsx b/client/branded/src/components/panel/TabbedPanelContent.tsx index 1cd58fe6ea14..1872ce42fb8f 100644 --- a/client/branded/src/components/panel/TabbedPanelContent.tsx +++ b/client/branded/src/components/panel/TabbedPanelContent.tsx @@ -304,7 +304,7 @@ export const TabbedPanelContent = React.memo(props => { ( - <> -

Typography

- - - -) - -TextTypography.parameters = { - design: { - name: 'Figma', - type: 'figma', - url: - 'https://www.figma.com/file/NIsN34NH7lPu04olBzddTw/Design-Refresh-Systemization-source-of-truth?node-id=998%3A1515', - }, -} - -type ButtonSizesType = typeof BUTTON_SIZES[number] | undefined - export const CodeTypography: Story = () => ( <>

Code

@@ -253,136 +215,6 @@ export const Layout: Story = () => ( ) -export const ButtonGroups: Story = () => { - const [active, setActive] = useState<'Left' | 'Middle' | 'Right'>('Left') - const buttonSizes: ButtonSizesType[] = ['lg', undefined, 'sm'] - return ( - <> -

Button groups

- - Group a series of buttons together on a single line with the button group.{' '} - Bootstrap documentation - - -

Example

-
- - Button groups have no styles on their own, they just group buttons together. This means they can be - used to group any other semantic or outline button variant. - -
- - - - - {' '} - Example with btn-secondary -
-
- - - - - {' '} - Example with btn-outline-secondary -
-
- - - - - {' '} - Example with btn-outline-primary -
-
- -

Sizing

- - Just like buttons, button groups have sm and lg size variants. - -
- {buttonSizes.map(size => ( -
- - - - - -
- ))} -
- -

Active state

- - The active class can be used to craft toggles out of button groups. - -
- - {(['Left', 'Middle', 'Right'] as const).map(option => ( - - ))} - {' '} - Example with btn-outline-secondary -
-
- - {(['Left', 'Middle', 'Right'] as const).map(option => ( - - ))} - {' '} - Example with btn-outline-primary -
- - ) -} - -ButtonGroups.storyName = 'Button groups' - -ButtonGroups.parameters = { - design: { - type: 'figma', - name: 'Figma', - url: - 'https://www.figma.com/file/NIsN34NH7lPu04olBzddTw/Design-Refresh-Systemization-source-of-truth?node-id=908%3A2514', - }, -} - export const InputGroups: Story = () => ( <>

Input groups

@@ -613,6 +445,7 @@ export const Meter: Story = args => ( ) + Meter.argTypes = { min: { type: 'number', diff --git a/client/branded/src/global-styles/GlobalStylesStory/TextStory.tsx b/client/branded/src/global-styles/GlobalStylesStory/TextStory.tsx deleted file mode 100644 index afc03759d5cb..000000000000 --- a/client/branded/src/global-styles/GlobalStylesStory/TextStory.tsx +++ /dev/null @@ -1,159 +0,0 @@ -import React from 'react' - -import { Link, Code, H2, H3, H4, Text, Heading } from '@sourcegraph/wildcard' - -import { SEMANTIC_COLORS } from './constants' -import { TextVariants } from './TextVariants' - -export const TextStory: React.FunctionComponent> = () => ( - <> -

Headings

- - - {(['h1', 'h2', 'h3', 'h4', 'h5', 'h6'] as const).map(headingElement => ( - - - - - ))} - -
- - {'<'} - {headingElement} - {'>'} - - - This is an {headingElement.toUpperCase()} -
- -

Text variations

- - -

Prose

- Text uses system fonts. The fonts should never be overridden. - - Minim nisi tempor Lorem do incididunt exercitation ipsum consectetur laboris elit est aute irure velit. - Voluptate irure excepteur sint reprehenderit culpa laboris. Elit id nostrud enim laboris irure. Est sunt ex - ipisicing aute elit voluptate consectetur.Do laboris anim fugiat ipsum sunt elit sunt amet consequat trud - irure labore cupidatat laboris. Voluptate eiusmod veniam nisi reprehenderit cillum Lorem veniam at amet ea - dolore enim. Ea laborum fugiat Lorem ea amet amet exercitation dolor culpa. Do consequat dolor ad elit ipsum - nostrud non laboris voluptate aliquip est reprehenderit incididunt. Eu nulla ad te enim. Pariatur duis - pariatur sit adipisicing pariatur nulla quis do sint deserunt aliqua Lorem aborum. Dolor esse aute cupidatat - deserunt anim ad eiusmod quis quis laborum magna nisi occaecat. Eu is eiusmod sint aliquip duis est sit - irure velit reprehenderit id. Cillum est esse et nulla ut adipisicing velit anim id exercitation nostrud. - Duis veniam sit laboris tempor quis sit cupidatat elit. - - - - Text can contain links, which trigger a navigation to a different page. - - - - Text can be emphasized or made strong. - - - - Text can be idiomatic with {''}. See{' '} - - {''} vs. {''} - {' '} - for more info. - - - - You can bring attention to the element with {''}. - - - - Text can have superscriptssup with {''}. - - - - Text can have subscriptssub with {''}. - - - - - You can use {''} to make small text. Use sparingly. - - - -

Color variations

- - text-* classes can be used to apply semantic coloring to text. - -
- {['muted', ...SEMANTIC_COLORS].map(color => ( -
- This is text-{color} -
- ))} -
- -

Lists

-

Ordered

-
    -
  1. - Dolor est laborum aute adipisicing quis duis mollit pariatur nostrud eiusmod Lorem pariatur elit mollit. - Sint pariatur culpa occaecat aute mollit enim amet nisi sunt aute ea aliqua esse laboris. Incididunt ad - duis laborum elit dolore esse sint nisi. Nulla in ea ipsum dolore irure sit labore commodo aute aliquip - esse. Consectetur non tempor qui sunt cillum est velit ut id sint id amet et commodo. -
    2. -
  2. - Eu nulla Lorem et ipsum commodo. Sint anim minim aute deserunt elit adipisicing minim sunt est tempor. - Exercitation non ad minim culpa fugiat nulla nulla. -
    3. -
  3. - Ex officia amet excepteur Lorem officia sit elit. Aute esse laboris consequat ea sint aute amet anim. - Laboris dolore dolor Lorem anim voluptate eiusmod nisi occaecat anim ipsum laboris ad. -
    4. -
- -

Unordered

- -

Dots

-
    -
  • - Ullamco exercitation voluptate veniam et in incididunt Lorem id consequat dolor reprehenderit amet. Id - exercitation et labore do sint eiusmod irure. Lorem cupidatat dolor nulla sunt qui culpa esse cupidatat - ea. Esse elit voluptate ea officia excepteur nostrud veniam dolore tempor sint anim dolor ipsum eu. -
    • -
  • - Magna veniam in anim ea cupidatat nostrud. Pariatur mollit eiusmod incididunt irure pariatur amet. Est - adipisicing voluptate nulla Lorem esse laborum aliqua. -
    • -
  • - Proident nisi velit incididunt labore sunt eiusmod magna occaecat aliqua. Labore veniam ex adipisicing - ex magna qui officia dolor. Eiusmod excepteur dolor consequat deserunt enim ullamco eiusmod ullamco. -
    • -
- -

Dashes

- - Dashed lists are created using list-dashed. - -
    -
  • - Ad deserunt amet Lorem in exercitation. Deserunt labore anim non minim. Dolor dolore adipisicing anim - cupidatat nulla. Sit voluptate aliqua exercitation occaecat nulla aute ex quis excepteur quis - exercitation fugiat et. Voluptate sint magna labore culpa nulla eu tempor labore in eiusmod excepteur. -
    • -
  • - Quis do proident non deserunt aliquip eiusmod dolor nisi et eiusmod irure labore irure. Veniam labore - aliquip ea irure dolore est cillum laborum exercitation. Anim pariatur occaecat reprehenderit ea et elit - excepteur nisi mollit tempor. Consequat ullamco do velit irure laboris adipisicing nulla enim. -
    • -
  • - Incididunt occaecat consequat aliqua fugiat sint veniam anim cupidatat. Laborum ex aliqua quis et labore - laboris. Quis laborum excepteur do nisi proident dolor duis sint cupidatat commodo proident sunt. Tempor - nisi consectetur ex culpa occaecat. Qui mollit mollit reprehenderit ea consequat quis aliqua minim anim - ullamco ullamco incididunt duis amet. Occaecat anim adipisicing laborum excepteur mollit do ullamco id - fugiat duis. -
    • -
- -) diff --git a/client/branded/src/global-styles/background.scss b/client/branded/src/global-styles/background.scss deleted file mode 100644 index 6c2ff296c5fd..000000000000 --- a/client/branded/src/global-styles/background.scss +++ /dev/null @@ -1,7 +0,0 @@ -// Extend Bootstrap's bg-* utilities with classes for our grey/blueish theme-aware background colors. - -@for $number from 1 through 6 { - .bg-#{$number} { - background: var(--color-bg-#{$number}); - } -} diff --git a/client/branded/src/global-styles/base.scss b/client/branded/src/global-styles/base.scss index c16b2b7c6dde..be008e6fa6dc 100644 --- a/client/branded/src/global-styles/base.scss +++ b/client/branded/src/global-styles/base.scss @@ -60,7 +60,6 @@ $enable-transitions: false; @import './utilities'; @import 'wildcard/src/global-styles/breakpoints'; @import 'shared/src/global-styles/icons'; -@import './background'; @import './dropdown'; @import './meter'; @import './popover'; diff --git a/client/branded/src/global-styles/utilities.scss b/client/branded/src/global-styles/utilities.scss index 00f43fa40e98..0a9654c3e608 100644 --- a/client/branded/src/global-styles/utilities.scss +++ b/client/branded/src/global-styles/utilities.scss @@ -1,4 +1,4 @@ -// Utilies classes extracted from bootstrap library. +// Utility classes extracted from bootstrap library. @import './utilities/align'; @import './utilities/border-radius'; @import './utilities/border'; @@ -30,6 +30,13 @@ background-color: transparent !important; } +// Extend Bootstrap's bg-* utilities with classes for our grey/blueish theme-aware background colors. +@for $number from 1 through 6 { + .bg-#{$number} { + background: var(--color-bg-#{$number}); + } +} + // Displays $displays: none, inline, inline-block, block, table, table-row, table-cell, flex, inline-flex; diff --git a/client/browser/config/webpack/base.config.ts b/client/browser/config/webpack/base.config.ts index 0622ea429c69..b9d9415c1ad3 100644 --- a/client/browser/config/webpack/base.config.ts +++ b/client/browser/config/webpack/base.config.ts @@ -85,7 +85,7 @@ export const config = subtypeOf()({ use: [getBabelLoader()], }, { - // SCSS rule for our own styles and Bootstrap + // SCSS rule for our own and third-party styles test: /\.(css|sass|scss)$/, exclude: /\.module\.(sass|scss)$/, use: getCSSLoaders(MiniCssExtractPlugin.loader, getBasicCSSLoader()), diff --git a/client/browser/src/branded.scss b/client/browser/src/branded.scss index b17621f2e343..757bfee46b66 100644 --- a/client/browser/src/branded.scss +++ b/client/browser/src/branded.scss @@ -1,4 +1,4 @@ // CSS entry point for branded contexts (options menu and after-install page) -// Bootstrap etc can be used freely here (in opposite to the content page styles in app.scss) +// global CSS classes etc can be used freely here (in opposite to the content page styles in app.scss) @import '../../branded/src/global-styles/index.scss'; diff --git a/client/shared/README.md b/client/shared/README.md index 909f3665ff11..bdee9c6e1f3d 100644 --- a/client/shared/README.md +++ b/client/shared/README.md @@ -1,7 +1,9 @@ +# Shared + This folder contains common TypeScript/React/SCSS client code shared between the browser extension and the web app. Everything in this folder is code-host agnostic and cannot make assumptions about whether it is running inside the Sourcegraph web app, in the browser extension on GitHub, Gitlab, Phabricator, Bitbucket Server, etc. -In particular, components cannot make use of Bootstrap classes, but must accept CSS classes as props and/or have their own code host agnostic SCSS stylesheets. +In particular, components cannot make use of global CSS classes but must accept CSS classes as props and/or have their own code host agnostic SCSS stylesheets. For more details, see [Styling UI in the handbook](../../doc/dev/background-information/web/styling.md). Code that is only used in branded contexts (web app, options menu of the browser extension, ...) should go into [`../branded`](../branded) instead. diff --git a/client/shared/src/actions/ActionsNavItems.tsx b/client/shared/src/actions/ActionsNavItems.tsx index 385fa9de9e08..d789ef84f7d2 100644 --- a/client/shared/src/actions/ActionsNavItems.tsx +++ b/client/shared/src/actions/ActionsNavItems.tsx @@ -64,7 +64,7 @@ export interface ActionsNavItemsProps } /** - * Renders the actions as a fragment of
  • elements, for use in a Bootstrap
      elements, for use in with
        or
          . */ export const ActionsNavItems: React.FunctionComponent> = props => { diff --git a/client/wildcard/src/components/Form/MultiSelect/styles.ts b/client/wildcard/src/components/Form/MultiSelect/styles.ts index a40d8613daf5..7f43a32217fa 100644 --- a/client/wildcard/src/components/Form/MultiSelect/styles.ts +++ b/client/wildcard/src/components/Form/MultiSelect/styles.ts @@ -21,7 +21,7 @@ export const STYLES: StylesConfig = { ? state.theme.colors.primary : 'var(--input-border-color)', boxShadow: state.isFocused - ? // These are stolen from `wildcard/Input` and `wildcard/Select`, which seem to come from Bootstrap + ? // These are stolen from `wildcard/Input` and `wildcard/Select`, which come from `client/branded/src/global-styles/forms.scss` state.selectProps.isValid ? 'var(--input-focus-box-shadow-valid)' : state.selectProps.isValid === false diff --git a/client/wildcard/src/components/Form/Select/Select.tsx b/client/wildcard/src/components/Form/Select/Select.tsx index d0977272da37..61fc58c90943 100644 --- a/client/wildcard/src/components/Form/Select/Select.tsx +++ b/client/wildcard/src/components/Form/Select/Select.tsx @@ -14,7 +14,7 @@ export const SELECT_SIZES = ['sm', 'lg'] as const export type SelectProps = AccessibleFieldProps> & React.RefAttributes & { /** - * Use the Bootstrap custom styles. */ export const getSelectStyles = ({ isCustomStyle, diff --git a/client/wildcard/src/components/Form/internal/FormFieldMessage.tsx b/client/wildcard/src/components/Form/internal/FormFieldMessage.tsx index d7a30022db14..497fcd31cc3f 100644 --- a/client/wildcard/src/components/Form/internal/FormFieldMessage.tsx +++ b/client/wildcard/src/components/Form/internal/FormFieldMessage.tsx @@ -5,7 +5,7 @@ export interface FormFieldMessageProps { } /** - * Returns the Bootstrap specific styles to apply to the message element based on associated validity. + * Returns the global CSS classes to apply to the message element based on associated validity. */ export const getMessageStyle = ({ isValid }: FormFieldMessageProps): string => { if (isValid === undefined) { diff --git a/client/wildcard/src/components/Form/internal/utils.ts b/client/wildcard/src/components/Form/internal/utils.ts index 5041eb453fbc..6d14503d87d7 100644 --- a/client/wildcard/src/components/Form/internal/utils.ts +++ b/client/wildcard/src/components/Form/internal/utils.ts @@ -1,5 +1,5 @@ /** - * Returns the Bootstrap specific styles to apply to the form element based on associated validity. + * Returns the global CSS classes to apply to the form element based on associated validity. */ export const getValidStyle = (isValid?: boolean): string => { if (isValid === undefined) { diff --git a/client/wildcard/src/components/Typography/Typography.story.tsx b/client/wildcard/src/components/Typography/Typography.story.tsx index 94f396154477..e8ccb4b8ca01 100644 --- a/client/wildcard/src/components/Typography/Typography.story.tsx +++ b/client/wildcard/src/components/Typography/Typography.story.tsx @@ -247,6 +247,7 @@ export const Simple: Story = (args = {}) => ( ) + Simple.argTypes = { mode: { control: { type: 'select', options: TYPOGRAPHY_MODES }, @@ -300,3 +301,134 @@ export const CrossingStyles: Story = () => ( ) + +const SEMANTIC_COLORS = ['primary', 'secondary', 'success', 'danger', 'warning', 'info', 'merged'] as const +export const Prose: Story = () => ( + <> +

          Prose

          + Text uses system fonts. The fonts should never be overridden. + + Minim nisi tempor Lorem do incididunt exercitation ipsum consectetur laboris elit est aute irure velit. + Voluptate irure excepteur sint reprehenderit culpa laboris. Elit id nostrud enim laboris irure. Est sunt ex + ipisicing aute elit voluptate consectetur.Do laboris anim fugiat ipsum sunt elit sunt amet consequat trud + irure labore cupidatat laboris. Voluptate eiusmod veniam nisi reprehenderit cillum Lorem veniam at amet ea + dolore enim. Ea laborum fugiat Lorem ea amet amet exercitation dolor culpa. Do consequat dolor ad elit ipsum + nostrud non laboris voluptate aliquip est reprehenderit incididunt. Eu nulla ad te enim. Pariatur duis + pariatur sit adipisicing pariatur nulla quis do sint deserunt aliqua Lorem aborum. Dolor esse aute cupidatat + deserunt anim ad eiusmod quis quis laborum magna nisi occaecat. Eu is eiusmod sint aliquip duis est sit + irure velit reprehenderit id. Cillum est esse et nulla ut adipisicing velit anim id exercitation nostrud. + Duis veniam sit laboris tempor quis sit cupidatat elit. + + + + Text can contain links, which trigger a navigation to a different page. + + + + Text can be emphasized or made strong. + + + + Text can be idiomatic with {''}. See{' '} + + {''} vs. {''} + {' '} + for more info. + + + + You can bring attention to the element with {''}. + + + + Text can have superscriptssup with {''}. + + + + Text can have subscriptssub with {''}. + + + + + You can use {''} to make small text. Use sparingly. + + + +

          Color variations

          + + text-* classes can be used to apply semantic coloring to text. + +
          + {['muted', ...SEMANTIC_COLORS].map(color => ( +
          + This is text-{color} +
          + ))} +
          + +

          Lists

          +

          Ordered

          +
            +
          1. + Dolor est laborum aute adipisicing quis duis mollit pariatur nostrud eiusmod Lorem pariatur elit mollit. + Sint pariatur culpa occaecat aute mollit enim amet nisi sunt aute ea aliqua esse laboris. Incididunt ad + duis laborum elit dolore esse sint nisi. Nulla in ea ipsum dolore irure sit labore commodo aute aliquip + esse. Consectetur non tempor qui sunt cillum est velit ut id sint id amet et commodo. +
            2. +
          2. + Eu nulla Lorem et ipsum commodo. Sint anim minim aute deserunt elit adipisicing minim sunt est tempor. + Exercitation non ad minim culpa fugiat nulla nulla. +
            3. +
          3. + Ex officia amet excepteur Lorem officia sit elit. Aute esse laboris consequat ea sint aute amet anim. + Laboris dolore dolor Lorem anim voluptate eiusmod nisi occaecat anim ipsum laboris ad. +
            4. +
          + +

          Unordered

          + +

          Dots

          +
            +
          • + Ullamco exercitation voluptate veniam et in incididunt Lorem id consequat dolor reprehenderit amet. Id + exercitation et labore do sint eiusmod irure. Lorem cupidatat dolor nulla sunt qui culpa esse cupidatat + ea. Esse elit voluptate ea officia excepteur nostrud veniam dolore tempor sint anim dolor ipsum eu. +
            • +
          • + Magna veniam in anim ea cupidatat nostrud. Pariatur mollit eiusmod incididunt irure pariatur amet. Est + adipisicing voluptate nulla Lorem esse laborum aliqua. +
            • +
          • + Proident nisi velit incididunt labore sunt eiusmod magna occaecat aliqua. Labore veniam ex adipisicing + ex magna qui officia dolor. Eiusmod excepteur dolor consequat deserunt enim ullamco eiusmod ullamco. +
            • +
          + +

          Dashes

          + + Dashed lists are created using list-dashed. + +
            +
          • + Ad deserunt amet Lorem in exercitation. Deserunt labore anim non minim. Dolor dolore adipisicing anim + cupidatat nulla. Sit voluptate aliqua exercitation occaecat nulla aute ex quis excepteur quis + exercitation fugiat et. Voluptate sint magna labore culpa nulla eu tempor labore in eiusmod excepteur. +
            • +
          • + Quis do proident non deserunt aliquip eiusmod dolor nisi et eiusmod irure labore irure. Veniam labore + aliquip ea irure dolore est cillum laborum exercitation. Anim pariatur occaecat reprehenderit ea et elit + excepteur nisi mollit tempor. Consequat ullamco do velit irure laboris adipisicing nulla enim. +
            • +
          • + Incididunt occaecat consequat aliqua fugiat sint veniam anim cupidatat. Laborum ex aliqua quis et labore + laboris. Quis laborum excepteur do nisi proident dolor duis sint cupidatat commodo proident sunt. Tempor + nisi consectetur ex culpa occaecat. Qui mollit mollit reprehenderit ea consequat quis aliqua minim anim + ullamco ullamco incididunt duis amet. Occaecat anim adipisicing laborum excepteur mollit do ullamco id + fugiat duis. +
            • +
          + +) diff --git a/doc/dev/background-information/web/styling.md b/doc/dev/background-information/web/styling.md index d07831152678..49011debaeb4 100644 --- a/doc/dev/background-information/web/styling.md +++ b/doc/dev/background-information/web/styling.md @@ -35,18 +35,16 @@ This means when one of the code hosts tweaks its design, or supports multiple th CSS classes as an approach represent the _lowest common denominator_ for styling between all environments, by staying close to the native web platform. -You may also notice that multiple of the above code hosts define the same or very similar classes to [Bootstrap](#host-specific-ui), which makes it easy to map classes between our web app and code host environments. +You may also notice that multiple of the above code hosts define the same or very similar classes to [our global CSS classes](#host-specific-ui), which makes it easy to map classes between our web app and code host environments. ### Host-specific UI -In the environments we control ourselves (such as our webapp, the options page of the browser extension, or our marketing website), we use a customized version of [Bootstrap](https://getbootstrap.com/) as a CSS framework. -Any code inside our webapp can and should make use of the CSS classes that Bootstrap provides as building blocks (and should generally do so instead of writing custom styles). -This includes classes like [cards](https://getbootstrap.com/docs/4.5/components/card/), [buttons](https://getbootstrap.com/docs/4.5/components/buttons/) or [input groups](https://getbootstrap.com/docs/4.5/components/input-group/), but also utility classes for [layout](https://getbootstrap.com/docs/4.5/utilities/flex/) and [spacing](https://getbootstrap.com/docs/4.5/utilities/spacing/). -Please refer to the excellent [Bootstrap documentation](https://getbootstrap.com/docs/4.5/) for everything that is available for use. -To see what our customizations look like visually (in both light and dark theme), you can find a [showcase in our Storybook](https://main--5f0f381c0e50750022dc6bf7.chromatic.com/?path=/story/branded-global-styles). +In the environments we control ourselves (such as our webapp, the options page of the browser extension, or our marketing website), we use components from [the Wildcard design system](https://storybook.sgdev.org/) and a set of global CSS classes extracted from [Bootstrap](https://getbootstrap.com/). +Any code inside our webapp can and should make use [Wildcard components](./wildcard.md) and global CSS classes defined in the `branded` package as building blocks (and should generally do so instead of writing custom styles). +This includes classes like [input groups](https://getbootstrap.com/docs/4.5/components/input-group/) and utility classes for [layout](https://getbootstrap.com/docs/4.5/utilities/flex/) and [spacing](https://getbootstrap.com/docs/4.5/utilities/spacing/). Check out available global CSS classes in the `branded` package. Components only used in a specific host environment do not need to support customization through class names. -They can however utilize environment-agnostic components by passing our Bootstrap classes as custom `className` values. +They can however utilize environment-agnostic components by passing our global CSS classes as custom `className` values. ## Our approach to styling @@ -72,7 +70,7 @@ In some cases these can be overridden by passing another class name for that ele #### CSS Modules -[CSS modules](https://github.com/css-modules/css-modules) is the **preferred** way to avoid name conflicts in CSS classes. +[CSS modules](https://github.com/css-modules/css-modules) is the way to avoid name conflicts in CSS classes. To use this approach, colocate a SCSS stylesheet with the React component and use the `.module.scss.` suffix in a file name. Example: @@ -87,28 +85,18 @@ import styles from './PageSelector.module.scss'