diff --git a/src/patterns/01-core/_index.scss b/src/patterns/01-core/_index.scss
new file mode 100644
index 0000000000000000000000000000000000000000..35b88a498989d92faeaa4e7bd18bd750c66ad769
--- /dev/null
+++ b/src/patterns/01-core/_index.scss
@@ -0,0 +1,2 @@
+@forward 'mixins';
+@forward 'props/media';
diff --git a/src/patterns/01-core/elements/_address.scss b/src/patterns/01-core/elements/_address.scss
new file mode 100644
index 0000000000000000000000000000000000000000..3cb6dd6c55bf7f5d0610206447e24ec1bdbb5067
--- /dev/null
+++ b/src/patterns/01-core/elements/_address.scss
@@ -0,0 +1,8 @@
+// @file
+// Address element styles.
+
+:where(address) {
+ font-style: normal;
+ margin-bottom: var(--size-2);
+ line-height: inherit;
+}
diff --git a/src/patterns/01-core/elements/_area.scss b/src/patterns/01-core/elements/_area.scss
new file mode 100644
index 0000000000000000000000000000000000000000..3591e0aafd9b64dcd3ec7dd4156144b16ee2e2e5
--- /dev/null
+++ b/src/patterns/01-core/elements/_area.scss
@@ -0,0 +1,7 @@
+// @file
+// Area element styles.
+
+:where(area) {
+ cursor: pointer;
+ touch-action: manipulation;
+}
diff --git a/src/patterns/01-core/elements/_article.scss b/src/patterns/01-core/elements/_article.scss
new file mode 100644
index 0000000000000000000000000000000000000000..2ac66cf3ed74eaf6533110717c09ffb58b465bac
--- /dev/null
+++ b/src/patterns/01-core/elements/_article.scss
@@ -0,0 +1,4 @@
+// @file
+// Article element styles.
+
+// :where(article) {}
diff --git a/src/patterns/01-core/elements/_aside.scss b/src/patterns/01-core/elements/_aside.scss
new file mode 100644
index 0000000000000000000000000000000000000000..86064c99a2914ff0ada7b6d8e0f38e3f1e71bdf7
--- /dev/null
+++ b/src/patterns/01-core/elements/_aside.scss
@@ -0,0 +1,4 @@
+// @file
+// Aside element styles.
+
+// :where(aside) {}
diff --git a/src/patterns/01-core/elements/_audio.scss b/src/patterns/01-core/elements/_audio.scss
new file mode 100644
index 0000000000000000000000000000000000000000..34dbd935fcd63bd1527975fdbce0283a78285cf2
--- /dev/null
+++ b/src/patterns/01-core/elements/_audio.scss
@@ -0,0 +1,11 @@
+// @file
+// Audio element styles.
+
+:where(audio) {
+ display: block;
+
+ &:not([controls]) {
+ display: none;
+ height: 0;
+ }
+}
diff --git a/src/patterns/01-core/elements/_blockquote.scss b/src/patterns/01-core/elements/_blockquote.scss
new file mode 100644
index 0000000000000000000000000000000000000000..77910a557c9f58b265dd8d7c69b09e81726ac0ab
--- /dev/null
+++ b/src/patterns/01-core/elements/_blockquote.scss
@@ -0,0 +1,33 @@
+// @file
+// Blockquote styles.
+
+:where(blockquote) {
+ border-inline-start-width: var(--border-size-3);
+ display: grid;
+ font-size: var(--font-size-2);
+ gap: var(--size-3);
+ margin: 0 0 var(--size-5);
+ max-inline-size: var(--size-content-2);
+ padding-block: var(--size-3);
+ padding-inline: var(--size-4);
+
+ * + & {
+ margin-top: var(--size-5);
+ }
+
+ p {
+ color: inherit;
+ font-family: inherit;
+ font-size: inherit;
+ font-weight: inherit;
+ line-height: inherit;
+ }
+
+ @media print {
+ page-break-inside: avoid;
+ }
+}
+
+:where(:not(blockquote) > cite) {
+ padding-inline-start: var(--size-2);
+}
diff --git a/src/patterns/01-core/elements/_body.scss b/src/patterns/01-core/elements/_body.scss
new file mode 100644
index 0000000000000000000000000000000000000000..b43409f0738ccc643fa652dbb0272a9aa9926c92
--- /dev/null
+++ b/src/patterns/01-core/elements/_body.scss
@@ -0,0 +1,10 @@
+// @file
+// Body styles.
+
+:where(body) {
+ margin: 0;
+ min-block-size: 100%;
+ padding: 0;
+ scrollbar-gutter: stable both-edges;
+ word-wrap: break-word;
+}
diff --git a/src/patterns/01-core/elements/_button.scss b/src/patterns/01-core/elements/_button.scss
new file mode 100644
index 0000000000000000000000000000000000000000..ffe2b59e94ee6ce4df27cac84ba2e6d4a644e527
--- /dev/null
+++ b/src/patterns/01-core/elements/_button.scss
@@ -0,0 +1,16 @@
+// @file
+// Button element styles.
+
+@use '../../01-core' as *;
+
+:where(button) {
+ font: inherit;
+ font-size: inherit;
+ color: inherit;
+ letter-spacing: inherit;
+}
+
+:where(button label[for]) {
+ cursor: pointer;
+ touch-action: manipulation;
+}
diff --git a/src/patterns/01-core/elements/_canvas.scss b/src/patterns/01-core/elements/_canvas.scss
new file mode 100644
index 0000000000000000000000000000000000000000..98f64e082fad2f7144eacd4824a3268a4aae3139
--- /dev/null
+++ b/src/patterns/01-core/elements/_canvas.scss
@@ -0,0 +1,6 @@
+// @file
+// Canvas element styles.
+
+:where(canvas) {
+ display: block;
+}
diff --git a/src/patterns/01-core/elements/_datalist.scss b/src/patterns/01-core/elements/_datalist.scss
new file mode 100644
index 0000000000000000000000000000000000000000..5f14e662ccd96de4c3cbbdfa8e658c37ef5569a8
--- /dev/null
+++ b/src/patterns/01-core/elements/_datalist.scss
@@ -0,0 +1,4 @@
+// @file
+// Datalist element styles.
+
+// :where(datalist) {}
diff --git a/src/patterns/01-core/elements/_definition-list.scss b/src/patterns/01-core/elements/_definition-list.scss
new file mode 100644
index 0000000000000000000000000000000000000000..d1bb03f3ac8588eccf24f986f0183edbeb7544bd
--- /dev/null
+++ b/src/patterns/01-core/elements/_definition-list.scss
@@ -0,0 +1,24 @@
+// @file
+// Definition list styles.
+
+:where(dd) {
+ max-inline-size: var(--size-content-2);
+ margin-bottom: var(--size-4);
+
+ dt + & {
+ margin-top: 0;
+ }
+}
+
+:where(dt) {
+ font-weight: var(--font-weight-700);
+ max-inline-size: var(--size-header-3);
+
+ &:not(:first-of-type) {
+ margin-block-start: var(--size-5);
+ }
+}
+
+:where(dl) {
+ font-size: var(--font-size-2);
+}
diff --git a/src/patterns/01-core/elements/_details.scss b/src/patterns/01-core/elements/_details.scss
new file mode 100644
index 0000000000000000000000000000000000000000..702e8dda7f8b622475cdd8de3942caa6a15c3e08
--- /dev/null
+++ b/src/patterns/01-core/elements/_details.scss
@@ -0,0 +1,29 @@
+// @file
+// Details element styles.
+
+:where(details) {
+ background: var(--gray-2);
+ border-radius: var(--radius-2);
+ padding-block: var(--size-2);
+ padding-inline: var(--size-3);
+
+ &[open] > summary {
+ border-end-end-radius: 0;
+ border-end-start-radius: 0;
+ margin-bottom: var(--size-2);
+ }
+
+ p:last-child {
+ margin-bottom: 0;
+ }
+}
+
+:where(summary) {
+ background: var(--gray-3);
+ border-radius: var(--radius-2);
+ cursor: pointer;
+ font-weight: var(--font-weight-700);
+ margin: calc(var(--size-2) * -1) calc(var(--size-3) * -1);
+ padding: var(--size-2) var(--size-3);
+ touch-action: manipulation;
+}
diff --git a/src/patterns/01-core/elements/_dialog.scss b/src/patterns/01-core/elements/_dialog.scss
new file mode 100644
index 0000000000000000000000000000000000000000..be5fad00c77846db1b8f4c401eaffcc739c48783
--- /dev/null
+++ b/src/patterns/01-core/elements/_dialog.scss
@@ -0,0 +1,13 @@
+// @file
+// Dialog element styles.
+
+:where(dialog) {
+ background-color: var(--gray-0);
+ color: inherit;
+ border-radius: var(--radius-3);
+ box-shadow: var(--shadow-6);
+
+ &::backdrop {
+ backdrop-filter: blur(25px);
+ }
+}
diff --git a/src/patterns/01-core/elements/_embed.scss b/src/patterns/01-core/elements/_embed.scss
new file mode 100644
index 0000000000000000000000000000000000000000..0253a099d3eb3a118415c84d02c6f0c0d728581f
--- /dev/null
+++ b/src/patterns/01-core/elements/_embed.scss
@@ -0,0 +1,6 @@
+// @file
+// Embed element styles.
+
+:where(embed) {
+ display: block;
+}
diff --git a/src/patterns/01-core/elements/_fieldset.scss b/src/patterns/01-core/elements/_fieldset.scss
new file mode 100644
index 0000000000000000000000000000000000000000..1fb0cff07942c8a22e07fbf2083668947776efa8
--- /dev/null
+++ b/src/patterns/01-core/elements/_fieldset.scss
@@ -0,0 +1,7 @@
+// @file
+// Fieldset element styles.
+
+:where(fieldset) {
+ border-radius: var(--radius-2);
+ border: var(--border-size-1) solid var(--gray-4);
+}
diff --git a/src/patterns/01-core/elements/_figure.scss b/src/patterns/01-core/elements/_figure.scss
new file mode 100644
index 0000000000000000000000000000000000000000..d1a8d778ec56ff0db55ba9573a30f8ba97336a7a
--- /dev/null
+++ b/src/patterns/01-core/elements/_figure.scss
@@ -0,0 +1,4 @@
+// @file
+// Figure element styles.
+
+// :where(figure) {}
diff --git a/src/patterns/01-core/elements/_footer.scss b/src/patterns/01-core/elements/_footer.scss
new file mode 100644
index 0000000000000000000000000000000000000000..032ddc83fbb75bb1f6b517be994d52763390c04c
--- /dev/null
+++ b/src/patterns/01-core/elements/_footer.scss
@@ -0,0 +1,4 @@
+// @file
+// Footer element styles.
+
+// :where(footer) {}
diff --git a/src/patterns/01-core/elements/_form.scss b/src/patterns/01-core/elements/_form.scss
new file mode 100644
index 0000000000000000000000000000000000000000..c6989741a18bfe0e32cd1aaa1e0dc796b615130e
--- /dev/null
+++ b/src/patterns/01-core/elements/_form.scss
@@ -0,0 +1,4 @@
+// @file
+// Form element styles.
+
+// :where(form) {}
diff --git a/src/patterns/01-core/elements/_header.scss b/src/patterns/01-core/elements/_header.scss
new file mode 100644
index 0000000000000000000000000000000000000000..ac8f5432ce3e7a296c32a8cbf39ca83738dcdb42
--- /dev/null
+++ b/src/patterns/01-core/elements/_header.scss
@@ -0,0 +1,4 @@
+// @file
+// Header element styles.
+
+// :where(header) {}
diff --git a/src/patterns/01-core/elements/_headings.scss b/src/patterns/01-core/elements/_headings.scss
new file mode 100644
index 0000000000000000000000000000000000000000..2556b931086c3b5ea7b0aba6a5ef6c5a58340787
--- /dev/null
+++ b/src/patterns/01-core/elements/_headings.scss
@@ -0,0 +1,40 @@
+// @file
+// Heading styles.
+
+@use '../../01-core' as *;
+
+h1 {
+ @include heading-1;
+}
+
+h2 {
+ @include heading-2;
+}
+
+h3 {
+ @include heading-3;
+}
+
+h4 {
+ @include heading-4;
+}
+
+h5 {
+ @include heading-5;
+}
+
+h6 {
+ @include heading-6;
+}
+
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+ // Remove top margin for adjacent subheadings.
+ & + & {
+ margin-top: 0;
+ }
+}
diff --git a/src/patterns/01-core/elements/_horizontal-rule.scss b/src/patterns/01-core/elements/_horizontal-rule.scss
new file mode 100644
index 0000000000000000000000000000000000000000..49ce9b08c08e53c5269879453f5213a0d0570bbe
--- /dev/null
+++ b/src/patterns/01-core/elements/_horizontal-rule.scss
@@ -0,0 +1,8 @@
+// @file
+// Horizontal rule styles.
+
+:where(hr) {
+ background-color: var(--gray-3);
+ height: var(--border-size-2);
+ margin-block: var(--size-fluid-2);
+}
diff --git a/src/patterns/01-core/elements/_html.scss b/src/patterns/01-core/elements/_html.scss
new file mode 100644
index 0000000000000000000000000000000000000000..280a7b8261b6c2c558354696e92f191ccb520f9f
--- /dev/null
+++ b/src/patterns/01-core/elements/_html.scss
@@ -0,0 +1,28 @@
+// @file
+// HTML styles.
+
+:where(html) {
+ --accent-color: var(--blue-6);
+ --caret-color: var(--blue-6);
+ --scrollbar-color: var(--gray-7);
+ --text-0: var(--gray-7);
+
+ accent-color: var(--accent-color);
+ background-color: white;
+ block-size: 100%;
+ caret-color: var(--caret-color);
+ color: var(--text-0);
+ font-family: var(--font-sans);
+ line-height: var(--font-lineheight-4);
+ min-height: 100%;
+ scrollbar-color: var(--scrollbar-color) transparent;
+ text-size-adjust: none;
+
+ @media screen and (prefers-reduced-motion: no-preference) {
+ scroll-behavior: smooth;
+ }
+
+ &:has(dialog[open]) {
+ overflow: hidden;
+ }
+}
diff --git a/src/patterns/01-core/elements/_iframe.scss b/src/patterns/01-core/elements/_iframe.scss
new file mode 100644
index 0000000000000000000000000000000000000000..b2e5088cbd8bdf4d5050867479f591916ac9bc1f
--- /dev/null
+++ b/src/patterns/01-core/elements/_iframe.scss
@@ -0,0 +1,10 @@
+// @file
+// Iframe element styles.
+
+:where(iframe) {
+ display: block;
+
+ @media print {
+ display: none;
+ }
+}
diff --git a/src/patterns/01-core/elements/_img.scss b/src/patterns/01-core/elements/_img.scss
new file mode 100644
index 0000000000000000000000000000000000000000..5b4f3a0f5af1cf446096323218b04577e0684962
--- /dev/null
+++ b/src/patterns/01-core/elements/_img.scss
@@ -0,0 +1,13 @@
+// @file
+// IMG element styles.
+
+:where(img) {
+ block-size: auto;
+ display: block;
+ max-inline-size: 100%;
+
+ @media print {
+ max-width: 100% !important;
+ page-break-inside: avoid;
+ }
+}
diff --git a/src/patterns/01-core/elements/_index.scss b/src/patterns/01-core/elements/_index.scss
new file mode 100644
index 0000000000000000000000000000000000000000..b3c6bc3919ebee36451f898352ba625fdf52667b
--- /dev/null
+++ b/src/patterns/01-core/elements/_index.scss
@@ -0,0 +1,58 @@
+@forward 'universal';
+@forward 'html';
+@forward 'body';
+@forward 'main';
+@forward 'section';
+@forward 'article';
+@forward 'header';
+@forward 'footer';
+@forward 'aside';
+@forward 'menu';
+@forward 'nav';
+@forward 'details';
+@forward 'iframe';
+
+// Typography
+@forward 'headings';
+@forward 'paragraph';
+@forward 'inline-elements';
+@forward 'blockquote';
+@forward 'preformatted-text';
+@forward 'horizontal-rule';
+@forward 'address';
+
+// Lists
+@forward 'unordered-list';
+@forward 'ordered-list';
+@forward 'list-item';
+@forward 'definition-list';
+
+// Tables
+@forward 'table';
+
+// Forms
+@forward 'button';
+@forward 'datalist';
+@forward 'dialog';
+@forward 'fieldset';
+@forward 'form';
+@forward 'input';
+@forward 'label';
+@forward 'legend';
+@forward 'meter';
+@forward 'option';
+@forward 'output';
+@forward 'progress';
+@forward 'select';
+@forward 'textarea';
+
+// Media
+@forward 'area';
+@forward 'audio';
+@forward 'canvas';
+@forward 'embed';
+@forward 'figure';
+@forward 'img';
+@forward 'object';
+@forward 'svg';
+@forward 'video';
diff --git a/src/patterns/01-core/elements/_inline-elements.scss b/src/patterns/01-core/elements/_inline-elements.scss
new file mode 100644
index 0000000000000000000000000000000000000000..8606797428dbd599a8f33dfc831f72d5f69d4be0
--- /dev/null
+++ b/src/patterns/01-core/elements/_inline-elements.scss
@@ -0,0 +1,159 @@
+// @file
+// Inline element styles.
+
+@use '../../01-core' as *;
+
+:where(a) {
+ background-color: transparent;
+ transition-duration: 200ms;
+ transition-property: background-color, border-color, color, outline-color, text-decoration-color;
+ transition-timing-function: var(--ease-in-out-2);
+
+ &:where([href]) {
+ color: var(--indigo-5);
+ text-decoration-color: var(--indigo-5);
+
+ &:where(:hover) {
+ color: var(--indigo-9);
+ text-decoration-color: var(--indigo-9);
+ }
+
+ &:where(:visited) {
+ color: var(--indigo-5);
+ text-decoration-color: var(--indigo-5);
+ }
+ }
+
+ &:where(:not(:hover)) {
+ text-decoration: inherit;
+ }
+
+ @media print {
+ &,
+ &:visited {
+ text-decoration: none;
+ }
+
+ &[href]::after {
+ content: ' <' attr(href) '>';
+ font-family: var(--font-sans);
+ font-size: 10pt;
+ font-weight: normal;
+ text-transform: lowercase;
+ }
+
+ // Uncomment and replace example.com with your site’s domain.
+ //&[href^='/']::after {
+ // content: ' <http://example.com' attr(href) '>';
+ //}
+
+ &[href^='javascript:']::after,
+ &[href^='mailto:']::after,
+ &[href^='tel:']::after,
+ &[href^='#']::after,
+ &[href*='?']::after {
+ content: '';
+ }
+ }
+}
+
+:where(abbr) {
+ text-decoration-color: var(--blue-5);
+ text-underline-offset: var(--size-xs);
+
+ &:hover {
+ cursor: help;
+ }
+
+ @media print {
+ &[title]::after {
+ content: ' (' attr(title) ')';
+ }
+ }
+}
+
+:where(b) {
+ font-weight: var(--font-weight-900);
+}
+
+:where(cite) {
+ color: var(--gray-6);
+ font-family: var(--font-sans);
+ font-size: var(--font-size-0);
+ font-style: normal;
+ font-weight: var(--font-weight-600);
+ letter-spacing: var(--font-letterspacing-1);
+ line-height: var(--font-lineheight-1);
+}
+
+:where(code) {
+ font-family: var(--font-mono);
+}
+
+:where(del) {
+ background-color: var(--red-9);
+ color: var(--red-1);
+}
+
+:where(dfn) {
+ font-style: italic;
+}
+
+:where(ins) {
+ background-color: var(--green-9);
+ color: var(--green-1);
+ text-underline-offset: var(--size-xs);
+}
+
+:where(kbd) {
+ border-color: var(--gray-4);
+ border-radius: var(--radius-2);
+ border-width: var(--border-size-1);
+ font-family: var(--font-mono);
+ padding: var(--size-1) var(--size-2);
+}
+
+:where(mark) {
+ border-radius: var(--radius-2);
+ padding-inline: var(--size-1);
+}
+
+:where(samp) {
+ font-family: var(--font-mono);
+}
+
+:where(small) {
+ font-size: max(.5em, var(--font-size-0));
+ max-inline-size: var(--size-content-1);
+}
+
+:where(strong) {
+ font-weight: var(--font-weight-700);
+}
+
+:where(sub) {
+ bottom: -0.25em;
+ font-size: 75%;
+ line-height: 0;
+ position: relative;
+ vertical-align: baseline;
+}
+
+:where(sup) {
+ font-size: 75%;
+ line-height: 0;
+ position: relative;
+ top: -0.5em;
+ vertical-align: baseline;
+}
+
+:where(u) {
+ text-underline-offset: var(--size-xs);
+}
+
+:where(var) {
+ border-color: var(--gray-4);
+ border-radius: var(--radius-2);
+ border-width: var(--border-size-1);
+ padding: var(--size-1) var(--size-2);
+}
diff --git a/src/patterns/01-core/elements/_input.scss b/src/patterns/01-core/elements/_input.scss
new file mode 100644
index 0000000000000000000000000000000000000000..e3450a4e15307c8d3229434f1cf7590da4dd9e5e
--- /dev/null
+++ b/src/patterns/01-core/elements/_input.scss
@@ -0,0 +1,93 @@
+// @file
+// Input element styles.
+
+:where(input) {
+ color: inherit;
+ cursor: pointer;
+ font-size: inherit;
+ font: inherit;
+ letter-spacing: inherit;
+ padding-block: var(--size-1);
+ padding-inline: var(--size-2);
+ touch-action: manipulation;
+}
+
+:where(input:not(button, button[type], input[type="button"], input[type="submit"], input[type="reset"])) {
+ background-color: var(--gray-1);
+ border-radius: var(--radius-2);
+ margin-inline-end: var(--size-1);
+}
+
+// Checkbox, Options input
+:where(input[type="checkbox"], input[type="radio"]) {
+ block-size: var(--size-4);
+ inline-size: var(--size-4);
+}
+
+// file input
+:where(input[type="file"]) {
+ align-self: flex-start;
+ background-color: white;
+ border-radius: var(--radius-2);
+ border-color: var(--gray-3);
+ border-style: solid;
+ border-width: var(--border-size-1);
+ box-shadow: var(--inner-shadow-1);
+ color: var(--gray-7);
+ cursor: initial;
+ display: block;
+ max-inline-size: 100%;
+ padding: 0;
+}
+
+:where(input[type="file"])::-webkit-file-upload-button {
+ color: inherit;
+ font-size: inherit;
+ font: inherit;
+ letter-spacing: inherit;
+}
+
+:where(input[type="file"])::-webkit-file-upload-button,
+:where(input[type="file"])::file-selector-button {
+ cursor: pointer;
+ margin-inline-end: 1.75ch;
+}
+
+// Number input
+:where(input[type="number"])::-webkit-inner-spin-button,
+:where(input[type="number"])::-webkit-outer-spin-button {
+ height: auto;
+}
+
+// Search input
+:where(input[type="search"]) {
+ appearance: textfield;
+ outline-offset: -2px;
+
+ &::-webkit-search-decoration {
+ appearance: none;
+ }
+}
+
+// :where(input[type='button']) {}
+// :where(input[type='checkbox']) {}
+// :where(input[type='color']) {}
+// :where(input[type='date']) {}
+// :where(input[type='datetime']) {}
+// :where(input[type='datetime-local']) {}
+// :where(input[type='email']) {}
+// :where(input[type='file']) {}
+// :where(input[type='image']) {}
+// :where(input[type='month']) {}
+// :where(input[type='number']) {}
+// :where(input[type='password']) {}
+// :where(input[type='radio']) {}
+// :where(input[type='range']) {}
+// :where(input[type='reset']) {}
+// :where(input[type='search']) {}
+// :where(input[type='submit']) {}
+// :where(input[type='tel']) {}
+// :where(input[type='text']) {}
+// :where(input[type='time']) {}
+// :where(input[type='url']) {}
+// :where(input[type='week']) {}
diff --git a/src/patterns/01-core/elements/_label.scss b/src/patterns/01-core/elements/_label.scss
new file mode 100644
index 0000000000000000000000000000000000000000..ccc880498a8735634c62b9a6f167025172fa2c07
--- /dev/null
+++ b/src/patterns/01-core/elements/_label.scss
@@ -0,0 +1,4 @@
+// @file
+// Label element styles.
+
+// :where(label) {}
diff --git a/src/patterns/01-core/elements/_legend.scss b/src/patterns/01-core/elements/_legend.scss
new file mode 100644
index 0000000000000000000000000000000000000000..93f8db693ea538f87b8bb8dfc7784a37b7350710
--- /dev/null
+++ b/src/patterns/01-core/elements/_legend.scss
@@ -0,0 +1,13 @@
+// @file
+// Legend element styles.
+
+:where(legend) {
+ border: 0;
+ box-sizing: border-box;
+ color: inherit;
+ display: table;
+ margin: 0;
+ max-width: 100%;
+ padding: 0;
+ white-space: normal;
+}
diff --git a/src/patterns/01-core/elements/_list-item.scss b/src/patterns/01-core/elements/_list-item.scss
new file mode 100644
index 0000000000000000000000000000000000000000..475d0e0c076b1a4b2ed6a8d9046a8ae52e21fe23
--- /dev/null
+++ b/src/patterns/01-core/elements/_list-item.scss
@@ -0,0 +1,11 @@
+// @file
+// List item styles.
+
+:where(li) {
+ max-inline-size: var(--size-content-2);
+ padding-inline-start: var(--size-1);
+
+ @media print {
+ page-break-inside: avoid;
+ }
+}
diff --git a/src/patterns/01-core/elements/_main.scss b/src/patterns/01-core/elements/_main.scss
new file mode 100644
index 0000000000000000000000000000000000000000..b1da0f0b813a63bc209cb2106d751fde2f2c4578
--- /dev/null
+++ b/src/patterns/01-core/elements/_main.scss
@@ -0,0 +1,6 @@
+// @file
+// Main element styles.
+
+:where(main) {
+ display: block;
+}
diff --git a/src/patterns/01-core/elements/_menu.scss b/src/patterns/01-core/elements/_menu.scss
new file mode 100644
index 0000000000000000000000000000000000000000..137c7cda25d4753cee7ad7c6ded8bb5ff96e1f0e
--- /dev/null
+++ b/src/patterns/01-core/elements/_menu.scss
@@ -0,0 +1,8 @@
+// @file
+// Menu element styles.
+
+:where(menu) {
+ display: flex;
+ gap: var(--size-3);
+ padding-inline-start: 0;
+}
diff --git a/src/patterns/01-core/elements/_meter.scss b/src/patterns/01-core/elements/_meter.scss
new file mode 100644
index 0000000000000000000000000000000000000000..39861057d3d3fbac50592d9b9717501c22b8beff
--- /dev/null
+++ b/src/patterns/01-core/elements/_meter.scss
@@ -0,0 +1,4 @@
+// @file
+// Meter element styles.
+
+// :where(meter) {}
diff --git a/src/patterns/01-core/elements/_nav.scss b/src/patterns/01-core/elements/_nav.scss
new file mode 100644
index 0000000000000000000000000000000000000000..408c463baa65bd69b02a0996acf25dee2a1d61d6
--- /dev/null
+++ b/src/patterns/01-core/elements/_nav.scss
@@ -0,0 +1,8 @@
+// @file
+// Nav element styles.
+
+:where(nav) {
+ @media print {
+ display: none;
+ }
+}
diff --git a/src/patterns/01-core/elements/_object.scss b/src/patterns/01-core/elements/_object.scss
new file mode 100644
index 0000000000000000000000000000000000000000..95d29525237059a403d24f791bb155cfdbb4cf26
--- /dev/null
+++ b/src/patterns/01-core/elements/_object.scss
@@ -0,0 +1,8 @@
+// @file
+// Object element styles.
+
+:where(object) {
+ display: block;
+}
+
+// :where(param) {}
diff --git a/src/patterns/01-core/elements/_option.scss b/src/patterns/01-core/elements/_option.scss
new file mode 100644
index 0000000000000000000000000000000000000000..f145df1055dc3c537fb4cdb937b2b5dc6a0080d0
--- /dev/null
+++ b/src/patterns/01-core/elements/_option.scss
@@ -0,0 +1,12 @@
+// @file
+// Options element styles.
+
+// :where(option) {}
+
+:where(optgroup) {
+ font-family: inherit;
+ font-size: 100%;
+ font-weight: var(--font-bold);
+ line-height: var(--line-xs);
+ margin: 0;
+}
diff --git a/src/patterns/01-core/elements/_ordered-list.scss b/src/patterns/01-core/elements/_ordered-list.scss
new file mode 100644
index 0000000000000000000000000000000000000000..612b7693c88b9a1921c29300ad35eeaa3df3baf4
--- /dev/null
+++ b/src/patterns/01-core/elements/_ordered-list.scss
@@ -0,0 +1,7 @@
+// @file
+// Ordered list styles.
+
+:where(ol) {
+ font-size: var(--font-size-2);
+ padding-inline-start: var(--size-4);
+}
diff --git a/src/patterns/01-core/elements/_output.scss b/src/patterns/01-core/elements/_output.scss
new file mode 100644
index 0000000000000000000000000000000000000000..b55e678c4ff927dca325859ba8ff4471ac6307a6
--- /dev/null
+++ b/src/patterns/01-core/elements/_output.scss
@@ -0,0 +1,4 @@
+// @file
+// Output element styles.
+
+// :where(output) {}
diff --git a/src/patterns/01-core/elements/_paragraph.scss b/src/patterns/01-core/elements/_paragraph.scss
new file mode 100644
index 0000000000000000000000000000000000000000..4f64cc0927cc7b9afcb3103bf07904c317ae9990
--- /dev/null
+++ b/src/patterns/01-core/elements/_paragraph.scss
@@ -0,0 +1,14 @@
+// @file
+// Paragraph styles.
+
+:where(p) {
+ font-size: var(--font-size-2);
+ margin-bottom: var(--size-2);;
+ margin-top: 0;
+ max-inline-size: var(--size-content-3);
+
+ @media print {
+ orphans: 3;
+ widows: 3;
+ }
+}
diff --git a/src/patterns/01-core/elements/_preformatted-text.scss b/src/patterns/01-core/elements/_preformatted-text.scss
new file mode 100644
index 0000000000000000000000000000000000000000..33d3bfa60cff304c640efc1b3f2d43cb759d13e4
--- /dev/null
+++ b/src/patterns/01-core/elements/_preformatted-text.scss
@@ -0,0 +1,13 @@
+// @file
+// Preformatted text styles.
+
+:where(pre) {
+ font-family: var(--font-mono);
+ max-inline-size: max-content;
+ min-inline-size: 0;
+ white-space: pre;
+
+ @media print {
+ page-break-inside: avoid;
+ }
+}
diff --git a/src/patterns/01-core/elements/_progress.scss b/src/patterns/01-core/elements/_progress.scss
new file mode 100644
index 0000000000000000000000000000000000000000..fd31f1437c1a30c1d9b9d33d841d3052b20f9be9
--- /dev/null
+++ b/src/patterns/01-core/elements/_progress.scss
@@ -0,0 +1,6 @@
+// @file
+// Progress element styles.
+
+:where(progress) {
+ vertical-align: baseline;
+}
diff --git a/src/patterns/01-core/elements/_section.scss b/src/patterns/01-core/elements/_section.scss
new file mode 100644
index 0000000000000000000000000000000000000000..b7e9ee688fb332a0a259d43cb4d2b48ae1c2f22e
--- /dev/null
+++ b/src/patterns/01-core/elements/_section.scss
@@ -0,0 +1,4 @@
+// @file
+// Section element styles.
+
+//:where( section) {}
diff --git a/src/patterns/01-core/elements/_select.scss b/src/patterns/01-core/elements/_select.scss
new file mode 100644
index 0000000000000000000000000000000000000000..3c1292c7ac5aba3c955106e85e9c0d1dc85ed385
--- /dev/null
+++ b/src/patterns/01-core/elements/_select.scss
@@ -0,0 +1,15 @@
+// @file
+// Select element styles.
+
+:where(select) {
+ background-color: var(--gray-2);
+ border-radius: var(--radius-2);
+ color: inherit;
+ cursor: pointer;
+ font-size: inherit;
+ font: inherit;
+ letter-spacing: inherit;
+ padding-block: .75ch;
+ padding-inline: 1.25ch 0;
+ touch-action: manipulation;
+}
diff --git a/src/patterns/01-core/elements/_svg.scss b/src/patterns/01-core/elements/_svg.scss
new file mode 100644
index 0000000000000000000000000000000000000000..e63382c71387c11388d97c8f66061be38fa8421f
--- /dev/null
+++ b/src/patterns/01-core/elements/_svg.scss
@@ -0,0 +1,21 @@
+// @file
+// SVG element styles.
+
+:where(svg) {
+ block-size: auto;
+ display: block;
+ fill: currentColor;
+ max-inline-size: 100%;
+ stroke: none;
+
+ &:where(:not([fill])) {
+ fill: none;
+ stroke-linecap: round;
+ stroke-linejoin: round;
+ stroke: currentColor;
+ }
+
+ &:where(:not([width])) {
+ inline-size: var(--size-10);
+ }
+}
diff --git a/src/patterns/01-core/elements/_table.scss b/src/patterns/01-core/elements/_table.scss
new file mode 100644
index 0000000000000000000000000000000000000000..4ff02b55aaecc8270d8ebc3bc461434fe8410572
--- /dev/null
+++ b/src/patterns/01-core/elements/_table.scss
@@ -0,0 +1,58 @@
+// @file
+// Table styles.
+
+:where(caption) {
+ color: var(--gray-5);
+ padding-bottom: var(--size-1);
+ padding-top: var(--size-1);
+ text-align: left;
+}
+
+:where(table) {
+ border-collapse: collapse;
+ border-color: var(--gray-2);
+ caption-side: bottom;
+ color: var(--gray-8);
+ margin-bottom: var(--size-2);
+ vertical-align: top;
+ width: 100%;
+
+ > :not(caption) > * > * {
+ background-color: transparent;
+ border-bottom-width: var(--border-size-1);
+ padding: var(--size-1);
+ }
+
+ > tbody {
+ vertical-align: inherit;
+ }
+
+ > thead {
+ vertical-align: bottom;
+ }
+
+ > :not(:first-child) {
+ border-top-color: currentColor;
+ border-top-width: var(--border-size-2);
+ }
+}
+
+:where(thead, tbody, tfoot, tr, td, th) {
+ border-color: inherit;
+}
+
+:where(thead) {
+ @media print {
+ display: table-header-group;
+ }
+}
+
+:where(tr) {
+ @media print {
+ page-break-inside: avoid;
+ }
+}
+
+:where(th) {
+ text-align: inherit;
+}
diff --git a/src/patterns/01-core/elements/_textarea.scss b/src/patterns/01-core/elements/_textarea.scss
new file mode 100644
index 0000000000000000000000000000000000000000..ad52287d17b846ec6aaaefbdb31ec8473b30a29b
--- /dev/null
+++ b/src/patterns/01-core/elements/_textarea.scss
@@ -0,0 +1,16 @@
+// @file
+// Textarea element styles.
+
+:where(textarea) {
+ background-color: var(--gray-2);
+ border-radius: var(--radius-2);
+ color: inherit;
+ cursor: pointer;
+ font-size: inherit;
+ font: inherit;
+ letter-spacing: inherit;
+ padding-block: var(--size-1);
+ padding-inline: var(--size-2);
+ resize: block;
+ touch-action: manipulation;
+}
diff --git a/src/patterns/01-core/elements/_universal.scss b/src/patterns/01-core/elements/_universal.scss
new file mode 100644
index 0000000000000000000000000000000000000000..be2e32b161c4c902aa00dbac83f8dccb4066319d
--- /dev/null
+++ b/src/patterns/01-core/elements/_universal.scss
@@ -0,0 +1,53 @@
+// @file
+// Universal styles.
+
+*,
+::before,
+::after {
+ box-sizing: border-box;
+}
+
+* {
+ @media print {
+ background-color: transparent !important;
+ box-shadow: none !important;
+ color: #000 !important;
+ text-shadow: none !important;
+ }
+
+ @page {
+ margin: 2cm;
+ }
+}
+
+:where(:focus-visible) {
+ outline-color: var(--indigo-7);
+ outline-offset: 5px;
+ transition: outline-offset 145ms var(--ease-2);
+}
+
+:where(:not(fieldset, progress, meter)) {
+ border-width: 0;
+ border-style: solid;
+ background-origin: border-box;
+ background-repeat: no-repeat;
+}
+
+:where(:not(pre) > code, kbd) {
+ white-space: nowrap;
+}
+
+:where(:not(pre) > code) {
+ padding: var(--size-1) var(--size-2);
+ background: var(--gray-2);
+ border-radius: var(--radius-2);
+}
+
+:where(:not(dialog)) {
+ margin: 0;
+}
+
+:where([tabindex]:not([tabindex*="-"])) {
+ cursor: pointer;
+ touch-action: manipulation;
+}
diff --git a/src/patterns/01-core/elements/_unordered-list.scss b/src/patterns/01-core/elements/_unordered-list.scss
new file mode 100644
index 0000000000000000000000000000000000000000..5c39180e0596617d95206ada984d2ed48a722f9f
--- /dev/null
+++ b/src/patterns/01-core/elements/_unordered-list.scss
@@ -0,0 +1,7 @@
+// @file
+// Unordered list styles.
+
+:where(ul) {
+ font-size: var(--font-size-2);
+ padding-inline-start: var(--size-4);
+}
diff --git a/src/patterns/01-core/elements/_video.scss b/src/patterns/01-core/elements/_video.scss
new file mode 100644
index 0000000000000000000000000000000000000000..f3bdcae4a85b537e4f1d9cac7d34d47f4da694e5
--- /dev/null
+++ b/src/patterns/01-core/elements/_video.scss
@@ -0,0 +1,8 @@
+// @file
+// Video element styles.
+
+:where(video) {
+ block-size: auto;
+ display: block;
+ max-inline-size: 100%;
+}
diff --git a/src/patterns/01-core/font-face/DroidSerif-Bold-webfont.woff b/src/patterns/01-core/font-face/DroidSerif-Bold-webfont.woff
new file mode 100644
index 0000000000000000000000000000000000000000..34e60c600c7fb139794737c0b516e11ed04345cb
Binary files /dev/null and b/src/patterns/01-core/font-face/DroidSerif-Bold-webfont.woff differ
diff --git a/src/patterns/01-core/font-face/DroidSerif-Regular-webfont.woff b/src/patterns/01-core/font-face/DroidSerif-Regular-webfont.woff
new file mode 100644
index 0000000000000000000000000000000000000000..4c17b4da011d321174346a0cccded93c223e905a
Binary files /dev/null and b/src/patterns/01-core/font-face/DroidSerif-Regular-webfont.woff differ
diff --git a/src/patterns/01-core/font-face/_index.scss b/src/patterns/01-core/font-face/_index.scss
new file mode 100644
index 0000000000000000000000000000000000000000..1927e3f7f0491df22809437f81b7c71bddd25b6c
--- /dev/null
+++ b/src/patterns/01-core/font-face/_index.scss
@@ -0,0 +1,20 @@
+// @file
+// Styles for Font face.
+
+// Droid Serif Regular.
+@font-face {
+ font-family: 'droid';
+ font-style: normal;
+ font-weight: 400;
+ font-display: fallback;
+ src: url('../fonts/DroidSerif-Regular-webfont.woff') format('woff');
+}
+
+// Droid Serif Bold.
+@font-face {
+ font-family: 'droid';
+ font-style: normal;
+ font-weight: 700;
+ font-display: fallback;
+ src: url('../fonts/DroidSerif-Bold-webfont.woff') format('woff');
+}
diff --git a/src/patterns/01-core/mixins/_accessiblity.scss b/src/patterns/01-core/mixins/_accessiblity.scss
new file mode 100644
index 0000000000000000000000000000000000000000..133cedac055173a85c46a8cb0c2adb34b8b88a78
--- /dev/null
+++ b/src/patterns/01-core/mixins/_accessiblity.scss
@@ -0,0 +1,52 @@
+// @file
+// Accessibility mixin
+
+// Hide an element visually, but have it available for screen readers
+@mixin visually-hidden() {
+ border: 0;
+ clip: rect(1px 1px 1px 1px);
+ clip-path: inset(50%);
+ height: 1px;
+ overflow: hidden;
+ padding: 0;
+ position: absolute;
+ white-space: nowrap;
+ width: 1px;
+ word-wrap: normal;
+}
+
+// Turns off the visually-hidden effect.
+@mixin visually-hidden-off() {
+ clip: auto;
+ clip-path: none;
+ height: auto;
+ overflow: visible;
+ position: static;
+ white-space: inherit;
+ width: auto;
+}
+
+// Makes an element visible when focused if it also has the visually-hidden styles.
+@mixin focusable {
+ &:focus,
+ &:active {
+ @include visually-hidden-off;
+ }
+}
+
+// Hide an element completely hidden, visually and to screen readers.
+@mixin hidden() {
+ display: none;
+}
+
+// Makes an element completely hidden, visually and to screen readers, but maintains its layout.
+@mixin invisible() {
+ visibility: hidden;
+}
+
+// Completely hide an element if it has a true aria-hidden attribute.
+@mixin aria-hidden {
+ &[aria-hidden='true'] {
+ display: none;
+ }
+}
diff --git a/src/patterns/01-core/mixins/_clearfix.scss b/src/patterns/01-core/mixins/_clearfix.scss
new file mode 100644
index 0000000000000000000000000000000000000000..cc485bf1cf843d6f68a24eed6178365d6a6fa69b
--- /dev/null
+++ b/src/patterns/01-core/mixins/_clearfix.scss
@@ -0,0 +1,10 @@
+// @file
+// Clearfix
+
+@mixin clearfix() {
+ &::after {
+ clear: both;
+ content: '';
+ display: table;
+ }
+}
diff --git a/src/patterns/01-core/mixins/_headings.scss b/src/patterns/01-core/mixins/_headings.scss
new file mode 100644
index 0000000000000000000000000000000000000000..cfcd62abd057db7b63d69ae972497b410a25b6cf
--- /dev/null
+++ b/src/patterns/01-core/mixins/_headings.scss
@@ -0,0 +1,67 @@
+// @file
+// Typography mixins
+
+@mixin heading-base {
+ color: var(--gray-9);
+ font-family: var(--font-sans);
+ font-weight: var(--font-weight-900);
+ hyphens: none;
+ line-height: var(--font-lineheight-4);
+ margin: 0 0 var(--size-1);
+ text-rendering: optimizeLegibility;
+
+ @media print {
+ orphans: 3;
+ page-break-after: avoid;
+ widows: 3;
+
+ &::after {
+ display: inline-block;
+ }
+ }
+
+ * + & {
+ margin-top: var(--size-2);
+ }
+
+ a {
+ color: inherit;
+ font-weight: inherit;
+ }
+}
+
+@mixin heading-1 {
+ @include heading-base;
+ font-size: var(--font-size-10);
+ max-inline-size: var(--size-header-1);
+}
+
+@mixin heading-2 {
+ @include heading-base;
+ font-size: var(--font-size-8);
+ max-inline-size: var(--size-header-2);
+}
+
+@mixin heading-3 {
+ @include heading-base;
+ font-size: var(--font-size-6);
+ max-inline-size: var(--size-header-3);
+}
+
+@mixin heading-4 {
+ @include heading-base;
+ font-size: var(--font-size-5);
+ max-inline-size: var(--size-header-3);
+}
+
+@mixin heading-5 {
+ @include heading-base;
+ font-size: var(--font-size-3);
+ max-inline-size: var(--size-header-3);
+}
+
+@mixin heading-6 {
+ @include heading-base;
+ font-size: var(--font-size-1);
+ max-inline-size: var(--size-header-3);
+}
diff --git a/src/patterns/01-core/mixins/_image-replace.scss b/src/patterns/01-core/mixins/_image-replace.scss
new file mode 100644
index 0000000000000000000000000000000000000000..29ab8c1ad2a360ef628180ac05f254e47cc1df69
--- /dev/null
+++ b/src/patterns/01-core/mixins/_image-replace.scss
@@ -0,0 +1,27 @@
+// @file
+// Image replacement
+
+// After applying mixin, inline elements will need the display property set to block or inline-block.
+@mixin image-replace($width, $height: $width) {
+ height: $height;
+ overflow: hidden;
+ width: $width;
+
+ &::before {
+ content: '';
+ display: block;
+ height: 150%;
+ width: 0;
+ }
+}
+
+// This image replacement approach works with <input> and <button> elements.
+// The font-size declaration may cause problems for SEO and browsers with a
+// minimum font-size setting. Other inherited styles might also cause problems.
+@mixin image-replace-alt($width, $height: $width) {
+ color: transparent;
+ font: 0/0 a;
+ height: $height;
+ text-shadow: none;
+ width: $width;
+}
diff --git a/src/patterns/01-core/mixins/_index.scss b/src/patterns/01-core/mixins/_index.scss
new file mode 100644
index 0000000000000000000000000000000000000000..b297b2a0ce86a679844bec5501fe7773a8c2e62f
--- /dev/null
+++ b/src/patterns/01-core/mixins/_index.scss
@@ -0,0 +1,8 @@
+@forward 'accessiblity';
+@forward 'clearfix';
+@forward 'headings';
+@forward 'image-replace';
+@forward 'layout';
+@forward 'list';
+@forward 'svg-background';
+@forward 'svg-icon';
diff --git a/src/patterns/01-core/mixins/_layout.scss b/src/patterns/01-core/mixins/_layout.scss
new file mode 100644
index 0000000000000000000000000000000000000000..4bf39ad0fd102a68651c5f4eb5f2678a038c8f37
--- /dev/null
+++ b/src/patterns/01-core/mixins/_layout.scss
@@ -0,0 +1,38 @@
+// @file
+// Layout mixins
+
+@mixin layout-align-left($margin) {
+ float: left;
+
+ @if $margin {
+ margin-right: $margin;
+ }
+}
+
+@mixin layout-align-right($margin) {
+ float: right;
+
+ @if $margin {
+ margin-left: $margin;
+ }
+}
+
+@mixin layout-align-none {
+ float: none;
+ margin-left: 0;
+ margin-right: 0;
+}
+
+@mixin layout-constrain {
+ margin-left: auto;
+ margin-right: auto;
+ max-width: var(--layout-max-width);
+ padding-left: var(--layout-gutter);
+ padding-right: var(--layout-gutter);
+
+ // Just in case .l-constrain is nested within another .l-constrain.
+ & & {
+ padding-left: 0;
+ padding-right: 0;
+ }
+}
diff --git a/src/patterns/01-core/mixins/_list.scss b/src/patterns/01-core/mixins/_list.scss
new file mode 100644
index 0000000000000000000000000000000000000000..dc35fbd85f888928c93200bba141d04c42eb29db
--- /dev/null
+++ b/src/patterns/01-core/mixins/_list.scss
@@ -0,0 +1,96 @@
+// @file
+// List Mixins
+
+@use 'clearfix' as *;
+@use '../props/media' as *;
+
+@mixin list-border {
+ list-style: none;
+ margin-left: 0;
+ padding-left: 0;
+
+ li {
+ padding-left: 0;
+ }
+
+ > li {
+ border-bottom: 1px solid var(--gray-5);
+ padding: var(--size-05);
+ }
+}
+
+@mixin list-column {
+ list-style: none;
+ margin-left: 0;
+ padding-left: 0;
+
+ li {
+ padding-left: 0;
+ }
+
+ > li {
+ break-inside: avoid-column;
+ display: table;
+ margin-bottom: 0;
+ padding-bottom: var(--size-05);
+ }
+
+ @media(min-width: $screen-sm) {
+ column-count: 2;
+ column-gap: var(--size-4);
+ }
+}
+
+@mixin list-inline {
+ list-style-type: none;
+ margin-left: 0;
+ padding-left: 0;
+
+ li {
+ padding-left: 0;
+ }
+
+ > li {
+ display: inline;
+ }
+}
+
+@mixin list-pipeline {
+ @include clearfix;
+ list-style-type: none;
+ margin-left: 0;
+ padding-left: 0;
+
+ > li {
+ border-right: 1px solid var(--gray-5);
+ display: block;
+ float: left;
+ margin-right: 0.75em;
+ padding-left: 0;
+ padding-right: 0.75em;
+
+ &.is-active {
+ font-weight: 700;
+ }
+
+ &:last-child {
+ border-right: 0;
+ margin-right: 0;
+ padding-right: 0;
+ }
+ }
+}
+
+@mixin list-unstyled {
+ list-style-type: none;
+ margin: 0;
+ padding: 0;
+
+ li {
+ padding-left: 0;
+
+ &::before {
+ display: none;
+ }
+ }
+}
diff --git a/src/patterns/01-core/mixins/_svg-background.scss b/src/patterns/01-core/mixins/_svg-background.scss
new file mode 100644
index 0000000000000000000000000000000000000000..b01a40d00850da0f13dba42d6c88dbd89c48a07f
--- /dev/null
+++ b/src/patterns/01-core/mixins/_svg-background.scss
@@ -0,0 +1,9 @@
+// @file
+// SVG background image Mixin
+
+@mixin svg-background($path) {
+ background-image: url($path), linear-gradient(transparent, transparent);
+ background-repeat: no-repeat;
+ background-size: 100%;
+ display: inline-block;
+}
diff --git a/src/patterns/01-core/mixins/_svg-icon.scss b/src/patterns/01-core/mixins/_svg-icon.scss
new file mode 100644
index 0000000000000000000000000000000000000000..cf6bf562b9311398e4f7e206c333ca148ec46d16
--- /dev/null
+++ b/src/patterns/01-core/mixins/_svg-icon.scss
@@ -0,0 +1,15 @@
+// @file
+// SVG Icon mixins
+
+@mixin svg-icon($path, $height, $width, $color) {
+ background-color: $color;
+ background-size: cover;
+ content: '';
+ display: inline-block;
+ height: $height;
+ mask-image: url($path);
+ mask-position: center;
+ mask-repeat: no-repeat;
+ mask-size: contain;
+ width: $width;
+}
diff --git a/src/patterns/01-core/props/_animations.scss b/src/patterns/01-core/props/_animations.scss
new file mode 100644
index 0000000000000000000000000000000000000000..980d121d7a27c1183da155db1d1ccb23d8d6db73
--- /dev/null
+++ b/src/patterns/01-core/props/_animations.scss
@@ -0,0 +1,120 @@
+:where(html) {
+ --animation-fade-in: fade-in .5s var(--ease-3);
+ --animation-fade-out: fade-out .5s var(--ease-3);
+ --animation-scale-up: scale-up .5s var(--ease-3);
+ --animation-scale-down: scale-down .5s var(--ease-3);
+ --animation-slide-out-up: slide-out-up .5s var(--ease-3);
+ --animation-slide-out-down: slide-out-down .5s var(--ease-3);
+ --animation-slide-out-right: slide-out-right .5s var(--ease-3);
+ --animation-slide-out-left: slide-out-left .5s var(--ease-3);
+ --animation-slide-in-up: slide-in-up .5s var(--ease-3);
+ --animation-slide-in-down: slide-in-down .5s var(--ease-3);
+ --animation-slide-in-right: slide-in-right .5s var(--ease-3);
+ --animation-slide-in-left: slide-in-left .5s var(--ease-3);
+ --animation-shake-x: shake-x .75s var(--ease-out-5);
+ --animation-shake-y: shake-y .75s var(--ease-out-5);
+ --animation-spin: spin 2s linear infinite;
+ --animation-ping: ping 5s var(--ease-out-3) infinite;
+ --animation-blink: blink 1s var(--ease-out-3) infinite;
+ --animation-float: float 3s var(--ease-in-out-3) infinite;
+ --animation-bounce: bounce 2s var(--ease-squish-2) infinite;
+ --animation-pulse: pulse 2s var(--ease-out-3) infinite;
+}
+
+@keyframes fade-in {
+ to { opacity: 1 }
+}
+
+@keyframes fade-out {
+ to { opacity: 0 }
+}
+
+@keyframes scale-up {
+ to { transform: scale(1.25) }
+}
+
+@keyframes scale-down {
+ to { transform: scale(.75) }
+}
+
+@keyframes slide-out-up {
+ to { transform: translateY(-100%) }
+}
+
+@keyframes slide-out-down {
+ to { transform: translateY(100%) }
+}
+
+@keyframes slide-out-right {
+ to { transform: translateX(100%) }
+}
+
+@keyframes slide-out-left {
+ to { transform: translateX(-100%) }
+}
+
+@keyframes slide-in-up {
+ from { transform: translateY(100%) }
+}
+
+@keyframes slide-in-down {
+ from { transform: translateY(-100%) }
+}
+
+@keyframes slide-in-right {
+ from { transform: translateX(-100%) }
+}
+
+@keyframes slide-in-left {
+ from { transform: translateX(100%) }
+}
+
+@keyframes shake-x {
+ 0%, 100% { transform: translateX(0%) }
+ 20% { transform: translateX(-5%) }
+ 40% { transform: translateX(5%) }
+ 60% { transform: translateX(-5%) }
+ 80% { transform: translateX(5%) }
+}
+
+@keyframes shake-y {
+ 0%, 100% { transform: translateY(0%) }
+ 20% { transform: translateY(-5%) }
+ 40% { transform: translateY(5%) }
+ 60% { transform: translateY(-5%) }
+ 80% { transform: translateY(5%) }
+}
+
+@keyframes spin {
+ to { transform: rotate(1turn) }
+}
+
+@keyframes ping {
+ 90%, 100% {
+ transform: scale(2);
+ opacity: 0;
+ }
+}
+
+@keyframes blink {
+ 0%, 100% {
+ opacity: 1
+ }
+ 50% {
+ opacity: .5
+ }
+}
+
+@keyframes float {
+ 50% { transform: translateY(-25%) }
+}
+
+@keyframes bounce {
+ 25% { transform: translateY(-20%) }
+ 40% { transform: translateY(-3%) }
+ 0%, 60%, 100% { transform: translateY(0) }
+}
+
+@keyframes pulse {
+ 50% { transform: scale(.9,.9) }
+}
diff --git a/src/patterns/01-core/props/_aspects.scss b/src/patterns/01-core/props/_aspects.scss
new file mode 100644
index 0000000000000000000000000000000000000000..a7422c90d3c00774a3c2eeb6aaeb1682550a8e05
--- /dev/null
+++ b/src/patterns/01-core/props/_aspects.scss
@@ -0,0 +1,8 @@
+:where(html) {
+ --ratio-square: 1;
+ --ratio-landscape: 4/3;
+ --ratio-portrait: 3/4;
+ --ratio-widescreen: 16/9;
+ --ratio-ultrawide: 18/5;
+ --ratio-golden: 1.6180/1;
+}
diff --git a/src/patterns/01-core/props/_borders.scss b/src/patterns/01-core/props/_borders.scss
new file mode 100644
index 0000000000000000000000000000000000000000..3b04e35d3f8d517590c4ee259f2ff8fa0c8d8d75
--- /dev/null
+++ b/src/patterns/01-core/props/_borders.scss
@@ -0,0 +1,20 @@
+:where(html) {
+ --border-size-1: 1px;
+ --border-size-2: 2px;
+ --border-size-3: 5px;
+ --border-size-4: 10px;
+ --border-size-5: 25px;
+ --radius-1: 2px;
+ --radius-2: 5px;
+ --radius-3: 1rem;
+ --radius-4: 2rem;
+ --radius-5: 4rem;
+ --radius-6: 8rem;
+ --radius-round: 1e5px;
+ --radius-conditional-1: clamp(0px, calc(100vw - 100%) * 1e5, var(--radius-1));
+ --radius-conditional-2: clamp(0px, calc(100vw - 100%) * 1e5, var(--radius-2));
+ --radius-conditional-3: clamp(0px, calc(100vw - 100%) * 1e5, var(--radius-3));
+ --radius-conditional-4: clamp(0px, calc(100vw - 100%) * 1e5, var(--radius-4));
+ --radius-conditional-5: clamp(0px, calc(100vw - 100%) * 1e5, var(--radius-5));
+ --radius-conditional-6: clamp(0px, calc(100vw - 100%) * 1e5, var(--radius-6));
+}
diff --git a/src/patterns/01-core/props/_colors.scss b/src/patterns/01-core/props/_colors.scss
new file mode 100644
index 0000000000000000000000000000000000000000..5b6f5c125ff418f1479f0830da33b41ab602adbb
--- /dev/null
+++ b/src/patterns/01-core/props/_colors.scss
@@ -0,0 +1,132 @@
+:where(html) {
+ --gray-0: #f8f9fa;
+ --gray-1: #f1f3f5;
+ --gray-2: #e9ecef;
+ --gray-3: #dee2e6;
+ --gray-4: #ced4da;
+ --gray-5: #adb5bd;
+ --gray-6: #868e96;
+ --gray-7: #495057;
+ --gray-8: #343a40;
+ --gray-9: #212529;
+ --red-0: #fff5f5;
+ --red-1: #ffe3e3;
+ --red-2: #ffc9c9;
+ --red-3: #ffa8a8;
+ --red-4: #ff8787;
+ --red-5: #ff6b6b;
+ --red-6: #fa5252;
+ --red-7: #f03e3e;
+ --red-8: #e03131;
+ --red-9: #c92a2a;
+ --pink-0: #fff0f6;
+ --pink-1: #ffdeeb;
+ --pink-2: #fcc2d7;
+ --pink-3: #faa2c1;
+ --pink-4: #f783ac;
+ --pink-5: #f06595;
+ --pink-6: #e64980;
+ --pink-7: #d6336c;
+ --pink-8: #c2255c;
+ --pink-9: #a61e4d;
+ --grape-0: #f8f0fc;
+ --grape-1: #f3d9fa;
+ --grape-2: #eebefa;
+ --grape-3: #e599f7;
+ --grape-4: #da77f2;
+ --grape-5: #cc5de8;
+ --grape-6: #be4bdb;
+ --grape-7: #ae3ec9;
+ --grape-8: #9c36b5;
+ --grape-9: #862e9c;
+ --violet-0: #f3f0ff;
+ --violet-1: #e5dbff;
+ --violet-2: #d0bfff;
+ --violet-3: #b197fc;
+ --violet-4: #9775fa;
+ --violet-5: #845ef7;
+ --violet-6: #7950f2;
+ --violet-7: #7048e8;
+ --violet-8: #6741d9;
+ --violet-9: #5f3dc4;
+ --indigo-0: #edf2ff;
+ --indigo-1: #dbe4ff;
+ --indigo-2: #bac8ff;
+ --indigo-3: #91a7ff;
+ --indigo-4: #748ffc;
+ --indigo-5: #5c7cfa;
+ --indigo-6: #4c6ef5;
+ --indigo-7: #4263eb;
+ --indigo-8: #3b5bdb;
+ --indigo-9: #364fc7;
+ --blue-0: #e7f5ff;
+ --blue-1: #d0ebff;
+ --blue-2: #a5d8ff;
+ --blue-3: #74c0fc;
+ --blue-4: #4dabf7;
+ --blue-5: #339af0;
+ --blue-6: #228be6;
+ --blue-7: #1c7ed6;
+ --blue-8: #1971c2;
+ --blue-9: #1864ab;
+ --cyan-0: #e3fafc;
+ --cyan-1: #c5f6fa;
+ --cyan-2: #99e9f2;
+ --cyan-3: #66d9e8;
+ --cyan-4: #3bc9db;
+ --cyan-5: #22b8cf;
+ --cyan-6: #15aabf;
+ --cyan-7: #1098ad;
+ --cyan-8: #0c8599;
+ --cyan-9: #0b7285;
+ --teal-0: #e6fcf5;
+ --teal-1: #c3fae8;
+ --teal-2: #96f2d7;
+ --teal-3: #63e6be;
+ --teal-4: #38d9a9;
+ --teal-5: #20c997;
+ --teal-6: #12b886;
+ --teal-7: #0ca678;
+ --teal-8: #099268;
+ --teal-9: #087f5b;
+ --green-0: #ebfbee;
+ --green-1: #d3f9d8;
+ --green-2: #b2f2bb;
+ --green-3: #8ce99a;
+ --green-4: #69db7c;
+ --green-5: #51cf66;
+ --green-6: #40c057;
+ --green-7: #37b24d;
+ --green-8: #2f9e44;
+ --green-9: #2b8a3e;
+ --lime-0: #f4fce3;
+ --lime-1: #e9fac8;
+ --lime-2: #d8f5a2;
+ --lime-3: #c0eb75;
+ --lime-4: #a9e34b;
+ --lime-5: #94d82d;
+ --lime-6: #82c91e;
+ --lime-7: #74b816;
+ --lime-8: #66a80f;
+ --lime-9: #5c940d;
+ --yellow-0: #fff9db;
+ --yellow-1: #fff3bf;
+ --yellow-2: #ffec99;
+ --yellow-3: #ffe066;
+ --yellow-4: #ffd43b;
+ --yellow-5: #fcc419;
+ --yellow-6: #fab005;
+ --yellow-7: #f59f00;
+ --yellow-8: #f08c00;
+ --yellow-9: #e67700;
+ --orange-0: #fff4e6;
+ --orange-1: #ffe8cc;
+ --orange-2: #ffd8a8;
+ --orange-3: #ffc078;
+ --orange-4: #ffa94d;
+ --orange-5: #ff922b;
+ --orange-6: #fd7e14;
+ --orange-7: #f76707;
+ --orange-8: #e8590c;
+ --orange-9: #d9480f;
+}
diff --git a/src/patterns/01-core/props/_easing.scss b/src/patterns/01-core/props/_easing.scss
new file mode 100644
index 0000000000000000000000000000000000000000..b855d8e8a2c556aa40840c83d4a9febab23e491b
--- /dev/null
+++ b/src/patterns/01-core/props/_easing.scss
@@ -0,0 +1,37 @@
+:where(html) {
+ --ease-1: cubic-bezier(.25, 0, .5, 1);
+ --ease-2: cubic-bezier(.25, 0, .4, 1);
+ --ease-3: cubic-bezier(.25, 0, .3, 1);
+ --ease-4: cubic-bezier(.25, 0, .2, 1);
+ --ease-5: cubic-bezier(.25, 0, .1, 1);
+ --ease-in-1: cubic-bezier(.25, 0, 1, 1);
+ --ease-in-2: cubic-bezier(.50, 0, 1, 1);
+ --ease-in-3: cubic-bezier(.70, 0, 1, 1);
+ --ease-in-4: cubic-bezier(.90, 0, 1, 1);
+ --ease-in-5: cubic-bezier(1, 0, 1, 1);
+ --ease-out-1: cubic-bezier(0, 0, .75, 1);
+ --ease-out-2: cubic-bezier(0, 0, .50, 1);
+ --ease-out-3: cubic-bezier(0, 0, .3, 1);
+ --ease-out-4: cubic-bezier(0, 0, .1, 1);
+ --ease-out-5: cubic-bezier(0, 0, 0, 1);
+ --ease-in-out-1: cubic-bezier(.1, 0, .9, 1);
+ --ease-in-out-2: cubic-bezier(.3, 0, .7, 1);
+ --ease-in-out-3: cubic-bezier(.5, 0, .5, 1);
+ --ease-in-out-4: cubic-bezier(.7, 0, .3, 1);
+ --ease-in-out-5: cubic-bezier(.9, 0, .1, 1);
+ --ease-elastic-1: cubic-bezier(.5, .75, .75, 1.25);
+ --ease-elastic-2: cubic-bezier(.5, 1, .75, 1.25);
+ --ease-elastic-3: cubic-bezier(.5, 1.25, .75, 1.25);
+ --ease-elastic-4: cubic-bezier(.5, 1.5, .75, 1.25);
+ --ease-elastic-5: cubic-bezier(.5, 1.75, .75, 1.25);
+ --ease-squish-1: cubic-bezier(.5, -.1, .1, 1.5);
+ --ease-squish-2: cubic-bezier(.5, -.3, .1, 1.5);
+ --ease-squish-3: cubic-bezier(.5, -.5, .1, 1.5);
+ --ease-squish-4: cubic-bezier(.5, -.7, .1, 1.5);
+ --ease-squish-5: cubic-bezier(.5, -.9, .1, 1.5);
+ --ease-step-1: steps(2);
+ --ease-step-2: steps(3);
+ --ease-step-3: steps(4);
+ --ease-step-4: steps(7);
+ --ease-step-5: steps(10);
+}
diff --git a/src/patterns/01-core/props/_fonts.scss b/src/patterns/01-core/props/_fonts.scss
new file mode 100644
index 0000000000000000000000000000000000000000..62f8cec7b3c48615db068b395421043ec674e5a1
--- /dev/null
+++ b/src/patterns/01-core/props/_fonts.scss
@@ -0,0 +1,47 @@
+:where(html) {
+ --font-sans: Helvetica, sans-serif;
+ --font-serif: Georgia, 'Times New Roman', Times, serif;
+ --font-system: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Oxygen-Sans', Ubuntu, Cantarell, 'Fira Sans', 'Droid Sans', sans-serif;
+ --font-mono: Menlo, Consolas, 'Lucida Console', 'Liberation Mono', 'Courier New', monospace, sans-serif;
+ --font-weight-100: 100;
+ --font-weight-200: 200;
+ --font-weight-300: 300;
+ --font-weight-400: 400;
+ --font-weight-500: 500;
+ --font-weight-600: 600;
+ --font-weight-700: 700;
+ --font-weight-800: 800;
+ --font-weight-900: 900;
+ --font-size-000: 0.625rem; // 10px
+ --font-size-00: 0.75rem; // 12px
+ --font-size-0: 0.875rem; // 14px
+ --font-size-1: 1rem; // 16px
+ --font-size-2: 1.125rem; // 18px
+ --font-size-3: 1.25rem; // 20px
+ --font-size-4: 1.375rem; // 22px
+ --font-size-5: 1.5rem; // 24px
+ --font-size-6: 1.75rem; // 28px
+ --font-size-7: 2rem; // 32px
+ --font-size-8: 2.25rem; // 36px
+ --font-size-9: 2.5rem; // 40px
+ --font-size-10: 3rem; // 48px
+ --font-size-11: 3.5rem; // 56px
+ --font-size-12: 4rem; // 64px
+ --font-size-13: 5rem; // 80px
+ --font-size-14: 7.5rem; // 120px
+ --font-lineheight-00: .95;
+ --font-lineheight-1: 1.1;
+ --font-lineheight-2: 1.25;
+ --font-lineheight-3: 1.375;
+ --font-lineheight-4: 1.5;
+ --font-lineheight-5: 1.75;
+ --font-lineheight-6: 2;
+ --font-letterspacing-0: -0.05em;
+ --font-letterspacing-1: 0.025em;
+ --font-letterspacing-2: 0.050em;
+ --font-letterspacing-3: 0.75em;
+ --font-letterspacing-4: 0.150em;
+ --font-letterspacing-5: 0.500em;
+ --font-letterspacing-6: 0.750em;
+ --font-letterspacing-7: 1em;
+}
diff --git a/src/patterns/01-core/props/_index.scss b/src/patterns/01-core/props/_index.scss
new file mode 100644
index 0000000000000000000000000000000000000000..2bcda520ad5cbcf2201682e2ff8cb5ebfe7b376f
--- /dev/null
+++ b/src/patterns/01-core/props/_index.scss
@@ -0,0 +1,11 @@
+@forward 'animations';
+@forward 'aspects';
+@forward 'borders';
+@forward 'colors';
+@forward 'easing';
+@forward 'fonts';
+@forward 'layout';
+@forward 'shadows';
+@forward 'sizes';
+@forward 'zindex';
+@forward 'theme';
diff --git a/src/patterns/01-core/props/_layout.scss b/src/patterns/01-core/props/_layout.scss
new file mode 100644
index 0000000000000000000000000000000000000000..a11e1ebd7178b87ea38ba14d87f73284bad70523
--- /dev/null
+++ b/src/patterns/01-core/props/_layout.scss
@@ -0,0 +1,6 @@
+:where(html) {
+ --layout-gutter: var(--size-6);
+ --layout-max-width: 90rem; // 1440px
+ --grid-gutter: var(--size-10);
+ --grid-gap: var(--size-2);
+}
diff --git a/src/patterns/01-core/props/_media.scss b/src/patterns/01-core/props/_media.scss
new file mode 100644
index 0000000000000000000000000000000000000000..e7767ee0a9e55063e9888819d602d063e1c1c6fc
--- /dev/null
+++ b/src/patterns/01-core/props/_media.scss
@@ -0,0 +1,8 @@
+// Media Query Ranges
+$screen-xxs: 240px;
+$screen-xs: 360px;
+$screen-sm: 480px;
+$screen-md: 768px;
+$screen-lg: 1024px;
+$screen-xl: 1440px;
+$screen-xxl: 1920px;
diff --git a/src/patterns/01-core/props/_shadows.scss b/src/patterns/01-core/props/_shadows.scss
new file mode 100644
index 0000000000000000000000000000000000000000..b2734f54c08ca976062f16dbc2f2a1afc136b042
--- /dev/null
+++ b/src/patterns/01-core/props/_shadows.scss
@@ -0,0 +1,41 @@
+:where(html) {
+ --shadow-color: 220 3% 15%;
+ --shadow-strength: 1%;
+ --shadow-1: 0 1px 2px -1px hsl(var(--shadow-color) / calc(var(--shadow-strength) + 9%));
+ --shadow-2:
+ 0 3px 5px -2px hsl(var(--shadow-color) / calc(var(--shadow-strength) + 3%)),
+ 0 7px 14px -5px hsl(var(--shadow-color) / calc(var(--shadow-strength) + 5%));
+ --shadow-3:
+ 0 -1px 3px 0 hsl(var(--shadow-color) / calc(var(--shadow-strength) + 2%)),
+ 0 1px 2px -5px hsl(var(--shadow-color) / calc(var(--shadow-strength) + 2%)),
+ 0 2px 5px -5px hsl(var(--shadow-color) / calc(var(--shadow-strength) + 4%)),
+ 0 4px 12px -5px hsl(var(--shadow-color) / calc(var(--shadow-strength) + 5%)),
+ 0 12px 15px -5px hsl(var(--shadow-color) / calc(var(--shadow-strength) + 7%));
+ --shadow-4:
+ 0 -2px 5px 0 hsl(var(--shadow-color) / calc(var(--shadow-strength) + 2%)),
+ 0 1px 1px -2px hsl(var(--shadow-color) / calc(var(--shadow-strength) + 3%)),
+ 0 2px 2px -2px hsl(var(--shadow-color) / calc(var(--shadow-strength) + 3%)),
+ 0 5px 5px -2px hsl(var(--shadow-color) / calc(var(--shadow-strength) + 4%)),
+ 0 9px 9px -2px hsl(var(--shadow-color) / calc(var(--shadow-strength) + 5%)),
+ 0 16px 16px -2px hsl(var(--shadow-color) / calc(var(--shadow-strength) + 6%));
+ --shadow-5:
+ 0 -1px 2px 0 hsl(var(--shadow-color) / calc(var(--shadow-strength) + 2%)),
+ 0 2px 1px -2px hsl(var(--shadow-color) / calc(var(--shadow-strength) + 3%)),
+ 0 5px 5px -2px hsl(var(--shadow-color) / calc(var(--shadow-strength) + 3%)),
+ 0 10px 10px -2px hsl(var(--shadow-color) / calc(var(--shadow-strength) + 4%)),
+ 0 20px 20px -2px hsl(var(--shadow-color) / calc(var(--shadow-strength) + 5%)),
+ 0 40px 40px -2px hsl(var(--shadow-color) / calc(var(--shadow-strength) + 7%));
+ --shadow-6:
+ 0 -1px 2px 0 hsl(var(--shadow-color) / calc(var(--shadow-strength) + 2%)),
+ 0 3px 2px -2px hsl(var(--shadow-color) / calc(var(--shadow-strength) + 3%)),
+ 0 7px 5px -2px hsl(var(--shadow-color) / calc(var(--shadow-strength) + 3%)),
+ 0 12px 10px -2px hsl(var(--shadow-color) / calc(var(--shadow-strength) + 4%)),
+ 0 22px 18px -2px hsl(var(--shadow-color) / calc(var(--shadow-strength) + 5%)),
+ 0 41px 33px -2px hsl(var(--shadow-color) / calc(var(--shadow-strength) + 6%)),
+ 0 100px 80px -2px hsl(var(--shadow-color) / calc(var(--shadow-strength) + 7%));
+ --inner-shadow-0: inset 0 0 0 1px hsl(var(--shadow-color) / calc(var(--shadow-strength) + 9%));
+ --inner-shadow-1: inset 0 1px 2px 0 hsl(var(--shadow-color) / calc(var(--shadow-strength) + 9%));
+ --inner-shadow-2: inset 0 1px 4px 0 hsl(var(--shadow-color) / calc(var(--shadow-strength) + 9%));
+ --inner-shadow-3: inset 0 2px 8px 0 hsl(var(--shadow-color) / calc(var(--shadow-strength) + 9%));
+ --inner-shadow-4: inset 0 2px 14px 0 hsl(var(--shadow-color) / calc(var(--shadow-strength) + 9%));
+}
diff --git a/src/patterns/01-core/props/_sizes.scss b/src/patterns/01-core/props/_sizes.scss
new file mode 100644
index 0000000000000000000000000000000000000000..83b5a3af793b815c48d1afe86851d6bd0abc797a
--- /dev/null
+++ b/src/patterns/01-core/props/_sizes.scss
@@ -0,0 +1,39 @@
+:where(html) {
+ --size-xs: 0.063rem; // 1px
+ --size-sm: 0.125rem; // 2px
+ --size-05: 0.25rem; // 4px
+ --size-1: 0.5rem; // 8px
+ --size-105: 0.75rem; // 12px
+ --size-2: 1rem; // 16px
+ --size-205: 1.25rem; // 20px
+ --size-3: 1.5rem; // 24px
+ --size-4: 2rem; // 32px
+ --size-5: 2.5rem; // 40px
+ --size-6: 3rem; // 48px
+ --size-7: 3.5rem; // 56px
+ --size-8: 4rem; // 64px
+ --size-9: 4.5rem; // 72px
+ --size-10: 5rem; // 80px
+ --size-11: 5.5rem; // 88px
+ --size-12: 6rem; // 96px
+ --size-13: 6.5rem; // 104px
+ --size-14: 7rem; // 112px
+ --size-15: 7.5rem; // 120px
+ --size-20: 10rem; // 160px
+ --size-fluid-1: clamp(.5rem, 1vw, 1rem);
+ --size-fluid-2: clamp(1rem, 2vw, 1.5rem);
+ --size-fluid-3: clamp(1.5rem, 3vw, 2rem);
+ --size-fluid-4: clamp(2rem, 4vw, 3rem);
+ --size-fluid-5: clamp(4rem, 5vw, 5rem);
+ --size-fluid-6: clamp(5rem, 7vw, 7.5rem);
+ --size-fluid-7: clamp(7.5rem, 10vw, 10rem);
+ --size-fluid-8: clamp(10rem, 20vw, 15rem);
+ --size-fluid-9: clamp(15rem, 30vw, 20rem);
+ --size-fluid-10: clamp(20rem, 40vw, 30rem);
+ --size-content-1: 20ch;
+ --size-content-2: 45ch;
+ --size-content-3: 60ch;
+ --size-header-1: 20ch;
+ --size-header-2: 25ch;
+ --size-header-3: 35ch;
+}
diff --git a/src/patterns/01-core/props/_theme.scss b/src/patterns/01-core/props/_theme.scss
new file mode 100644
index 0000000000000000000000000000000000000000..e645dc8567af0acfe22bb075a35ed0569b1f844b
--- /dev/null
+++ b/src/patterns/01-core/props/_theme.scss
@@ -0,0 +1,4 @@
+:where(html) {
+ // theme css variables
+ // --link: var(--indigo-7);
+}
diff --git a/src/patterns/01-core/props/_zindex.scss b/src/patterns/01-core/props/_zindex.scss
new file mode 100644
index 0000000000000000000000000000000000000000..d6b869c95de1537130f22c5a704ca56713f70eca
--- /dev/null
+++ b/src/patterns/01-core/props/_zindex.scss
@@ -0,0 +1,8 @@
+:where(html) {
+ --layer-1: 1;
+ --layer-2: 2;
+ --layer-3: 3;
+ --layer-4: 4;
+ --layer-5: 5;
+ --layer-important: 2147483647;
+}
diff --git a/src/patterns/01-core/utilities/_accessibility.scss b/src/patterns/01-core/utilities/_accessibility.scss
new file mode 100644
index 0000000000000000000000000000000000000000..d5bdd829f28a7eb5643007d324428ec5d187b5ee
--- /dev/null
+++ b/src/patterns/01-core/utilities/_accessibility.scss
@@ -0,0 +1,24 @@
+// @file
+// Utility classes for Accessibility
+
+@use '../mixins/accessiblity' as *;
+
+// Accessibility utility classes
+.visually-hidden {
+ @include visually-hidden;
+
+ &.focusable {
+ &:focus,
+ &:active {
+ @include visually-hidden-off;
+ }
+ }
+}
+
+.hidden {
+ @include hidden;
+}
+
+.invisible {
+ @include invisible;
+}
diff --git a/src/patterns/01-core/utilities/_clearfix.scss b/src/patterns/01-core/utilities/_clearfix.scss
new file mode 100644
index 0000000000000000000000000000000000000000..1cd576f41844a40f3b5606f4047f50c498201985
--- /dev/null
+++ b/src/patterns/01-core/utilities/_clearfix.scss
@@ -0,0 +1,9 @@
+// @file
+// Utility classes for Clearfix
+
+@use '../mixins/clearfix' as *;
+
+// Clearfix
+.clearfix {
+ @include clearfix;
+}
diff --git a/src/patterns/01-core/utilities/_constrain.scss b/src/patterns/01-core/utilities/_constrain.scss
new file mode 100644
index 0000000000000000000000000000000000000000..4a79e38ce4252139897fdfafcc65e5cd6765f4d0
--- /dev/null
+++ b/src/patterns/01-core/utilities/_constrain.scss
@@ -0,0 +1,13 @@
+// @file
+// Utility classes for constraining the page width.
+
+@use '../mixins/layout' as *;
+
+.l-constrain {
+ @include layout-constrain;
+}
+
+.l-constrain--no-padding {
+ padding-left: 0;
+ padding-right: 0;
+}
diff --git a/src/patterns/01-core/utilities/_index.scss b/src/patterns/01-core/utilities/_index.scss
new file mode 100644
index 0000000000000000000000000000000000000000..26d28f7cfbda68eff69997ba66243adbbbb1e5ee
--- /dev/null
+++ b/src/patterns/01-core/utilities/_index.scss
@@ -0,0 +1,3 @@
+@forward 'accessibility';
+@forward 'constrain';
+@forward 'clearfix';
diff --git a/src/patterns/02-base/colors/colors.js b/src/patterns/02-base/colors/colors.js
new file mode 100644
index 0000000000000000000000000000000000000000..0b2431b2e2d33c33f545cae581aee538e3c7dae9
--- /dev/null
+++ b/src/patterns/02-base/colors/colors.js
@@ -0,0 +1,14 @@
+// var p = $("body");
+//
+// p.blinker();
+//
+// p.bind({
+// // pause blinking on mouseenter
+// mouseenter: function(){
+// $(this).data("blinker").pause();
+// },
+// // resume blinking on mouseleave
+// mouseleave: function(){
+// $(this).data("blinker").blinkagain();
+// }
+// });
diff --git a/src/patterns/02-base/colors/colors.twig b/src/patterns/02-base/colors/colors.twig
new file mode 100644
index 0000000000000000000000000000000000000000..4a35948320e4ba263963ee072d2b901b81944a20
--- /dev/null
+++ b/src/patterns/02-base/colors/colors.twig
@@ -0,0 +1,34 @@
+{#
+ * @file
+ * Display for theme color swatches.
+ *
+ * Each color swatch is populated from the yml file within
+ * this same directory (colors.yml). Add or remove any colors there.
+ *
+#}
+
+<section class="pl-colors">
+ {% for title, list in colors %}
+ <div class="just-for-gap">
+ <h3>{{ title|capitalize }}</h3>
+ <article class="color-demo">
+ {% for color, hex in list %}
+ <div style="background-color: {{ hex }}">
+ <div>{{ color }}<br>{{ hex }}</div>
+ </div>
+ {% endfor %}
+ </article>
+ </div>
+ {% endfor %}
+</section>
+
+{#{% for title, list in colors %}#}
+{# <h3>{{ title|capitalize }}</h3>#}
+{# <div class="pl-swatch__group">#}
+{# {% for color, hex in list %}#}
+{# <div class="pl-swatch" style="background-color: {{ hex }}">#}
+{# <div class="pl-swatch__meta">{{ color }}<br>{{ hex }}</div>#}
+{# </div>#}
+{# {% endfor %}#}
+{# </div>#}
+{#{% endfor %}#}
diff --git a/src/patterns/02-base/colors/colors.yml b/src/patterns/02-base/colors/colors.yml
new file mode 100644
index 0000000000000000000000000000000000000000..00e14ed9c338575358c615e1fd5dc53a95320cf3
--- /dev/null
+++ b/src/patterns/02-base/colors/colors.yml
@@ -0,0 +1,131 @@
+---
+colors:
+# brand:
+# blue-cool-30v: '#59b9de'
+# blue-cool-50v: '#0d7ea2'
+# green-warm-20: '#cbd17a'
+# green-warm-50: '#6f7a41'
+# red-warm-20v: '#f6bd9c'
+# red-warm-40v: '#ef5e25'
+# shades:
+# light: '#fff'
+# dark: '#000'
+ grayscale:
+# gray-5: '#f0f0f0'
+# gray-10: '#e6e6e6'
+# gray-20: '#c9c9c9'
+# gray-30: '#adadad'
+# gray-40: '#919191'
+# gray-50: '#757575'
+# gray-60: '#5c5c5c'
+# gray-70: '#454545'
+# gray-80: '#2e2e2e'
+# gray-90: '#1b1b1b'
+ white: '#fff'
+ gray-1: '#fafafa'
+ gray-2: '#eee'
+ gray-3: '#ccc'
+ gray-4: '#A2A2A2'
+ gray-5: '#757575'
+ gray-6: '#4e4e4e'
+ gray-7: '#333'
+ black: '#000'
+ uw-black:
+ lvl1: '#dfdfdf'
+ lvl2: '#a2a2a2'
+ lvl3: '#787878'
+ lvl4: '#000'
+ primary: '#000'
+ uw-gold:
+ lvl1: '#fffaaa'
+ lvl2: '#ffea30'
+ lvl3: '#fdd54f'
+ lvl4: '#e4b429'
+ primary: '#fffaaa'
+ uw-white:
+ lvl1: '#fff'
+ primary: '#fff'
+ neutral:
+ lvl1: '#dfdfdf'
+ lvl2: '#a2a2a2'
+ lvl3: '#787878'
+ lvl4: '#000'
+ primary: '#000'
+ org-ahs:
+ lvl1: '#97dfef'
+ lvl2: '#00bed0'
+ lvl3: '#0098a5'
+ lvl4: '#005963'
+ primary: '#005963'
+ org-art:
+ lvl1: '#ffd5a5'
+ lvl2: '#fbaf00'
+ lvl3: '#e78100'
+ lvl4: '#d93f00'
+ primary: '#d93f00'
+ org-eng:
+ lvl1: '#d0b4ef'
+ lvl2: '#be33da'
+ lvl3: '#8100b4'
+ lvl4: '#57058b'
+ primary: '#57058b'
+ org-env:
+ lvl1: '#daf582'
+ lvl2: '#bed500'
+ lvl3: '#b4be00'
+ lvl4: '#607000'
+ primary: '#607000'
+ org-mat:
+ lvl1: '#ffbeef'
+ lvl2: '#ff63aa'
+ lvl3: '#df2498'
+ lvl4: '#c60078'
+ primary: '#df2498'
+ org-sci:
+ lvl1: '#b4d5ff'
+ lvl2: '#63a0ff'
+ lvl3: '#0073ce'
+ lvl4: '#0033be'
+ primary: '#0073ce'
+ org-school:
+ lvl1: '#ffa5aa'
+ lvl2: '#e41740'
+ lvl3: '#b71233'
+ lvl4: '#80001f'
+ primary: '#b71233'
+ org-ren:
+ green: '#00693c'
+ red: '#de3831'
+ gold: '#d2c295'
+ lvl1: '#ffa5aa'
+ lvl2: '#e41740'
+ lvl3: '#b71233'
+ lvl4: '#80001f'
+ primary: '#00693c'
+ light: '#7FB49D'
+ org-stj:
+ green: '#01573e'
+ gold: '#c88a11'
+ lvl1: '#ffa5aa'
+ lvl2: '#e41740'
+ lvl3: '#b71233'
+ lvl4: '#80001f'
+ primary: '#01573e'
+ light: '#92B7AC'
+ org-stp:
+ green: '#879637'
+ brown: '#584528'
+ lvl1: '#ffa5aa'
+ lvl2: '#e41740'
+ lvl3: '#b71233'
+ lvl4: '#80001f'
+ primary: '#879637'
+ light: '#C2CD79'
+ org-cgc:
+ red: '#c4262e'
+ lvl1: '#ffa5aa'
+ lvl2: '#e41740'
+ lvl3: '#b71233'
+ lvl4: '#80001f'
+ primary: '#c4262e'
+ light: '#E8878C'
diff --git a/src/patterns/global.scss b/src/patterns/global.scss
index 3f82a3ce64a2f5d1bc99b6a77b091f65976d4c7b..67d81481d9ea2660a6e8f4f29bf25db217ae4037 100644
--- a/src/patterns/global.scss
+++ b/src/patterns/global.scss
@@ -5,4 +5,4 @@
@use '01-core/props' as *;
@use '01-core/utilities' as *;
@use '01-core/elements' as *;
-@use '03-layouts/grid/grid' as *;
+//@use '03-layouts/grid/grid' as *;