From ae539b147055990b8664a444e59014902d6018b2 Mon Sep 17 00:00:00 2001 From: PKulkoRaccoonGang Date: Wed, 14 Jun 2023 17:54:22 +0300 Subject: [PATCH 1/6] docs: replaced SCSS variables with CSS variables on the Colors page of the documentation site --- www/src/components/_doc-elements.scss | 6 ++ www/src/pages/foundations/colors.tsx | 116 +++++--------------------- 2 files changed, 25 insertions(+), 97 deletions(-) diff --git a/www/src/components/_doc-elements.scss b/www/src/components/_doc-elements.scss index e2c29574f2..94d3e937cd 100644 --- a/www/src/components/_doc-elements.scss +++ b/www/src/components/_doc-elements.scss @@ -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; +} diff --git a/www/src/pages/foundations/colors.tsx b/www/src/pages/foundations/colors.tsx index 58f15f752e..379d68e6a2 100644 --- a/www/src/pages/foundations/colors.tsx +++ b/www/src/pages/foundations/colors.tsx @@ -98,13 +98,12 @@ Swatch.defaultProps = { const renderColorRamp = (themeName: string, unusedLevels: number[]) => (

{themeName}

{levels.map(level => ( @@ -131,21 +130,15 @@ export default function ColorsPage({ data }: IColorsPage) {

Colors

-
+
{colors .slice(0, 3) .map(({ themeName, unusedLevels }) => renderColorRamp(themeName, unusedLevels))} -
+

accents

- - + +
{colors @@ -153,101 +146,30 @@ export default function ColorsPage({ data }: IColorsPage) { .map(({ themeName, unusedLevels }) => renderColorRamp(themeName, unusedLevels))}
-

SCSS Color Usage

-

Include these colors in scss files in one of two ways:

+

CSS Color Usage

Variable name

- {'// $color_name-level '} + {'// var(--pgn-color-name-level) '}
- $primary-100 + var(--pgn-color-primary-100)
- $primary-200 + var(--pgn-color-primary-200)
- $brand-100 + var(--pgn-color-brand-100)
- $brand-200 - - -

Mixin (deprecated)

- - theme-color($color-name, $variant) + var(--pgn-color-brand-200) +

With default value

- 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 you 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.

- - - - - - - - - - - - -
- Color Name -
A theme color - 		- {colors.map(({ themeName }) => ( - - {themeName} - - ))} -
- Variant -
-

A number level or element type

- 		- Levels - {levels.map((level) => ( - - {level} - - ))} -
- Element types - {[ - 'background', - 'disabled-border', - 'border', - 'icon', - 'active-border', - 'focus', - 'graphic', - 'default', - 'light-text', - 'hover', - 'text', - 'active', - 'dark-text', - ].map((element) => ( - - {element} - - ))} -
- -

Example

- - border: solid 1px $gray-300; - - - - border: solid 1px{' '} - theme-color(“gray”, “border”) - ; - - - - border: solid 1px{' '} - theme-color(“gray”, 300); + + {'// var(--pgn-color-name-level), default variable '} +
+ var(--pgn-color-brand-100, var(--pgn-color-primary-200))

CSS Class Utilities

From 84bb3f55a9bd605cd684173b825c0e59c6c513b9 Mon Sep 17 00:00:00 2001 From: PKulkoRaccoonGang Date: Thu, 15 Jun 2023 18:51:40 +0300 Subject: [PATCH 2/6] refactor: refactoring after review --- www/src/pages/foundations/colors.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/www/src/pages/foundations/colors.tsx b/www/src/pages/foundations/colors.tsx index 379d68e6a2..4ea028b7e0 100644 --- a/www/src/pages/foundations/colors.tsx +++ b/www/src/pages/foundations/colors.tsx @@ -163,7 +163,7 @@ export default function ColorsPage({ data }: IColorsPage) {

With default value

- Using a default value in CSS variables allows you to set a default value for a variable, + 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.

From 9ba0ed591c81646f4b3c5d19ebbd687a706e5bb0 Mon Sep 17 00:00:00 2001 From: PKulkoRaccoonGang Date: Thu, 20 Jul 2023 17:37:45 +0300 Subject: [PATCH 3/6] refactor: refactoring after review --- www/src/pages/foundations/colors.tsx | 46 ++++++++++++---------------- 1 file changed, 20 insertions(+), 26 deletions(-) diff --git a/www/src/pages/foundations/colors.tsx b/www/src/pages/foundations/colors.tsx index 4ea028b7e0..9a61abbd0f 100644 --- a/www/src/pages/foundations/colors.tsx +++ b/www/src/pages/foundations/colors.tsx @@ -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'; import { CodeCell } from '../../components/TableCells'; @@ -57,30 +55,26 @@ export interface ISwatch { isUnused?: boolean, } +const styles = getComputedStyle(document.body); + function Swatch({ name, colorClassName, isUnused }: ISwatch) { + const computedValue = styles.getPropertyValue(name); + return (
- ( -
- - {name} - - {measurements['background-color'] && ( - - {Color(measurements['background-color']).hex()} - - )} -
- )} - > -
- +
+
+ + {`var(${name})`} + + + {computedValue} + +
); } @@ -103,7 +97,7 @@ const renderColorRamp = (themeName: string, unusedLevels: number[]) => ( {levels.map(level => ( @@ -137,8 +131,8 @@ export default function ColorsPage({ data }: IColorsPage) {

accents

- - + +
{colors From 95c28ea14801d3a5c5db6a85675e64b7861f41c3 Mon Sep 17 00:00:00 2001 From: PKulkoRaccoonGang Date: Fri, 8 Sep 2023 13:11:08 +0300 Subject: [PATCH 4/6] fix: removed extra commons.css generation --- www/src/components/PageLayout.tsx | 5 ----- www/src/pages/foundations/colors.tsx | 12 ++++++------ 2 files changed, 6 insertions(+), 11 deletions(-) diff --git a/www/src/components/PageLayout.tsx b/www/src/components/PageLayout.tsx index 440e9f4577..a5e1375819 100644 --- a/www/src/components/PageLayout.tsx +++ b/www/src/components/PageLayout.tsx @@ -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, diff --git a/www/src/pages/foundations/colors.tsx b/www/src/pages/foundations/colors.tsx index 9a61abbd0f..e9fb39d3ab 100644 --- a/www/src/pages/foundations/colors.tsx +++ b/www/src/pages/foundations/colors.tsx @@ -55,10 +55,10 @@ export interface ISwatch { isUnused?: boolean, } -const styles = getComputedStyle(document.body); +const styles = typeof window !== 'undefined' ? getComputedStyle(document.body) : null; function Swatch({ name, colorClassName, isUnused }: ISwatch) { - const computedValue = styles.getPropertyValue(name); + const computedValue = styles?.getPropertyValue(name); return (
@@ -71,6 +71,7 @@ function Swatch({ name, colorClassName, isUnused }: ISwatch) { {`var(${name})`} + {computedValue} @@ -128,16 +129,15 @@ export default function ColorsPage({ data }: IColorsPage) { {colors .slice(0, 3) .map(({ themeName, unusedLevels }) => renderColorRamp(themeName, unusedLevels))} + {colors + .slice(3) + .map(({ themeName, unusedLevels }) => renderColorRamp(themeName, unusedLevels))}

accents

- - {colors - .slice(3) - .map(({ themeName, unusedLevels }) => renderColorRamp(themeName, unusedLevels))}

CSS Color Usage

From f76e30d9daf7f4dc49baa13908cf6cdbfa200b60 Mon Sep 17 00:00:00 2001 From: PKulkoRaccoonGang Date: Thu, 14 Sep 2023 13:10:26 +0300 Subject: [PATCH 5/6] refactor: code refactoring --- www/src/pages/foundations/colors.tsx | 22 ++++++++++++++-------- 1 file changed, 14 insertions(+), 8 deletions(-) diff --git a/www/src/pages/foundations/colors.tsx b/www/src/pages/foundations/colors.tsx index e9fb39d3ab..35a6917f7f 100644 --- a/www/src/pages/foundations/colors.tsx +++ b/www/src/pages/foundations/colors.tsx @@ -49,15 +49,18 @@ function parseColors(cssSelectors: { selector: string; declarations: string; }[] }); } +export type CSSStyleDeclarationType = CSSStyleDeclaration | null; + export interface ISwatch { name: string, colorClassName: string, isUnused?: boolean, + styles: CSSStyleDeclarationType, } -const styles = typeof window !== 'undefined' ? getComputedStyle(document.body) : null; - -function Swatch({ name, colorClassName, isUnused }: ISwatch) { +function Swatch({ + name, colorClassName, isUnused, styles, +}: ISwatch) { const computedValue = styles?.getPropertyValue(name); return ( @@ -90,7 +93,7 @@ Swatch.defaultProps = { isUnused: false, }; -const renderColorRamp = (themeName: string, unusedLevels: number[]) => ( +const renderColorRamp = (themeName: string, unusedLevels: number[], styles: CSSStyleDeclarationType) => (
@@ -101,6 +104,7 @@ const renderColorRamp = (themeName: string, unusedLevels: number[]) => ( name={`--pgn-color-${themeName}-${level}`} colorClassName={utilityClasses.bg(themeName, level)} isUnused={unusedLevels.includes(level)} + styles={styles} /> ))}
@@ -117,6 +121,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 ( @@ -128,15 +134,15 @@ export default function ColorsPage({ data }: IColorsPage) {
{colors .slice(0, 3) - .map(({ themeName, unusedLevels }) => renderColorRamp(themeName, unusedLevels))} + .map(({ themeName, unusedLevels }) => renderColorRamp(themeName, unusedLevels, styles))} {colors .slice(3) - .map(({ themeName, unusedLevels }) => renderColorRamp(themeName, unusedLevels))} + .map(({ themeName, unusedLevels }) => renderColorRamp(themeName, unusedLevels, styles))}

accents

- - + +
From 12a2267d423a24478e3824d59e6da53139b8ba67 Mon Sep 17 00:00:00 2001 From: PKulkoRaccoonGang Date: Thu, 14 Sep 2023 13:26:55 +0300 Subject: [PATCH 6/6] refactor: removed Colors package --- package-lock.json | 23 ----------------------- www/package.json | 6 ++---- 2 files changed, 2 insertions(+), 27 deletions(-) diff --git a/package-lock.json b/package-lock.json index 96252d4366..207e03b6f6 100644 --- a/package-lock.json +++ b/package-lock.json @@ -7705,27 +7705,6 @@ "@types/tern": "*" } }, - "node_modules/@types/color": { - "version": "3.0.3", - "dev": true, - "license": "MIT", - "dependencies": { - "@types/color-convert": "*" - } - }, - "node_modules/@types/color-convert": { - "version": "2.0.0", - "dev": true, - "license": "MIT", - "dependencies": { - "@types/color-name": "*" - } - }, - "node_modules/@types/color-name": { - "version": "1.1.1", - "dev": true, - "license": "MIT" - }, "node_modules/@types/common-tags": { "version": "1.8.1", "license": "MIT" @@ -39313,7 +39292,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", @@ -39350,7 +39328,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", diff --git a/www/package.json b/www/package.json index 21c7d9ff05..63609ab3ea 100644 --- a/www/package.json +++ b/www/package.json @@ -10,7 +10,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", @@ -36,8 +35,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", @@ -68,7 +67,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",