diff options
Diffstat (limited to 'scss/custom-properties')
24 files changed, 228 insertions, 0 deletions
diff --git a/scss/custom-properties/colours.scss b/scss/custom-properties/colours.scss new file mode 100644 index 0000000..dadb50e --- /dev/null +++ b/scss/custom-properties/colours.scss @@ -0,0 +1,23 @@ +@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}; + --background-color: #{colours.$primary-98}; + --background-highlight-color: #{colours.$primary-10}; + --special-text-color: #{colours.$secondary-40}; + --special-text-highlight-color: #{colours.$secondary-90}; +} + +:is(main, article) > section:nth-child(even):not(:is(section, header) :is(section, header)) { + --background-color: #{colours.$primary-95}; +} diff --git a/scss/custom-properties/index.lg.scss b/scss/custom-properties/index.lg.scss new file mode 100644 index 0000000..2a36586 --- /dev/null +++ b/scss/custom-properties/index.lg.scss @@ -0,0 +1,3 @@ +@use 'spacing/lg' as *; +@use 'typography/lg' as *; + diff --git a/scss/custom-properties/index.md.scss b/scss/custom-properties/index.md.scss new file mode 100644 index 0000000..2367952 --- /dev/null +++ b/scss/custom-properties/index.md.scss @@ -0,0 +1,3 @@ +@use 'spacing/md' as *; +@use 'typography/md' as *; + diff --git a/scss/custom-properties/index.scss b/scss/custom-properties/index.scss new file mode 100644 index 0000000..e7279b6 --- /dev/null +++ b/scss/custom-properties/index.scss @@ -0,0 +1,3 @@ +@use 'colours' as *; +@use 'spacing/initial' as *; +@use 'typography/initial' as *; diff --git a/scss/custom-properties/index.sm.scss b/scss/custom-properties/index.sm.scss new file mode 100644 index 0000000..c1ddffe --- /dev/null +++ b/scss/custom-properties/index.sm.scss @@ -0,0 +1,3 @@ +@use 'spacing/sm' as *; +@use 'typography/sm' as *; + diff --git a/scss/custom-properties/index.xl.scss b/scss/custom-properties/index.xl.scss new file mode 100644 index 0000000..14c55cf --- /dev/null +++ b/scss/custom-properties/index.xl.scss @@ -0,0 +1,3 @@ +@use 'spacing/xl' as *; +@use 'typography/xl' as *; + diff --git a/scss/custom-properties/index.xs.scss b/scss/custom-properties/index.xs.scss new file mode 100644 index 0000000..32eb377 --- /dev/null +++ b/scss/custom-properties/index.xs.scss @@ -0,0 +1,3 @@ +@use 'spacing/xs' as *; +@use 'typography/xs' as *; + diff --git a/scss/custom-properties/index.xxl.scss b/scss/custom-properties/index.xxl.scss new file mode 100644 index 0000000..8555eee --- /dev/null +++ b/scss/custom-properties/index.xxl.scss @@ -0,0 +1,3 @@ +@use 'spacing/xxl' as *; +@use 'typography/xxl' as *; + diff --git a/scss/custom-properties/spacing/_mixins.scss b/scss/custom-properties/spacing/_mixins.scss new file mode 100644 index 0000000..4e35ee7 --- /dev/null +++ b/scss/custom-properties/spacing/_mixins.scss @@ -0,0 +1,21 @@ +@use 'sass:map'; + +@use '../../values/spacing' as spacing-values; + +@mixin spacing($breakpoint: initial) { + --spacing-inline-lg: #{spacing-values.spacing($direction: inline, $size: lg, $breakpoint: $breakpoint)}; + --spacing-inline-md: #{spacing-values.spacing($direction: inline, $size: md, $breakpoint: $breakpoint)}; + --spacing-inline-sm: #{spacing-values.spacing($direction: inline, $size: sm, $breakpoint: $breakpoint)}; + --spacing-block-lg: #{spacing-values.spacing($direction: block, $size: lg, $breakpoint: $breakpoint)}; + --spacing-block-md: #{spacing-values.spacing($direction: block, $size: md, $breakpoint: $breakpoint)}; + --spacing-block-sm: #{spacing-values.spacing($direction: block, $size: sm, $breakpoint: $breakpoint)}; +} + +@mixin grid($breakpoint: initial) { + --grid-padding: #{spacing-values.grid-padding($breakpoint: $breakpoint)}; + --grid-column-count: #{map.get(spacing-values.$grid-column-count, $breakpoint)}; + --grid-column-width: #{spacing-values.grid-column-width($breakpoint: $breakpoint)}; + --grid-gutter-width: #{spacing-values.grid-gutter-width($breakpoint: $breakpoint)}; + --grid-prose-column-count: #{map.get(spacing-values.$grid-prose-column-count, $breakpoint)}; + --grid-total-width: #{spacing-values.grid-total-width-absolute($breakpoint)}; +} diff --git a/scss/custom-properties/spacing/initial.scss b/scss/custom-properties/spacing/initial.scss new file mode 100644 index 0000000..a38388f --- /dev/null +++ b/scss/custom-properties/spacing/initial.scss @@ -0,0 +1,14 @@ +@use 'sass:map'; + +@use '../../values/spacing' as spacing-values; +@use 'mixins'; + +:root { + @include mixins.spacing(); + @include mixins.grid(); + + --width-prose: calc( + var(--grid-column-width) * var(--grid-prose-column-count) + + var(--grid-gutter-width) * (var(--grid-prose-column-count) - 1) + ); +} diff --git a/scss/custom-properties/spacing/lg.scss b/scss/custom-properties/spacing/lg.scss new file mode 100644 index 0000000..1e9b090 --- /dev/null +++ b/scss/custom-properties/spacing/lg.scss @@ -0,0 +1,7 @@ +@use 'mixins'; +@use '../../values/spacing' as spacing-values; + +:root { + // No need for spacing here, since it's the same as sm. + @include mixins.grid($breakpoint: lg); +} diff --git a/scss/custom-properties/spacing/md.scss b/scss/custom-properties/spacing/md.scss new file mode 100644 index 0000000..99b9352 --- /dev/null +++ b/scss/custom-properties/spacing/md.scss @@ -0,0 +1,7 @@ +@use 'mixins'; +@use '../../values/spacing' as spacing-values; + +:root { + // No need for spacing here, since it's the same as sm. + @include mixins.grid($breakpoint: md); +} diff --git a/scss/custom-properties/spacing/sm.scss b/scss/custom-properties/spacing/sm.scss new file mode 100644 index 0000000..0fdfcfe --- /dev/null +++ b/scss/custom-properties/spacing/sm.scss @@ -0,0 +1,7 @@ +@use 'mixins'; +@use '../../values/spacing' as spacing-values; + +:root { + @include mixins.spacing($breakpoint: sm); + @include mixins.grid($breakpoint: sm); +} diff --git a/scss/custom-properties/spacing/xl.scss b/scss/custom-properties/spacing/xl.scss new file mode 100644 index 0000000..265c6e9 --- /dev/null +++ b/scss/custom-properties/spacing/xl.scss @@ -0,0 +1,7 @@ +@use 'mixins'; +@use '../../values/spacing' as spacing-values; + +:root { + // No need for spacing here, since it's the same as sm. + @include mixins.grid($breakpoint: xl); +} diff --git a/scss/custom-properties/spacing/xs.scss b/scss/custom-properties/spacing/xs.scss new file mode 100644 index 0000000..13a14d6 --- /dev/null +++ b/scss/custom-properties/spacing/xs.scss @@ -0,0 +1,7 @@ +@use 'mixins'; +@use '../../values/spacing' as spacing-values; + +:root { + @include mixins.spacing($breakpoint: xs); + @include mixins.grid($breakpoint: xs); +} diff --git a/scss/custom-properties/spacing/xxl.scss b/scss/custom-properties/spacing/xxl.scss new file mode 100644 index 0000000..600f74e --- /dev/null +++ b/scss/custom-properties/spacing/xxl.scss @@ -0,0 +1,7 @@ +@use 'mixins'; +@use '../../values/spacing' as spacing-values; + +:root { + // No need for spacing here, since it's the same as sm. + @include mixins.grid($breakpoint: xxl); +} diff --git a/scss/custom-properties/typography/_mixins.scss b/scss/custom-properties/typography/_mixins.scss new file mode 100644 index 0000000..a370356 --- /dev/null +++ b/scss/custom-properties/typography/_mixins.scss @@ -0,0 +1,12 @@ +@use '../../values/typography' as typography-values; + +@mixin font-sizes($breakpoint: initial) { + --font-size-0: #{typography-values.font-size('0', $breakpoint)}; + --font-size-1: #{typography-values.font-size('1', $breakpoint)}; + --font-size-2: #{typography-values.font-size('2', $breakpoint)}; + --font-size-3: #{typography-values.font-size('3', $breakpoint)}; + --font-size-4: #{typography-values.font-size('4', $breakpoint)}; + --font-size-5: #{typography-values.font-size('5', $breakpoint)}; + --font-size-6: #{typography-values.font-size('6', $breakpoint)}; +} + diff --git a/scss/custom-properties/typography/initial.scss b/scss/custom-properties/typography/initial.scss new file mode 100644 index 0000000..c9d95da --- /dev/null +++ b/scss/custom-properties/typography/initial.scss @@ -0,0 +1,41 @@ +@use 'mixins'; + +@use '../../values/typography' as typography-values; + +:root { + @include mixins.font-sizes(); + --border-width: #{typography-values.border-width()}; + + --font-serif: + Alegreya, + -apple-system-ui-serif, + Iowan Old Style, + Apple Garamond, + Baskerville, + Sitka, "Sitka Display", "Sitka Heading", "Sitka Text", + Times New Roman, + Droid Serif, + Times, + Source Serif Pro, + serif, + Apple Color Emoji, + Segoe UI Emoji, + Segoe UI Symbol; + + --font-sans-serif: + 'Alegreya Sans', + Lato, + -apple-system, + BlinkMacSystemFont, + avenir next, + avenir, + segoe ui, + helvetica neue, + helvetica, + Cantarell, + Ubuntu, + roboto, + noto, + arial, + sans-serif; +} diff --git a/scss/custom-properties/typography/lg.scss b/scss/custom-properties/typography/lg.scss new file mode 100644 index 0000000..30a3019 --- /dev/null +++ b/scss/custom-properties/typography/lg.scss @@ -0,0 +1,9 @@ +@use 'mixins'; + +@use '../../values/typography' as typography-values; + +:root { + @include mixins.font-sizes(lg); + --border-width: #{typography-values.border-width(lg)}; +} + diff --git a/scss/custom-properties/typography/md.scss b/scss/custom-properties/typography/md.scss new file mode 100644 index 0000000..df49bdd --- /dev/null +++ b/scss/custom-properties/typography/md.scss @@ -0,0 +1,9 @@ +@use 'mixins'; + +@use '../../values/typography' as typography-values; + +:root { + @include mixins.font-sizes(md); + --border-width: #{typography-values.border-width(md)}; +} + diff --git a/scss/custom-properties/typography/sm.scss b/scss/custom-properties/typography/sm.scss new file mode 100644 index 0000000..e1c3585 --- /dev/null +++ b/scss/custom-properties/typography/sm.scss @@ -0,0 +1,9 @@ +@use 'mixins'; + +@use '../../values/typography' as typography-values; + +:root { + @include mixins.font-sizes(sm); + --border-width: #{typography-values.border-width(sm)}; +} + diff --git a/scss/custom-properties/typography/xl.scss b/scss/custom-properties/typography/xl.scss new file mode 100644 index 0000000..0ddba99 --- /dev/null +++ b/scss/custom-properties/typography/xl.scss @@ -0,0 +1,9 @@ +@use 'mixins'; + +@use '../../values/typography' as typography-values; + +:root { + @include mixins.font-sizes(xl); + --border-width: #{typography-values.border-width(xl)}; +} + diff --git a/scss/custom-properties/typography/xs.scss b/scss/custom-properties/typography/xs.scss new file mode 100644 index 0000000..44d8bbb --- /dev/null +++ b/scss/custom-properties/typography/xs.scss @@ -0,0 +1,9 @@ +@use 'mixins'; + +@use '../../values/typography' as typography-values; + +:root { + @include mixins.font-sizes(xs); + --border-width: #{typography-values.border-width(xs)}; +} + diff --git a/scss/custom-properties/typography/xxl.scss b/scss/custom-properties/typography/xxl.scss new file mode 100644 index 0000000..1a777dc --- /dev/null +++ b/scss/custom-properties/typography/xxl.scss @@ -0,0 +1,9 @@ +@use 'mixins'; + +@use '../../values/typography' as typography-values; + +:root { + @include mixins.font-sizes(xxl); + --border-width: #{typography-values.border-width(xxl)}; +} + |