Doc and formatting changes in preparation of refactoring style CSS va…

TODO.md

@@ -15,6 +15,157 @@ Axe accessibility (2) - axe-core integration
 
 \[color:var\(--color-(.*?)\)\]
 
+## Color vars
+
+brand primary:    #001733
+brand secondary:  #0062B6
+
+src/components: 427
+src/lib: 13
+src/pages: 250
+
+Applies a solid border of currentColor to an element:
+
+ring (1px), ring-2, ring-4
+accent
+
+### text-white
+
+- Button - success button text
+- Button - success button hover text
+- Button - success button focus text
+
+### --color-bg: 57  #f3f4f6
+
+- [tag] - main content background
+
+### --color-bg-offset: 48 #e5e7eb
+
+- Avatar - wrapper for fallback that just shows initials
+- Button - icon button hover background
+- Button - icon button focus background
+- Button - icon button active background
+
+### --color-bg-inverse: 2 #001a39
+
+### --color-text: 141 #374151
+
+- Button - primary button text
+- Button - primary button focus text
+- Button - secondary button text
+- Button - secondary button hover text
+- Button - secondary button focus text
+- Button - icon button text
+- Button - twitter button text
+- [tag] - H1
+
+### --color-text-offset: 103  #9ca3af
+
+- Avatar - test in wrapper for fallback that just shows initials
+- [tag] - header text
+
+### --color-border: 68  #f0f4ff
+
+### --color-primary: 180  #006dca
+
+- Button - primary button background
+- [tag] - header anchor text
+
+### --color-primary-offset: 14  #00386d
+
+- Button - primary button focus background
+- Hamburger Menu Icon - SVG background fill
+
+### --color-primary-bg: 7   #dbeafe
+
+### --color-primary-bg-hover: 1   #bfdbfe
+
+### --color-primary-hover: 15   #0056a3
+
+### --color-secondary: 5    #facc15
+
+- Button - secondary button background
+
+### --color-secondary-offset: 7   #ca8a04
+
+- Button - secondary button hover background
+- Button - secondary button focus background
+- Button - secondary button active background
+
+### --color-secondary-bg: 1   #fef3c7
+
+### --color-success: 19   #16a34a
+
+- Button - success button background
+
+### --color-success-offset: 7   #22c55e
+
+- Button - success button hover background
+- Button - success button focus background
+- Button - success button active background
+
+### --color-success-bg: 6   #dcfce7
+
+### --color-info: 1   #0891b2
+
+### --color-info-bg: 2    #cffafe
+
+### --color-warning: 5    #a16207
+
+- Button - warning button background
+
+### --color-warning-offset: 3   #ca8a04
+
+- Button - warning button hover background
+- Button - warning button focus background
+- Button - warning button active background
+
+### --color-warning-bg: 1   #fef3c7
+
+### --color-danger: 16    #dc2626
+
+### --color-danger-bg: 5    #fecaca
+
+### --color-accent: 10    #7c3aed
+
+### --color-accent-bg: 1    #ede9fe
+
+### --color-link-shadow: 2    #2563eb
+
+--color-share-highlight-text: 1
+--color-share-highlight-bg: 1
+--color-share-highlight-text-active: 1
+--color-share-highlight-bg-active: 1
+--color-share-highlight-tooltip-text: 1
+--color-share-highlight-tooltip-bg: 1
+
+--shiki-theme: 0
+
+### --shadow-sm: 4
+
+- Button - primary button shadow
+
+### --shadow-md: 1
+
+### --shadow-hover: 8
+
+- Button - primary button focus shadow
+
+### --shadow-active: 4
+
+- Button - secondary button active shadow
+
+### --shadow-text: 4
+
+- Button - primary button text-shadow
+
+### --color-twitter: 4
+
+- Button - twitter button background
+- Button - twitter button border
+- Button - twitter button hover background
+- Button - twitter button focus background
+
 ## Axe tags
 
 cat.aria: Rules related to Accessible Rich Internet Applications (ARIA) attributes and roles.

src/components/Head/index.astro

