Skip to content

Commit

Permalink
docs: replaced SCSS variables with CSS variables on the Colors page (#…
Browse files Browse the repository at this point in the history 
…2376)

* docs: replaced SCSS variables with CSS variables on the Colors page of the documentation site

* refactor: refactoring after review

* refactor: refactoring after review

* fix: removed extra commons.css generation

* refactor: code refactoring

* refactor: removed Colors package
  • Loading branch information
@PKulkoRaccoonGang
PKulkoRaccoonGang committed Aug 1, 2024
1 parent 2e4ffbf commit 5ee235b
Show file tree
Hide file tree
Showing 4 changed files with 57 additions and 136 deletions.
6 changes: 2 additions & 4 deletions www/package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,6 @@
"analytics-node": "^6.0.0",
"axios": "^0.27.2",
"classnames": "^2.3.1",
"color": "^4.2.3",
"gatsby": "^4.23.1",
"gatsby-plugin-manifest": "^4.17.0",
"gatsby-plugin-mdx": "^3.17.0",
Expand All @@ -37,8 +36,8 @@
"rehype-slug": "^4.0.1",
"sass": "^1.53.0",
"sass-loader": "12.6.0",
"uuid": "^9.0.0",
"slugify": "^1.6.5"
"slugify": "^1.6.5",
"uuid": "^9.0.0"
},
"keywords": [
"paragon",
Expand Down Expand Up @@ -69,7 +68,6 @@
"@babel/preset-typescript": "^7.16.7",
"@edx/eslint-config": "^3.1.0",
"@svgr/webpack": "6.5.1",
"@types/color": "^3.0.3",
"@types/mdx": "^2.0.3",
"@types/mdx-js__react": "^1.5.5",
"@types/react-helmet": "^6.1.6",
Expand Down
5 changes: 0 additions & 5 deletions www/src/components/PageLayout.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -27,11 +27,6 @@ import { SettingsContext } from '../context/SettingsContext';
import LeaveFeedback from './LeaveFeedback';
import AutoToc from './AutoToc';

if (process.env.NODE_ENV === 'development') {
/* eslint-disable-next-line global-require */
require('~paragon-style/scss/core/core.scss');
}

export interface ILayout {
children: React.ReactNode,
showMinimizedTitle: boolean,
Expand Down
6 changes: 6 additions & 0 deletions www/src/components/_doc-elements.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -324,3 +324,9 @@
.pgn-doc__box-shadow-toolkit--controls-box--remove-btn svg {
color: var(--pgn-color-white);
}

.color-palette {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(19rem, 1fr));
grid-row-gap: 2rem;
}
176 changes: 49 additions & 127 deletions www/src/pages/foundations/colors.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,10 +2,8 @@ import React, { useContext } from 'react';
import { graphql } from 'gatsby';
import PropTypes from 'prop-types';
import classNames from 'classnames';
import Color from 'color';
import { Container, DataTable } from '~paragon-react';
import SEO from '../../components/SEO';
import MeasuredItem from '../../components/MeasuredItem';
import Layout from '../../components/PageLayout';
import { SettingsContext } from '../../context/SettingsContext';

Expand Down Expand Up @@ -52,36 +50,36 @@ function parseColors(cssSelectors: { selector: string; declarations: string; }[]
});
}

export type CSSStyleDeclarationType = CSSStyleDeclaration | null;

export interface ISwatch {
name: string,
colorClassName: string,
isUnused?: boolean,
styles: CSSStyleDeclarationType,
}

