@maggioli-design-system/styles 17.1.0 → 17.2.1

package/dist/css/globals.css

@@ -180,6 +180,17 @@
   syntax: '*';
 }
 
+/* The part of its height a corner may take, for the components whose radius is
+ * always past half their height: 0.5 where the browser clamps, less where
+ * corner-shape cannot be drawn (corner.ts). `inherits: true` for the same reason
+ * as the shape: the fallback block declares it on :root. */
+
+@property --magma-corner-cap {
+  inherits: true;
+  initial-value: 0.5;
+  syntax: '<number>';
+}
+
 /* z-index */
 
 @property --magma-header-z-index {
@@ -474,7 +485,7 @@
 
 @property --mds-badge-radius {
   inherits: true;
-  initial-value: 16px;
+  initial-value: 1000px;
   syntax: '<length>';
 }
 
@@ -608,28 +619,16 @@
   syntax: '<color>';
 }
 
-@property --mds-breadcrumb-button-color-current {
-  inherits: true;
-  initial-value: rgb(5 5 5);
-  syntax: '<color>';
-}
-
-@property --mds-breadcrumb-current-button-color {
-  inherits: true;
-  initial-value: rgb(119 119 119);
-  syntax: '<color>';
-}
-
 /* mds-button-dropdown */
 @property --mds-button-dropdown-radius {
   inherits: true;
-  initial-value: 24px;
+  initial-value: 40px;
   syntax: '<length>';
 }
 
 @property --mds-button-dropdown-window-radius {
   inherits: true;
-  initial-value: 24px;
+  initial-value: 40px;
   syntax: '<length>';
 }
 
@@ -658,18 +657,6 @@
   syntax: '<number>';
 }
 
-@property --mds-button-border-high-contrast-hover-width {
-  inherits: true;
-  initial-value: 3px;
-  syntax: '<length>';
-}
-
-@property --mds-button-border-high-contrast-width {
-  inherits: true;
-  initial-value: 2px;
-  syntax: '<length>';
-}
-
 @property --mds-button-border-hover-opacity {
   inherits: true;
   initial-value: 0.75;
@@ -718,6 +705,12 @@
   syntax: '<length>';
 }
 
+@property --mds-button-label-transform {
+  inherits: true;
+  initial-value: uppercase;
+  syntax: 'none | capitalize | uppercase | lowercase | full-width | full-size-kana';
+}
+
 @property --mds-button-line-clamp {
   inherits: true;
   initial-value: 1;
@@ -730,223 +723,6 @@
   syntax: '<length>';
 }
 
