@avenirs-esr/avenirs-dsav 0.1.131 → 0.1.133

package/dist/components/interaction/buttons/index.d.ts

@@ -1,4 +1,4 @@
 export { default as AvButton, type AvButtonProps } from './AvButton/AvButton.vue';
-export { default as AvCancelConfirmButtons } from './AvCancelConfirmButtons/AvCancelConfirmButtons.vue';
+export { default as AvCancelConfirmButtons, type AvCancelConfirmButtonsProps } from './AvCancelConfirmButtons/AvCancelConfirmButtons.vue';
 export { default as AvLanguageSelector, type AvLanguageSelectorElement, type AvLanguageSelectorProps } from './AvLanguageSelector/AvLanguageSelector.vue';
 export { default as AvRichButton } from './AvRichButton/AvRichButton.vue';

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@avenirs-esr/avenirs-dsav",
   "type": "module",
-  "version": "0.1.131",
+  "version": "0.1.133",
   "repository": {
     "type": "git",
     "url": "https://github.com/avenirs-esr/avenirs-dsav"

package/src/styles/core/_palette.scss

@@ -32,9 +32,9 @@
   --light-foreground-critical: #7040F1;
   --light-foreground-neutral: #666769;
   --base: #14171A;
-  --title: #14171AEB;
-  --text1: #14171ACC;
-  --text2: #14171AA3;
+  --title: #161616;
+  --text1: #3A3A3A;
+  --text2: #656565;
   --icon: #14171A7A;
   --icon-filter: invert(65%) sepia(6%) saturate(100%) hue-rotate(180deg) brightness(75%) contrast(85%);
   --divider: #14171A5C;

package/src/styles/core/_radius.scss

@@ -1,11 +1,19 @@
+@use "sass:map";
+
+$radius: (
+  none: 0,        /* 0px */
+  xxs: 0.0625rem, /* 1px */
+  xs: 0.125rem,   /* 2px */
+  sm: 0.25rem,    /* 4px */
+  md: 0.5rem,     /* 8px */
+  lg: 0.75rem,    /* 12px */
+  xl: 1rem,       /* 16px */
+  hg: 2rem,       /* 32px */
+  full: 62.5rem,  /* 1000px */
+) !default;
+
 :root {
-  --radius-none: 0;
-  --radius-xxs: 0.0625rem;  /* 1px */
-  --radius-xs: 0.125rem;    /* 2px */
-  --radius-sm: 0.25rem;     /* 4px */
-  --radius-md: 0.5rem;      /* 8px */
-  --radius-lg: 0.75rem;     /* 12px */
-  --radius-xl: 1rem;        /* 16px */
-  --radius-hg: 2rem;        /* 32px */
-  --radius-full: 62.5rem;   /* 1000px */
+  @each $key, $value in $radius {
+    --radius-#{$key}: #{$value};
+  }
 }

package/src/styles/main.scss

@@ -28,6 +28,8 @@
 @use './utilities/helpers' as *;
 @use './utilities/spacing' as *;
 @use './utilities/layout' as *;
+@use './utilities/palette' as *;
+@use './utilities/border' as *;
 
 // === Global ===
 :root {

package/src/styles/utilities/_border.md

@@ -0,0 +1,70 @@
+---
+layout: page
+lastUpdated: true
+---
+
+# Border
+
+## ✨ Introduction
+
+This `border` utility generates border width, border style and border radius classes for all defined sizes.
+
+## 🏷️ Class patterns
+
+| Class pattern | Description | Responsive variants |
+|---------------|-------------|---------------------|
+| `.av-border-width-{widthSize}` | Applies `border-width` with the specified size | `--sm`, `--md`, `--lg`, `--xl` |
+| `.av-border-style-{style}` | Applies `border-style` with the specified style | `solid`, `dashed`, `dotted`, `none` |
+| `.av-radius-{radiusSize}` | Applies `border-radius` with the specified size | `--sm`, `--md`, `--lg`, `--xl` |
+
+📝 Notes:
+- `{widthSize}` corresponds to the border width scale defined in this file: `none` (`0`), `sm` (`0.0625rem`), `md` (`0.125rem`), `lg` (`0.25rem`).
+- `{radiusSize}` corresponds to the radius scale defined in the core: `none`, `xxs`, `xs`, `sm`, `md`, `lg`, `xl`, `hg`, `full`.
+
+## 🎨 Some CSS results
+
+### Border width classes
+
+```css
+.av-border-width-sm {
+  border-width: 0.0625rem !important;
+}
+
+.av-border-width-md {
+  border-width: 0.125rem !important;
+}
+```
+
+### Border style classes
+
+```css
+.av-border-style-solid {
+  border-style: solid !important;
+}
+
+.av-border-style-dashed {
+  border-style: dashed !important;
+}
+```
+
+### Border radius classes
+
+```css
+.av-radius-sm {
+  border-radius: var(--radius-sm) !important;
+}
+
+.av-radius-md {
+  border-radius: var(--radius-md) !important;
+}
+```
+
+## 💡 Examples of use
+
+```html
+<div class="av-border-width-sm av-border-style-solid av-radius-sm">
+  <!-- border-width-sm: border width sm (0.0625rem) on all screens -->
+  <!-- border-style-solid: solid border style on all screens -->
+  <!-- radius-sm: border radius sm (var(--radius-sm)) on all screens -->
+</div>
+```

package/src/styles/utilities/_border.scss

@@ -0,0 +1,45 @@
+@use '../core/radius' as r;
+@use '../mixins/responsive-utility' as *;
+@use "sass:map";
+
+// === Border widths ===
+$border-widths: (
+  none: 0,        /* 0px */
+  sm: 0.0625rem, /* 1px */
+  md: 0.125rem,   /* 2px */
+  lg: 0.25rem,    /* 4px */
+);
+
+// === Border styles ===
+$border-styles: (
+  solid,
+  dashed,
+  dotted,
+  none,
+);
+
+// === BASE CLASSES ===
+
+// === Border width classes ===
+// Ex : .av-border-sm / .av-border-lg
+@each $size, $value in $border-widths {
+  @include utility-base("border-width-#{$size}", (
+    border-width: #{$value} !important
+  ));
+}
+
+// === Border style classes ===
+// Ex : .av-border-solid / .av-border-dashed
+@each $style in $border-styles {
+  @include utility-base("border-style-#{$style}", (
+    border-style: #{$style} !important
+  ));
+}
+
+// === Border radius classes ===
+// Ex : .av-radius-sm / .av-radius-lg
+@each $size, $value in r.$radius {
+  @include utility-base("radius-#{$size}", (
+    border-radius: var(--radius-#{$size}) !important
+  ));
+}

package/src/styles/utilities/_helpers.scss

@@ -113,4 +113,12 @@ ol>li{
 
 li::marker{
   content: counter(li-counter, ".") ". ";
+}
+
+// === List reset class ===
+// Ex: .av-list-reset
+@include ns("list-reset") {
+  list-style: none;
+  padding: var(--spacing-none);
+  margin: var(--spacing-none);
 }

package/src/styles/utilities/_palette.scss

@@ -0,0 +1,14 @@
+@use '../core/namespace' as *;
+
+// === Usual text color classes ===
+@include ns("text-text1") {
+  color: var(--text1);
+}
+
+@include ns("text-text2") {
+  color: var(--text2);
+}
+
+@include ns("text-title") {
+  color: var(--title);
+}