@avenirs-esr/avenirs-dsav 0.1.76 → 0.1.77

package/src/styles/components/_grid.scss

@@ -0,0 +1,182 @@
+@use '../core/namespace' as *;
+@use '../settings/breakpoints' as bp;
+@use '../core/spacing' as sp;
+
+$columns: 12;
+
+// === Containers ===
+// Default container
+// Ex: .av-container, .av-container--fluid
+@include ns("container") {
+  max-width: 90rem;
+  margin-left: auto;
+  margin-right: auto;
+  padding-left: sp.get(sm);
+  padding-right: sp.get(sm);
+
+  &--fluid {
+    max-width: none;
+    padding-left: var(--spacing-none);
+    padding-right: var(--spacing-none);
+    overflow: hidden;
+  }
+}
+
+// Breakpoint-specific containers
+// Ex: .av-container-md / .av-container-lg
+@each $bp-name, $bp-value in bp.$breakpoints {
+  @media (min-width: #{$bp-value}) {
+    @include ns("container-#{$bp-name}") {
+      width: 100%;
+      max-width: #{$bp-value};
+      margin-left: auto;
+      margin-right: auto;
+      @if $bp-name == lg or $bp-name == xl {
+        padding-left: sp.get(md);
+        padding-right: sp.get(md);
+      } @else {
+        padding-left: sp.get(sm);
+        padding-right: sp.get(sm);
+      }
+    }
+  }
+}
+
+// === Rows ===
+$row-justifications: (
+  left: flex-start,
+  right: flex-end,
+  center: center,
+  between: space-between
+);
+
+$row-alignments: (
+  top: flex-start,
+  middle: center,
+  bottom: flex-end
+);
+
+@include ns("row") {
+  display: flex;
+  flex-wrap: wrap;
+
+  // Horizontal alignments
+  // Ex: .av-row--left / .av-row--center
+  @each $mod-name, $justify in $row-justifications {
+    &--#{$mod-name} {
+      justify-content: $justify;
+    }
+  }
+
+  // Vertical alignments
+  // Ex: .av-row--top / .av-row--bottom
+  @each $mod-name, $align in $row-alignments {
+    &--#{$mod-name} {
+      align-items: $align;
+    }
+  }
+}
+
+@each $bp-name, $bp-value in bp.$breakpoints {
+  @media (min-width: #{$bp-value}) {
+    // Base row
+    // Ex: .av-row-md
+    @include ns("row-#{$bp-name}") {
+      display: flex;
+      flex-wrap: wrap;
+      margin-left: -#{sp.get(sm)};
+      margin-right: -#{sp.get(sm)};
+
+      > * {
+        padding-left: sp.get(sm);
+        padding-right: sp.get(sm);
+      }
+
+      &.av-no-gutters {
+        margin-left: 0;
+        margin-right: 0;
+
+        > * {
+          padding-left: 0;
+          padding-right: 0;
+        }
+      }
+
+      // Horizontal alignments
+      // Ex: .av-row-md--left / .av-row-lg--center
+      @each $mod-name, $justify in $row-justifications {
+        &--#{$mod-name} {
+          justify-content: $justify;
+        }
+      }
+
+      // Vertical alignments
+      // Ex: .av-row-md--top / .av-row-lg--bottom
+      @each $mod-name, $align in $row-alignments {
+        &--#{$mod-name} {
+          align-items: $align;
+        }
+      }
+    }
+  }
+}
+
+// === Columns ===
+$col-alignments: (
+  top: flex-start,
+  middle: center,
+  bottom: flex-end
+);
+
+@each $bp-name, $bp-value in bp.$breakpoints {
+  @media (min-width: #{$bp-value}) {
+    // Base column
+    // Ex: .av-col-md
+    @include ns("col-#{$bp-name}") {
+      flex: 1;
+    }
+
+    // Align-self modifiers
+    // Ex: .av-col-md--top / .av-col-lg--bottom
+    @each $mod-name, $align in $col-alignments {
+      @include ns("col-#{$bp-name}--#{$mod-name}") {
+        align-self: $align;
+      }
+    }
+
+    // Width and offsets
+    // Ex: .av-col-md-4 / .av-col-offset-md-2 / .av-col-offset-md-2--right
+    @for $i from 1 through $columns {
+      @include ns("col-#{$bp-name}-#{$i}") {
+        flex: 0 0 calc(100% * #{$i} / #{$columns});
+        max-width: calc(100% * #{$i} / #{$columns});
+      }
+
+      @include ns("col-offset-#{$bp-name}-#{$i}") {
+        margin-left: calc(100% * #{$i} / #{$columns});
+      }
+
+      @include ns("col-offset-#{$bp-name}-#{$i}--right") {
+        margin-left: 0;
+        margin-right: calc(100% * #{$i} / #{$columns});
+      }
+    }
+  }
+}
+
+// === Gapped flex directions ===
+// Ex: .av-flex-row-md / .av-flex-col-sm
+$flex-directions: (
+  row: row,
+  col: column,
+);
+
+@each $dir-name, $dir-value in $flex-directions {
+  @each $size, $value in sp.$spacing {
+    @include ns("flex-#{$dir-name}-#{$size}") {
+      display: flex;
+      flex-direction: $dir-value;
+      gap: var(--spacing-#{$size});
+    }
+  }
+}

package/src/styles/components/_links.scss

@@ -0,0 +1,6 @@
+a {
+  --hover-tint:var(--idle);
+  --active-tint:var(--active);
+  color:inherit;
+  text-decoration:var(--text-decoration);
+}

package/src/styles/components/_menu.scss

@@ -0,0 +1,59 @@
+@use '../core/namespace' as *;
+@use '../settings/breakpoints' as *;
+
+@include ns("menu") {
+  background-color: var(--other-background-base);
+  
+  &.#{$prefix}collapsing {
+    margin-top: var(--spacing-none);
+    padding-top: var(--spacing-none);
+  }
+
+  &__list {
+    margin: var(--spacing-none);
+    padding: var(--spacing-none) var(--spacing-sm) var(--spacing-sm);
+
+    & > * {
+      &:not(:last-child) {
+        border-bottom: 1px solid var(--stroke);
+      }
+    }
+
+
+  }
+
+  .#{$prefix}nav__link {
+    height: auto;
+    min-height: auto;
+    padding: var(--spacing-sm);
+
+    &[aria-current]:not([aria-current=false]) {
+      position: relative;
+
+      &::before {
+        content: "";
+        display: block;
+        height: var(--dimension-md);
+        left: 0;
+        margin-top: calc(-1 * var(--dimension-md) / 2);
+        position: absolute;
+        top: 50%;
+        width: var(--dimension-xxxs);
+      }
+    }
+  }
+
+  @include min-width(lg) {
+    pointer-events: none;
+    position: absolute;
+    top: 100%;
+    z-index: 1000;
+
+    &__list {
+      padding: var(--spacing-none);
+      pointer-events: auto;
+      border: 2px solid var(--stroke);
+      border-top-width: 1px;
+    }
+  }
+}

package/src/styles/components/_navigation.scss

@@ -0,0 +1,122 @@
+@use '../core/namespace' as *;
+@use '../settings/breakpoints' as *;
+
+@include ns("nav") {
+  &__list,
+  &__item {
+    display: flex;
+    flex-direction: column;
+  }
+
+  &__list {
+    position: relative;
+    margin: var(--spacing-none);
+    padding: var(--spacing-none);
+  }
+
+  &__item {
+    align-items: stretch;
+    flex: 0 1 auto;
+    position: relative;
+
+    &::before {
+      box-shadow: 0 -1px 0 0 var(--light-background-neutral), inset 0 -1px 0 0 var(--light-background-neutral);
+      content: "";
+      display: block;
+      height: 100%;
+      inset: var(--spacing-none);
+      pointer-events: none;
+      position: absolute;
+      width: 100%;
+    }
+
+    &:first-child:last-child::before {
+      box-shadow: none;
+    }
+
+    &:first-child::before {
+      box-shadow: inset 0 -1px 0 0 var(--light-background-neutral);
+    }
+
+    &:last-child::before {
+      box-shadow: 0 -1px 0 0 var(--light-background-neutral);
+    }
+  }
+
+  &__btn,
+  &__link {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: space-between;
+    height: 100%;
+    width: auto;
+    margin: var(--spacing-none);
+    padding: .75rem var(--spacing-sm);
+    text-align: left;
+    color: var(--text1);
+    min-height: var(--dimension-2xl);
+
+    &:hover {
+      background-color: var(--dark-background-primary1) !important;
+      color: var(--other-background-base) !important;
+    }
+  }
+
+  &__link {
+    &:not([href])[aria-current]:not([aria-current=false]) {
+      cursor: default;
+      pointer-events: none;
+    }
+  }
+  
+  & li::marker {
+    content: none;
+  }
+
+  @include min-width(lg) {
+    &__list {
+      flex-direction: row;
+      flex-wrap: nowrap;
+
+      &>:first-child:nth-last-child(2)~*,
+      &>:first-child:nth-last-child(3)~*,
+      &>:first-child:nth-last-child(4)~* {
+        margin-left: 1.25rem;
+      }
+    }
+
+    &__item {
+      align-items: flex-start;
+      position: static;
+
+      &::before {
+        content: none;
+      }
+    }
+
+    &__btn,
+    &__link {
+      padding: var(--spacing-sm);
+
+      &[aria-current]:not([aria-current=false]) {
+        position: relative;
+
+        &::before {
+          position: absolute;
+          top: auto;
+          bottom: 0;
+          left: 0;
+          margin-top: 0;
+          height: var(--dimension-xxxs);
+          width: 100%;
+          content: "";
+        }
+      }
+    }
+
+    &__btn {
+      justify-content: flex-start;
+    }
+  }
+}

package/src/styles/components/_selects.scss

@@ -0,0 +1,13 @@
+@use '../core/namespace' as *;
+
+@include ns("select-group") {
+  position: relative;
+
+  &--error .av-label * {
+    color: var(--dark-background-error) !important;
+  }
+
+  &--success .av-label * {
+    color: var(--dark-background-success) !important;
+  }
+}

package/src/styles/{texts.scss → components/_texts.scss}

@@ -1,3 +1,13 @@
+@use '../core/namespace' as *;
+
+// === Ellipsis ===
+@include ns("ellipsis") {
+  display: inline !important;
+  overflow: hidden !important;
+  text-overflow: ellipsis !important;
+  white-space: nowrap !important;
+}
+
 .ellipsis {
   overflow: hidden;
   text-overflow: ellipsis;
@@ -16,6 +26,7 @@
   }
 }
 
+// === Text decoration ===
 .text-underline {
   text-decoration: underline;
 }

package/src/styles/core/_accessibility.scss

@@ -0,0 +1,14 @@
+@use './namespace' as *;
+
+@include ns("sr-only") {
+  position: absolute !important;
+  width: 1px !important;
+  height: 1px !important;
+  padding: 0 !important;
+  margin: -1px !important;
+  overflow: hidden !important;
+  clip: rect(0, 0, 0, 0) !important;
+  white-space: nowrap !important;
+  border: 0 !important;
+  display: block !important;
+}

package/src/styles/core/_cursors.scss

@@ -0,0 +1,47 @@
+// === Global cursor management ===
+$interactive: (
+  a,
+  'audio[controls]',
+  button,
+  details,
+  'details>summary:first-of-type',
+  'input[type=button]',
+  'input[type=checkbox]',
+  'input[type=checkbox]+label',
+  'input[type=file]',
+  'input[type=image]',
+  'input[type=radio]',
+  'input[type=radio]+label',
+  'input[type=range]',
+  'input[type=reset]',
+  'input[type=submit]',
+  select,
+  textarea,
+  'video[controls]'
+);
+
+#{$interactive} {
+  cursor: pointer;
+}
+
+#{$interactive}:disabled,
+a:not([href]),
+audio:not([href])[controls],
+input[type=range]:disabled,
+input[type=range]:disabled::-webkit-slider-thumb,
+input[type=range]:disabled::-moz-range-thumb,
+input[type=range]:disabled::-ms-thumb,
+button:disabled,
+input:disabled,
+input[type=button]:disabled,
+input[type=checkbox]:disabled+label,
+input[type=file]:disabled,
+input[type=image]:disabled,
+input[type=radio]:disabled+label,
+input[type=reset]:disabled,
+input[type=submit]:disabled,
+select:disabled,
+textarea:disabled,
+video:not([href])[controls] {
+  cursor: not-allowed;
+}

package/src/styles/{dimensions.scss → core/_dimensions.scss}

@@ -9,5 +9,6 @@
   --dimension-lg: 2rem;       /* 32px */
   --dimension-md: 1.5rem;     /* 24px */
   --dimension-sm: 1rem;       /* 16px */
+  --dimension-xs: 0.5rem;     /* 8px */
   --dimension-xxxs: 0.125rem; /* 2px */
 }