-/* mds-calendar-cell */
-@property --mds-calendar-cell-background {
-  inherits: true;
-  initial-value: transparent;
-  syntax: '<color>';
-}
-
-@property --mds-calendar-cell-boundaries-background {
-  inherits: true;
-  initial-value: transparent;
-  syntax: '<color>';
-}
-
-@property --mds-calendar-cell-boundaries-color {
-  inherits: true;
-  initial-value: rgb(5 5 5);
-  syntax: '<color>';
-}
-
-@property --mds-calendar-cell-boundaries-padding {
-  inherits: true;
-  initial-value: 4px;
-  syntax: '<length>';
-}
-
-@property --mds-calendar-cell-color {
-  inherits: true;
-  initial-value: rgb(5 5 5);
-  syntax: '<color>';
-}
-
-@property --mds-calendar-cell-disabled-background {
-  inherits: true;
-  initial-value: transparent;
-  syntax: '<color>';
-}
-
-@property --mds-calendar-cell-disabled-color {
-  inherits: true;
-  initial-value: rgb(119 119 119);
-  syntax: '<color>';
-}
-
-@property --mds-calendar-cell-other-month-background {
-  inherits: true;
-  initial-value: transparent;
-  syntax: '<color>';
-}
-
-@property --mds-calendar-cell-other-month-color {
-  inherits: true;
-  initial-value: rgb(119 119 119);
-  syntax: '<color>';
-}
-
-@property --mds-calendar-cell-preselection-current-month-background {
-  inherits: true;
-  initial-value: rgb(204 212 226);
-  syntax: '<color>';
-}
-
-@property --mds-calendar-cell-preselection-current-month-boundaries-background {
-  inherits: true;
-  initial-value: rgb( 236 237 240 );
-  syntax: '<color>';
-}
-
-@property --mds-calendar-cell-preselection-current-month-boundaries-color {
-  inherits: true;
-  initial-value: rgb(119 119 119);
-  syntax: '<color>';
-}
-
-@property --mds-calendar-cell-preselection-current-month-color {
-  inherits: true;
-  initial-value: rgb(119 119 119);
-  syntax: '<color>';
-}
-
-@property --mds-calendar-cell-preselection-other-month-background {
-  inherits: true;
-  initial-value: rgb(220 224 231);
-  syntax: '<color>';
-}
-
-@property --mds-calendar-cell-preselection-other-month-boundaries-background {
-  inherits: true;
-  initial-value: rgb(248 248 248);
-  syntax: '<color>';
-}
-
-@property --mds-calendar-cell-preselection-other-month-boundaries-color {
-  inherits: true;
-  initial-value: rgb(119 119 119);
-  syntax: '<color>';
-}
-
-@property --mds-calendar-cell-preselection-other-month-color {
-  inherits: true;
-  initial-value: rgb(119 119 119);
-  syntax: '<color>';
-}
-
-@property --mds-calendar-cell-preselection-today-background {
-  inherits: true;
-  initial-value: rgb(220 224 231);
-  syntax: '<color>';
-}
-
-@property --mds-calendar-cell-preselection-today-color {
-  inherits: true;
-  initial-value: rgb(7 76 204);
-  syntax: '<color>';
-}
-
-@property --mds-calendar-cell-selection-boundaries-border-radius {
-  inherits: true;
-  initial-value: 200px;
-  syntax: '<length>';
-}
-
-@property --mds-calendar-cell-selection-current-month-background {
-  inherits: true;
-  initial-value: rgb(36 103 231);
-  syntax: '<color>';
-}
-
-@property --mds-calendar-cell-selection-current-month-boundaries-background {
-  inherits: true;
-  initial-value: rgb(248 248 248);
-  syntax: '<color>';
-}
-
-@property --mds-calendar-cell-selection-current-month-boundaries-color {
-  inherits: true;
-  initial-value: rgb(73 73 73);
-  syntax: '<color>';
-}
-
-@property --mds-calendar-cell-selection-current-month-color {
-  inherits: true;
-  initial-value: rgb(255 255 255);
-  syntax: '<color>';
-}
-
-@property --mds-calendar-cell-selection-current-month-weekend-background {
-  inherits: true;
-  initial-value: rgb(7 76 204);
-  syntax: '<color>';
-}
-
-@property --mds-calendar-cell-selection-current-month-weekend-boundaries-background {
-  inherits: true;
-  initial-value: rgb( 7 76 204 );
-  syntax: '<color>';
-}
-
-@property --mds-calendar-cell-selection-current-month-weekend-boundaries-color {
-  inherits: true;
-  initial-value: rgb(73 73 73);
-  syntax: '<color>';
-}
-
-@property --mds-calendar-cell-selection-current-month-weekend-color {
-  inherits: true;
-  initial-value: rgb(148 172 218);
-  syntax: '<color>';
-}
-
-@property --mds-calendar-cell-selection-other-month-background {
-  inherits: true;
-  initial-value: rgb(204 212 226);
-  syntax: '<color>';
-}
-
-@property --mds-calendar-cell-selection-other-month-boundaries-background {
-  inherits: true;
-  initial-value: rgb(236 237 240);
-  syntax: '<color>';
-}
-
-@property --mds-calendar-cell-selection-other-month-boundaries-color {
-  inherits: true;
-  initial-value: rgb(119 119 119);
-  syntax: '<color>';
-}
-
-@property --mds-calendar-cell-selection-other-month-color {
-  inherits: true;
-  initial-value: rgb(99 99 99);
-  syntax: '<color>';
-}
-
-@property --mds-calendar-cell-selection-week-boundaries-border-radius {
-  inherits: true;
-  initial-value: 200px;
-  syntax: '<length>';
-}
-
-@property --mds-calendar-cell-size {
-  inherits: true;
-  initial-value: 48px;
-  syntax: '<length>';
-}
-
-@property --mds-calendar-cell-weekend-background {
-  inherits: true;
-  initial-value: transparent;
-  syntax: '<color>';
-}
-
-@property --mds-calendar-cell-weekend-color {
-  inherits: true;
-  initial-value: rgb(99 99 99);
-  syntax: '<color>';
-}
-
 /* mds-calendar */
 @property --mds-calendar-background {
   inherits: true;
@@ -956,16 +732,10 @@
 
 @property --mds-calendar-border-radius {
   inherits: true;
-  initial-value: 16px;
+  initial-value: 28px;
   syntax: '<length>';
 }
 
-@property --mds-calendar-day-number-color {
-  inherits: true;
-  initial-value: rgb(5 5 5);
-  syntax: '<color>';
-}
-
 @property --mds-calendar-max-width {
   inherits: true;
   initial-value: 480px;
@@ -1006,7 +776,7 @@
 /* mds-chip */
 @property --mds-chip-background {
   inherits: true;
-  initial-value: rgb(225 225 225);
+  initial-value: rgb(255 255 255);
   syntax: '<color>';
 }
 
@@ -1068,7 +838,7 @@
 
 @property --mds-dropdown-backdrop-duration {
   inherits: true;
-  initial-value: 200ms;
+  initial-value: 300ms;
   syntax: '<time>';
 }
 
@@ -1298,7 +1068,7 @@
 
 @property --mds-entity-icon-radius {
   inherits: true;
-  initial-value: 12px;
+  initial-value: 20px;
   syntax: '<length>';
 }
 
@@ -1433,18 +1203,6 @@
   syntax: 'true | false';
 }
 
-@property --mds-header-color {
-  inherits: true;
-  initial-value: rgb(5 5 5);
-  syntax: '<color>';
-}
-
-@property --mds-header-icon-color {
-  inherits: true;
-  initial-value: rgb(5 5 5);
-  syntax: '<color>';
-}
-
 @property --mds-header-inline-margin {
   inherits: true;
   initial-value: 24px;
@@ -1727,12 +1485,6 @@
   syntax: '<color>';
 }
 
-@property --mds-input-date-icon-color-rgb {
-  inherits: true;
-  initial-value: 0 0 0;
-  syntax: '<integer>+';
-}
-
 @property --mds-input-date-variant-color-rgb {
   inherits: true;
   initial-value: 0 0 0;
@@ -2104,13 +1856,13 @@
 /* mds-keyboard */
 @property --mds-keyboard-background {
   inherits: true;
-  initial-value: rgb(201 208 219);
+  initial-value: rgb(208 208 208);
   syntax: '<color>';
 }
 
 @property --mds-keyboard-background-default {
   inherits: true;
-  initial-value: rgb(201 208 219);
+  initial-value: rgb(208 208 208);
   syntax: '<color>';
 }
 
@@ -2420,67 +2172,6 @@
   syntax: '<number>';
 }
 
-/* mds-paginator-item */
-@property --mds-paginator-item-background {
-  inherits: true;
-  initial-value: transparent;
-  syntax: '<color>';
-}
-
-@property --mds-paginator-item-background-disabled {
-  inherits: true;
-  initial-value: rgb(225 225 225);
-  syntax: '<color>';
-}
-
-@property --mds-paginator-item-background-hover {
-  inherits: true;
-  initial-value: rgb(208 208 208);
-  syntax: '<color>';
-}
-
-@property --mds-paginator-item-background-selected {
-  inherits: true;
-  initial-value: rgb(7 76 204);
-  syntax: '<color>';
-}
-
-@property --mds-paginator-item-color {
-  inherits: true;
-  initial-value: rgb(5 5 5);
-  syntax: '<color>';
-}
-
-@property --mds-paginator-item-color-disabled {
-  inherits: true;
-  initial-value: rgb(119 119 119);
-  syntax: '<color>';
-}
-
-@property --mds-paginator-item-color-hover {
-  inherits: true;
-  initial-value: rgb(5 5 5);
-  syntax: '<color>';
-}
-
-@property --mds-paginator-item-color-selected {
-  inherits: true;
-  initial-value: rgb(255 255 255);
-  syntax: '<color>';
-}
-
-@property --mds-paginator-item-radius {
-  inherits: true;
-  initial-value: 200px;
-  syntax: '<length>';
-}
-
-@property --mds-paginator-item-size {
-  inherits: true;
-  initial-value: 36px;
-  syntax: '<length>';
-}
-
 /* mds-paginator */
 @property --mds-paginator-background {
   inherits: true;
@@ -2595,11 +2286,7 @@
 }
 
 /* mds-price-table-features */
-@property --mds-price-table-features-border-color {
-  inherits: true;
-  initial-value: rgb(219 219 219);
-  syntax: '<color>';
-}
+
 
 /* mds-price-table-list-item */
 @property --mds-price-table-list-item-supported-icon-color {
@@ -2648,7 +2335,7 @@
 
 @property --mds-progress-radius {
   inherits: true;
-  initial-value: 28px;
+  initial-value: 40px;
   syntax: '<length>';
 }
 
@@ -3095,7 +2782,13 @@
 /* mds-table */
 @property --mds-table-border-color {
   inherits: true;
-  initial-value: rgb(196 196 196);
+  initial-value: rgb(219 219 219);
+  syntax: '<color>';
+}
+
+@property --mds-table-separator-color {
+  inherits: true;
+  initial-value: rgb(219 219 219);
   syntax: '<color>';
 }
 
@@ -3130,6 +2823,13 @@
   syntax: '<color>';
 }
 
+/* mds-toast-region */
+@property --mds-toast-region-gap {
+  inherits: true;
+  initial-value: 8px;
+  syntax: '<length>';
+}
+
 /* mds-toast */
 @property --mds-toast-background {
   inherits: true;
@@ -3213,7 +2913,7 @@
 /* mds-tree-item */
 @property --mds-tree-item-branch-border-radius {
   inherits: true;
-  initial-value: 16px;
+  initial-value: 28px;
   syntax: '<length>';
 }
 
@@ -3224,24 +2924,6 @@
   syntax: 'true | false';
 }
 
-@property --mds-tree-toggle-icon-chevron-expanded-background {
-  inherits: true;
-  initial-value: rgb(36 103 231);
-  syntax: '<color>';
-}
-
-@property --mds-tree-toggle-icon-chevron-expanded-color {
-  inherits: true;
-  initial-value: rgb(255 255 255);
-  syntax: '<color>';
-}
-
-@property --mds-tree-toggle-icon-folder-expanded-color {
-  inherits: true;
-  initial-value: rgb(36 103 231);
-  syntax: '<color>';
-}
-
 /* mds-url-view */
 @property --mds-url-view-background {
   inherits: true;
@@ -3257,7 +2939,7 @@
 
 @property --mds-url-view-radius {
   inherits: true;
-  initial-value: 12px;
+  initial-value: 20px;
   syntax: '<length>';
 }
 
@@ -3316,9 +2998,14 @@
 
   --magma-radius-full is the same under every shape on purpose: the pill is out
   of the axis (see corner.ts).
+
+  A browser without corner-shape gets the round scale back from the last block,
+  and --magma-corner-cap, the part of its height a corner may take, drops from
+  0.5 to the round look-alike of a squircle cut to half the height.
 */
 :root {
   --magma-corner-shape: squircle;
+  --magma-corner-cap: 0.5;
 
   --magma-radius-none: var(--radius-none);
   --magma-radius-3xs: var(--radius-squircle-3xs);
@@ -3337,6 +3024,7 @@
 
 [data-corner-shape='round'] {
   --magma-corner-shape: round;
+  --magma-corner-cap: 0.5;
 
   --magma-radius-none: var(--radius-none);
   --magma-radius-3xs: var(--radius-3xs);
@@ -3355,6 +3043,7 @@
 
 [data-corner-shape='squircle'] {
   --magma-corner-shape: squircle;
+  --magma-corner-cap: 0.5;
 
   --magma-radius-none: var(--radius-none);
   --magma-radius-3xs: var(--radius-squircle-3xs);
@@ -3370,3 +3059,25 @@
   --magma-radius-5xl: var(--radius-squircle-5xl);
   --magma-radius-full: var(--radius-full);
 }
+
+@supports not (corner-shape: squircle) {
+  :root:not([data-corner-shape='round']),
+  [data-corner-shape='squircle'] {
+    --magma-corner-shape: round;
+    --magma-corner-cap: 0.2915;
+
+    --magma-radius-none: var(--radius-none);
+    --magma-radius-3xs: var(--radius-3xs);
+    --magma-radius-2xs: var(--radius-2xs);
+    --magma-radius-xs: var(--radius-xs);
+    --magma-radius-sm: var(--radius-sm);
+    --magma-radius-md: var(--radius-md);
+    --magma-radius-lg: var(--radius-lg);
+    --magma-radius-xl: var(--radius-xl);
+    --magma-radius-2xl: var(--radius-2xl);
+    --magma-radius-3xl: var(--radius-3xl);
+    --magma-radius-4xl: var(--radius-4xl);
+    --magma-radius-5xl: var(--radius-5xl);
+    --magma-radius-full: var(--radius-full);
+  }
+}