@ainias42/react-bootstrap-mobile 1.0.6 → 1.0.7

package/src/scss/_colors.scss

@@ -23,6 +23,31 @@
   --text-link: #0d6efd; // No Tailwind
   --text-inverse: #ffffff; // white
   --opacity-disabled: 0.3;
+  --text-primary-default-color: var(--text-primary);
+}
+
+%color-vars-dark {
+  --flavor-basic: #a3a3a3; // Neutral 400
+  --flavor-pale-basic: #737373; // Neutral 500
+  --flavor-constructive: #15803d; // Green 700
+  --flavor-pale-constructive: #86efac; // Green 300
+  --flavor-destructive: #dc2626; // Red 600
+  --flavor-pale-destructive: #fca5a5; // Red 300
+  --curtain-light: rgb(0 0 0 / 40%);
+  --curtain-strong: rgb(0 0 0 / 80%);
+  --foreground-primary: #292524; // Stone 800
+  --foreground-secondary: #44403c; // Stone 700
+  --foreground-tertiary: #57534e; // Stone 600
+  --border-light: #52525b; // Zinc 600
+  --border-strong: #71717a; // Neutral 500
+  --text-primary: #f1f5f9; // Slate 100
+  --text-secondary: #cbd5e1; // Slate 300
+  --text-tertiary: #94a3b8; // Slate 400
+  --text-disabled: #cbd5e1; // Slate 300
+  --text-link: #0d6efd; // No Tailwind
+  --text-inverse: #0f172a; // Slate 900
+  --opacity-disabled: 0.3;
+  --text-primary-default-color: var(--text-primary);
 }
 
 .#{$material} {
@@ -30,6 +55,10 @@
 
   --flavor-accent: #37474f;
   --box-shadow-color: rgb(0 0 0 / 20%);
+
+  &.dark {
+    @extend %color-vars-dark;
+  }
 }
 
 .#{$flat} {
@@ -38,4 +67,8 @@
   --flavor-accent: #2563eb; // blue 600
   --flavor-pale-accent: #93c5fd; // blue 300
   --box-shadow-color: rgb(0 0 0 / 12%);
+
+  &.dark {
+    @extend %color-vars-dark;
+  }
 }

package/src/scss/_default.scss

@@ -5,6 +5,7 @@
     box-sizing: border-box;
     -webkit-font-smoothing: antialiased;
     font-weight: 400;
+    color: var(--text-primary-default-color);
   }
 
   .#{variables.$material} {

package/src/scss/_firstUpper.scss

@@ -0,0 +1,5 @@
+@use "sass:string";
+
+@function firstUpper($value) {
+  @return #{string.to-upper-case(string.slice($value, 1, 1))}#{string.slice($value, 2)};
+}

package/src/scss/_flavorMixin.scss

