@ostack.tech/ui 0.1.0

package/scss/scss/_base-variables.scss

@@ -0,0 +1,501 @@
+@use "colors" as *;
+
+// Library's prefix
+$prefix: oui- !default;
+
+// Colours
+$background-color: #fff !default;
+
+$colors: neutral, primary, success, danger, warning !default;
+
+// Colour shades follow Radix's conventions and are organised as follows:
+// - 1–2: Backgrounds
+// - 3–5: Interactive components
+// - 6–8: Borders and separators
+// - 9–10: Solid colours
+// - 11–12: Accessible text
+
+// Neutral
+$neutral-1: $slate-1 !default;
+$neutral-2: $slate-2 !default;
+$neutral-3: $slate-3 !default;
+$neutral-4: $slate-4 !default;
+$neutral-5: $slate-5 !default;
+$neutral-6: $slate-6 !default;
+$neutral-7: $slate-7 !default;
+$neutral-8: $slate-8 !default;
+$neutral-9: $slate-9 !default;
+$neutral-10: $slate-10 !default;
+$neutral-11: $slate-11 !default;
+$neutral-12: $slate-12 !default;
+
+$neutral-a1: $slate-a1 !default;
+$neutral-a2: $slate-a2 !default;
+$neutral-a3: $slate-a3 !default;
+$neutral-a4: $slate-a4 !default;
+$neutral-a5: $slate-a5 !default;
+$neutral-a6: $slate-a6 !default;
+$neutral-a7: $slate-a7 !default;
+$neutral-a8: $slate-a8 !default;
+$neutral-a9: $slate-a9 !default;
+$neutral-a10: $slate-a10 !default;
+$neutral-a11: $slate-a11 !default;
+$neutral-a12: $slate-a12 !default;
+
+$neutral-contrast: $slate-contrast !default;
+$neutral-surface: $slate-surface !default;
+
+// Primary
+$primary-1: $indigo-1 !default;
+$primary-2: $indigo-2 !default;
+$primary-3: $indigo-3 !default;
+$primary-4: $indigo-4 !default;
+$primary-5: $indigo-5 !default;
+$primary-6: $indigo-6 !default;
+$primary-7: $indigo-7 !default;
+$primary-8: $indigo-8 !default;
+$primary-9: $indigo-9 !default;
+$primary-10: $indigo-10 !default;
+$primary-11: $indigo-11 !default;
+$primary-12: $indigo-12 !default;
+
+$primary-a1: $indigo-a1 !default;
+$primary-a2: $indigo-a2 !default;
+$primary-a3: $indigo-a3 !default;
+$primary-a4: $indigo-a4 !default;
+$primary-a5: $indigo-a5 !default;
+$primary-a6: $indigo-a6 !default;
+$primary-a7: $indigo-a7 !default;
+$primary-a8: $indigo-a8 !default;
+$primary-a9: $indigo-a9 !default;
+$primary-a10: $indigo-a10 !default;
+$primary-a11: $indigo-a11 !default;
+$primary-a12: $indigo-a12 !default;
+
+$primary-contrast: $indigo-contrast !default;
+$primary-surface: $indigo-surface !default;
+
+// Success
+$success-1: $green-1 !default;
+$success-2: $green-2 !default;
+$success-3: $green-3 !default;
+$success-4: $green-4 !default;
+$success-5: $green-5 !default;
+$success-6: $green-6 !default;
+$success-7: $green-7 !default;
+$success-8: $green-8 !default;
+$success-9: $green-9 !default;
+$success-10: $green-10 !default;
+$success-11: $green-11 !default;
+$success-12: $green-12 !default;
+
+$success-a1: $green-a1 !default;
+$success-a2: $green-a2 !default;
+$success-a3: $green-a3 !default;
+$success-a4: $green-a4 !default;
+$success-a5: $green-a5 !default;
+$success-a6: $green-a6 !default;
+$success-a7: $green-a7 !default;
+$success-a8: $green-a8 !default;
+$success-a9: $green-a9 !default;
+$success-a10: $green-a10 !default;
+$success-a11: $green-a11 !default;
+$success-a12: $green-a12 !default;
+
+$success-contrast: $green-contrast !default;
+$success-surface: $green-surface !default;
+
+// Danger
+$danger-1: $red-1 !default;
+$danger-2: $red-2 !default;
+$danger-3: $red-3 !default;
+$danger-4: $red-4 !default;
+$danger-5: $red-5 !default;
+$danger-6: $red-6 !default;
+$danger-7: $red-7 !default;
+$danger-8: $red-8 !default;
+$danger-9: $red-9 !default;
+$danger-10: $red-10 !default;
+$danger-11: $red-11 !default;
+$danger-12: $red-12 !default;
+
+$danger-a1: $red-a1 !default;
+$danger-a2: $red-a2 !default;
+$danger-a3: $red-a3 !default;
+$danger-a4: $red-a4 !default;
+$danger-a5: $red-a5 !default;
+$danger-a6: $red-a6 !default;
+$danger-a7: $red-a7 !default;
+$danger-a8: $red-a8 !default;
+$danger-a9: $red-a9 !default;
+$danger-a10: $red-a10 !default;
+$danger-a11: $red-a11 !default;
+$danger-a12: $red-a12 !default;
+
+$danger-contrast: $red-contrast !default;
+$danger-surface: $red-surface !default;
+
+// Warning
+$warning-1: $amber-1 !default;
+$warning-2: $amber-2 !default;
+$warning-3: $amber-3 !default;
+$warning-4: $amber-4 !default;
+$warning-5: $amber-5 !default;
+$warning-6: $amber-6 !default;
+$warning-7: $amber-7 !default;
+$warning-8: $amber-8 !default;
+$warning-9: $amber-9 !default;
+$warning-10: $amber-10 !default;
+$warning-11: $amber-11 !default;
+$warning-12: $amber-12 !default;
+
+$warning-a1: $amber-a1 !default;
+$warning-a2: $amber-a2 !default;
+$warning-a3: $amber-a3 !default;
+$warning-a4: $amber-a4 !default;
+$warning-a5: $amber-a5 !default;
+$warning-a6: $amber-a6 !default;
+$warning-a7: $amber-a7 !default;
+$warning-a8: $amber-a8 !default;
+$warning-a9: $amber-a9 !default;
+$warning-a10: $amber-a10 !default;
+$warning-a11: $amber-a11 !default;
+$warning-a12: $amber-a12 !default;
+
+$warning-contrast: $amber-contrast !default;
+$warning-surface: $amber-surface !default;
+
+$neutral-by-shade: (
+  1: $neutral-1,
+  2: $neutral-2,
+  3: $neutral-3,
+  4: $neutral-4,
+  5: $neutral-5,
+  6: $neutral-6,
+  7: $neutral-7,
+  8: $neutral-8,
+  9: $neutral-9,
+  10: $neutral-10,
+  11: $neutral-11,
+  12: $neutral-12,
+  a1: $neutral-a1,
+  a2: $neutral-a2,
+  a3: $neutral-a3,
+  a4: $neutral-a4,
+  a5: $neutral-a5,
+  a6: $neutral-a6,
+  a7: $neutral-a7,
+  a8: $neutral-a8,
+  a9: $neutral-a9,
+  a10: $neutral-a10,
+  a11: $neutral-a11,
+  a12: $neutral-a12,
+  contrast: $neutral-contrast,
+  surface: $neutral-surface,
+) !default;
+
+$primary-by-shade: (
+  1: $primary-1,
+  2: $primary-2,
+  3: $primary-3,
+  4: $primary-4,
+  5: $primary-5,
+  6: $primary-6,
+  7: $primary-7,
+  8: $primary-8,
+  9: $primary-9,
+  10: $primary-10,
+  11: $primary-11,
+  12: $primary-12,
+  a1: $primary-a1,
+  a2: $primary-a2,
+  a3: $primary-a3,
+  a4: $primary-a4,
+  a5: $primary-a5,
+  a6: $primary-a6,
+  a7: $primary-a7,
+  a8: $primary-a8,
+  a9: $primary-a9,
+  a10: $primary-a10,
+  a11: $primary-a11,
+  a12: $primary-a12,
+  contrast: $primary-contrast,
+  surface: $primary-surface,
+) !default;
+
+$success-by-shade: (
+  1: $success-1,
+  2: $success-2,
+  3: $success-3,
+  4: $success-4,
+  5: $success-5,
+  6: $success-6,
+  7: $success-7,
+  8: $success-8,
+  9: $success-9,
+  10: $success-10,
+  11: $success-11,
+  12: $success-12,
+  a1: $success-a1,
+  a2: $success-a2,
+  a3: $success-a3,
+  a4: $success-a4,
+  a5: $success-a5,
+  a6: $success-a6,
+  a7: $success-a7,
+  a8: $success-a8,
+  a9: $success-a9,
+  a10: $success-a10,
+  a11: $success-a11,
+  a12: $success-a12,
+  contrast: $success-contrast,
+  surface: $success-surface,
+) !default;
+
+$danger-by-shade: (
+  1: $danger-1,
+  2: $danger-2,
+  3: $danger-3,
+  4: $danger-4,
+  5: $danger-5,
+  6: $danger-6,
+  7: $danger-7,
+  8: $danger-8,
+  9: $danger-9,
+  10: $danger-10,
+  11: $danger-11,
+  12: $danger-12,
+  a1: $danger-a1,
+  a2: $danger-a2,
+  a3: $danger-a3,
+  a4: $danger-a4,
+  a5: $danger-a5,
+  a6: $danger-a6,
+  a7: $danger-a7,
+  a8: $danger-a8,
+  a9: $danger-a9,
+  a10: $danger-a10,
+  a11: $danger-a11,
+  a12: $danger-a12,
+  contrast: $danger-contrast,
+  surface: $danger-surface,
+) !default;
+
+$warning-by-shade: (
+  1: $warning-1,
+  2: $warning-2,
+  3: $warning-3,
+  4: $warning-4,
+  5: $warning-5,
+  6: $warning-6,
+  7: $warning-7,
+  8: $warning-8,
+  9: $warning-9,
+  10: $warning-10,
+  11: $warning-11,
+  12: $warning-12,
+  a1: $warning-a1,
+  a2: $warning-a2,
+  a3: $warning-a3,
+  a4: $warning-a4,
+  a5: $warning-a5,
+  a6: $warning-a6,
+  a7: $warning-a7,
+  a8: $warning-a8,
+  a9: $warning-a9,
+  a10: $warning-a10,
+  a11: $warning-a11,
+  a12: $warning-a12,
+  contrast: $warning-contrast,
+  surface: $warning-surface,
+) !default;
+
+$color-shades-by-color: (
+  neutral: $neutral-by-shade,
+  primary: $primary-by-shade,
+  success: $success-by-shade,
+  danger: $danger-by-shade,
+  warning: $warning-by-shade,
+) !default;
+
+// Base space
+$space: 0.25rem /* 4px */ !default;
+
+// Border radius
+$border-radius-xs: 0.125rem /* 2px */ !default;
+$border-radius-sm: 0.25rem /* 4px */ !default;
+$border-radius-md: 0.375rem /* 6px */ !default;
+$border-radius-lg: 0.5rem /* 8px */ !default;
+$border-radius-xl: 0.75rem /* 12px */ !default;
+$border-radius-2xl: 1rem /* 16px */ !default;
+$border-radius-3xl: 1.5rem /* 24px */ !default;
+$border-radius-full: calc(infinity * 1px) !default;
+
+$border-radius-by-size: (
+  xs: $border-radius-xs,
+  sm: $border-radius-sm,
+  md: $border-radius-md,
+  lg: $border-radius-lg,
+  xl: $border-radius-xl,
+  2xl: $border-radius-2xl,
+  3xl: $border-radius-3xl,
+  full: $border-radius-full,
+) !default;
+
+// Box shadows
+$box-shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.075) !default;
+$box-shadow-md: 0 8px 16px rgba(0, 0, 0, 0.15) !default;
+$box-shadow-lg: 0 16px 48px rgba(0, 0, 0, 0.175) !default;
+
+$box-shadow-by-size: (
+  sm: $box-shadow-sm,
+  md: $box-shadow-md,
+  lg: $box-shadow-lg,
+) !default;
+
+// Typography
+$font-family-base:
+  -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue",
+  "Open Sans", system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji",
+  "Segoe UI Symbol", "Noto Color Emoji" !default;
+$font-family-code:
+  Menlo, Consolas, "Bitstream Vera Sans Mono", monospace, "Apple Color Emoji",
+  "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji" !default;
+
+$font-size-3xs: 0.5625rem /* 9px */ !default;
+$font-size-2xs: 0.625rem /* 10px */ !default;
+$font-size-xs: 0.75rem /* 12px */ !default;
+$font-size-sm: 0.875rem /* 14px */ !default;
+$font-size-md: 1rem /* 16px */ !default;
+$font-size-lg: 1.125rem /* 18px */ !default;
+$font-size-xl: 1.25rem /* 20px */ !default;
+$font-size-2xl: 1.5rem /* 24px */ !default;
+$font-size-3xl: 1.875rem /* 30px */ !default;
+$font-size-4xl: 2.25rem /* 36px */ !default;
+$font-size-5xl: 3rem /* 48px */ !default;
+$font-size-6xl: 3.75rem /* 60px */ !default;
+$font-size-7xl: 4.5rem /* 72px */ !default;
+$font-size-8xl: 6rem /* 96px */ !default;
+$font-size-9xl: 8rem /* 128px */ !default;
+
+$line-height-3xs: calc(0.875rem / $font-size-3xs) /* 14px */ !default;
+$line-height-2xs: calc(0.875rem / $font-size-2xs) /* 14px */ !default;
+$line-height-xs: calc(1rem / $font-size-xs) /* 16px */ !default;
+$line-height-sm: calc(1.25rem / $font-size-sm) /* 20px */ !default;
+$line-height-md: calc(1.5rem / $font-size-md) /* 24px */ !default;
+$line-height-lg: calc(1.75rem / $font-size-lg) /* 28px */ !default;
+$line-height-xl: calc(1.75rem / $font-size-xl) /* 28px */ !default;
+$line-height-2xl: calc(2rem / $font-size-2xl) /* 32px */ !default;
+$line-height-3xl: calc(2.25rem / $font-size-3xl) /* 36px */ !default;
+$line-height-4xl: calc(2.5rem / $font-size-4xl) /* 40px */ !default;
+$line-height-5xl: 1 !default;
+$line-height-6xl: 1 !default;
+$line-height-7xl: 1 !default;
+$line-height-8xl: 1 !default;
+$line-height-9xl: 1 !default;
+
+$font-weight-thin: 100 !default;
+$font-weight-extra-light: 200 !default;
+$font-weight-light: 300 !default;
+$font-weight-normal: 400 !default;
+$font-weight-medium: 500 !default;
+$font-weight-semibold: 600 !default;
+$font-weight-bold: 700 !default;
+$font-weight-extra-bold: 800 !default;
+$font-weight-black: 900 !default;
+
+$font-family-by-type: (
+  base: $font-family-base,
+  code: $font-family-code,
+) !default;
+
+$font-size-by-size: (
+  "3xs": $font-size-3xs,
+  "2xs": $font-size-2xs,
+  "xs": $font-size-xs,
+  "sm": $font-size-sm,
+  "md": $font-size-md,
+  "lg": $font-size-lg,
+  "xl": $font-size-xl,
+  "2xl": $font-size-2xl,
+  "3xl": $font-size-3xl,
+  "4xl": $font-size-4xl,
+  "5xl": $font-size-5xl,
+  "6xl": $font-size-6xl,
+  "7xl": $font-size-7xl,
+  "8xl": $font-size-8xl,
+  "9xl": $font-size-9xl,
+) !default;
+
+$line-height-by-size: (
+  "3xs": $line-height-3xs,
+  "2xs": $line-height-2xs,
+  "xs": $line-height-xs,
+  "sm": $line-height-sm,
+  "md": $line-height-md,
+  "lg": $line-height-lg,
+  "xl": $line-height-xl,
+  "2xl": $line-height-2xl,
+  "3xl": $line-height-3xl,
+  "4xl": $line-height-4xl,
+  "5xl": $line-height-5xl,
+  "6xl": $line-height-6xl,
+  "7xl": $line-height-7xl,
+  "8xl": $line-height-8xl,
+  "9xl": $line-height-9xl,
+) !default;
+
+// Transitions
+$transition-property:
+  color, background-color, border-color, text-decoration-color, fill, stroke,
+  opacity, box-shadow, filter, backdrop-filter !default;
+$transition-duration: 0.1s !default;
+$transition-timing-function: ease-in-out !default;
+
+// Animations
+$animation-fade-duration: 0.15s !default;
+$animation-fade-timing-function: linear !default;
+
+// Z-indices
+$z-index-focused: 5 !default;
+$z-index-docked: 10 !default;
+$z-index-dropdown: 1000 !default;
+$z-index-sticky: 1100 !default;
+$z-index-banner: 1200 !default;
+$z-index-overlay: 1300 !default;
+$z-index-dialog: 1400 !default;
+$z-index-popover: 1500 !default;
+$z-index-skipLink: 1600 !default;
+$z-index-toast: 1700 !default;
+$z-index-tooltip: 1800 !default;
+
+$z-index-by-type: (
+  focused: $z-index-focused,
+  docked: $z-index-docked,
+  dropdown: $z-index-dropdown,
+  sticky: $z-index-sticky,
+  banner: $z-index-banner,
+  overlay: $z-index-overlay,
+  dialog: $z-index-dialog,
+  popover: $z-index-popover,
+  skipLink: $z-index-skipLink,
+  toast: $z-index-toast,
+  tooltip: $z-index-tooltip,
+) !default;
+
+// Breakpoints
+$breakpoint-xs: 0 !default;
+$breakpoint-sm: 576px !default;
+$breakpoint-md: 768px !default;
+$breakpoint-lg: 992px !default;
+$breakpoint-xl: 1200px !default;
+$breakpoint-xxl: 1400px !default;
+
+$breakpoint-by-size: (
+  xs: $breakpoint-xs,
+  sm: $breakpoint-sm,
+  md: $breakpoint-md,
+  lg: $breakpoint-lg,
+  xl: $breakpoint-xl,
+  xxl: $breakpoint-xxl,
+) !default;

