Skip to content

Commit

Permalink
Work in progress on changes
Browse files Browse the repository at this point in the history
  • Loading branch information
@paulbjensen
paulbjensen committed Jan 19, 2025
1 parent 17cd666 commit 51ac2e1
Show file tree
Hide file tree
Showing 10 changed files with 120 additions and 100 deletions.
19 changes: 10 additions & 9 deletions design-system/buttons.scss
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,6 @@
@import './spacing.scss';
@import './colours.scss';
@use "sass:map";
@use 'spacing.scss';
@use 'colours.scss';

@mixin main($firstColour, $secondColour) {
background-color: $firstColour;
Expand Down Expand Up @@ -36,31 +37,31 @@

button.theme-default,
.button.theme-default {
padding: $grid-base $spacer-three;
padding: spacing.$grid-base spacing.$spacer-three;
border-radius: 4px;
font-weight: 600;
font-size: 14px;
cursor: pointer;
transition: all 0.3s linear;
text-decoration: none;

@each $colourClassName in map-keys($theme-colours) {
@each $colourClassName in map.keys(colours.$theme-colours) {
@include generateVariant(
$colourClassName,
map-get($theme-colours, $colourClassName),
$light
map.get(colours.$theme-colours, $colourClassName),
colours.$light
);
}
}

@media screen and (prefers-color-scheme: dark) {
button.theme-default,
.button.theme-default {
@each $colourClassName in map-keys($theme-colours) {
@each $colourClassName in map.keys(colours.$theme-colours) {
@include generateVariant(
$colourClassName,
map-get($theme-colours, $colourClassName),
$dark
map.get(colours.$theme-colours, $colourClassName),
colours.$dark
);
}
}
Expand Down
62 changes: 31 additions & 31 deletions design-system/form-fields.scss
View file
Original file line number Diff line number Diff line change
@@ -1,9 +1,9 @@
@import './colours.scss';
@import './spacing.scss';
@use 'colours.scss';
@use 'spacing.scss';

label {
box-sizing: content-box;
margin-right: $grid-base;
margin-right: spacing.$grid-base;
}

// Used to help ensure that checkbox elements and the label elements that wrap them are clickable
Expand All @@ -16,15 +16,15 @@ input[type='email'],
input[type='password'],
input[type='search'],
textarea {
padding: $grid-base;
padding: spacing.$grid-base;
border-radius: 3px;
box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.05);
border: solid 1px $form-field-border-colour;
color: $form-field-colour;
border: solid 1px colours.$form-field-border-colour;
color: colours.$form-field-colour;
font-size: 14px;

&.large {
padding: $spacer-two $spacer-one;
padding: spacing.$spacer-two spacing.$spacer-one;
}
}

Expand All @@ -48,63 +48,63 @@ input[type='radio'] {
align-items: center;
justify-content: center;
flex-direction: row;
width: $spacer-one;
height: $spacer-one;
padding: calc($grid-base / 2);
margin-right: $grid-base;
background: $light;
border: solid 1px $form-field-border-colour;
width: spacing.$spacer-one;
height: spacing.$spacer-one;
padding: calc(spacing.$grid-base / 2);
margin-right: spacing.$grid-base;
background: colours.$light;
border: solid 1px colours.$form-field-border-colour;
border-radius: 3px;
box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.1);
}

.radio-element {
border-radius: $spacer-two;
border-radius: spacing.$spacer-two;
}

.large .checkbox-element,
.large .radio-element {
width: $spacer-two;
height: $spacer-two;
width: spacing.$spacer-two;
height: spacing.$spacer-two;
}

.large .radio-element {
border-radius: $spacer-two;
border-radius: spacing.$spacer-two;
}

.large .tick {
border-radius: 2px;
}

.large .selected {
border-radius: $spacer-one;
border-radius: spacing.$spacer-one;
}

.tick,
.selected {
width: 0px;
height: 0px;
border-radius: 1px;
background-color: $green-one-colour;
background-color: colours.$green-one-colour;
opacity: 0;
transition: all 0.2s linear;
}

.selected {
border-radius: $spacer-one;
border-radius: spacing.$spacer-one;
}

input[type='checkbox']:checked + .checkbox-element .tick,
input[type='radio']:checked + .radio-element .selected {
width: $grid-base;
height: $grid-base;
width: spacing.$grid-base;
height: spacing.$grid-base;
opacity: 1;
}

.large input[type='checkbox']:checked + .checkbox-element .tick,
.large input[type='radio']:checked + .radio-element .selected {
width: $spacer-two;
height: $spacer-two;
width: spacing.$spacer-two;
height: spacing.$spacer-two;
opacity: 1;
}

Expand All @@ -116,11 +116,11 @@ input[type='radio']:disabled + .radio-element {
.input-group {
display: flex;
align-items: center;
padding: $grid-base;
padding: spacing.$grid-base;
}

.select {
padding: $grid-base;
padding: spacing.$grid-base;
min-width: 180px;
-moz-appearance: none;
-webkit-appearance: none;
Expand All @@ -131,8 +131,8 @@ input[type='radio']:disabled + .radio-element {
background-size: 0.65em auto, 100%;
border-radius: 3px;
box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.05);
border: solid 1px $form-field-border-colour;
color: $form-field-colour;
border: solid 1px colours.$form-field-border-colour;
color: colours.$form-field-colour;
font-size: 14px;
}

Expand All @@ -146,12 +146,12 @@ input[type='radio']:disabled + .radio-element {
border-color: #aaa;
box-shadow: 0 0 1px 1px rgba(59, 153, 252, 0.7);
box-shadow: 0 0 0 1px -moz-mac-focusring;
color: $form-field-colour;
color: colours.$form-field-colour;
outline: none;
}
.select > option {
padding: $grid-base;
color: $form-field-colour;
padding: spacing.$grid-base;
color: colours.$form-field-colour;
font-weight: normal;
font-size: 14px;
}
Expand Down
4 changes: 2 additions & 2 deletions design-system/grid.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@
- medium >= 769px and <= 1024px
- large >= 1025px
*/
@import './spacing.scss';
@use 'spacing.scss';

/* Screen size definitions */
$min-mobile-width: 320px;
Expand Down Expand Up @@ -64,5 +64,5 @@ body {
}

.withSidePadding {
padding: 0px $spacer-two;
padding: 0px spacing.$spacer-two;
}
22 changes: 11 additions & 11 deletions design-system/index.scss
View file
Original file line number Diff line number Diff line change
@@ -1,21 +1,21 @@
@import './buttons.scss';
@import './colours.scss';
@import './form-fields.scss';
@import './spacing.scss';
@import './grid.scss';
@import './typography.scss';
@import './inbox.scss';
@use 'buttons.scss';
@use 'colours.scss';
@use 'form-fields.scss';
@use 'spacing.scss';
@use 'grid.scss';
@use 'typography.scss';
@use 'inbox.scss';

body {
-webkit-font-smoothing: antialiased;
font-family: 'Helvetica Neue', -apple-system, BlinkMacSystemFont, 'Segoe UI',
Roboto, Oxygen, Cantarell, 'Open Sans', sans-serif;
background: $light;
color: $dark;
background: colours.$light;
color: colours.$dark;

@media screen and (prefers-color-scheme: dark) {
background: $dark;
color: $light;
background: colours.$dark;
color: colours.$light;
}
}

Expand Down
46 changes: 12 additions & 34 deletions dist/index.css
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
/* ../../../../../../var/folders/8k/cyblrsx970s0cwznwfb_x7r00000gn/T/tmp-23437-juGhcdyuyeMd/ui/src/components/select/Select.css */
/* ../../../../../../var/folders/8k/cyblrsx970s0cwznwfb_x7r00000gn/T/tmp-23437-juGhcdyuyeMd/ui/src/components/form-field/FormField.css */
/* ../../../../../../var/folders/8k/cyblrsx970s0cwznwfb_x7r00000gn/T/tmp-56056-UiQvskTspYXC/ui/src/components/select/Select.css */
/* ../../../../../../var/folders/8k/cyblrsx970s0cwznwfb_x7r00000gn/T/tmp-56056-UiQvskTspYXC/ui/src/components/form-field/FormField.css */
:export {
primaryColour: #fd5548;
secondaryColour: #fd9448;
Expand All @@ -21,7 +21,7 @@
color: #fd5548;
}

/* ../../../../../../var/folders/8k/cyblrsx970s0cwznwfb_x7r00000gn/T/tmp-23437-juGhcdyuyeMd/ui/src/components/hamburger/Hamburger.css */
/* ../../../../../../var/folders/8k/cyblrsx970s0cwznwfb_x7r00000gn/T/tmp-56056-UiQvskTspYXC/ui/src/components/hamburger/Hamburger.css */
:export {
primaryColour: #fd5548;
secondaryColour: #fd9448;
Expand All @@ -48,7 +48,7 @@
}
}

/* ../../../../../../var/folders/8k/cyblrsx970s0cwznwfb_x7r00000gn/T/tmp-23437-juGhcdyuyeMd/ui/src/components/mobile-menu/MobileMenu.css */
/* ../../../../../../var/folders/8k/cyblrsx970s0cwznwfb_x7r00000gn/T/tmp-56056-UiQvskTspYXC/ui/src/components/mobile-menu/MobileMenu.css */
:export {
primaryColour: #fd5548;
secondaryColour: #fd9448;
Expand Down Expand Up @@ -128,7 +128,7 @@
stroke: #fff;
}

/* ../../../../../../var/folders/8k/cyblrsx970s0cwznwfb_x7r00000gn/T/tmp-23437-juGhcdyuyeMd/ui/src/components/desktop-menu/DesktopMenu.css */
/* ../../../../../../var/folders/8k/cyblrsx970s0cwznwfb_x7r00000gn/T/tmp-56056-UiQvskTspYXC/ui/src/components/desktop-menu/DesktopMenu.css */
#desktop-menu {
display: flex;
list-style-type: none;
Expand Down Expand Up @@ -157,7 +157,7 @@
}
}