@@ -1,19 +1,39 @@
 @use 'sass:selector';
 
 @mixin flavorSelection($varName) {
-  &:global(.flavor-accent) {
+  &:global(.flavorAccent) {
     #{$varName}: var(--flavor-accent);
   }
 
-  &:global(.flavor-basic) {
+  &:global(.flavorBasic) {
     #{$varName}: var(--flavor-basic);
   }
 
-  &:global(.flavor-destructive) {
+  &:global(.flavorDestructive) {
     #{$varName}: var(--flavor-destructive);
   }
 
-  &:global(.flavor-constructive) {
+  &:global(.flavorConstructive) {
     #{$varName}: var(--flavor-constructive);
   }
 }
+
+@mixin flavorWithTextSelection($varName) {
+  @include flavorSelection($varName);
+
+  &:global(.textPrimary) {
+    #{$varName}: var(--text-primary);
+  }
+
+  &:global(.textSecondary) {
+    #{$varName}: var(--text-secondary);
+  }
+
+  &:global(.textTertiary) {
+    #{$varName}: var(--text-tertiary);
+  }
+
+  &:global(.textInverse) {
+    #{$varName}: var(--text-inverse);
+  }
+}

package/src/scss/_variables.scss

@@ -1,4 +1,4 @@
-$grid-breakpoints: (
+$gridBreakpoints: (
         xxs: 0,
         xs: 320px,
         sm: 576px,
@@ -7,7 +7,7 @@ $grid-breakpoints: (
         xl: 1200px,
         xxl: 1400px
 );
-$container-max-widths: (
+$containerMaxWidths: (
         sm: 540px,
         md: 720px,
         lg: 960px,

package/src/scss/breakpoints.scss

@@ -1,15 +1,16 @@
 @use "sass:map";
 @use "sass:list";
 @use "variables";
+@use "./firstUpper" as *;
 
-@function breakpoint-min($name, $breakpoints: variables.$grid-breakpoints) {
+@function breakpointMin($name, $breakpoints: variables.$gridBreakpoints) {
   $min: map.get($breakpoints, $name);
 
   @return if($min != 0, $min, null);
 }
 
-@mixin media-breakpoint-up($name, $breakpoints: variables.$grid-breakpoints) {
-  $min: breakpoint-min($name, $breakpoints);
+@mixin mediaBreakpointUp($name, $breakpoints: variables.$gridBreakpoints) {
+  $min: breakpointMin($name, $breakpoints);
 
   @if $min {
     @media (min-width: $min) {
@@ -20,34 +21,34 @@
   }
 }
 
-@function breakpoint-infix($name, $breakpoints: variables.$grid-breakpoints) {
-  @return if(breakpoint-min($name, $breakpoints) == null, "", "-#{$name}");
+@function breakpointInfix($name, $breakpoints: variables.$gridBreakpoints) {
+  @return if(breakpointMin($name, $breakpoints) == null, "", "#{firstUpper($name)}");
 }
 
-@function breakpoint-next($name, $breakpoints: variables.$grid-breakpoints, $breakpoint-names: map.keys($breakpoints)) {
-  $n: list.index($breakpoint-names, $name);
+@function breakpointNext($name, $breakpoints: variables.$gridBreakpoints, $breakpointNames: map.keys($breakpoints)) {
+  $n: list.index($breakpointNames, $name);
 
   @if not $n {
     @error "breakpoint `#{$name}` not found in `#{$breakpoints}`";
   }
 
-  @return if($n < list.length($breakpoint-names), list.nth($breakpoint-names, $n + 1), null);
+  @return if($n < list.length($breakpointNames), list.nth($breakpointNames, $n + 1), null);
 }
 
-@function breakpoint-min($name, $breakpoints: variables.$grid-breakpoints) {
+@function breakpointMin($name, $breakpoints: variables.$gridBreakpoints) {
   $min: map.get($breakpoints, $name);
 
   @return if($min != 0, $min, null);
 }
 
-@function breakpoint-max($name, $breakpoints: variables.$grid-breakpoints) {
+@function breakpointMax($name, $breakpoints: variables.$gridBreakpoints) {
   $max: map.get($breakpoints, $name);
 
   @return if($max and $max > 0, $max - .02, null);
 }
 
-@mixin media-breakpoint-down($name, $breakpoints: variables.$grid-breakpoints) {
-  $max: breakpoint-max($name, $breakpoints);
+@mixin mediaBreakpointDown($name, $breakpoints: variables.$gridBreakpoints) {
+  $max: breakpointMax($name, $breakpoints);
 
   @if $max {
     @media (max-width: $max) {
@@ -58,21 +59,21 @@
   }
 }
 
-@mixin media-breakpoint-only($name, $breakpoints: variables.$grid-breakpoints) {
-  $min: breakpoint-min($name, $breakpoints);
-  $next: breakpoint-next($name, $breakpoints);
-  $max: breakpoint-max($next, $breakpoints);
+@mixin mediaBreakpointOnly($name, $breakpoints: variables.$gridBreakpoints) {
+  $min: breakpointMin($name, $breakpoints);
+  $next: breakpointNext($name, $breakpoints);
+  $max: breakpointMax($next, $breakpoints);
 
   @if $min != null and $max != null {
     @media (min-width: $min) and (max-width: $max) {
       @content;
     }
   } @else if $max == null {
-    @include media-breakpoint-up($name, $breakpoints) {
+    @include mediaBreakpointUp($name, $breakpoints) {
       @content;
     }
   } @else if $min == null {
-    @include media-breakpoint-down($next, $breakpoints) {
+    @include mediaBreakpointDown($next, $breakpoints) {
       @content;
     }
   }

package/tsconfig.json

@@ -13,6 +13,7 @@
   "include": [
     "src/**/*.tsx",
     "src/**/*.ts",
+    "src/**/*.d.ts",
     ".storybook/**/*.ts"
   ]
 }