@weavy/uikit-react 12.1.0 → 14.0.0

package/src/scss/theme/base/_colors.scss

@@ -0,0 +1,315 @@
+@use "sass:color";
+@use "sass:map";
+@use "palette";
+
+// fixed colors
+$theme: palette.$seed;
+$black: palette.$neutral-0;
+$white: palette.$neutral-100;
+$shadow: $black;
+
+// css variables
+:where(:root, :host > *) {
+  // fixed colors
+  --wy-theme: #{$theme};
+  --wy-black: #{$black};
+  --wy-white: #{$white};
+  --wy-shadow: #{$shadow};
+
+  // palette
+  --wy-primary-99: #{palette.$primary-99};
+  --wy-primary-95: #{palette.$primary-95};
+  --wy-primary-90: #{palette.$primary-90};
+  --wy-primary-80: #{palette.$primary-80};
+  --wy-primary-70: #{palette.$primary-70};
+  --wy-primary-60: #{palette.$primary-60};
+  --wy-primary-50: #{palette.$primary-50};
+  --wy-primary-40: #{palette.$primary-40};
+  --wy-primary-30: #{palette.$primary-30};
+  --wy-primary-20: #{palette.$primary-20};
+  --wy-primary-10: #{palette.$primary-10};
+                   
+  --wy-secondary-99: #{palette.$secondary-99};
+  --wy-secondary-95: #{palette.$secondary-95};
+  --wy-secondary-90: #{palette.$secondary-90};
+  --wy-secondary-80: #{palette.$secondary-80};
+  --wy-secondary-70: #{palette.$secondary-70};
+  --wy-secondary-60: #{palette.$secondary-60};
+  --wy-secondary-50: #{palette.$secondary-50};
+  --wy-secondary-40: #{palette.$secondary-40};
+  --wy-secondary-30: #{palette.$secondary-30};
+  --wy-secondary-20: #{palette.$secondary-20};
+  --wy-secondary-10: #{palette.$secondary-10};
+
+  --wy-tertiary-99: #{palette.$secondary-99};
+  --wy-tertiary-95: #{palette.$secondary-95};
+  --wy-tertiary-90: #{palette.$secondary-90};
+  --wy-tertiary-80: #{palette.$secondary-80};
+  --wy-tertiary-70: #{palette.$secondary-70};
+  --wy-tertiary-60: #{palette.$secondary-60};
+  --wy-tertiary-50: #{palette.$secondary-50};
+  --wy-tertiary-40: #{palette.$secondary-40};
+  --wy-tertiary-30: #{palette.$secondary-30};
+  --wy-tertiary-20: #{palette.$secondary-20};
+  --wy-tertiary-10: #{palette.$secondary-10};
+
+  --wy-error-99: #{palette.$error-99};
+  --wy-error-95: #{palette.$error-95};
+  --wy-error-90: #{palette.$error-90};
+  --wy-error-80: #{palette.$error-80};
+  --wy-error-70: #{palette.$error-70};
+  --wy-error-60: #{palette.$error-60};
+  --wy-error-50: #{palette.$error-50};
+  --wy-error-40: #{palette.$error-40};
+  --wy-error-30: #{palette.$error-30};
+  --wy-error-20: #{palette.$error-20};
+  --wy-error-10: #{palette.$error-10};
+
+  --wy-neutral-99: #{palette.$neutral-99};
+  --wy-neutral-95: #{palette.$neutral-95};
+  --wy-neutral-90: #{palette.$neutral-90};
+  --wy-neutral-80: #{palette.$neutral-80};
+  --wy-neutral-70: #{palette.$neutral-70};
+  --wy-neutral-60: #{palette.$neutral-60};
+  --wy-neutral-50: #{palette.$neutral-50};
+  --wy-neutral-40: #{palette.$neutral-40};
+  --wy-neutral-30: #{palette.$neutral-30};
+  --wy-neutral-20: #{palette.$neutral-20};
+  --wy-neutral-10: #{palette.$neutral-10};
+
+  --wy-neutral-variant-99: #{palette.$neutral-variant-99};
+  --wy-neutral-variant-95: #{palette.$neutral-variant-95};
+  --wy-neutral-variant-90: #{palette.$neutral-variant-90};
+  --wy-neutral-variant-80: #{palette.$neutral-variant-80};
+  --wy-neutral-variant-70: #{palette.$neutral-variant-70};
+  --wy-neutral-variant-60: #{palette.$neutral-variant-60};
+  --wy-neutral-variant-50: #{palette.$neutral-variant-50};
+  --wy-neutral-variant-40: #{palette.$neutral-variant-40};
+  --wy-neutral-variant-30: #{palette.$neutral-variant-30};
+  --wy-neutral-variant-20: #{palette.$neutral-variant-20};
+  --wy-neutral-variant-10: #{palette.$neutral-variant-10};
+
+  --wy-surface-1-light: #{palette.$surface-1-light}; // --wy-surface + --wy-primary with 5% opacity
+  --wy-surface-2-light: #{palette.$surface-2-light}; // --wy-surface + --wy-primary with 8% opacity
+  --wy-surface-3-light: #{palette.$surface-3-light}; // --wy-surface + --wy-primary with 11 opacity
+  --wy-surface-4-light: #{palette.$surface-4-light}; // --wy-surface + --wy-primary with 12% opacity
+  --wy-surface-5-light: #{palette.$surface-5-light}; // --wy-surface + --wy-primary with 14% opacity
+
+  --wy-surface-1-dark: #{palette.$surface-1-dark}; // --wy-surface + --wy-primary with 5% opacity
+  --wy-surface-2-dark: #{palette.$surface-2-dark}; // --wy-surface + --wy-primary with 8% opacity
+  --wy-surface-3-dark: #{palette.$surface-3-dark}; // --wy-surface + --wy-primary with 11 opacity
+  --wy-surface-4-dark: #{palette.$surface-4-dark}; // --wy-surface + --wy-primary with 12% opacity
+  --wy-surface-5-dark: #{palette.$surface-5-dark}; // --wy-surface + --wy-primary with 14% opacity
+
+  // custom colors
+  --wy-blue-light: #{palette.$blue-light};
+  --wy-indigo-light: #{palette.$indigo-light};
+  --wy-purple-light: #{palette.$purple-light};
+  --wy-pink-light: #{palette.$pink-light};
+  --wy-red-light: #{palette.$red-light};
+  --wy-orange-light: #{palette.$orange-light};
+  --wy-yellow-light: #{palette.$yellow-light};
+  --wy-green-light: #{palette.$green-light};
+  --wy-teal-light: #{palette.$teal-light};
+  --wy-cyan-light: #{palette.$cyan-light};
+  --wy-gray-light: #{palette.$gray-light};
+
+  // custom colors
+  --wy-blue-dark: #{palette.$blue-dark};
+  --wy-indigo-dark: #{palette.$indigo-dark};
+  --wy-purple-dark: #{palette.$purple-dark};
+  --wy-pink-dark: #{palette.$pink-dark};
+  --wy-red-dark: #{palette.$red-dark};
+  --wy-orange-dark: #{palette.$orange-dark};
+  --wy-yellow-dark: #{palette.$yellow-dark};
+  --wy-green-dark: #{palette.$green-dark};
+  --wy-teal-dark: #{palette.$teal-dark};
+  --wy-cyan-dark: #{palette.$cyan-dark};
+  --wy-gray-dark: #{palette.$gray-dark};
+}
+
+:where(:root, :host > *, .wy-light) {
+  // light mode
+  color-scheme: light;
+
+  // theme colors
+  --wy-primary: var(--wy-primary-40);
+  --wy-on-primary: var(--wy-white); 
+  --wy-primary-container: var(--wy-primary-90);
+  --wy-on-primary-container: var(--wy-primary-10); 
+
+  --wy-secondary: var(--wy-secondary-40);
+  --wy-on-secondary: var(--wy-white); 
+  --wy-secondary-container: var(--wy-secondary-90);
+  --wy-on-secondary-container: var(--wy-secondary-10);
+
+  --wy-tertiary: var(--wy-tertiary-40);
+  --wy-on-tertiary: var(--wy-white); 
+  --wy-tertiary-container: var(--wy-tertiary-90);
+  --wy-on-tertiary-container: var(--wy-tertiary-10);
+
+  --wy-error: var(--wy-error-40); 
+  --wy-on-error: var(--wy-white); 
+  --wy-error-container: var(--wy-error-90); 
+  --wy-on-error-container: var(--wy-error-10); 
+
+  --wy-background: var(--wy-neutral-99);
+  --wy-on-background: var(--wy-neutral-10);
+
+  --wy-surface: var(--wy-neutral-99);
+  --wy-on-surface: var(--wy-neutral-10);
+
+  --wy-surface-variant: var(--wy-neutral-variant-90);
+  --wy-on-surface-variant: var(--wy-neutral-variant-30); 
+
+  --wy-outline: var(--wy-neutral-variant-50);
+  --wy-outline-variant: var(--wy-neutral-variant-80);
+
+  --wy-inverse-surface: var(--wy-neutral-20);
+  --wy-on-inverse-surface: var(--wy-neutral-95);
+  --wy-inverse-primary: var(--wy-primary-80);
+
+  --wy-surface-1: var(--wy-surface-1-light); // --wy-surface + --wy-primary with 5% opacity
+  --wy-surface-2: var(--wy-surface-2-light); // --wy-surface + --wy-primary with 8% opacity
+  --wy-surface-3: var(--wy-surface-3-light); // --wy-surface + --wy-primary with 11 opacity
+  --wy-surface-4: var(--wy-surface-4-light); // --wy-surface + --wy-primary with 12% opacity
+  --wy-surface-5: var(--wy-surface-5-light); // --wy-surface + --wy-primary with 14% opacity
+
+  --wy-link: var(--wy-primary-40);
+
+  // custom colors
+  --wy-blue: var(--wy-blue-light);
+  --wy-indigo: var(--wy-indigo-light);
+  --wy-purple: var(--wy-purple-light);
+  --wy-pink: var(--wy-pink-light);
+  --wy-red: var(--wy-red-light);
+  --wy-orange: var(--wy-orange-light);
+  --wy-yellow: var(--wy-yellow-light);
+  --wy-green: var(--wy-green-light);
+  --wy-teal: var(--wy-teal-light);
+  --wy-cyan: var(--wy-cyan-light);
+  --wy-gray: var(--wy-gray-light);
+}
+
+:where(.wy-dark) {
+  // dark mode
+  color-scheme: dark;
+
+  // theme colors
+  --wy-primary: var(--wy-primary-80);
+  --wy-on-primary: var(--wy-primary-20); 
+  --wy-primary-container: var(--wy-primary-30);
+  --wy-on-primary-container: var(--wy-primary-90); 
+
+  --wy-secondary: var(--wy-secondary-80);
+  --wy-on-secondary: var(--wy-secondary-20); 
+  --wy-secondary-container: var(--wy-secondary-30);
+  --wy-on-secondary-container: var(--wy-secondary-90);
+
+  --wy-tertiary: var(--wy-tertiary-80);
+  --wy-on-tertiary: var(--wy-tertiary-20); 
+  --wy-tertiary-container: var(--wy-tertiary-30);
+  --wy-on-tertiary-container: var(--wy-tertiary-90);
+
+  --wy-error: var(--wy-error-80); 
+  --wy-on-error: var(--wy-error-20); 
+  --wy-error-container: var(--wy-error-30); 
+  --wy-on-error-container: var(--wy-error-90); 
+
+  --wy-background: var(--wy-neutral-10);
+  --wy-on-background: var(--wy-neutral-90);
+
+  --wy-surface: var(--wy-neutral-10);
+  --wy-on-surface: var(--wy-neutral-90);
+
+  --wy-surface-variant: var(--wy-neutral-variant-30);
+  --wy-on-surface-variant: var(--wy-neutral-variant-80); 
+
+  --wy-outline: var(--wy-neutral-variant-60);
+  --wy-outline-variant: var(--wy-neutral-variant-30);
+
+  --wy-inverse-surface: var(--wy-neutral-90);
+  --wy-on-inverse-surface: var(--wy-neutral-20);
+  --wy-inverse-primary: var(--wy-primary-40);
+ 
+  --wy-surface-1: var(--wy-surface-1-dark); // --wy-surface + --wy-primary with 5% opacity
+  --wy-surface-2: var(--wy-surface-2-dark); // --wy-surface + --wy-primary with 8% opacity
+  --wy-surface-3: var(--wy-surface-3-dark); // --wy-surface + --wy-primary with 11 opacity
+  --wy-surface-4: var(--wy-surface-4-dark); // --wy-surface + --wy-primary with 12% opacity
+  --wy-surface-5: var(--wy-surface-5-dark); // --wy-surface + --wy-primary with 14% opacity
+
+  --wy-link: var(--wy-primary-80);
+
+  // custom colors
+  --wy-blue: var(--wy-blue-dark);
+  --wy-indigo: var(--wy-indigo-dark);
+  --wy-purple: var(--wy-purple-dark);
+  --wy-pink: var(--wy-pink-dark);
+  --wy-red: var(--wy-red-dark);
+  --wy-orange: var(--wy-orange-dark);
+  --wy-yellow: var(--wy-yellow-dark);
+  --wy-green: var(--wy-green-dark);
+  --wy-teal: var(--wy-teal-dark);
+  --wy-cyan: var(--wy-cyan-dark);
+  --wy-gray: var(--wy-gray-dark);
+}
+
+// scss theme colors
+$primary: var(--wy-primary);
+$on-primary: var(--wy-on-primary);
+$primary-container: var(--wy-primary-container);
+$on-primary-container: var(--wy-on-primary-container);
+
+$secondary: var(--wy-secondary);
+$on-secondary: var(--wy-on-secondary);
+$secondary-container: var(--wy-secondary-container);
+$on-secondary-container: var(--wy-on-secondary-container);
+
+$tertiary: var(--wy-tertiary);
+$on-tertiary: var(--wy-on-tertiary);
+$tertiary-container: var(--wy-tertiary-container);
+$on-tertiary-container: var(--wy-on-tertiary-container);
+
+$error: var(--wy-error);
+$on-error: var(--wy-on-error);
+$error-container: var(--wy-error-container);
+$on-error-container: var(--wy-on-error-container);
+
+$background: var(--wy-background);
+$on-background: var(--wy-on-background);
+
+$surface: var(--wy-surface);
+$on-surface: var(--wy-on-surface);
+
+$surface-variant: var(--wy-surface-variant);
+$on-surface-variant: var(--wy-on-surface-variant);
+
+$outline: var(--wy-outline);
+$outline-variant: var(--wy-outline-variant);
+
+$surface-1: var(--wy-surface-1);
+$surface-2: var(--wy-surface-2);
+$surface-3: var(--wy-surface-3);
+$surface-4: var(--wy-surface-4);
+$surface-5: var(--wy-surface-5);
+
+$inverse-surface: var(--wy-inverse-surface);
+$on-inverse-surface: var(--wy-on-inverse-surface);
+$inverse-primary: var(--wy-inverse-primary);
+
+$link: var(--wy-link);
+
+// scss custom colors
+$blue: var(--wy-blue);
+$indigo: var(--wy-indigo);
+$purple: var(--wy-purple);
+$pink: var(--wy-pink);
+$red: var(--wy-red);
+$orange: var(--wy-orange);
+$yellow: var(--wy-yellow);
+$green: var(--wy-green);
+$teal: var(--wy-teal);
+$cyan: var(--wy-cyan);
+$gray: var(--wy-gray);
+
+