/* ../../../../../../var/folders/8k/cyblrsx970s0cwznwfb_x7r00000gn/T/tmp-23437-juGhcdyuyeMd/ui/src/components/nav-bar/NavBar.css */
/* ../../../../../../var/folders/8k/cyblrsx970s0cwznwfb_x7r00000gn/T/tmp-56056-UiQvskTspYXC/ui/src/components/nav-bar/NavBar.css */
:export {
primaryColour: #fd5548;
secondaryColour: #fd9448;
Expand Down Expand Up @@ -238,7 +238,7 @@
}
}

/* ../../../../../../var/folders/8k/cyblrsx970s0cwznwfb_x7r00000gn/T/tmp-23437-juGhcdyuyeMd/ui/src/components/terminal/Terminal.css */
/* ../../../../../../var/folders/8k/cyblrsx970s0cwznwfb_x7r00000gn/T/tmp-56056-UiQvskTspYXC/ui/src/components/terminal/Terminal.css */
:export {
primaryColour: #fd5548;
secondaryColour: #fd9448;
Expand Down Expand Up @@ -349,7 +349,7 @@
font-weight: 400;
}

/* ../../../../../../var/folders/8k/cyblrsx970s0cwznwfb_x7r00000gn/T/tmp-23437-juGhcdyuyeMd/ui/src/components/code/Code.css */
/* ../../../../../../var/folders/8k/cyblrsx970s0cwznwfb_x7r00000gn/T/tmp-56056-UiQvskTspYXC/ui/src/components/code/Code.css */
:export {
primaryColour: #fd5548;
secondaryColour: #fd9448;
Expand Down Expand Up @@ -482,7 +482,7 @@
color: #8D95A5;
}

