Skip to content

Commit 4dc6134

Browse files
webstackdevwebstackdev
authored
Merge pull request #443 from webstackdev/feature/colors-reorganization
Doc and formatting changes in preparation of refactoring style CSS va…
2 parents cbceffc + 3f21712 commit 4dc6134

6 files changed

Lines changed: 275 additions & 9 deletions

File tree

‎TODO.md‎

Lines changed: 151 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -15,6 +15,157 @@ Axe accessibility (2) - axe-core integration
1515

1616
\[color:var\(--color-(.*?)\)\]
1717

18+
## Color vars
19+
20+
brand primary: #001733
21+
brand secondary: #0062B6
22+
23+
src/components: 427
24+
src/lib: 13
25+
src/pages: 250
26+
27+
Applies a solid border of currentColor to an element:
28+
29+
ring (1px), ring-2, ring-4
30+
accent
31+
32+
### text-white
33+
34+
- Button - success button text
35+
- Button - success button hover text
36+
- Button - success button focus text
37+
38+
### --color-bg: 57 #f3f4f6
39+
40+
- [tag] - main content background
41+
42+
### --color-bg-offset: 48 #e5e7eb
43+
44+
- Avatar - wrapper for fallback that just shows initials
45+
- Button - icon button hover background
46+
- Button - icon button focus background
47+
- Button - icon button active background
48+
49+
### --color-bg-inverse: 2 #001a39
50+
51+
### --color-text: 141 #374151
52+
53+
- Button - primary button text
54+
- Button - primary button focus text
55+
- Button - secondary button text
56+
- Button - secondary button hover text
57+
- Button - secondary button focus text
58+
- Button - icon button text
59+
- Button - twitter button text
60+
- [tag] - H1
61+
62+
### --color-text-offset: 103 #9ca3af
63+
64+
- Avatar - test in wrapper for fallback that just shows initials
65+
- [tag] - header text
66+
67+
### --color-border: 68 #f0f4ff
68+
69+
### --color-primary: 180 #006dca
70+
71+
- Button - primary button background
72+
- [tag] - header anchor text
73+
74+
### --color-primary-offset: 14 #00386d
75+
76+
- Button - primary button focus background
77+
- Hamburger Menu Icon - SVG background fill
78+
79+
### --color-primary-bg: 7 #dbeafe
80+
81+
### --color-primary-bg-hover: 1 #bfdbfe
82+
83+
### --color-primary-hover: 15 #0056a3
84+
85+
### --color-secondary: 5 #facc15
86+
87+
- Button - secondary button background
88+
89+
### --color-secondary-offset: 7 #ca8a04
90+
91+
- Button - secondary button hover background
92+
- Button - secondary button focus background
93+
- Button - secondary button active background
94+
95+
### --color-secondary-bg: 1 #fef3c7
96+
97+
### --color-success: 19 #16a34a
98+
99+
- Button - success button background
100+
101+
### --color-success-offset: 7 #22c55e
102+
103+
- Button - success button hover background
104+
- Button - success button focus background
105+
- Button - success button active background
106+
107+
### --color-success-bg: 6 #dcfce7
108+
109+
### --color-info: 1 #0891b2
110+
111+
### --color-info-bg: 2 #cffafe
112+
113+
### --color-warning: 5 #a16207
114+
115+
- Button - warning button background
116+
117+
### --color-warning-offset: 3 #ca8a04
118+
119+
- Button - warning button hover background
120+
- Button - warning button focus background
121+
- Button - warning button active background
122+
123+
### --color-warning-bg: 1 #fef3c7
124+
125+
### --color-danger: 16 #dc2626
126+
127+
### --color-danger-bg: 5 #fecaca
128+
129+
### --color-accent: 10 #7c3aed
130+
131+
### --color-accent-bg: 1 #ede9fe
132+
133+
### --color-link-shadow: 2 #2563eb
134+
135+
--color-share-highlight-text: 1
136+
--color-share-highlight-bg: 1
137+
--color-share-highlight-text-active: 1
138+
--color-share-highlight-bg-active: 1
139+
--color-share-highlight-tooltip-text: 1
140+
--color-share-highlight-tooltip-bg: 1
141+
142+
--shiki-theme: 0
143+
144+
### --shadow-sm: 4
145+
146+
- Button - primary button shadow
147+
148+
### --shadow-md: 1
149+
150+
### --shadow-hover: 8
151+
152+
- Button - primary button focus shadow
153+
154+
### --shadow-active: 4
155+
156+
- Button - secondary button active shadow
157+
158+
### --shadow-text: 4
159+
160+
- Button - primary button text-shadow
161+
162+
### --color-twitter: 4
163+
164+
- Button - twitter button background
165+
- Button - twitter button border
166+
- Button - twitter button hover background
167+
- Button - twitter button focus background
168+
18169
## Axe tags
19170

20171
cat.aria: Rules related to Accessible Rich Internet Applications (ARIA) attributes and roles.