function Swatch({ name, colorClassName, isUnused }: ISwatch) {
function Swatch({
name, colorClassName, isUnused, styles,
}: ISwatch) {
const computedValue = styles?.getPropertyValue(name);

return (
<div className="d-flex align-items-center mb-2">
<MeasuredItem
properties={['background-color']}
renderAfter={(measurements: { [x: string]: JSX.Element; }) => (
<div style={{ lineHeight: 1 }} className="small">
<code className="mb-0 d-block text-lowercase text-dark-700">
{name}
</code>
{measurements['background-color'] && (
<code style={{ fontSize: '65%' }} className="text-muted">
{Color(measurements['background-color']).hex()}
</code>
)}
</div>
)}
>
<div
className={classNames('p-3 mr-2 rounded', colorClassName, {
'unused-level': isUnused,
})}
/>
</MeasuredItem>
<div
className={classNames('p-3 mr-2 rounded', colorClassName, {
'unused-level': isUnused,
})}
/>
<div style={{ lineHeight: 1 }} className="small">
<code className="mb-0 d-block text-lowercase text-dark-700">
{`var(${name})`}
</code>

<code style={{ fontSize: '65%' }} className="text-muted">
{computedValue}
</code>
</div>
</div>
);
}
Expand All @@ -96,18 +94,18 @@ Swatch.defaultProps = {
isUnused: false,
};

const renderColorRamp = (themeName: string, unusedLevels: number[]) => (
const renderColorRamp = (themeName: string, unusedLevels: number[], styles: CSSStyleDeclarationType) => (
<div
key={`${themeName}`}
style={{ flexBasis: '24%', marginRight: '1%', marginBottom: '2rem' }}
>
<p className="h5">{themeName}</p>
{levels.map(level => (
<Swatch
key={`$${themeName}-${level}`}
name={`$${themeName}-${level}`}
key={`${themeName}-${level}`}
name={`--pgn-color-${themeName}-${level}`}
colorClassName={utilityClasses.bg(themeName, level)}
isUnused={unusedLevels.includes(level)}
styles={styles}
/>
))}
</div>
Expand All @@ -124,6 +122,8 @@ export interface IColorsPage {
// eslint-disable-next-line react/prop-types
export default function ColorsPage({ data }: IColorsPage) {
const { settings } = useContext(SettingsContext);
const styles = typeof window !== 'undefined' ? getComputedStyle(document.body) : null;

parseColors(data.allCssUtilityClasses.nodes); // eslint-disable-line react/prop-types

return (
Expand All @@ -132,123 +132,45 @@ export default function ColorsPage({ data }: IColorsPage) {
<SEO title="Colors" />
<Container size={settings.containerWidth} className="py-5">
<h1>Colors</h1>
<div className="d-flex flex-wrap">
<div className="color-palette mb-3">
{colors
.slice(0, 3)
.map(({ themeName, unusedLevels }) => renderColorRamp(themeName, unusedLevels))}
<div
style={{
flexBasis: '19%',
marginRight: '1%',
marginBottom: '2rem',
}}
>
.map(({ themeName, unusedLevels }) => renderColorRamp(themeName, unusedLevels, styles))}
{colors
.slice(3)
.map(({ themeName, unusedLevels }) => renderColorRamp(themeName, unusedLevels, styles))}
<div>
<p className="h5">accents</p>

<Swatch name="$accent-a" colorClassName="bg-accent-a" />
<Swatch name="$accent-b" colorClassName="bg-accent-b" />
<Swatch name="--pgn-color-accent-a" colorClassName="bg-accent-a" styles={styles} />
<Swatch name="--pgn-color-accent-b" colorClassName="bg-accent-b" styles={styles} />
</div>

{colors
.slice(3)
.map(({ themeName, unusedLevels }) => renderColorRamp(themeName, unusedLevels))}
</div>

<h3>SCSS Color Usage</h3>
<p>Include these colors in scss files in one of two ways:</p>
<h3>CSS Color Usage</h3>

<h4>Variable name</h4>
<code className="d-block mb-4 lead bg-gray-100 p-3">
{'// $color_name-level '}
{'// var(--pgn-color-name-level) '}
<br />
$primary-100
var(--pgn-color-primary-100)
<br />
$primary-200
var(--pgn-color-primary-200)
<br />
$brand-100
var(--pgn-color-brand-100)
<br />
$brand-200
</code>

<h4>Mixin (deprecated)</h4>
<code className="d-block mb-4 lead bg-gray-100 p-3">
theme-color($color-name, $variant)
var(--pgn-color-brand-200)
</code>

<h4>With default value</h4>
<p>
Using the variable name instead of the theme-color mixin will make
later upgrade paths easier. Paragon may begin to adopt CSS variables
for theming and attempt to eliminate mixins from the public api.
Using a default value in CSS variables allows to set a default value for a variable,
which will be used if the primary value of the variable is not defined or not available.
</p>

<table className="pgn-doc__table mb-2">
<tbody>
<tr>
<td className="p-3">
<strong>Color Name</strong>
<br />A theme color
</td>
<td className="p-3 align-baseline">
{colors.map(({ themeName }) => (
<code key={themeName} className="mr-2">
{themeName}
</code>
))}
</td>
</tr>
<tr>
<td className="p-3 align-baseline">
<strong>Variant</strong>
<br />
<p>A number level or element type</p>
</td>
<td className="p-3">
<strong className="d-block">Levels </strong>
{levels.map((level) => (
<code key={level} className="mr-2">
{level}
</code>
))}
<br />
<strong className="d-block">Element types </strong>
{[
'background',
'disabled-border',
'border',
'icon',
'active-border',
'focus',
'graphic',
'default',
'light-text',
'hover',
'text',
'active',
'dark-text',
].map((element) => (
<code key={element} className="mr-2">
{element}
</code>
))}
</td>
</tr>
</tbody>
</table>

<h4>Example</h4>
<code className="d-block mb-2 bg-gray-100 p-3">
border: solid 1px <strong>$gray-300</strong>;
</code>

<code className="d-block mb-2 bg-gray-100 p-3">
border: solid 1px{' '}
<strong>theme-color(&ldquo;gray&rdquo;, &ldquo;border&rdquo;)</strong>
;
</code>

<code className="d-block mb-4 bg-gray-100 p-3">
border: solid 1px{' '}
<strong>theme-color(&ldquo;gray&rdquo;, 300)</strong>;
<code className="d-block mb-4 lead bg-gray-100 p-3">
{'// var(--pgn-color-name-level), default variable '}
<br />
var(--pgn-color-brand-100, var(--pgn-color-primary-200))
</code>

<h3>CSS Class Utilities</h3>
Expand Down

0 comments on commit 5ee235b

Please sign in to comment.