diff options
| -rw-r--r-- | scss/base/_theme.scss | 16 | ||||
| -rw-r--r-- | scss/custom-properties/_colours.scss | 20 | ||||
| -rw-r--r-- | src/pages/[designSystem].astro | 190 |
3 files changed, 207 insertions, 19 deletions
diff --git a/scss/base/_theme.scss b/scss/base/_theme.scss index f5d178c..c97c788 100644 --- a/scss/base/_theme.scss +++ b/scss/base/_theme.scss @@ -1,13 +1,11 @@ -:root { +:is( + :root, + .dark, + main, + article, + :is(main, article) > section:not(:is(section, header) :is(section, header)) +) { color: var(--text-color); background-color: var(--background-color); } -:is(main, article) { - color: var(--text-color); - background-color: var(--background-color); -} - -:is(main, article) > section:not(:is(section, header) :is(section, header)) { - background-color: var(--background-color); -}
\ No newline at end of file diff --git a/scss/custom-properties/_colours.scss b/scss/custom-properties/_colours.scss index dadb50e..138a724 100644 --- a/scss/custom-properties/_colours.scss +++ b/scss/custom-properties/_colours.scss @@ -1,14 +1,5 @@ @use '../values/colours' as colours; -:root { - --text-color: #{colours.$primary-98}; - --text-highlight-color: #{colours.$primary-10}; - --background-color: #{colours.$primary-10}; - --background-highlight-color: #{colours.$primary-90}; - --special-text-color: #{colours.$secondary-90}; - --special-text-highlight-color: #{colours.$secondary-10}; -} - :is(main, article) { --text-color: #{colours.$primary-10}; --text-highlight-color: #{colours.$primary-90}; @@ -18,6 +9,15 @@ --special-text-highlight-color: #{colours.$secondary-90}; } -:is(main, article) > section:nth-child(even):not(:is(section, header) :is(section, header)) { +:root, .dark { + --text-color: #{colours.$primary-98}; + --text-highlight-color: #{colours.$primary-10}; + --background-color: #{colours.$primary-10}; + --background-highlight-color: #{colours.$primary-90}; + --special-text-color: #{colours.$secondary-90}; + --special-text-highlight-color: #{colours.$secondary-10}; +} + +:is(main, article) > section:nth-child(even):not(:is(section, header) :is(section, header)):not(.dark *) { --background-color: #{colours.$primary-95}; } diff --git a/src/pages/[designSystem].astro b/src/pages/[designSystem].astro new file mode 100644 index 0000000..4ab93f8 --- /dev/null +++ b/src/pages/[designSystem].astro @@ -0,0 +1,190 @@ +--- +import Page from '$layouts/Page.astro'; +import env from '$lib/env'; + +export async function getStaticPaths() { + switch (env.ENVIRONMENT) { + case 'dev': + return [{ params: { designSystem: 'design-system' } }]; + case 'prod': + return []; + } +} +--- + +<Page title="Design system"> + <section> + <h1>Heading level 1</h1> + <h2>Heading level 2</h2> + <h3>Heading level 3</h3> + <h4>Heading level 4</h4> + <h3>Heading level 3</h3> + <h4>Heading level 4</h4> + <h2>Heading level 2</h2> + <h3>Heading level 3</h3> + <h2>Heading level 2</h2> + </section> + + <section> + <h1>Heading level 1</h1> + <p> + Minus architecto sed sint facere sint quam maxime unde. Vel commodi autem qui dolore et aut + aliquid. Perferendis aut nesciunt omnis est ea. + </p> + <p> + Est numquam sint consequatur culpa quo dolores. Aut eum aut non et est blanditiis tempore. + Enim voluptate accusamus id veniam. + </p> + + <h2>Heading level 2</h2> + <p> + Ut voluptas eaque sunt soluta reiciendis. Voluptas impedit exercitationem magni veritatis ea + est. Vitae recusandae odit impedit dolor sit. + </p> + <p> + Aliquam velit ab nihil et. Qui architecto quos assumenda neque. Exercitationem tempore veniam + repellat aut suscipit aut est et. + </p> + + <h3>Heading level 3</h3> + <p> + Minima nostrum eos voluptatem at sunt optio neque quia. Commodi quis omnis sit atque commodi + tempore iste neque. Qui rerum voluptas mollitia sint non. Inventore sed quidem sequi qui eum + est. Est id officiis in ipsam vero dolor. Veritatis odit quia qui esse illo officia et labore. + </p> + <p> + Minus architecto sed sint facere sint quam maxime unde. Vel commodi autem qui dolore et aut + aliquid. Perferendis aut nesciunt omnis est ea. + </p> + + <h4>Heading level 4</h4> + <p> + Aliquam velit ab nihil et. Qui architecto quos assumenda neque. Exercitationem tempore veniam + repellat aut suscipit aut est et. + </p> + <p> + Ut voluptas eaque sunt soluta reiciendis. Voluptas impedit exercitationem magni veritatis ea + est. Vitae recusandae odit impedit dolor sit. + </p> + + <h3>Heading level 3</h3> + <p> + Minima nostrum eos voluptatem at sunt optio neque quia. Commodi quis omnis sit atque commodi + tempore iste neque. Qui rerum voluptas mollitia sint non. Inventore sed quidem sequi qui eum + est. Est id officiis in ipsam vero dolor. Veritatis odit quia qui esse illo officia et labore. + </p> + <p> + Minus architecto sed sint facere sint quam maxime unde. Vel commodi autem qui dolore et aut + aliquid. Perferendis aut nesciunt omnis est ea. + </p> + + <h4>Heading level 4</h4> + <p> + Aliquam velit ab nihil et. Qui architecto quos assumenda neque. Exercitationem tempore veniam + repellat aut suscipit aut est et. + </p> + <p> + Ut voluptas eaque sunt soluta reiciendis. Voluptas impedit exercitationem magni veritatis ea + est. Vitae recusandae odit impedit dolor sit. + </p> + + <h2>Heading level 2</h2> + <p> + Ut voluptas eaque sunt soluta reiciendis. Voluptas impedit exercitationem magni veritatis ea + est. Vitae recusandae odit impedit dolor sit. + </p> + <p> + Aliquam velit ab nihil et. Qui architecto quos assumenda neque. Exercitationem tempore veniam + repellat aut suscipit aut est et. + </p> + + <h3>Heading level 3</h3> + <p> + Minima nostrum eos voluptatem at sunt optio neque quia. Commodi quis omnis sit atque commodi + tempore iste neque. Qui rerum voluptas mollitia sint non. Inventore sed quidem sequi qui eum + est. Est id officiis in ipsam vero dolor. Veritatis odit quia qui esse illo officia et labore. + </p> + <p> + Minus architecto sed sint facere sint quam maxime unde. Vel commodi autem qui dolore et aut + aliquid. Perferendis aut nesciunt omnis est ea. + </p> + + <h2>Heading level 2</h2> + <p> + Ut voluptas eaque sunt soluta reiciendis. Voluptas impedit exercitationem magni veritatis ea + est. Vitae recusandae odit impedit dolor sit. + </p> + <p> + Aliquam velit ab nihil et. Qui architecto quos assumenda neque. Exercitationem tempore veniam + repellat aut suscipit aut est et. + </p> + </section> + + <section> + <h2>Lists</h2> + + <h3>Unordered list</h3> + <ul> + <li>Item 1</li> + <li>Item 2</li> + <li> + Item 3 + <ul> + <li>Item 3.1</li> + <li>Item 3.2</li> + <li>Item 3.3</li> + </ul> + </li> + <li>Item 4</li> + </ul> + + <h3>Ordered list</h3> + <ol> + <li>Item 1</li> + <li>Item 2</li> + <li> + Item 3 + <ol> + <li>Item 3.1</li> + <li>Item 3.2</li> + <li>Item 3.3</li> + </ol> + </li> + <li>Item 4</li> + </ol> + </section> + + <section> + <h2>Buttons</h2> + + <section> + <h3>Light mode</h3> + <button type="button">Button</button> + <button type="submit">Submit</button> + <button type="button" disabled>Disabled button</button> + <button type="submit" disabled>Disabled submit</button> + </section> + + <section class="dark"> + <h3>Dark mode</h3> + <button type="button">Button</button> + <button type="submit">Submit</button> + <button type="button" disabled>Disabled button</button> + <button type="submit" disabled>Disabled submit</button> + </section> + </section> + + <section> + <h2>Hyperlinks</h2> + + <section> + <h3>Light mode</h3> + <a href="#">Hyperlink</a> + </section> + + <section class="dark"> + <h3>Dark mode</h3> + <a href="#">Hyperlink</a> + </section> + </section> +</Page> |