@quaffui/quaff 0.1.0-prealpha2 → 0.1.0-prealpha21

package/dist/css/theme/colors.module.scss

@@ -1,180 +1,332 @@
+.bg-primary {
+  background-color: var(--primary) !important;
+}
+.text-primary {
+  color: var(--primary) !important;
+}
+.border-primary {
+  border-color: var(--primary) !important;
+}
+.bg-on-primary {
+  background-color: var(--on-primary) !important;
+}
+.text-on-primary {
+  color: var(--on-primary) !important;
+}
+.border-on-primary {
+  border-color: var(--on-primary) !important;
+}
 .primary {
-  background-color: var(--primary);
+  @extend .bg-primary;
+  @extend .text-on-primary;
 }
-.primary-text {
-  color: var(--primary);
+
+.bg-primary-container {
+  background-color: var(--primary-container) !important;
 }
-.on-primary {
-  background-color: var(--on-primary);
+.text-primary-container {
+  color: var(--primary-container) !important;
 }
-.on-primary-text {
-  color: var(--on-primary);
+.border-primary-container {
+  border-color: var(--primary-container) !important;
+}
+.bg-on-primary-container {
+  background-color: var(--on-primary-container) !important;
+}
+.text-on-primary-container {
+  color: var(--on-primary-container) !important;
+}
+.border-on-primary-container {
+  border-color: var(--on-primary-container) !important;
 }
 .primary-container {
-  background-color: var(--primary-container);
+  @extend .bg-primary-container;
+  @extend .text-on-primary-container;
+}
+
+.bg-secondary {
+  background-color: var(--secondary) !important;
+}
+.text-secondary {
+  color: var(--secondary) !important;
 }
-.primary-container-text {
-  color: var(--primary-container);
+.border-secondary {
+  border-color: var(--secondary) !important;
 }
-.on-primary-container {
-  background-color: var(--on-primary-container);
+.bg-on-secondary {
+  background-color: var(--on-secondary) !important;
 }
-.on-primary-container-text {
-  color: var(--on-primary-container);
+.text-on-secondary {
+  color: var(--on-secondary) !important;
+}
+.border-on-secondary {
+  border-color: var(--on-secondary) !important;
 }
 .secondary {
-  background-color: var(--secondary);
+  @extend .bg-secondary;
+  @extend .text-on-secondary;
+}
+
+.bg-secondary-container {
+  background-color: var(--secondary-container) !important;
+}
+.text-secondary-container {
+  color: var(--secondary-container) !important;
 }
-.secondary-text {
-  color: var(--secondary);
+.border-secondary-container {
+  border-color: var(--secondary-container) !important;
 }
-.on-secondary {
-  background-color: var(--on-secondary);
+.bg-on-secondary-container {
+  background-color: var(--on-secondary-container) !important;
 }
-.on-secondary-text {
-  color: var(--on-secondary);
+.text-on-secondary-container {
+  color: var(--on-secondary-container) !important;
+}
+.border-on-secondary-container {
+  border-color: var(--on-secondary-container) !important;
 }
 .secondary-container {
-  background-color: var(--secondary-container);
+  @extend .bg-secondary-container;
+  @extend .text-on-secondary-container;
+}
+
+.bg-tertiary {
+  background-color: var(--tertiary) !important;
 }
-.secondary-container-text {
-  color: var(--secondary-container);
+.text-tertiary {
+  color: var(--tertiary) !important;
 }
-.on-secondary-container {
-  background-color: var(--on-secondary-container);
+.border-tertiary {
+  border-color: var(--tertiary) !important;
 }
-.on-secondary-container-text {
-  color: var(--on-secondary-container);
+.bg-on-tertiary {
+  background-color: var(--on-tertiary) !important;
+}
+.text-on-tertiary {
+  color: var(--on-tertiary) !important;
+}
+.border-on-tertiary {
+  border-color: var(--on-tertiary) !important;
 }
 .tertiary {
-  background-color: var(--tertiary);
+  @extend .bg-tertiary;
+  @extend .text-on-tertiary;
+}
+
+.bg-tertiary-container {
+  background-color: var(--tertiary-container) !important;
+}
+.text-tertiary-container {
+  color: var(--tertiary-container) !important;
+}
+.border-tertiary-container {
+  border-color: var(--tertiary-container) !important;
 }
-.tertiary-text {
-  color: var(--tertiary);
+.bg-on-tertiary-container {
+  background-color: var(--on-tertiary-container) !important;
 }
-.on-tertiary {
-  background-color: var(--on-tertiary);
+.text-on-tertiary-container {
+  color: var(--on-tertiary-container) !important;
 }
-.on-tertiary-text {
-  color: var(--on-tertiary);
+.border-on-tertiary-container {
+  border-color: var(--on-tertiary-container) !important;
 }
 .tertiary-container {
-  background-color: var(--tertiary-container);
+  @extend .bg-tertiary-container;
+  @extend .text-on-tertiary-container;
 }
-.tertiary-container-text {
-  color: var(--tertiary-container);
+
+.bg-error {
+  background-color: var(--error) !important;
 }
-.on-tertiary-container {
-  background-color: var(--on-tertiary-container);
+.text-error {
+  color: var(--error) !important;
 }
-.on-tertiary-container-text {
-  color: var(--on-tertiary-container);
+.border-error {
+  border-color: var(--error) !important;
+}
+.bg-on-error {
+  background-color: var(--on-error) !important;
+}
+.text-on-error {
+  color: var(--on-error) !important;
+}
+.border-on-error {
+  border-color: var(--on-error) !important;
 }
 .error {
-  background-color: var(--error);
+  @extend .bg-error;
+  @extend .text-on-error;
+}
+
+.bg-error-container {
+  background-color: var(--error-container) !important;
+}
+.text-error-container {
+  color: var(--error-container) !important;
 }
-.error-text {
-  color: var(--error);
+.border-error-container {
+  border-color: var(--error-container) !important;
+}
+.bg-on-error-container {
+  background-color: var(--on-error-container) !important;
+}
+.text-on-error-container {
+  color: var(--on-error-container) !important;
+}
+.border-on-error-container {
+  border-color: var(--on-error-container) !important;
 }
 .error-container {
-  background-color: var(--error-container);
+  @extend .bg-error-container;
+  @extend .text-on-error-container;
 }
-.error-container-text {
-  color: var(--error-container);
+
+.bg-background {
+  background-color: var(--background) !important;
 }
-.on-error {
-  background-color: var(--on-error);
+.text-background {
+  color: var(--background) !important;
 }
-.on-error-text {
-  color: var(--on-error);
+.border-background {
+  border-color: var(--background) !important;
 }
-.on-error-container {
-  background-color: var(--on-error-container);
+.bg-on-background {
+  background-color: var(--on-background) !important;
 }
-.on-error-container-text {
-  color: var(--on-error-container);
+.text-on-background {
+  color: var(--on-background) !important;
+}
+.border-on-background {
+  border-color: var(--on-background) !important;
 }
 .background {
-  background-color: var(--background);
+  @extend .bg-background;
+  @extend .text-on-background;
+}
+
+.bg-surface {
+  background-color: var(--surface) !important;
 }
-.background-text {
-  color: var(--background);
+.text-surface {
+  color: var(--surface) !important;
 }
-.on-background {
-  background-color: var(--on-background);
+.border-surface {
+  border-color: var(--surface) !important;
 }
-.on-background-text {
-  color: var(--on-background);
+.bg-on-surface {
+  background-color: var(--on-surface) !important;
+}
+.text-on-surface {
+  color: var(--on-surface) !important;
+}
+.border-on-surface {
+  border-color: var(--on-surface) !important;
 }
 .surface {
-  background-color: var(--surface);
+  @extend .bg-surface;
+  @extend .text-on-surface;
+}
+
+.bg-surface-variant {
+  background-color: var(--surface-variant) !important;
+}
+.text-surface-variant {
+  color: var(--surface-variant) !important;
+}
+.border-surface-variant {
+  border-color: var(--surface-variant) !important;
 }
-.surface-text {
-  color: var(--surface);
+.bg-on-surface-variant {
+  background-color: var(--on-surface-variant) !important;
 }
-.on-surface {
-  background-color: var(--on-surface);
+.text-on-surface-variant {
+  color: var(--on-surface-variant) !important;
 }
-.on-surface-text {
-  color: var(--on-surface);
+.border-on-surface-variant {
+  border-color: var(--on-surface-variant) !important;
 }
 .surface-variant {
-  background-color: var(--surface-variant);
+  @extend .bg-surface-variant;
+  @extend .text-on-surface-variant;
+}
+
+.bg-outline {
+  background-color: var(--outline) !important;
+}
+.text-outline {
+  color: var(--outline) !important;
+}
+.border-outline {
+  border-color: var(--outline) !important;
+}
+
+.bg-inverse-surface {
+  background-color: var(--inverse-surface) !important;
+}
+.text-inverse-surface {
+  color: var(--inverse-surface) !important;
 }
-.surface-variant-text {
-  color: var(--surface-variant);
+.border-inverse-surface {
+  border-color: var(--inverse-surface) !important;
 }
-.on-surface-variant {
-  background-color: var(--on-surface-variant);
+
+.bg-inverse-on-surface {
+  background-color: var(--inverse-on-surface) !important;
 }
-.on-surface-variant-text {
-  color: var(--on-surface-variant);
+.text-inverse-on-surface {
+  color: var(--inverse-on-surface) !important;
 }
-.outline {
-  background-color: var(--outline);
+.border-inverse-on-surface {
+  border-color: var(--inverse-on-surface) !important;
 }
-.outline-text {
-  color: var(--outline);
+
+.bg-inverse-primary {
+  background-color: var(--inverse-primary) !important;
 }
-.inverse-on-surface {
-  background-color: var(--inverse-on-surface);
+.text-inverse-primary {
+  color: var(--inverse-primary) !important;
 }
-.inverse-on-surface-text {
-  color: var(--inverse-on-surface);
+.border-inverse-primary {
+  border-color: var(--inverse-primary) !important;
 }
-.inverse-surface {
-  background-color: var(--inverse-surface);
+
+.bg-shadow {
+  background-color: var(--shadow) !important;
 }
-.inverse-surface-text {
-  color: var(--inverse-surface);
+.text-shadow {
+  color: var(--shadow) !important;
 }
-.inverse-primary {
-  background-color: var(--inverse-primary);
+.border-shadow {
+  border-color: var(--shadow) !important;
 }
-.inverse-primary-text {
-  color: var(--inverse-primary);
+
+.bg-surface-tint {
+  background-color: var(--surface-tint) !important;
 }
-.shadow {
-  background-color: var(--shadow);
+.text-surface-tint {
+  color: var(--surface-tint) !important;
 }
-.shadow-text {
-  color: var(--shadow);
+.border-surface-tint {
+  border-color: var(--surface-tint) !important;
 }
-.surface-tint {
-  background-color: var(--surface-tint);
+
+.bg-outline-variant {
+  background-color: var(--outline-variant) !important;
 }
-.surface-tint-text {
-  color: var(--surface-tint);
+.text-outline-variant {
+  color: var(--outline-variant) !important;
 }
-.outline-variant {
-  background-color: var(--outline-variant);
+.border-outline-variant {
+  border-color: var(--outline-variant) !important;
 }
-.outline-variant-text {
-  color: var(--outline-variant);
+
+.bg-scrim {
+  background-color: var(--scrim) !important;
 }
-.scrim {
-  background-color: var(--scrim);
+.text-scrim {
+  color: var(--scrim) !important;
 }
-.scrim-text {
-  color: var(--scrim);
+.border-scrim {
+  border-color: var(--scrim) !important;
 }

package/dist/css/theme/css-variables.scss

@@ -0,0 +1,5 @@
+:root {
+  --size: 16px;
+  --font: Roboto, "Helvetica Neue", "Arial Nova", "Nimbus Sans", Arial, sans-serif;
+  --font-icon: "Material Symbols Outlined";
+}

package/dist/css/theme/elevate.scss

@@ -0,0 +1,57 @@
+// https://m3.material.io/styles/elevation/tokens
+
+:root {
+  --elevate0: 0 0 0 0 rgb(0 0 0 / 0);
+  --elevate1: 0 0.0625rem 0.0625rem 0 rgb(0 0 0 / 0.2); /* 1dp */
+  --elevate2: 0 0.125rem 0.125rem 0 rgb(0 0 0 / 0.32); /* 3dp */
+  --elevate3: 0 0.25rem 0.25rem 0 rgb(0 0 0 / 0.4); /* 6dp */
+  --elevate4: 0 0.375rem 0.375rem 0 rgb(0 0 0 / 0.48); /* 8dp */
+  --elevate5: 0 0.5rem 0.5rem 0 rgb(0 0 0 / 0.56); /* 12dp */
+}
+
+.elevate-0 {
+  box-shadow: var(--elevate0);
+}
+
+.elevate-1 {
+  box-shadow: var(--elevate1);
+}
+
+.elevate-2 {
+  box-shadow: var(--elevate2);
+}
+
+.elevate-3 {
+  box-shadow: var(--elevate3);
+}
+
+.elevate-4 {
+  box-shadow: var(--elevate4);
+}
+
+.elevate-5 {
+  box-shadow: var(--elevate5);
+}
+
+// For API compatibility. We might make this deprecated in the future
+@for $i from 1 through 24 {
+  $elevation: null;
+
+  @if $i <= 3 {
+    $elevation: var(--elevate0);
+  } @else if $i > 3 and $i <= 7 {
+    $elevation: var(--elevate1);
+  } @else if $i > 7 and $i <= 12 {
+    $elevation: var(--elevate2);
+  } @else if $i > 12 and $i <= 18 {
+    $elevation: var(--elevate3);
+  } @else if $i > 18 and $i <= 21 {
+    $elevation: var(--elevate4);
+  } @else if $i > 21 {
+    $elevation: var(--elevate5);
+  }
+
+  .shadow-#{$i} {
+    box-shadow: $elevation;
+  }
+}

package/dist/css/theme/page.scss

@@ -0,0 +1,16 @@
+@use "../variables";
+
+.q-page {
+  max-width: 75rem;
+  margin: 0 auto;
+  padding: 4rem 1.5rem;
+  line-height: 1.5;
+
+  @media only screen and (max-width: #{map-get(variables.$breakpoints, md) - 1px}) {
+    padding: 3rem 1.25rem;
+  }
+
+  @media only screen and (min-width: #{map-get(variables.$breakpoints, md)}) and (max-width: #{map-get(variables.$breakpoints, lg) - 1px}) {
+    padding: 3.5rem 1.5rem;
+  }
+}