‎src/components/Head/index.astro‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -62,7 +62,8 @@ const {
6262
: (prefersDark ? 'dark' : 'default')
6363
document.documentElement.setAttribute('data-theme', theme)
6464
document.documentElement.setAttribute('lang', 'en')
65-
</script><script>
65+
</script>
66+
<script>
6667
{/* Be careful adding script here. It runs before any script tags in components. */}
6768
import { SentryBootstrap } from '@components/Scripts/sentry/client'
6869
import { PUBLIC_SENTRY_DSN } from 'astro:env/client'

‎src/layouts/MarkdownLayout.astro‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -2,14 +2,14 @@
22
/**
33
* Layout for Markdown/MDX content files
44
*/
5-
import Footer from '@components/Layout/Markdown/Footer/index.astro'
5+
import BaseLayout from './BaseLayout.astro'
6+
import Footer from '@components/Layout/Markdown/Footer/index.astro'
67
import Lead from '@components/Layout/Markdown/Lead/index.astro'
78
import Subtitle from '@components/Layout/Markdown/Subtitle/index.astro'
89
import Title from '@components/Layout/Markdown/Title/index.astro'
910
import Toc from '@components/Layout/Markdown/Toc/index.astro'
1011
1112
/** Components made available for use in MDX */
12-
import BaseLayout from './BaseLayout.astro'
1313
import Avatar from '@components/Avatar/index.astro'
1414
import Callout from '@components/Callout/index.astro'
1515
import Contact from '@components/CallToAction/Contact/index.astro'

‎src/styles/index.css‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,7 @@
22

33
/** Import CSS files - order matters */
44
@import "./themes.css";
5+
@import "./newthemes.css";
56
@import "./reset.css";
67
@import "./fonts.css";
78
@import "./typography.css";

‎src/styles/newthemes.css‎

Lines changed: 91 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,91 @@
1+
@theme inline {
2+
/**
3+
* Set of colors to use to style main page elements
4+
*/
5+
6+
/** A solid fill color for page page elements */
7+
--color-page-base: #f3f4f6; /** --color-bg */
8+
/** A shade of the page color for hover and focus states */
9+
--color-page-base-offset: #e5e7eb; /** --color-bg-offset */
10+
/** A text color for use in page elements */
11+
--color-page-content: #374151; /** --color-text */
12+
/** A shade of the text color for hover and focus states */
13+
--color-page-content-offset: #9ca3af; /** --color-text-offset */
14+
/** A border color for use with page elements */
15+
--color-page-ring: #000;
16+
/** A shade of the border color for hover and focus states */
17+
--color-page-ring-offset: #000;
18+
/** A color for use in page accent elements */
19+
--color-page-accent: #000;
20+
/** A shade of the accent color for hover and focus states */
21+
--color-page-accent-offset: #000;
22+
23+
/**
24+
* Set of colors to use to style primary page elements
25+
*/
26+
27+
/** The primary brand color for use in the logo and wordmarks */
28+
--color-primary-brand: #001733;
29+
/** A solid fill color for primary page elements */
30+
--color-primary-base: #000;
31+
/** A shade of the primary color for hover and focus states */
32+
--color-primary-base-offset: #000;
33+
/** A text color for use in primary page elements */
34+
--color-primary-content: #f0f4ff;
35+
/** A shade of the text color for hover and focus states */
36+
--color-primary-content-offset: #000;
37+
/** A border color for use with primary page elements */
38+
--color-primary-ring: #000;
39+
/** A shade of the border color for hover and focus states */
40+
--color-primary-ring-offset: #000;
41+
/** A color for use in primary page accent elements */
42+
--color-primary-accent: #000;
43+
/** A shade of the accent color for hover and focus states */
44+
--color-primary-accent-offset: #000;
45+
46+
/**
47+
* Set of colors to use to style secondary page elements
48+
*/
49+
50+
/** The secondary brand color for use in the logo and wordmarks */
51+
--color-secondary-brand: #0062B6; /** --color-primary */
52+
/** A solid fill color for secondary page elements */
53+
--color-secondary-base: #000;
54+
/** A shade of the secondary color for hover and focus states */
55+
--color-secondary-base-offset: #000;
56+
/** A text color for use in secondary page elements */
57+
--color-secondary-content: #000;
58+
/** A shade of the text color for hover and focus states */
59+
--color-secondary-content-offset: #000;
60+
/** A border color for use with secondary page elements */
61+
--color-secondary-ring: #000;
62+
/** A shade of the border color for hover and focus states */
63+
--color-secondary-ring-offset: #000;
64+
/** A color for use in secondary page accent elements */
65+
--color-secondary-accent: #000;
66+
/** A shade of the accent color for hover and focus states */
67+
--color-secondary-accent-offset: #000;
68+
69+
/** Success colors */
70+
/** --color-success: var(--light-color-success); */
71+
/** --color-success-offset: var(--light-color-success-offset); */
72+
/** --color-success-bg: var(--light-color-success-bg); */
73+
74+
/** Info colors */
75+
/** --color-info: var(--light-color-info); */
76+
/** --color-info-bg: var(--light-color-info-bg); */
77+
78+
/** Warning colors */
79+
/** --color-warning: var(--light-color-warning); */
80+
/** --color-warning-offset: var(--light-color-warning-offset); */
81+
/** --color-warning-bg: var(--light-color-warning-bg); */
82+
83+
/** Danger colors */
84+
/** --color-danger: var(--light-color-danger); */
85+
/** --color-danger-bg: var(--light-color-danger-bg); */
86+
87+
/**
88+
* Vendor colors
89+
*/
90+
/** --color-twitter: var(--light-color-twitter); */
91+
}

0 commit comments

Comments
 (0)