package/src/scss/theme/base/_md.scss

@@ -0,0 +1,19 @@
+// Material design animation and shadows from https://fezvrasta.github.io/bootstrap-material-design/
+$animation-curve-fast-out-slow-in: cubic-bezier(0.4, 0, 0.2, 1);
+$animation-curve-linear-out-slow-in: cubic-bezier(0, 0, 0.2, 1);
+$animation-curve-fast-out-linear-in: cubic-bezier(0.4, 0, 1, 1);
+$animation-curve-default: $animation-curve-fast-out-slow-in;
+$animation-duration: .2s;
+$animation-duration-fast: .1s;
+
+$shadow-umbra-opacity: 0.2;
+$shadow-penumbra-opacity: 0.14;
+$shadow-ambient-opacity: 0.12;
+$shadow-focus: 0 0 .5rem rgba(#000, .18), 0 .5rem 1rem rgba(#000, .36);
+$shadow-2dp: 0 .125rem .125rem 0 rgba(#000, $shadow-penumbra-opacity), 0 .1875rem .0625rem -.125rem rgba(#000, $shadow-umbra-opacity), 0 .0625rem .3125rem 0 rgba(#000, $shadow-ambient-opacity);
+$shadow-3dp: 0 .1875rem .25rem 0 rgba(#000, $shadow-penumbra-opacity), 0 .1875rem .1875rem -.125rem rgba(#000, $shadow-umbra-opacity), 0 .0625rem .5rem 0 rgba(#000, $shadow-ambient-opacity);
+$shadow-4dp: 0 .25rem .3125rem 0 rgba(#000, $shadow-penumbra-opacity), 0 .0625rem .625rem 0 rgba(#000, $shadow-ambient-opacity), 0 .125rem .25rem -.0625rem rgba(#000, $shadow-umbra-opacity);
+$shadow-6dp: 0 .375rem .625rem 0 rgba(#000, $shadow-penumbra-opacity), 0 .0625rem 1.5rem 0 rgba(#000, $shadow-ambient-opacity), 0 .1875rem .3125rem -.0625rem rgba(#000, $shadow-umbra-opacity);
+$shadow-8dp: 0 .5rem .625rem .0625rem rgba(#000, $shadow-penumbra-opacity), 0 .1875rem 1.25rem .125rem rgba(#000, $shadow-ambient-opacity), 0 .3125rem .3125rem -.1875rem rgba(#000, $shadow-umbra-opacity);
+$shadow-16dp: 0 1rem 2.25rem .125rem rgba(#000, $shadow-penumbra-opacity), 0 .375rem 1.875rem .3125rem rgba(#000, $shadow-ambient-opacity), 0 .5rem .625rem -.3125rem rgba(#000, $shadow-umbra-opacity);
+$shadow-24dp: 0 .5625rem 4.375rem .5rem rgba(#000, $shadow-penumbra-opacity), 0 1.0625rem 1.3125rem -.4375rem rgba(#000, $shadow-ambient-opacity), 0 2.25rem 3.5rem .1875rem rgba(#000, $shadow-umbra-opacity);

package/src/scss/theme/base/_palette.scss

@@ -0,0 +1,130 @@
+// initial color used to generate palette
+$seed: #00658e;
+
+// primary
+$primary-0: #000000;
+$primary-10: #001e2e;
+$primary-20: #00344c;
+$primary-30: #004c6c;
+$primary-40: #00658e;
+$primary-50: #007fb2;
+$primary-60: #2f9ad0;
+$primary-70: #53b5ec;
+$primary-80: #84cfff;
+$primary-90: #c7e7ff;
+$primary-95: #e4f3ff;
+$primary-99: #fbfcff;
+$primary-100: #ffffff;
+
+// secondary
+$secondary-0: #000000;
+$secondary-10: #201c00;
+$secondary-20: #373100;
+$secondary-30: #504700;
+$secondary-40: #6a5f00;
+$secondary-50: #857800;
+$secondary-60: #a0921a;
+$secondary-70: #bcad36;
+$secondary-80: #d9c84f;
+$secondary-90: #f6e468;
+$secondary-95: #fff2a4;
+$secondary-99: #fffbff;
+$secondary-100: #ffffff;
+
+// tertiary
+$tertiary-0: #000000;
+$tertiary-10: #002106;
+$tertiary-20: #003910;
+$tertiary-30: #00531b;
+$tertiary-40: #206c2f;
+$tertiary-50: #3c8645;
+$tertiary-60: #56a15c;
+$tertiary-70: #70bc75;
+$tertiary-80: #8bd88e;
+$tertiary-90: #a6f5a8;
+$tertiary-95: #c7ffc4;
+$tertiary-99: #f6fff1;
+$tertiary-100: #ffffff;
+
+// error
+$error-0: #000000;
+$error-10: #410002;
+$error-20: #690005;
+$error-30: #93000a;
+$error-40: #ba1a1a;
+$error-50: #de3730;
+$error-60: #ff5449;
+$error-70: #ff897d;
+$error-80: #ffb4ab;
+$error-90: #ffdad6;
+$error-95: #ffedea;
+$error-99: #fffbff;
+$error-100: #ffffff;
+
+// neutral
+$neutral-0: #000000;
+$neutral-10: #191c1e;
+$neutral-20: #2e3133;
+$neutral-30: #454749;
+$neutral-40: #5c5e61;
+$neutral-50: #75777a;
+$neutral-60: #8f9193;
+$neutral-70: #aaabae;
+$neutral-80: #c5c6c9;
+$neutral-90: #e2e2e5;
+$neutral-95: #f0f1f3;
+$neutral-99: #fcfcff;
+$neutral-100: #ffffff;
+
+// neutral variant
+$neutral-variant-0: #000000;
+$neutral-variant-10: #161c21;
+$neutral-variant-20: #2b3136;
+$neutral-variant-30: #41484d;
+$neutral-variant-40: #595f65;
+$neutral-variant-50: #71787e;
+$neutral-variant-60: #8b9198;
+$neutral-variant-70: #a5acb2;
+$neutral-variant-80: #c1c7ce;
+$neutral-variant-90: #dde3ea;
+$neutral-variant-95: #ebf1f8;
+$neutral-variant-99: #fbfcff;
+$neutral-variant-100: #ffffff;
+
+// custom colors
+$blue-light: #7aadfa;
+$indigo-light: #8489e0;
+$purple-light: #bd78c2;
+$pink-light: #d072a2;
+$red-light: #da717c;
+$orange-light: #ef9646;
+$yellow-light: #d9c84f;
+$green-light: #56a15c;
+$teal-light: #00a29d;
+$cyan-light: #008398;
+$gray-light: #75777a;
+
+$blue-dark: #a7c8ff;
+$indigo-dark: #8489e0;
+$purple-dark: #da92de;
+$pink-dark: #ee8cbe;
+$red-dark: #da717c;
+$orange-dark: #ef9646;
+$yellow-dark: #d9c84f;
+$green-dark: #56a15c;
+$teal-dark: #00a29d;
+$cyan-dark: #009fb8;
+$gray-dark: #8f9193;
+
+// surface levels
+$surface-1-light: #f0f4f9; // $neutral-99 + $primary-40 with 5% opacity
+$surface-2-light: #e8f0f6; // $neutral-99 + $primary-40 with 8% opacity
+$surface-3-light: #e0ebf2; // $neutral-99 + $primary-40 with 11% opacity
+$surface-4-light: #deeaf1; // $neutral-99 + $primary-40 with 12% opacity
+$surface-5-light: #d9e7ef; // $neutral-99 + $primary-40 with 14 opacity
+
+$surface-1-dark: #1e2428; // $neutral-10 + $primary-80 with 5% opacity
+$surface-2-dark: #212a2f; // $neutral-10 + $primary-80 with 8% opacity
+$surface-3-dark: #242f36; // $neutral-10 + $primary-80 with 11% opacity
+$surface-4-dark: #253138; // $neutral-10 + $primary-80 with 12% opacity
+$surface-5-dark: #27343c; // $neutral-10 + $primary-80 with 14 opacity

package/src/scss/theme/{mixins → base}/_position.scss

@@ -1,11 +1,11 @@
-@use "../variables";
+@use "vars";
 
 @mixin fixed-top {
   position: fixed;
   top: 0;
   right: 0;
   left: 0;
-  z-index: variables.$zindex-fixed;
+  z-index: vars.$zindex-fixed;
 }
 
 @mixin fixed-bottom {
@@ -13,14 +13,14 @@
   right: 0;
   bottom: 0;
   left: 0;
-  z-index: variables.$zindex-fixed;
+  z-index: vars.$zindex-fixed;
 }
 
 @mixin sticky-top {
   @supports (position: sticky) {
     position: sticky;
     top: 0;
-    z-index: variables.$zindex-sticky;
+    z-index: vars.$zindex-sticky;
   }
 }
 
@@ -28,6 +28,6 @@
   @supports (position: sticky) {
     position: sticky;
     bottom: 0;
-    z-index: variables.$zindex-sticky;
+    z-index: vars.$zindex-sticky;
   }
 }

package/src/scss/theme/base/_reboot.scss

@@ -0,0 +1,51 @@
+@use "sass:selector";
+@use "colors";
+@use "vars";
+
+// Some cherry-picked and ported from bootstrap/scss/reboot
+// Use :where() to get specificity 0 https://developer.mozilla.org/en-US/docs/Web/CSS/:where
+
+// General style reboot selector for all classes starting with wy-
+:where([class^='wy-'], [class*=' wy-']) {
+  box-sizing: border-box;
+  // See https://css-tricks.com/inheriting-box-sizing-probably-slightly-better-best-practice/
+  *::before, *::after {
+    box-sizing: inherit;
+  }
+  // Self and descendants
+  &, & * {
+    // A
+    &:where(a) {
+      text-decoration: vars.$link-decoration;
+      color: colors.$link;
+
+      &:hover {
+        text-decoration: vars.$link-hover-decoration;
+      }
+
+      &:where(:not([href]):not([class])) {
+
+        &, &:hover {
+          text-decoration: none;
+        }
+      }
+    }
+    // P
+    &:where(p) {
+      margin-top: 0;
+      margin-bottom: 1rem;
+    }
+    // LABEL
+    &:where(label) {
+      cursor: inherit;
+    }
+
+    &[hidden] {
+      display: none !important;
+    }
+
+    &:where([role="button"]) {
+      cursor: pointer;
+    }
+  }
+}