/* ../../../../../../var/folders/8k/cyblrsx970s0cwznwfb_x7r00000gn/T/tmp-23437-juGhcdyuyeMd/ui/src/components/page/Page.css */
/* ../../../../../../var/folders/8k/cyblrsx970s0cwznwfb_x7r00000gn/T/tmp-56056-UiQvskTspYXC/ui/src/components/page/Page.css */
.page {
margin: 0 auto;
display: flex;
Expand All @@ -492,7 +492,7 @@
margin-top: 48px;
}

/* ../../../../../../var/folders/8k/cyblrsx970s0cwznwfb_x7r00000gn/T/tmp-23437-juGhcdyuyeMd/ui/src/components/hero/Hero.css */
/* ../../../../../../var/folders/8k/cyblrsx970s0cwznwfb_x7r00000gn/T/tmp-56056-UiQvskTspYXC/ui/src/components/hero/Hero.css */
#hero {
margin-top: 60px;
}
Expand Down Expand Up @@ -546,7 +546,7 @@
}
}

/* ../../../../../../var/folders/8k/cyblrsx970s0cwznwfb_x7r00000gn/T/tmp-23437-juGhcdyuyeMd/ui/src/components/footer/Footer.css */
/* ../../../../../../var/folders/8k/cyblrsx970s0cwznwfb_x7r00000gn/T/tmp-56056-UiQvskTspYXC/ui/src/components/footer/Footer.css */
:export {
primaryColour: #fd5548;
secondaryColour: #fd9448;
Expand Down Expand Up @@ -607,7 +607,7 @@
}
}