package/src/styles/core/_focus.scss

@@ -0,0 +1,66 @@
+// === Focus styles ===
+@mixin focus-style {
+  outline-color: #0a76f6;
+  outline-offset: 2px;
+  outline-style: solid;
+  outline-width: 2px;
+}
+
+// === Focusable elements ===
+$focus-elements: (
+  '[contenteditable]:not([contenteditable=false])',
+  '[tabindex]',
+  'a',
+  'audio[controls]',
+  'button',
+  'details',
+  'details>summary:first-of-type',
+  'input',
+  'input[type=button]',
+  'input[type=image]',
+  'input[type=radio]+label:before',
+  'input[type=reset]',
+  'input[type=submit]',
+  'select',
+  'textarea',
+  'video[controls]'
+);
+
+// === Elements visually linked to a focused input ===
+$focus-linked-elements: (
+  'input[type=checkbox]:focus-visible + label',
+);
+
+// === Apply focus styles ===
+@each $el in $focus-elements {
+  #{$el}:focus {
+    @include focus-style;
+  }
+  #{$el}:focus-visible {
+    @include focus-style;
+  }
+  #{$el}:focus:not(:focus-visible) {
+    outline-style: none;
+  }
+}
+
+// === Apply focus styles to visual “linked” elements (labels) ===
+@each $el in $focus-linked-elements {
+  #{$el} {
+    @include focus-style;
+  }
+}
+
+// === Apply focus styles to range input sliders ===
+$sliders: ('-webkit-slider-thumb', '-moz-range-thumb', '-ms-thumb');
+@each $slider in $sliders {
+  input[type=range]:focus::#{$slider} {
+    @include focus-style;
+  }
+  input[type=range]:focus-visible::#{$slider} {
+    outline-style: solid;
+  }
+  input[type=range]:focus:not(:focus-visible)::#{$slider} {
+    outline-style: none;
+  }
+}