package/scss/scss/_colors.scss

@@ -0,0 +1,188 @@
+// Colour shades follow Radix's conventions and are organised as follows:
+// - 1–2: Backgrounds
+// - 3–5: Interactive components
+// - 6–8: Borders and separators
+// - 9–10: Solid colours
+// - 11–12: Accessible text
+
+// All colours below are “Radix colors” with the same name
+
+// Slate
+$slate-1: #fcfcfd;
+$slate-2: #f9f9fb;
+$slate-3: #f0f0f3;
+$slate-4: #e8e8ec;
+$slate-5: #e0e1e6;
+$slate-6: #d9d9e0;
+$slate-7: #cdced6;
+$slate-8: #b9bbc6;
+$slate-9: #8b8d98;
+$slate-10: #80838d;
+$slate-11: #60646c;
+$slate-12: #1c2024;
+
+$slate-a1: #00005503;
+$slate-a2: #00005506;
+$slate-a3: #0000330f;
+$slate-a4: #00002d17;
+$slate-a5: #0009321f;
+$slate-a6: #00002f26;
+$slate-a7: #00062e32;
+$slate-a8: #00083046;
+$slate-a9: #00051d74;
+$slate-a10: #00071b7f;
+$slate-a11: #0007149f;
+$slate-a12: #000509e3;
+
+$slate-contrast: #fff;
+$slate-surface: #ffffffcc;
+
+// Indigo
+$indigo-1: #fdfdfe;
+$indigo-2: #f7f9ff;
+$indigo-3: #edf2fe;
+$indigo-4: #e1e9ff;
+$indigo-5: #d2deff;
+$indigo-6: #c1d0ff;
+$indigo-7: #abbdf9;
+$indigo-8: #8da4ef;
+$indigo-9: #3e63dd;
+$indigo-10: #3358d4;
+$indigo-11: #3a5bc7;
+$indigo-12: #1f2d5c;
+
+$indigo-a1: #00008002;
+$indigo-a2: #0040ff08;
+$indigo-a3: #0047f112;
+$indigo-a4: #0044ff1e;
+$indigo-a5: #0044ff2d;
+$indigo-a6: #003eff3e;
+$indigo-a7: #0037ed54;
+$indigo-a8: #0034dc72;
+$indigo-a9: #0031d2c1;
+$indigo-a10: #002ec9cc;
+$indigo-a11: #002bb7c5;
+$indigo-a12: #001046e0;
+
+$indigo-contrast: #fff;
+$indigo-surface: #f5f8ffcc;
+
+// Blue
+$blue-1: #fbfdff;
+$blue-2: #f4faff;
+$blue-3: #e6f4fe;
+$blue-4: #d5efff;
+$blue-5: #c2e5ff;
+$blue-6: #acd8fc;
+$blue-7: #8ec8f6;
+$blue-8: #5eb1ef;
+$blue-9: #0090ff;
+$blue-10: #0588f0;
+$blue-11: #0d74ce;
+$blue-12: #113264;
+
+$blue-a1: #0080ff04;
+$blue-a2: #008cff0b;
+$blue-a3: #008ff519;
+$blue-a4: #009eff2a;
+$blue-a5: #0093ff3d;
+$blue-a6: #0088f653;
+$blue-a7: #0083eb71;
+$blue-a8: #0084e6a1;
+$blue-a9: #0090ff;
+$blue-a10: #0086f0fa;
+$blue-a11: #006dcbf2;
+$blue-a12: #002359ee;
+
+$blue-contrast: #fff;
+$blue-surface: #f1f9ffcc;
+
+// Green
+$green-1: #fbfefc;
+$green-2: #f4fbf6;
+$green-3: #e6f6eb;
+$green-4: #d6f1df;
+$green-5: #c4e8d1;
+$green-6: #adddc0;
+$green-7: #8eceaa;
+$green-8: #5bb98b;
+$green-9: #30a46c;
+$green-10: #2b9a66;
+$green-11: #218358;
+$green-12: #193b2d;
+
+$green-a1: #00c04004;
+$green-a2: #00a32f0b;
+$green-a3: #00a43319;
+$green-a4: #00a83829;
+$green-a5: #019c393b;
+$green-a6: #00963c52;
+$green-a7: #00914071;
+$green-a8: #00924ba4;
+$green-a9: #008f4acf;
+$green-a10: #008647d4;
+$green-a11: #00713fde;
+$green-a12: #002616e6;
+
+$green-contrast: #fff;
+$green-surface: #f1faf4cc;
+
+// Red
+$red-1: #fffcfc;
+$red-2: #fff7f7;
+$red-3: #feebec;
+$red-4: #ffdbdc;
+$red-5: #ffcdce;
+$red-6: #fdbdbe;
+$red-7: #f4a9aa;
+$red-8: #eb8e90;
+$red-9: #e5484d;
+$red-10: #dc3e42;
+$red-11: #ce2c31;
+$red-12: #641723;
+
+$red-a1: #ff000003;
+$red-a2: #ff000008;
+$red-a3: #f3000d14;
+$red-a4: #ff000824;
+$red-a5: #ff000632;
+$red-a6: #f8000442;
+$red-a7: #df000356;
+$red-a8: #d2000571;
+$red-a9: #db0007b7;
+$red-a10: #d10005c1;
+$red-a11: #c40006d3;
+$red-a12: #55000de8;
+
+$red-contrast: #fff;
+$red-surface: #fff5f5cc;
+
+// Amber
+$amber-1: #fefdfb;
+$amber-2: #fefbe9;
+$amber-3: #fff7c2;
+$amber-4: #ffee9c;
+$amber-5: #fbe577;
+$amber-6: #f3d673;
+$amber-7: #e9c162;
+$amber-8: #e2a336;
+$amber-9: #ffc53d;
+$amber-10: #ffba18;
+$amber-11: #ab6400;
+$amber-12: #4f3422;
+
+$amber-a1: #c0800004;
+$amber-a2: #f4d10016;
+$amber-a3: #ffde003d;
+$amber-a4: #ffd40063;
+$amber-a5: #f8cf0088;
+$amber-a6: #eab5008c;
+$amber-a7: #dc9b009d;
+$amber-a8: #da8a00c9;
+$amber-a9: #ffb300c2;
+$amber-a10: #ffb300e7;
+$amber-a11: #ab6400;
+$amber-a12: #341500dd;
+
+$amber-contrast: #21201c;
+$amber-surface: #fefae4cc;

package/scss/scss/helpers/_visually-hidden.scss

@@ -0,0 +1,18 @@
+// Adapted from:
+// https://github.com/twbs/bootstrap/blob/main/scss/mixins/_visually-hidden.scss
+
+@use "../base-variables" as *;
+
+// Hide content visually while keeping it accessible to assistive technologies
+.#{$prefix}visually-hidden,
+.#{$prefix}visually-hidden-focusable:not(:focus):not(:focus-within) {
+  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;
+}

package/scss/scss/placeholders/_calendar-popover.scss

@@ -0,0 +1,16 @@
+@use "../base-variables" as *;
+
+// Adds a box shadow to each month of a calendar, instead of to the popover
+// containing the calendar.
+%#{$prefix}calendar-popover {
+  $calendar: ".#{$prefix}calendar";
+
+  overflow: initial;
+  border: 0;
+  background-color: transparent;
+  box-shadow: none;
+
+  & #{$calendar}__month {
+    box-shadow: var(--#{$prefix}box-shadow-md);
+  }
+}