@dta-au/civictheme-twig 1.13.1

package/components/00-base/mixins/_button.scss

@@ -0,0 +1,312 @@
+//
+// Button mixins.
+//
+
+@use 'sass:map';
+@use 'sass:math';
+
+@mixin ct-button-type($type, $map: false) {
+  @if type-of($map) != 'map' {
+    // SASS does not allow variables interpolation, so we are creating a local
+    // map to easily generate rules.
+    $map: (
+      'primary': (
+        'light': (
+          'normal': (
+            'color': var(--ct-button-light-primary-color),
+            'background-color': var(--ct-button-light-primary-background-color),
+            'border-color': var(--ct-button-light-primary-border-color),
+            'outline-color': false,
+          ),
+          'hover': (
+            'color': var(--ct-button-light-primary-hover-color),
+            'background-color': var(--ct-button-light-primary-hover-background-color),
+            'border-color': var(--ct-button-light-primary-hover-border-color),
+            'outline-color': false,
+          ),
+          'active': (
+            'color': var(--ct-button-light-primary-active-color),
+            'background-color': var(--ct-button-light-primary-active-background-color),
+            'border-color': var(--ct-button-light-primary-active-border-color),
+            'outline-color': false,
+          ),
+          'focus': (
+            'color': $ct-button-light-primary-focus-color,
+            'background-color': $ct-button-light-primary-focus-background-color,
+            'border-color': $ct-button-light-primary-focus-border-color,
+            'outline-color': var(--ct-button-light-primary-focus-outline-color),
+          ),
+        ),
+        'dark': (
+          'normal': (
+            'color': var(--ct-button-dark-primary-color),
+            'background-color': var(--ct-button-dark-primary-background-color),
+            'border-color': var(--ct-button-dark-primary-border-color),
+            'outline-color': false,
+          ),
+          'hover': (
+            'color': var(--ct-button-dark-primary-hover-color),
+            'background-color': var(--ct-button-dark-primary-hover-background-color),
+            'border-color': var(--ct-button-dark-primary-hover-border-color),
+            'outline-color': false,
+          ),
+          'active': (
+            'color': var(--ct-button-dark-primary-active-color),
+            'background-color': var(--ct-button-dark-primary-active-background-color),
+            'border-color': var(--ct-button-dark-primary-active-border-color),
+            'outline-color': false,
+          ),
+          'focus': (
+            'color': $ct-button-dark-primary-focus-color,
+            'background-color': $ct-button-dark-primary-focus-background-color,
+            'border-color': $ct-button-dark-primary-focus-border-color,
+            'outline-color': var(--ct-button-dark-primary-focus-outline-color),
+          ),
+        )
+      ),
+      'secondary': (
+        'light': (
+          'normal': (
+            'color': var(--ct-button-light-secondary-color),
+            'background-color': var(--ct-button-light-secondary-background-color),
+            'border-color': var(--ct-button-light-secondary-border-color),
+            'outline-color': false,
+          ),
+          'hover': (
+            'color': var(--ct-button-light-secondary-hover-color),
+            'background-color': var(--ct-button-light-secondary-hover-background-color),
+            'border-color': var(--ct-button-light-secondary-hover-border-color),
+            'outline-color': false,
+          ),
+          'active': (
+            'color': var(--ct-button-light-secondary-active-color),
+            'background-color': var(--ct-button-light-secondary-active-background-color),
+            'border-color': var(--ct-button-light-secondary-active-border-color),
+            'outline-color': false,
+          ),
+          'focus': (
+            'color': $ct-button-light-secondary-focus-color,
+            'background-color': $ct-button-light-secondary-focus-background-color,
+            'border-color': $ct-button-light-secondary-focus-border-color,
+            'outline-color': var(--ct-button-light-secondary-focus-outline-color),
+          ),
+        ),
+        'dark': (
+          'normal': (
+            'color': var(--ct-button-dark-secondary-color),
+            'background-color': var(--ct-button-dark-secondary-background-color),
+            'border-color': var(--ct-button-dark-secondary-border-color),
+            'outline-color': false,
+          ),
+          'hover': (
+            'color': var(--ct-button-dark-secondary-hover-color),
+            'background-color': var(--ct-button-dark-secondary-hover-background-color),
+            'border-color': var(--ct-button-dark-secondary-hover-border-color),
+            'outline-color': false,
+          ),
+          'active': (
+            'color': var(--ct-button-dark-secondary-active-color),
+            'background-color': var(--ct-button-dark-secondary-active-background-color),
+            'border-color': var(--ct-button-dark-secondary-active-border-color),
+            'outline-color': false,
+          ),
+          'focus': (
+            'color': $ct-button-dark-secondary-focus-color,
+            'background-color': $ct-button-dark-secondary-focus-background-color,
+            'border-color': $ct-button-dark-secondary-focus-border-color,
+            'outline-color': var(--ct-button-dark-secondary-focus-outline-color),
+          ),
+        )
+      ),
+      'tertiary': (
+        'light': (
+          'normal': (
+            'color': var(--ct-button-light-tertiary-color),
+            'background-color': var(--ct-button-light-tertiary-background-color),
+            'border-color': var(--ct-button-light-tertiary-border-color),
+            'outline-color': false,
+          ),
+          'hover': (
+            'color': var(--ct-button-light-tertiary-hover-color),
+            'background-color': var(--ct-button-light-tertiary-hover-background-color),
+            'border-color': var(--ct-button-light-tertiary-hover-border-color),
+            'outline-color': false,
+          ),
+          'active': (
+            'color': var(--ct-button-light-tertiary-active-color),
+            'background-color': var(--ct-button-light-tertiary-active-background-color),
+            'border-color': var(--ct-button-light-tertiary-active-border-color),
+            'outline-color': false,
+          ),
+          'focus': (
+            'color': $ct-button-light-tertiary-focus-color,
+            'background-color': $ct-button-light-tertiary-focus-background-color,
+            'border-color': $ct-button-light-tertiary-focus-border-color,
+            'outline-color': var(--ct-button-light-tertiary-focus-outline-color),
+          ),
+        ),
+        'dark': (
+          'normal': (
+            'color': var(--ct-button-dark-tertiary-color),
+            'background-color': var(--ct-button-dark-tertiary-background-color),
+            'border-color': var(--ct-button-dark-tertiary-border-color),
+            'outline-color': false,
+          ),
+          'hover': (
+            'color': var(--ct-button-dark-tertiary-hover-color),
+            'background-color': var(--ct-button-dark-tertiary-hover-background-color),
+            'border-color': var(--ct-button-dark-tertiary-hover-border-color),
+            'outline-color': false,
+          ),
+          'active': (
+            'color': var(--ct-button-dark-tertiary-active-color),
+            'background-color': var(--ct-button-dark-tertiary-active-background-color),
+            'border-color': var(--ct-button-dark-tertiary-active-border-color),
+            'outline-color': false,
+          ),
+          'focus': (
+            'color': $ct-button-dark-tertiary-focus-color,
+            'background-color': $ct-button-dark-tertiary-focus-background-color,
+            'border-color': $ct-button-dark-tertiary-focus-border-color,
+            'outline-color': var(--ct-button-dark-tertiary-focus-outline-color),
+          ),
+        )
+      ),
+    );
+  }
+
+  $types: map.keys($map);
+
+  @if not index($types, $type) {
+    @error '"#{$type}" is not one of allowed #{$types}.';
+  }
+
+  & {
+    display: inline-block;
+    text-decoration: none;
+    outline-offset: var(--ct-button-outline-offset);
+    outline-width: var(--ct-button-outline-width);
+  }
+
+  @if $ct-animation-enabled {
+    & {
+      transition: all var(--ct-button-animation-duration) ease;
+    }
+  }
+
+  &:focus-visible,
+  &:hover,
+  &:active {
+    text-decoration: none;
+  }
+
+  &[disabled] {
+    text-decoration: none;
+    pointer-events: none;
+    user-select: none;
+    opacity: 50%;
+  }
+
+  input {
+    @include ct-visually-hidden();
+  }
+
+  $map-per-type: map.get($map, $type);
+
+  @each $theme, $type-kinds in $map-per-type {
+    &.ct-theme-#{$theme} {
+      @each $type-kind, $type-kind-values in $type-kinds {
+        @if $type-kind == 'normal' {
+          @include _ct-button-print-rules($type-kind-values);
+        }
+        @else if $type-kind == 'hover' {
+          &:hover {
+            @include _ct-button-print-rules($type-kind-values);
+          }
+        }
+        @else if $type-kind == 'active' {
+          &:active,
+          &.active {
+            @include _ct-button-print-rules($type-kind-values);
+          }
+        }
+        @else if $type-kind == 'active-hover' {
+          &.active:hover {
+            @include _ct-button-print-rules($type-kind-values);
+          }
+        }
+        @else if $type-kind == 'focus' {
+          &:focus-visible,
+          &.focus {
+            @include _ct-button-print-rules($type-kind-values);
+          }
+        }
+        @else if $type-kind == 'selected' {
+          &.selected,
+          &.selected:hover,
+          &.selected:active,
+          &.selected:hover:active {
+            @include _ct-button-print-rules($type-kind-values);
+          }
+        }
+      }
+    }
+  }
+}
+
+@mixin ct-button-size($size, $with-padding: true) {
+  // stylelint-disable-next-line scss/dollar-variable-pattern
+  $sizes: ('large', 'regular', 'small');
+
+  @if $size == 'large' {
+    @include ct-typography('label-large');
+
+    @if $with-padding {
+      & {
+        padding: ct-spacing(2) ct-spacing(6);
+      }
+    }
+  }
+  @else if $size == 'regular' {
+    @include ct-typography('label-regular');
+
+    @if $with-padding {
+      & {
+        padding: ct-spacing(1.75) ct-spacing(5);
+      }
+    }
+  }
+  @else if $size == 'small' {
+    @include ct-typography('label-small');
+
+    @if $with-padding {
+      & {
+        padding: ct-spacing() ct-spacing(4);
+      }
+    }
+  }
+  @else {
+    @error '"#{$size}" is not one of allowed #{$sizes}.';
+  }
+}
+
+@mixin _ct-button-print-rules($rules) {
+  $map: (
+    'background-color',
+    'border-color',
+    'color',
+    'outline-color',
+  );
+
+  @each $property in $map {
+    $value: map.get($rules, $property);
+
+    @if $value {
+      #{$property}: $value;
+    }
+  }
+
+  @if map.get($rules, 'outline-color') {
+    outline-style: solid;
+  }
+}