package/src/styles/core/_hover.scss

@@ -0,0 +1,22 @@
+@use "sass:string";
+
+// === Hover styles ===
+// Generated global hover rules for interactive elements (no mixin)
+$hover-media: string.unquote("(hover: hover) and (pointer: fine)");
+
+$hoverable-selectors: (
+    'button:not(:disabled)',
+    'input[type=button]:not(:disabled)',
+    'input[type=image]:not(:disabled)',
+    'input[type=reset]:not(:disabled)',
+    'input[type=submit]:not(:disabled)'
+);
+
+// Apply hover background within the hover-capable media query
+@media #{$hover-media} {
+  @each $sel in $hoverable-selectors {
+    #{string.unquote($sel)}:hover {
+      background-color: var(--light-background-neutral);
+    }
+  }
+}

package/src/styles/core/_namespace.scss

@@ -0,0 +1,9 @@
+// Global prefix for all DSAV classes
+$prefix: "av-";
+
+// Mixin to create namespaced classes
+@mixin ns($name) {
+  .#{$prefix}#{$name} {
+    @content;
+  }
+}

package/src/styles/{palette.scss → core/_palette.scss}

@@ -36,6 +36,7 @@
   --text1: #14171ACC;
   --text2: #14171AA3;
   --icon: #14171A7A;
