chore: minor updates to docs site

openedx · Sep 1, 2024 · 6fd928e · 6fd928e
1 parent a899226
commit 6fd928e
Show file tree

Hide file tree

Showing 8 changed files with 126 additions and 54 deletions.
diff --git a/styles/css/core/custom-media-breakpoints.css b/styles/css/core/custom-media-breakpoints.css
@@ -1,6 +1,6 @@
 /**
  * Do not edit directly, this file was auto-generated.
- * Generated on Sat, 31 Aug 2024 22:00:31 GMT
+ * Generated on Sun, 01 Sep 2024 13:12:18 GMT
  */
 
 @custom-media --pgn-size-breakpoint-min-width-xs (min-width: 0rem);

diff --git a/styles/css/core/variables.css b/styles/css/core/variables.css
@@ -1,6 +1,6 @@
 /**
  * Do not edit directly, this file was auto-generated.
- * Generated on Sat, 31 Aug 2024 22:00:31 GMT
+ * Generated on Sun, 01 Sep 2024 13:12:18 GMT
  */
 
 :root {

diff --git a/styles/css/themes/light/utility-classes.css b/styles/css/themes/light/utility-classes.css
@@ -1,6 +1,6 @@
 /**
  * Do not edit directly, this file was auto-generated.
- * Generated on Sat, 31 Aug 2024 22:00:31 GMT
+ * Generated on Sun, 01 Sep 2024 13:12:19 GMT
  */
 
 .bg-accent-a {

diff --git a/styles/css/themes/light/variables.css b/styles/css/themes/light/variables.css
@@ -1,6 +1,6 @@
 /**
  * Do not edit directly, this file was auto-generated.
- * Generated on Sat, 31 Aug 2024 22:00:31 GMT
+ * Generated on Sun, 01 Sep 2024 13:12:19 GMT
  */
 
 :root {

diff --git a/www/src/components/MeasuredItem.tsx b/www/src/components/MeasuredItem.tsx
@@ -41,8 +41,6 @@ function MeasuredItem({
         }, {});
         setMeasurements(measurementsItems);
       };
-      // Needs a moment to finish switching theme and re-render children to DOM first.
-      setMeasurements(initialMeasurements);
       const timeout = setTimeout(measure, 1000);
       return () => clearTimeout(timeout);
     },

diff --git a/www/src/components/typography-page/measuredTypeProps.tsx b/www/src/components/typography-page/measuredTypeProps.tsx
@@ -15,7 +15,7 @@ const measuredTypeProps = {
   renderAfter: (measurements: { [x: string]: string; }) => {
     if (!measurements || Object.keys(measurements).length === 0) {
       return (
-        <p className="m-0 text-muted">Computing measurements...</p>
+        <p className="m-0 text-muted">&nbsp;</p>
       );
     }
     const fontFamily = measurements['font-family']?.split(',')[0];

diff --git a/www/src/pages/foundations/colors.tsx b/www/src/pages/foundations/colors.tsx
@@ -9,27 +9,52 @@ import { SettingsContext } from '../../context/SettingsContext';
 import { CodeCell } from '../../components/TableCells';
 
 const utilityClasses = {
-  bg: (color: string, level: number) => (level ? `bg-${color}-${level}` : `bg-${color}`),
+  bg: (color: string, level?: number) => (level ? `bg-${color}-${level}` : `bg-${color}`),
   border: (color: string, level: number) => (level ? `border-${color}-${level}` : `border-${color}`),
   text: (color: string, level: number) => (level ? `text-${color}-${level}` : `text-${color}`),
 };
 
-export interface IColors {
+type UnusedLevels = number[];
+
+interface ColorVariant {
+  name: string,
+  unusedLevels?: UnusedLevels,
+  hasLevels?: boolean,
+}
+
+export interface IColorsBase {
   themeName: string,
-  color: string,
-  unusedLevels: number[],
 }
 
+export interface IColorsWithUnusedLevels extends IColorsBase {
+  unusedLevels?: UnusedLevels,
+  variants?: never,
+}
+
+export interface IColorsWithVariants extends IColorsBase {
+  variants: ColorVariant[],
+  unusedLevels?: never,
+}
+
+export type IColors = IColorsWithUnusedLevels | IColorsWithVariants;
+
 const colors: IColors[] = [
-  { themeName: 'gray', color: 'gray', unusedLevels: [] },
-  { themeName: 'primary', color: 'blue', unusedLevels: [] },
-  { themeName: 'brand', color: 'blue', unusedLevels: [] },
-  { themeName: 'light', color: 'light', unusedLevels: [] },
-  { themeName: 'dark', color: 'dark', unusedLevels: [] },
-  { themeName: 'success', color: 'green', unusedLevels: [] },
-  { themeName: 'info', color: 'teal', unusedLevels: [] },
-  { themeName: 'danger', color: 'red', unusedLevels: [] },
-  { themeName: 'warning', color: 'yellow', unusedLevels: [] },
+  { themeName: 'gray' },
+  { themeName: 'primary' },
+  { themeName: 'brand' },
+  { themeName: 'light' },
+  { themeName: 'dark' },
+  { themeName: 'success' },
+  { themeName: 'info' },
+  { themeName: 'danger' },
+  { themeName: 'warning' },
+  {
+    themeName: 'accent',
+    variants: [
+      { name: 'a', hasLevels: false },
+      { name: 'b', hasLevels: false },
+    ],
+  },
 ];
 
 const levels = [100, 200, 300, 400, 500, 600, 700, 800, 900];
@@ -61,21 +86,20 @@ export interface ISwatch {
 function Swatch({
   name, colorClassName, isUnused, styles,
 }: ISwatch) {
-  const computedValue = styles?.getPropertyValue(name);
+  const computedValue = styles?.getPropertyValue(`--pgn-color-${name}`);
+
+  if (isUnused) {
+    return null;
+  }
 
   return (
     <div className="d-flex align-items-center mb-2">
-      <div
-        className={classNames('p-3 mr-2 rounded', colorClassName, {
-          'unused-level': isUnused,
-        })}
-      />
+      <div className={classNames('p-3 mr-2 rounded', colorClassName)} />
       <div style={{ lineHeight: 1 }} className="small">
-        <code className="mb-0 d-block text-lowercase text-dark-700">
-          {`var(${name})`}
+        <code className="d-block text-lowercase text-dark">
+          {name}
         </code>
-
-        <code style={{ fontSize: '65%' }} className="text-muted">
+        <code className="text-muted micro">
           {computedValue}
         </code>
       </div>
@@ -93,20 +117,72 @@ Swatch.defaultProps = {
   isUnused: false,
 };
 
-const renderColorRamp = (themeName: string, unusedLevels: number[], styles: CSSStyleDeclarationType) => (
-  <div
-    key={`${themeName}`}
-  >
+
+
+export interface IRenderColorRampBase {
+  themeName: string;
+  styles: CSSStyleDeclarationType;
+}
+
+export interface IRenderColorRampWithUnusedLevels extends IRenderColorRampBase {
+  unusedLevels: UnusedLevels;
+  variants?: never;
+}
+
+export interface IRenderColorRampWithVariants extends IRenderColorRampBase {
+  variants: ColorVariant[];
+  unusedLevels?: never;
+}
+
+export type IRenderColorRamp = IRenderColorRampWithUnusedLevels | IRenderColorRampWithVariants;
+
+const renderColorRamp = ({
+  themeName,
+  unusedLevels = [],
+  variants = [],
+  styles,
+}: IRenderColorRamp) => (
+  <div key={`${themeName}`}>
     <p className="h5">{themeName}</p>
-    {levels.map(level => (
-      <Swatch
-        key={`${themeName}-${level}`}
-        name={`--pgn-color-${themeName}-${level}`}
-        colorClassName={utilityClasses.bg(themeName, level)}
-        isUnused={unusedLevels.includes(level)}
-        styles={styles}
-      />
-    ))}
+    {variants.length > 0
+      ? variants.map(({
+        name,
+        unusedLevels: variantUnusedLevels = [],
+        hasLevels = true,
+      }) => {
+        if (hasLevels) {
+          return (
+            <div key={`${themeName}-${name}`}>
+              {levels.map(level => (
+                <Swatch
+                  key={`${themeName}-${name}-${level}`}
+                  name={`${name}-${level}`}
+                  colorClassName={utilityClasses.bg(`${themeName}-${name}`, level)}
+                  isUnused={variantUnusedLevels.includes(level)}
+                  styles={styles}
+                />
+              ))}
+            </div>
+          );
+        }
+        return (
+          <Swatch
+            key={`${themeName}-${name}`}
+            name={`${themeName}-${name}`}
+            colorClassName={utilityClasses.bg(`${themeName}-${name}`)}
+            styles={styles}
+          />
+        );
+      })
+      : levels.map(level => (
+          <Swatch
+            key={`${themeName}-${level}`}
+            name={`${themeName}-${level}`}
+            colorClassName={utilityClasses.bg(themeName, level)}
+            isUnused={unusedLevels.includes(level)}
+            styles={styles}
+          />
+        ))}
   </div>
 );
 
@@ -146,16 +222,10 @@ export default function ColorsPage({ data, pageContext }: IColorsPage) {
         <div className="color-palette mb-3">
           {colors
             .slice(0, 3)
-            .map(({ themeName, unusedLevels }) => renderColorRamp(themeName, unusedLevels, styles))}
+            .map((colorArgs) => renderColorRamp({ ...colorArgs, styles }))}
           {colors
             .slice(3)
-            .map(({ themeName, unusedLevels }) => renderColorRamp(themeName, unusedLevels, styles))}
-          <div>
-            <p className="h5">accents</p>
-
-            <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>
+            .map((colorArgs) => renderColorRamp({ ...colorArgs, styles }))}
         </div>
 
         <h3>CSS Color Usage</h3>
@@ -283,7 +353,7 @@ export default function ColorsPage({ data, pageContext }: IColorsPage) {
         <div className="d-flex">
           {[500, 700, 900].map(level => (
             <div key={level} style={{ flexBasis: '33%' }}>
-              {colors.map(({ themeName, unusedLevels }) => {
+              {colors.map(({ themeName, unusedLevels = [] }) => {
                 if (unusedLevels.includes(level)) { return null; }
                 return (
                   <code

diff --git a/www/src/scss/edxorg-theme.scss b/www/src/scss/edxorg-theme.scss
@@ -1,3 +1,7 @@
-@import url("https://cdn.jsdelivr.net/npm/@edx/elm-theme@1.8.1/dist/core.min.css");
-@import url("https://cdn.jsdelivr.net/npm/@edx/elm-theme@1.8.1/dist/light.min.css");
+// @import url("https://cdn.jsdelivr.net/npm/@edx/elm-theme@1.8.1/dist/core.min.css");
+// @import url("https://cdn.jsdelivr.net/npm/@edx/elm-theme@1.8.1/dist/light.min.css");
+
+@use "../../../../elm-theme/dist/core.min.css";
+@use "../../../../elm-theme/dist/light.min.css";
+
 @import "base";