package/components/00-base/mixins/_color.scss

@@ -0,0 +1,137 @@
+//
+// Color mixins.
+//
+
+@use 'sass:color';
+@use 'sass:map';
+@use 'sass:math';
+@use 'sass:string';
+
+//
+// Retrieve light theme color.
+//
+@function ct-color-light($name) {
+  @return _ct-color($name, 'light');
+}
+
+//
+// Retrieve dark theme color.
+//
+@function ct-color-dark($name) {
+  @return _ct-color($name, 'dark');
+}
+
+//
+// Retrieve light theme color as a constant color value.
+//
+@function ct-color-constant-light($name) {
+  @return _ct-color($name, 'light', true);
+}
+
+//
+// Retrieve dark theme color as a constant color value.
+//
+@function ct-color-constant-dark($name) {
+  @return _ct-color($name, 'dark', true);
+}
+
+//
+// Color shade. Do not use on components directly - map to a color variant instead.
+//
+@function ct-color-shade($color, $number) {
+  @return color.mix(black, $color, math.percentage(math.div($number, 100)));
+}
+
+//
+// Color tint. Do not use on components directly - map to a color variant instead.
+//
+@function ct-color-tint($color, $number) {
+  @return color.mix(white, $color, math.percentage(math.div($number, 100)));
+}
+
+//
+// Color tone. Do not use on components directly - map to a color variant instead.
+//
+@function ct-color-tone($base, $color) {
+  $neutral: color.adjust(color.adjust($base, $saturation: -20%), $lightness: -1 * math.max(color.lightness($base) - 5%, 0%));
+
+  @return color.mix($neutral, white, math.percentage(math.div($color, 100)));
+}
+
+//
+// Encode color to be suitable for embedding.
+//
+@function ct-color-encode($string) {
+  @if type-of($string) == 'color' and string.index(#{$string}, '#') == 1 {
+    $hex: string.slice(color.ie-hex-str($string), 4);
+    $string: string.unquote('#{$hex}');
+
+    @return '%23' + $string;
+  }
+
+  @return $string;
+}
+
+//
+// String to fill SVG with color.
+//
+@function ct-color-svg-fill($svg, $color) {
+  @return ct-str-replace($svg, "fill=''", "fill='#{ct-color-encode($color)}'");
+}
+
+//
+// Get a color from the pre-defined list of colors.
+//
+// stylelint-disable-next-line scss/at-function-pattern
+@function _ct-color($name, $theme, $is-flat: false) {
+  @if $theme != 'light' and $theme != 'dark' {
+    @error '"#{$theme}" is not an available theme.';
+  }
+
+  $colors: map.deep-merge(_ct-colors(), _ct-colors-brands());
+  $color: map.get(map.get($colors, $theme), $name);
+
+  @if $color == null {
+    @error '"#{$name}" is not an available color.';
+  }
+
+  @if not $is-flat {
+    $color: ct-component-var(ct, color, $theme, $name);
+  }
+
+  @return $color;
+}
+
+//
+// Retrieve all palette colors.
+//
+// Do not use directly.
+//
+// stylelint-disable-next-line scss/at-function-pattern
+@function _ct-colors() {
+  $ct-colors-default: (
+    'light': (),
+    'dark': ()
+  ) !default;
+  $ct-colors: (
+    'light': (),
+    'dark': ()
+  ) !default;
+
+  @return map.deep-merge($ct-colors-default, $ct-colors);
+}
+
+//
+// Retrieve all brand colors.
+//
+// Do not use directly.
+//
+// stylelint-disable-next-line scss/at-function-pattern
+@function _ct-colors-brands() {
+  $ct-colors-brands: (
+    'light': (),
+    'dark': ()
+  ) !default;
+
+  @return $ct-colors-brands;
+}