/* ../../../../../../var/folders/8k/cyblrsx970s0cwznwfb_x7r00000gn/T/tmp-23437-juGhcdyuyeMd/ui/design-system/index.css */
/* ../../../../../../var/folders/8k/cyblrsx970s0cwznwfb_x7r00000gn/T/tmp-56056-UiQvskTspYXC/ui/design-system/index.css */
:export {
primaryColour: #fd5548;
secondaryColour: #fd9448;
Expand Down Expand Up @@ -1063,28 +1063,6 @@ button.theme-default.blue-three.alternate:hover,
color: #111;
}
}
:export {
primaryColour: #fd5548;
secondaryColour: #fd9448;
tertiaryColour: #ffc61a;
greenOneColour: #69b65c;
greenTwoColour: #95e388;
greenThreeColour: #c5fdbb;
blueOneColour: #279ae1;
blueTwoColour: #7bccff;
blueThreeColour: #c8eaff;
}
:export {
primaryColour: #fd5548;
secondaryColour: #fd9448;
tertiaryColour: #ffc61a;
greenOneColour: #69b65c;
greenTwoColour: #95e388;
greenThreeColour: #c5fdbb;
blueOneColour: #279ae1;
blueTwoColour: #7bccff;
blueThreeColour: #c8eaff;
}
label {
box-sizing: content-box;
margin-right: 8px;
Expand Down
2 changes: 1 addition & 1 deletion dist/index.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -33903,7 +33903,7 @@ var import_react13 = __toESM(require_react());

// src/components/hamburger/Hamburger.jsx
var import_react8 = __toESM(require_react());
var Hamburger = ({ width, height, onClick }) => /* @__PURE__ */ import_react8.default.createElement("div", { id: "hamburger", onClick }, /* @__PURE__ */ import_react8.default.createElement(
var Hamburger = ({ width, height, onClick }) => /* @__PURE__ */ import_react8.default.createElement("div", { id: "hamburger", onClick, "data-testid": "hamburger" }, /* @__PURE__ */ import_react8.default.createElement(
"svg",
{
width: width || "33px",
Expand Down
2 changes: 1 addition & 1 deletion pages/get-started.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -34,7 +34,7 @@ const GetStartedPage = () => (
<div className="section-gap">
<h2>Dependencies</h2>
<ul>
<li>Node.js (V 16 and greater)</li>
<li>Node.js (V 22 and greater)</li>
<li>React (V 18)</li>
</ul>
</div>
Expand Down
Loading

0 comments on commit 51ac2e1

Please sign in to comment.