+  --icon-filter: invert(65%) sepia(6%) saturate(100%) hue-rotate(180deg) brightness(75%) contrast(85%);
   --divider: #14171A5C;
   --stroke: #14171A29;
   --selected-disabled-foreground: #14171ACC;
@@ -106,6 +107,7 @@
   --text1: #FAFAFACC;
   --text2: #FAFAFAA3;
   --icon: #FAFAFA7A;
+  --icon-filter: invert(98%) sepia(0%) saturate(0%) hue-rotate(0deg) brightness(100%) contrast(25%);
   --divider: #FAFAFA5C;
   --stroke: #FAFAFA29;
   --selected-disabled-foreground: #FAFAFACC;

package/src/styles/core/_spacing.scss

@@ -0,0 +1,33 @@
+@use "sass:map";
+
+$spacing: (
+  none: 0,
+  xxxs: 0.125rem, /* 2px */
+  xxs: 0.25rem,   /* 4px */
+  xs: 0.5rem,     /* 8px */
+  sm: 1rem,       /* 16px */
+  md: 1.5rem,     /* 24px */
+  lg: 2rem,       /* 32px */
+  xl: 2.5rem,     /* 40px */
+  2xl: 3rem,      /* 48px */
+  4xl: 4rem,      /* 64px */
+  5xl: 5rem,      /* 80px */
+) !default;
+
+:root {
+  @each $key, $value in $spacing {
+    --spacing-#{$key}: #{$value};
+  }
+}
+
+@function get($key) {
+  @return map.get($spacing, $key);
+}
+
+.line-break {
+  height: var(--spacing-xs);
+}
+
+.indented-list {
+  padding-left: var(--spacing-md);
+}