package/components/00-base/mixins/_component.scss

@@ -0,0 +1,39 @@
+//
+// Component mixins and functions.
+//
+
+@use 'sass:meta';
+@use 'sass:string';
+@use 'sass:list';
+
+@mixin ct-component-theme($name) {
+  @each $theme in light, dark {
+    &.ct-theme-#{$theme} {
+      @content($name, $theme);
+    }
+  }
+}
+
+@mixin ct-component-property($args...) {
+  $property: list.nth($args, list.length($args));
+
+  #{$property}: ct-component-var($args...);
+}
+
+@function ct-component-var($args...) {
+  $var-name: ();
+
+  @for $i from 0 to list.length($args) {
+    $part: list.nth($args, $i + 1);
+    $part: ct-string($part);
+    $part: ct-str-replace($part, '.');
+    $part: ct-str-replace($part, '#');
+    $part: ct-str-replace($part, ',');
+    $var-name: list.append($var-name, $part);
+  }
+
+  $var-name: ct-string(ct-join-lists($var-name, '-'));
+  $css-var-name: '--' + $var-name;
+
+  @return var(#{$css-var-name});
+}

package/components/00-base/mixins/_content-link.scss

@@ -0,0 +1,58 @@
+//
+// Content Link mixins.
+//
+
+@mixin ct-content-link-base() {
+  text-decoration: underline;
+  text-decoration-thickness: ct-particle(0.125);
+  text-underline-offset: ct-particle(0.375);
+  padding: ct-spacing(0.375) 0 ct-spacing(0.25);
+  word-break: break-word;
+
+  &:hover {
+    text-decoration: none;
+    padding: ct-spacing(0.375) 0 ct-spacing(0.5);
+  }
+}
+
+@mixin ct-content-link-light() {
+  color: var(--ct-content-link-light-color);
+
+  &:focus-visible {
+    @include ct-outline();
+  }
+
+  &:hover {
+    background-color: var(--ct-content-link-light-hover-background-color);
+    color: var(--ct-content-link-light-hover-color);
+  }
+
+  &:visited {
+    color: var(--ct-content-link-light-visited-color);
+
+    &:hover {
+      color: var(--ct-content-link-light-visited-hover-color);
+    }
+  }
+}
+
+@mixin ct-content-link-dark() {
+  color: var(--ct-content-link-dark-color);
+
+  &:focus-visible {
+    @include ct-outline(true);
+  }
+
+  &:hover {
+    background-color: var(--ct-content-link-dark-hover-background-color);
+    color: var(--ct-content-link-dark-hover-color);
+  }
+
+  &:visited {
+    color: var(--ct-content-link-dark-visited-color);
+
+    &:hover {
+      color: var(--ct-content-link-dark-visited-hover-color);
+    }
+  }
+}