@@ -62,7 +62,8 @@ const {
     : (prefersDark ? 'dark' : 'default')
   document.documentElement.setAttribute('data-theme', theme)
   document.documentElement.setAttribute('lang', 'en')
-</script><script>
+</script>
+<script>
   {/* Be careful adding script here. It runs before any script tags in components. */}
   import { SentryBootstrap } from '@components/Scripts/sentry/client'
   import { PUBLIC_SENTRY_DSN } from 'astro:env/client'

src/layouts/MarkdownLayout.astro

@@ -2,14 +2,14 @@
 /**
  * Layout for Markdown/MDX content files
  */
-import Footer from '@components/Layout/Markdown/Footer/index.astro'
+import BaseLayout from './BaseLayout.astro'
+ import Footer from '@components/Layout/Markdown/Footer/index.astro'
 import Lead from '@components/Layout/Markdown/Lead/index.astro'
 import Subtitle from '@components/Layout/Markdown/Subtitle/index.astro'
 import Title from '@components/Layout/Markdown/Title/index.astro'
 import Toc from '@components/Layout/Markdown/Toc/index.astro'
 
 /** Components made available for use in MDX */
-import BaseLayout from './BaseLayout.astro'
 import Avatar from '@components/Avatar/index.astro'
 import Callout from '@components/Callout/index.astro'
 import Contact from '@components/CallToAction/Contact/index.astro'

src/styles/index.css

@@ -2,6 +2,7 @@
 
 /** Import CSS files - order matters */
 @import "./themes.css";
+@import "./newthemes.css";
 @import "./reset.css";
 @import "./fonts.css";
 @import "./typography.css";

src/styles/newthemes.css

@@ -0,0 +1,91 @@
+@theme inline {
+  /**
+   * Set of colors to use to style main page elements
+   */
+
+  /** A solid fill color for page page elements */
+  --color-page-base: #f3f4f6; /** --color-bg */
+  /** A shade of the page color for hover and focus states */
+  --color-page-base-offset: #e5e7eb; /** --color-bg-offset */
+  /** A text color for use in page elements */
+  --color-page-content: #374151; /** --color-text */
+  /** A shade of the text color for hover and focus states */
+  --color-page-content-offset: #9ca3af; /** --color-text-offset */
+  /** A border color for use with page elements */
+  --color-page-ring: #000;
+  /** A shade of the border color for hover and focus states */
+  --color-page-ring-offset: #000;
+  /** A color for use in page accent elements */
+  --color-page-accent: #000;
+  /** A shade of the accent color for hover and focus states */
+  --color-page-accent-offset: #000;
+
+  /**
+   * Set of colors to use to style primary page elements
+   */
+
+  /** The primary brand color for use in the logo and wordmarks */
+  --color-primary-brand: #001733;
+  /** A solid fill color for primary page elements */
+  --color-primary-base: #000;
+  /** A shade of the primary color for hover and focus states */
+  --color-primary-base-offset: #000;
+  /** A text color for use in primary page elements */
+  --color-primary-content: #f0f4ff;
+  /** A shade of the text color for hover and focus states */
+  --color-primary-content-offset: #000;
+  /** A border color for use with primary page elements */
+  --color-primary-ring: #000;
+  /** A shade of the border color for hover and focus states */
+  --color-primary-ring-offset: #000;
+  /** A color for use in primary page accent elements */
+  --color-primary-accent: #000;
+  /** A shade of the accent color for hover and focus states */
+  --color-primary-accent-offset: #000;
+
+  /**
+   * Set of colors to use to style secondary page elements
+   */
+
+  /** The secondary brand color for use in the logo and wordmarks */
+  --color-secondary-brand: #0062B6; /** --color-primary */
+  /** A solid fill color for secondary page elements */
+  --color-secondary-base: #000;
+  /** A shade of the secondary color for hover and focus states */
+  --color-secondary-base-offset: #000;
+  /** A text color for use in secondary page elements */
+  --color-secondary-content: #000;
+  /** A shade of the text color for hover and focus states */
+  --color-secondary-content-offset: #000;
+  /** A border color for use with secondary page elements */
+  --color-secondary-ring: #000;
+  /** A shade of the border color for hover and focus states */
+  --color-secondary-ring-offset: #000;
+  /** A color for use in secondary page accent elements */
+  --color-secondary-accent: #000;
+  /** A shade of the accent color for hover and focus states */
+  --color-secondary-accent-offset: #000;
+
+  /** Success colors */
+  /** --color-success: var(--light-color-success); */
+  /** --color-success-offset: var(--light-color-success-offset); */
+  /** --color-success-bg: var(--light-color-success-bg); */
+
+  /** Info colors */
+  /** --color-info: var(--light-color-info); */
+  /** --color-info-bg: var(--light-color-info-bg); */
+
+  /** Warning colors */
+  /** --color-warning: var(--light-color-warning); */
+  /** --color-warning-offset: var(--light-color-warning-offset); */
+  /** --color-warning-bg: var(--light-color-warning-bg); */
+
+  /** Danger colors */
+  /** --color-danger: var(--light-color-danger); */
+  /** --color-danger-bg: var(--light-color-danger-bg); */
+
+  /**
+   * Vendor colors
+   */
+  /** --color-twitter: var(--light-color-twitter); */
+}