@dnd-mapp/shared-ui 1.1.0 → 2.0.0

package/assets/styles/theme-variables/_shadows.scss

@@ -0,0 +1,37 @@
+// Regular
+$shadow-2xs: 0 1px rgb(0 0 0 / 5%);
+$shadow-xs: 0 1px 2px 0 rgb(0 0 0 / 5%);
+$shadow-sm:
+    0 1px 3px 0 rgb(0 0 0 / 10%),
+    0 1px 2px -1px rgb(0 0 0 / 10%);
+$shadow-md:
+    0 4px 6px -1px rgb(0 0 0 / 10%),
+    0 2px 4px -2px rgb(0 0 0 / 10%);
+$shadow-lg:
+    0 10px 15px -3px rgb(0 0 0 / 10%),
+    0 4px 6px -4px rgb(0 0 0 / 10%);
+$shadow-xl:
+    0 20px 25px -5px rgb(0 0 0 / 10%),
+    0 8px 10px -6px rgb(0 0 0 / 10%);
+$shadow-2xl: 0 25px 50px -12px rgb(0 0 0 / 25%);
+
+// Inset
+$inset-shadow-2xs: inset 0 1px rgb(0 0 0 / 5%);
+$inset-shadow-xs: inset 0 1px 1px rgb(0 0 0 / 5%);
+$inset-shadow-sm: inset 0 2px 4px rgb(0 0 0 / 5%);
+
+// Text
+$text-shadow-2xs: 0px 1px 0px rgb(0 0 0 / 15%);
+$text-shadow-xs: 0px 1px 1px rgb(0 0 0 / 20%);
+$text-shadow-sm:
+    0px 1px 0px rgb(0 0 0 / 7.5%),
+    0px 1px 1px rgb(0 0 0 / 7.5%),
+    0px 2px 2px rgb(0 0 0 / 7.5%);
+$text-shadow-md:
+    0px 1px 1px rgb(0 0 0 / 10%),
+    0px 1px 2px rgb(0 0 0 / 10%),
+    0px 2px 4px rgb(0 0 0 / 10%);
+$text-shadow-lg:
+    0px 1px 2px rgb(0 0 0 / 10%),
+    0px 3px 2px rgb(0 0 0 / 10%),
+    0px 4px 8px rgb(0 0 0 / 10%);

package/assets/styles/theme-variables/_spacing.scss

@@ -0,0 +1,23 @@
+$spacing: 0.25rem;
+
+// Breakpoints
+$breakpoint-sm: 40rem;
+$breakpoint-md: 48rem;
+$breakpoint-lg: 64rem;
+$breakpoint-xl: 80rem;
+$breakpoint-2xl: 96rem;
+
+// Containers
+$container-3xs: 16rem;
+$container-2xs: 18rem;
+$container-xs: 20rem;
+$container-sm: 24rem;
+$container-md: 28rem;
+$container-lg: 32rem;
+$container-xl: 36rem;
+$container-2xl: 42rem;
+$container-3xl: 48rem;
+$container-4xl: 56rem;
+$container-5xl: 64rem;
+$container-6xl: 72rem;
+$container-7xl: 80rem;

package/assets/styles/theme-variables/_text.scss

@@ -0,0 +1,81 @@
+@mixin text-xs {
+    font-size: 0.75rem;
+    line-height: calc(1 / 0.75);
+}
+
+@mixin text-sm {
+    font-size: 0.875rem;
+    line-height: calc(1.25 / 0.875);
+}
+
+@mixin text-base {
+    font-size: 1rem;
+    line-height: calc(1.5 / 1);
+}
+
+@mixin text-lg {
+    font-size: 1.125rem;
+    line-height: calc(1.75 / 1.125);
+}
+
+@mixin text-xl {
+    font-size: 1.25rem;
+    line-height: calc(1.75 / 1.25);
+}
+
+@mixin text-2xl {
+    font-size: 1.5rem;
+    line-height: calc(2 / 1.5);
+}
+
+@mixin text-3xl {
+    font-size: 1.875rem;
+    line-height: calc(2.25 / 1.875);
+}
+
+@mixin text-4xl {
+    font-size: 2.25rem;
+    line-height: calc(2.5 / 2.25);
+}
+
+@mixin text-5xl {
+    font-size: 3rem;
+    line-height: 1;
+}
+
+@mixin text-6xl {
+    font-size: 3.75rem;
+    line-height: 1;
+}
+
+@mixin text-7xl {
+    font-size: 4.5rem;
+    line-height: 1;
+}
+
+@mixin text-8xl {
+    font-size: 6rem;
+    line-height: 1;
+}
+
+@mixin text-9xl {
+    font-size: 8rem;
+    line-height: 1;
+}
+
+$font-family: "Roboto";
+$font-family-mono: "Roboto Mono";
+$font-optical-sizing: auto;
+$font-style: normal;
+$font-variation-settings: "wdth" 100;
+
+// Font weight
+$font-weight-thin: 100;
+$font-weight-extralight: 200;
+$font-weight-light: 300;
+$font-weight-normal: 400;
+$font-weight-medium: 500;
+$font-weight-semibold: 600;
+$font-weight-bold: 700;
+$font-weight-extrabold: 800;
+$font-weight-black: 900;

package/assets/styles/theme-variables/index.scss

@@ -0,0 +1,4 @@
+@forward "layout";
+@forward "shadows";
+@forward "spacing";
+@forward "text";