ngwr 6.1.1 → 7.0.0

package/button/styles/_index.scss

@@ -1,187 +1,210 @@
-@forward './vars';
-
-@use '../../styles/maps' as maps;
-@use '../../styles/colors';
-
-@forward '../../spinner/styles';
-@forward '../../icon/styles';
+@use '../../theme/styles' as theme;
 
 .wr-btn {
-  display: inline-block;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: var(--wr-btn-gap);
   vertical-align: middle;
   position: relative;
 
-  text-align: center;
-
   appearance: none;
+  text-align: center;
   text-decoration: none;
-  list-style: none;
   cursor: pointer;
   touch-action: manipulation;
   user-select: none;
-
   white-space: nowrap;
-  word-wrap: break-word;
-
-  color: var(--wr-btn-color);
-  background-color: var(--wr-btn-bg-color);
 
-  border-radius: var(--wr-btn-border-radius);
-  border: 1px solid var(--wr-btn-border-color);
+  // Defaults — modifiers override
+  --wr-btn-color: var(--wr-color-dark);
+  --wr-btn-bg: var(--wr-color-white);
+  --wr-btn-border: var(--wr-color-light);
+  --wr-btn-radius: var(--wr-border-radius-sm);
+  --wr-btn-gap: 0.375rem;
+  --wr-btn-padding-y: 0.5rem;
+  --wr-btn-padding-x: 1rem;
+  --wr-btn-font-size: 0.875rem;
+  --wr-btn-font-weight: 500;
+  --wr-btn-line-height: 1.25rem;
+  --wr-btn-icon-size: 1rem;
 
-  font-family: var(--wr-btn-font-family);
+  color: var(--wr-btn-color);
+  background: var(--wr-btn-bg);
+  border: 1px solid var(--wr-btn-border);
+  @include theme.smooth-br(var(--wr-btn-radius));
+  padding: calc(var(--wr-btn-padding-y) * var(--wr-density-y, 1)) calc(var(--wr-btn-padding-x) * var(--wr-density-x, 1));
+  font-family: var(--wr-font-family-base);
   font-size: var(--wr-btn-font-size);
   font-weight: var(--wr-btn-font-weight);
   line-height: var(--wr-btn-line-height);
-
-  padding: var(--wr-btn-padding-y) var(--wr-btn-padding-x);
-
   transition: var(--wr-transition-base);
 
-  &__spin {
-    position: absolute;
-    z-index: 3;
-    left: 50%;
-    top: 50%;
-    transform: translate(-50%, -50%);
+  &:hover {
+    --wr-btn-bg: rgba(var(--wr-color-light-rgb), 0.4);
   }
 
-  &:hover {
-    --wr-btn-bg-color: var(--wr-color-light-lighter);
+  &:active {
+    --wr-btn-bg: rgba(var(--wr-color-light-rgb), 0.6);
   }
 
   &[disabled],
   &:disabled {
     cursor: default;
-    --wr-btn-color: var(--wr-color-medium);
-    --wr-btn-bg-color: var(--wr-color-light-lighter);
     pointer-events: none;
+    opacity: 0.6;
   }
 
-  &:active {
-    --wr-btn-bg-color: var(--wr-color-light-shade);
+  &__icon {
+    --wr-icon-size: var(--wr-btn-icon-size);
+    color: inherit;
+    flex: 0 0 auto;
   }
 
-  &-group {
-    .wr-btn {
-      border-radius: 0;
-      border-left: none;
-
-      &:first-child {
-        border-top-left-radius: var(--wr-btn-border-radius);
-        border-bottom-left-radius: var(--wr-btn-border-radius);
-        border-left: 1px solid var(--wr-btn-border-color);
-      }
-
-      &:last-child {
-        border-top-right-radius: var(--wr-btn-border-radius);
-        border-bottom-right-radius: var(--wr-btn-border-radius);
-      }
-    }
+  &__spin {
+    position: absolute;
+    left: 50%;
+    top: 50%;
+    transform: translate(-50%, -50%);
+    z-index: 2;
   }
 
-  &--loading {
-    &--disabled {
-      pointer-events: none;
-    }
-
-    .wr-btn__text,
-    .wr-btn__icon,{
-      opacity: 0;
-    }
+  &__label {
+    flex: 0 1 auto;
+    min-width: 0;
   }
 
-  &-group {
-    .wr-btn {
-      border-radius: 0;
-      border-left: none;
-
-      &:first-child {
-        border-top-left-radius: var(--wr-btn-border-radius);
-        border-bottom-left-radius: var(--wr-btn-border-radius);
-        border-left: 1px solid var(--wr-btn-border-color);
-      }
+  // Sizes — consistent 28 / 36 / 44 px scale (each +8px tall).
+  // Padding, font, line-height, icon, and gap all step up together so
+  // the proportions stay visually identical between sizes.
+  &--sm {
+    --wr-btn-gap: 0.25rem;
+    --wr-btn-padding-y: 0.375rem; // 6px
+    --wr-btn-padding-x: 0.75rem; // 12px
+    --wr-btn-font-size: 0.75rem; // 12px
+    --wr-btn-line-height: 1rem; // 16px
+    --wr-btn-icon-size: 0.875rem; // 14px
+  }
 
-      &:last-child {
-        border-top-right-radius: var(--wr-btn-border-radius);
-        border-bottom-right-radius: var(--wr-btn-border-radius);
-      }
-    }
+  &--lg {
+    --wr-btn-gap: 0.5rem;
+    --wr-btn-padding-y: 0.625rem; // 10px
+    --wr-btn-padding-x: 1.5rem; // 24px
+    --wr-btn-font-size: 1rem; // 16px
+    --wr-btn-line-height: 1.5rem; // 24px
+    --wr-btn-icon-size: 1.125rem; // 18px
   }
 
-  &--small {
-    --wr-btn-icon-size: 0.825rem;
-    --wr-btn-font-size: 0.75rem;
-    --wr-btn-line-height: 1rem;
-    --wr-btn-border-radius: 0.25rem;
-    --wr-btn-padding-y: 0.25rem;
-    --wr-btn-padding-x: 0.75rem;
+  // Shape — `rounded` (default) inherits --wr-btn-radius from the base
+  // declaration above. Pill = fully rounded ends.
+  //
+  // `corner-shape: round` overrides the squircle from `smooth-br` —
+  // squircle math doesn't degenerate to a pill at huge radii (it draws
+  // a different shape), so we explicitly opt back to the round arc here.
+  // Browsers without `corner-shape` support harmlessly ignore the
+  // property.
+  &--pill {
+    --wr-btn-radius: var(--wr-border-radius-pill);
+    corner-shape: round;
   }
 
-  &--rounded {
-    --wr-btn-border-radius: 50rem;
+  // Squircle — bumps the base radius so the iOS-style smooth corners
+  // read more clearly. `smooth-br` from the host already opts into
+  // `corner-shape: squircle` where supported; the modifier just picks a
+  // larger anchor radius.
+  &--squircle {
+    --wr-btn-radius: var(--wr-border-radius-base);
   }
 
+  // Layout
   &--block {
-    display: block;
+    display: flex;
     width: 100%;
   }
 
-  &__icon {
-    --wr-icon-size: var(--wr-btn-icon-size) !important;
+  // Icon position
+  &--icon-end {
+    flex-direction: row-reverse;
+  }
+
+  // Loading — hide label/icon contents but keep their footprint
+  &--loading {
+    .wr-btn__label,
+    .wr-btn__icon {
+      visibility: hidden;
+    }
   }
 
-  &--icon {
-    display: inline-flex;
-    align-items: center;
-    justify-content: center;
-    gap: 0.25rem;
+  // Color variants
+  @each $name in theme.$colors {
+    &--#{$name} {
+      --wr-btn-color: var(--wr-color-#{$name}-contrast);
+      --wr-btn-bg: var(--wr-color-#{$name});
+      --wr-btn-border: var(--wr-color-#{$name});
+
+      &:hover {
+        --wr-btn-bg: var(--wr-color-#{$name}-dark);
+        --wr-btn-border: var(--wr-color-#{$name}-dark);
+      }
 
-    &-end {
-      flex-direction: row-reverse;
+      &:active {
+        --wr-btn-bg: var(--wr-color-#{$name}-darker);
+        --wr-btn-border: var(--wr-color-#{$name}-darker);
+      }
+
+      &.wr-btn--outlined {
+        --wr-btn-color: var(--wr-color-#{$name});
+        --wr-btn-bg: transparent;
+        --wr-btn-border: rgba(var(--wr-color-#{$name}-rgb), 0.4);
+
+        &:hover {
+          --wr-btn-color: var(--wr-color-#{$name}-contrast);
+          --wr-btn-bg: var(--wr-color-#{$name}-dark);
+          --wr-btn-border: var(--wr-color-#{$name}-dark);
+        }
+
+        &:active {
+          --wr-btn-color: var(--wr-color-#{$name}-contrast);
+          --wr-btn-bg: var(--wr-color-#{$name}-darker);
+          --wr-btn-border: var(--wr-color-#{$name}-darker);
+        }
+      }
     }
   }
 }
 
-@each $color in maps.$theme-colors-map {
-  .wr-btn--color-#{$color} {
-    --wr-btn-color: var(--wr-color-#{$color}-contrast);
-    --wr-btn-border-color: var(--wr-color-#{$color});
-    --wr-btn-bg-color: var(--wr-color-#{$color});
+.wr-btn-group {
+  display: inline-flex;
+  vertical-align: middle;
 
-    &:hover {
-      --wr-btn-border-color: var(--wr-color-#{$color}-dark);
-      --wr-btn-bg-color: var(--wr-color-#{$color}-dark);
-    }
+  > .wr-btn {
+    border-radius: 0;
+    margin-left: -1px;
 
-    &:active {
-      --wr-btn-border-color: var(--wr-color-#{$color}-darker);
-      --wr-btn-bg-color: var(--wr-color-#{$color}-darker);
+    &:first-child {
+      margin-left: 0;
+      border-top-left-radius: var(--wr-btn-radius);
+      border-bottom-left-radius: var(--wr-btn-radius);
     }
 
-    &[disabled],
-    &:disabled {
-      --wr-btn-color: var(--wr-color-#{$color}-contrast);
-      --wr-btn-border-color: var(--wr-color-#{$color}-lighter);
-      --wr-btn-bg-color: var(--wr-color-#{$color}-lighter);
+    &:last-child {
+      border-top-right-radius: var(--wr-btn-radius);
+      border-bottom-right-radius: var(--wr-btn-radius);
     }
 
-    &.wr-btn--outlined {
-      --wr-btn-color: var(--wr-color-#{$color});
-      --wr-btn-border-color: rgba(var(--wr-color-#{$color}-rgb), 0.375);
-      --wr-btn-bg-color: transparent;
-
-      &:hover {
-        --wr-btn-color: var(--wr-color-#{$color}-contrast);
-        --wr-btn-border-color: var(--wr-color-#{$color}-dark);
-        --wr-btn-bg-color: var(--wr-color-#{$color}-dark);
-      }
+    &:hover,
+    &:focus-visible,
+    &:active {
+      z-index: 1;
+    }
+  }
 
-      &:active {
-        --wr-btn-color: var(--wr-color-#{$color}-contrast);
-        --wr-btn-border-color: var(--wr-color-#{$color}-darker);
-        --wr-btn-bg-color: var(--wr-color-#{$color}-darker);
-      }
+  // Solid colored segments share border and background color, so adjacent
+  // buttons fuse into one slab — draw a subtle divider on every inner
+  // edge. Outlined/default variants keep their own visible borders.
+  @each $name in theme.$colors {
+    > .wr-btn--#{$name}:not(.wr-btn--outlined):not(:first-child) {
+      box-shadow: inset 1px 0 0 rgb(0 0 0 / 20%);
     }
   }
 }

package/calendar/styles/_index.scss

@@ -0,0 +1,252 @@
+@use '../../theme/styles' as theme;
+
+.wr-calendar {
+  --wr-calendar-width: 17rem;
+  --wr-calendar-bg: var(--wr-color-white);
+  --wr-calendar-border: var(--wr-color-light);
+  --wr-calendar-color: var(--wr-color-dark);
+  --wr-calendar-muted: var(--wr-color-medium);
+  --wr-calendar-radius: var(--wr-border-radius-base);
+  --wr-calendar-day-radius: var(--wr-border-radius-sm);
+  --wr-calendar-cell-size: 2rem;
+  --wr-calendar-accent: var(--wr-color-primary);
+  --wr-calendar-accent-rgb: var(--wr-color-primary-rgb);
+  --wr-calendar-accent-contrast: var(--wr-color-primary-contrast);
+
+  display: inline-flex;
+  flex-direction: column;
+  gap: 0.5rem;
+  width: var(--wr-calendar-width);
+  padding: 0.75rem;
+  background: var(--wr-calendar-bg);
+  border: 1px solid var(--wr-calendar-border);
+  @include theme.smooth-br(var(--wr-calendar-radius));
+  color: var(--wr-calendar-color);
+  font-family: var(--wr-font-family-base);
+  outline: none;
+  user-select: none;
+
+  // Header
+  &__header {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+  }
+
+  &__label {
+    flex: 1 1 auto;
+    appearance: none;
+    background: transparent;
+    border: 0;
+    padding: 0 0.5rem;
+    color: inherit;
+    text-align: center;
+    font-family: inherit;
+    font-size: 0.875rem;
+    font-weight: 600;
+    line-height: 1.5rem;
+    border-radius: var(--wr-calendar-day-radius);
+    cursor: pointer;
+    transition:
+      background var(--wr-transition-base),
+      color var(--wr-transition-base);
+
+    &:hover:not(:disabled) {
+      background: rgba(var(--wr-color-light-rgb), 0.5);
+    }
+
+    &:focus-visible {
+      outline: none;
+      box-shadow: 0 0 0 2px rgba(var(--wr-calendar-accent-rgb), 0.4);
+    }
+
+    &:disabled {
+      cursor: default;
+    }
+  }
+
+  &__nav {
+    appearance: none;
+    background: transparent;
+    border: 0;
+    width: 1.75rem;
+    height: 1.75rem;
+    border-radius: var(--wr-calendar-day-radius);
+    color: var(--wr-calendar-muted);
+    font-size: 1.125rem;
+    line-height: 1;
+    cursor: pointer;
+    transition:
+      background var(--wr-transition-base),
+      color var(--wr-transition-base);
+
+    &:hover:not(:disabled) {
+      color: var(--wr-calendar-color);
+      background: rgba(var(--wr-color-light-rgb), 0.5);
+    }
+
+    &:focus-visible {
+      outline: none;
+      box-shadow: 0 0 0 2px rgba(var(--wr-calendar-accent-rgb), 0.4);
+    }
+
+    &:disabled {
+      cursor: not-allowed;
+      opacity: 0.5;
+    }
+  }
+
+  // Weekday header row
+  &__weekdays {
+    display: grid;
+    grid-template-columns: repeat(7, 1fr);
+    gap: 0;
+  }
+
+  &__weekday {
+    text-align: center;
+    color: var(--wr-calendar-muted);
+    font-size: 0.6875rem;
+    font-weight: 600;
+    line-height: 1.5rem;
+    text-transform: uppercase;
+    letter-spacing: 0.04em;
+  }
+
+  // Day grid
+  &__grid {
+    display: flex;
+    flex-direction: column;
+    gap: 0.125rem;
+  }
+
+  &__week {
+    display: grid;
+    grid-template-columns: repeat(7, 1fr);
+    gap: 0;
+  }
+
+  &__day {
+    appearance: none;
+    background: transparent;
+    border: 0;
+    padding: 0;
+    margin: 0;
+    height: var(--wr-calendar-cell-size);
+    font-family: inherit;
+    font-size: 0.8125rem;
+    line-height: var(--wr-calendar-cell-size);
+    color: var(--wr-calendar-color);
+    border-radius: var(--wr-calendar-day-radius);
+    cursor: pointer;
+    transition:
+      background var(--wr-transition-base),
+      color var(--wr-transition-base);
+
+    &:hover:not(:disabled):not(.wr-calendar__day--selected) {
+      background: rgba(var(--wr-color-light-rgb), 0.5);
+    }
+
+    &:focus-visible {
+      outline: none;
+      box-shadow: inset 0 0 0 2px rgba(var(--wr-calendar-accent-rgb), 0.5);
+    }
+
+    // States — order matters; later rules override earlier ones.
+    &--out-of-month {
+      color: var(--wr-calendar-muted);
+      opacity: 0.55;
+    }
+
+    &--today:not(.wr-calendar__day--selected) {
+      box-shadow: inset 0 0 0 1px var(--wr-calendar-accent);
+      color: var(--wr-calendar-accent);
+      font-weight: 600;
+    }
+
+    &--in-range {
+      background: rgba(var(--wr-calendar-accent-rgb), 0.12);
+      border-radius: 0;
+    }
+
+    &--range-preview {
+      background: rgba(var(--wr-calendar-accent-rgb), 0.06);
+      border-radius: 0;
+    }
+
+    &--selected {
+      background: var(--wr-calendar-accent);
+      color: var(--wr-calendar-accent-contrast);
+      font-weight: 600;
+    }
+
+    &:disabled {
+      color: var(--wr-calendar-muted);
+      cursor: not-allowed;
+      opacity: 0.35;
+    }
+  }
+
+  // Month + year quick-pick views
+  &__months {
+    display: grid;
+    grid-template-columns: repeat(3, 1fr);
+    gap: 0.25rem;
+  }
+
+  &__years {
+    display: grid;
+    grid-template-columns: repeat(4, 1fr);
+    gap: 0.25rem;
+  }
+
+  &__chip {
+    appearance: none;
+    background: transparent;
+    border: 0;
+    padding: 0;
+    margin: 0;
+    height: 2.5rem;
+    font-family: inherit;
+    font-size: 0.8125rem;
+    line-height: 2.5rem;
+    color: var(--wr-calendar-color);
+    border-radius: var(--wr-calendar-day-radius);
+    cursor: pointer;
+    transition:
+      background var(--wr-transition-base),
+      color var(--wr-transition-base);
+
+    &:hover:not(:disabled):not(.wr-calendar__chip--selected) {
+      background: rgba(var(--wr-color-light-rgb), 0.5);
+    }
+
+    &:focus-visible {
+      outline: none;
+      box-shadow: inset 0 0 0 2px rgba(var(--wr-calendar-accent-rgb), 0.5);
+    }
+
+    &--current:not(.wr-calendar__chip--selected) {
+      box-shadow: inset 0 0 0 1px var(--wr-calendar-accent);
+      color: var(--wr-calendar-accent);
+      font-weight: 600;
+    }
+
+    &--selected {
+      background: var(--wr-calendar-accent);
+      color: var(--wr-calendar-accent-contrast);
+      font-weight: 600;
+    }
+
+    &:disabled {
+      color: var(--wr-calendar-muted);
+      cursor: not-allowed;
+      opacity: 0.35;
+    }
+  }
+
+  &--disabled {
+    pointer-events: none;
+    opacity: 0.6;
+  }
+}

package/calendar-heatmap/styles/_index.scss

@@ -0,0 +1,69 @@
+@use '../../theme/styles' as theme;
+
+.wr-calendar-heatmap {
+  display: inline-block;
+  font-family: var(--wr-font-family-base);
+  color: var(--wr-color-medium);
+
+  &__grid {
+    display: grid;
+    grid-template-areas:
+      '. months'
+      'weekdays cells';
+    grid-template-columns: auto 1fr;
+    gap: 0.375rem;
+  }
+
+  &__weekdays {
+    grid-area: weekdays;
+    display: grid;
+    grid-template-rows: repeat(7, var(--wr-heatmap-cell-size));
+    gap: var(--wr-heatmap-cell-gap);
+    font-size: var(--wr-text-xs);
+    color: var(--wr-color-medium);
+    align-items: center;
+  }
+
+  &__weekday {
+    line-height: 1;
+    height: var(--wr-heatmap-cell-size);
+    display: flex;
+    align-items: center;
+  }
+
+  // The two grid cells that hold week columns get their own N-column
+  // sub-grids — `--wr-heatmap-columns` is set by the component.
+  &__months,
+  &__cells {
+    display: grid;
+    grid-template-columns: repeat(var(--wr-heatmap-columns, 53), var(--wr-heatmap-cell-size));
+    gap: var(--wr-heatmap-cell-gap);
+  }
+
+  &__months {
+    grid-area: months;
+    font-size: var(--wr-text-xs);
+    color: var(--wr-color-medium);
+  }
+
+  &__month {
+    grid-row: 1;
+    white-space: nowrap;
+  }
+
+  &__cells {
+    grid-area: cells;
+    grid-template-rows: repeat(7, var(--wr-heatmap-cell-size));
+  }
+
+  &__cell {
+    width: var(--wr-heatmap-cell-size);
+    height: var(--wr-heatmap-cell-size);
+    border-radius: 2px;
+    transition: transform var(--wr-transition-base);
+
+    &:hover {
+      transform: scale(1.4);
+    }
+  }
+}

package/card/card.scss

@@ -0,0 +1 @@
+@forward './styles';