@smwb/ui-styles 1.0.0

package/less/site/globals/site.variables.less

@@ -0,0 +1,25 @@
+//=====================================================================
+//  Site variables — client override hook
+//---------------------------------------------------------------------
+//  Imported before default.variables.less, so anything set here wins
+//  over the library defaults (Less is last-declaration-wins at root
+//  scope). This is the place for a consuming app to retune the design
+//  system. Three layers are available, cheapest first:
+//
+//  1. Foundation primitives (see styles/less/foundation/*):
+//       @smui-spacing-unit: 8px;        // rescale every gap/padding
+//       @smui-space-lg:     12px;       // retune one spacing step
+//       @smui-radius-md:    2px;        // sharper corners library-wide
+//       @smui-elevation-2:  none;       // flatten one elevation level
+//       @primaryColor:      @md-teal-500;  // pull from the MD palette
+//
+//  2. Semantic tokens (see default/globals/default.variables.less):
+//       @buttonBorderRadius: @smui-radius-pill;
+//       @tooltipBg:          @md-blueGrey-800;
+//
+//  3. Runtime: every token above is also mirrored to a --smui-*
+//     custom property, so themes can be switched live in the browser
+//     without recompiling Less.
+//
+//  Leave empty to use the stock theme.
+//=====================================================================

package/less/templates/adminDashboard/adminDashboard.less

@@ -0,0 +1,27 @@
+.smwb-admin-dashboard {
+  height: 100%;
+
+  &__bottom-bar {
+    display: none;
+  }
+}
+
+.smui-media-down(md; {
+  .smwb-admin-dashboard {
+    .smwb-app-layout__sidebar {
+      display: none;
+    }
+
+    &__bottom-bar {
+      display: block;
+    }
+
+    .smwb-app-layout__content {
+      padding-bottom: calc(56px + env(safe-area-inset-bottom, 0px));
+    }
+
+    .smwb-app-layout__footer {
+      display: none;
+    }
+  }
+});

package/less/templates/summer-ui/auth.less

@@ -0,0 +1,30 @@
+.auth-form {
+  display: flex;
+  flex-direction: column;
+  row-gap: 2px;
+}
+
+.signin-password, .verification-code-input {
+  display: flex;
+  flex-direction: column;
+}
+
+.signin-button {
+  margin-top: 24px;
+}
+
+.auth-link {
+  font-size: 14px;
+  color: var(--smui-primaryColor);
+}
+
+.signin-forgot-link, .verification-resend-link {
+  text-align: right;
+  align-self: flex-end;
+}
+
+.verification-resend-time-text {
+  font-size: 14px;
+  text-align: right;
+  color: var(--smui-primaryTextColor);
+}

package/less/templates/summer-ui/authCard.less

@@ -0,0 +1,33 @@
+.auth-card {
+  width: 100%;
+  padding: 50px 16px;
+
+  @media (width >= 420px) {
+    max-width: 380px;
+    background-color: var(--smui-surfaceBackground);
+    border-radius: 16px;
+    padding: 50px 32px;
+  }
+
+  &__header {
+    font-size: 24px;
+    color: var(--smui-primaryTextColor);
+    font-weight: 700;
+    text-align: center;
+  }
+
+  &__description {
+    margin-top: 16px;
+    font-size: 16px;
+    color: var(--smui-primaryTextColor);
+    text-align: center;
+  }
+
+  &__body {
+    margin-top: 32px;
+  }
+
+  &__footer {
+    margin-top: 16px;
+  }
+}

package/less/templates/summer-ui/authLayout.less

@@ -0,0 +1,11 @@
+.auth-layout {
+  display: flex;
+  align-items: center;
+  width: 100%;
+  min-height: 100vh;
+  background-color: var(--smui-pageBackground);
+
+  @media (width >= 420px) {
+    justify-content: center;
+  }
+}

package/less/templates.less

@@ -0,0 +1,4 @@
+@import 'templates/summer-ui/auth.less';
+@import 'templates/summer-ui/authLayout.less';
+@import 'templates/summer-ui/authCard.less';
+@import 'templates/adminDashboard/adminDashboard.less';

package/less/theme.less

@@ -0,0 +1,30 @@
+/*------------------
+       Theme
+-------------------*/
+@theme: "";
+@themesFolder: "";
+
+/*--------------------
+    Site variables
+---------------------*/
+/* Site variables */
+@import "./site/globals/site.variables.less";
+
+/* Default variables */
+@import "./default/globals/default.variables.less";
+
+/* dark/light variables */
+@import "./variables.less";
+
+/* Theme variables */
+@import (optional) "@{themesFolder}/@{theme}/variables.less";
+
+/*--------------------
+  Client overrides
+---------------------*/
+// Imported LAST on purpose. Less is last-declaration-wins at root
+// scope, so a consumer's theme.config must come after
+// default.variables.less / variables.less to actually override the
+// defaults. Component CSS reads these via lazy evaluation, so the
+// final assignment wins even though rules are emitted earlier.
+@import (optional) "theme.config";

package/less/themes/material/variables.less

@@ -0,0 +1,370 @@
+/*-------------------
+       Fonts
+--------------------*/
+@import (css) url("https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700&display=swap");
+
+@fontSize: 16px;
+@fontName: "Roboto";
+@fontFamily: @fontName, sans-serif;
+
+// Breakpoints: see foundation/breakpoints.less (single source)
+
+/*-------------------
+    Common colors
+--------------------*/
+@pageBg: #fff;
+@primaryColor: #6200ee;
+@errorColor: red;
+@successColor: #36913b;
+@warningColor: #ed6c02;
+@infoColor: #0288d1;
+@outlineColor: @primaryColor;
+@onPrimaryColor: #fff;
+@primaryContainer: @primaryColor;
+@onPrimaryContainer: @onPrimaryColor;
+@onPrimaryContainerHover: lighten(@primaryContainer, 6%);
+@onPrimaryContainerActive: lighten(@primaryContainer, 10%);
+
+@surfaceVariant: #fff;
+@surfaceBackground: #fff;
+@onSurfaceColor: @primaryTextColor;
+@onSurfaceVariant: @surfaceVariantDark;
+@onSurfaceHover: rgba(#000, 0.08);
+@onSurfaceActive: rgba(#000, 0.12);
+@disabledTextColor: rgba(#000, 0.38);
+@disabledBgColor: rgba(#000, 0.12);
+
+@primaryTextColor: #333;
+@scrollThumbColor: @disabledTextColor;
+
+@primaryColorHover: rgba(@primaryColor, 0.08);
+@primaryColorActive: rgba(@primaryColor, 0.12);
+@primaryColorFocus: rgba(@primaryColor, 0.14);
+
+/*-------------------
+    Border-radius
+--------------------*/
+@circleBorderRadius: 50%;
+
+/*-------------------
+     App bar
+--------------------*/
+@appBarHeight: 56px;
+@appBarBg: @primaryColor;
+@appBarContentColor: @onPrimaryColor;
+
+/*-------------------
+     Checkbox
+--------------------*/
+@checkboxBorderRadius: 2px;
+@checkboxBorderColor: @disabledTextColor;
+@checkboxDisabledColor: @disabledTextColor;
+@checkboxCheckedBg: @primaryColor;
+
+/*-------------------
+     Radio button
+--------------------*/
+@radioRippleColor: rgba(@primaryColor, 0.3);
+
+/*-------------------
+     Toggle
+--------------------*/
+@toggleTrackColor: @disabledTextColor;
+@toggleDefaultThumbColor: #fff;
+@toggleTrackWidth: 36px;
+@toggleThumbActiveColor: @primaryColor;
+@toggleTrackActiveColor: rgba(@primaryColor, 0.4);
+@toggleTrackHeight: 15px;
+@toggleThumbHeight: 20px;
+@toggleThumbUncheckedHeight: 20px;
+@toggleSelectedLeft: 18px;
+@toggleUnselectedLeft: -3px;
+@toggleBorderColor: none;
+@toggleWithBorder: false;
+
+/*-------------------
+     Text Field
+--------------------*/
+@textFieldBorderRadius: 4px;
+
+@textFieldLabelColor: rgba(0, 0, 0, 0.6);
+@textFieldLabelDisabledColor: @disabledTextColor;
+
+@textFieldInputColor: rgba(0, 0, 0, 0.87);
+@textFieldInputDisabledColor: @disabledTextColor;
+
+@textFieldNotchedColor: rgba(0, 0, 0, 0.38);
+@textFieldNotchedHoverColor: #000;
+@textFieldNotchedDisabledColor: rgba(0, 0, 0, 0.26);
+
+@textFieldHelperTextColor: rgba(0, 0, 0, 0.6);
+@textFieldHelperTextDisabledColor: @disabledTextColor;
+
+@textFieldFilledBorderColor: rgba(0, 0, 0, 0.42);
+@textFieldFilledHoverBorderColor: #000;
+@textFieldFilledDisabledBorderColor: rgba(0, 0, 0, 0.26);
+@textFieldFilledBgColor: rgba(0, 0, 0, 0.05);
+@textFieldFilledHoverBgColor: rgba(0, 0, 0, 0.07);
+@textFieldFilledFocusedBgColor: rgba(0, 0, 0, 0.12);
+@textFieldFilledDisabledBgColor: rgba(0, 0, 0, 0.045);
+
+/*-------------------
+    Select Field
+--------------------*/
+@selectFieldSearchMenuColor: @textFieldInputColor;
+
+/*-------------------
+    Button
+--------------------*/
+@buttonBorderRadius: 4px;
+@smallButtonFontSize: 13px;
+@mediumButtonFontSize: 14px;
+@largeButtonFontSize: 15px;
+@buttonDisabledBg: @disabledBgColor;
+
+@buttonContainedHoverBg: lighten(@primaryColor, 5%);
+@buttonContainedActiveBg: lighten(@primaryColor, 14%);
+@buttonContainedFocusBg: lighten(@primaryColor, 10%);
+
+@buttonOutlinedHoverBg: rgba(@primaryColor, 0.08);
+@buttonOutlinedActiveBg: rgba(@primaryColor, 0.14);
+@buttonOutlinedFocusBg: rgba(@primaryColor, 0.12);
+
+@fabBorderRadius: 50%;
+@fabFocusBg: @onPrimaryContainerActive;
+@fabActiveBg: @onPrimaryContainerActive;
+@fabHoverBg: @onPrimaryContainerHover;
+
+/*-------------------
+    Modal
+--------------------*/
+@modalOverlayBg: rgba(0, 0, 0, 0.5);
+@modalBorderRadius: 4px;
+
+/*-------------------
+    Snackbar
+--------------------*/
+@snackbarDarkBg: #313033;
+@snackbarLightBg: #fefefe;
+
+/*-------------------
+    Chips
+--------------------*/
+@chipsBg: rgba(#000, 0.06);
+@chipsHoverBg: @onSurfaceHover;
+@chipsActiveBg: @onSurfaceActive;
+@chipsOutlinedBorder: @chipsIconColor;
+@chipsIconColor: rgba(@primaryTextColor, 0.5);
+@chipsIconColorHover: rgba(@primaryTextColor, 0.8);
+@chipsBorderRadius: 24px;
+@chipsSelectedBg: @onSurfaceActive;
+@chipsDefaultShadow: none;
+
+/*-------------------
+    Menu
+--------------------*/
+@menuBorderRadius: 4px;
+@menuBgColor: #fff;
+@menuBoxShadow: 0 5px 5px -3px rgb(0 0 0 / 20%), 0 8px 10px 1px rgb(0 0 0 / 14%), 0 3px 14px 2px rgb(0 0 0 / 12%);
+@menuTextColor: @onSurfaceColor;
+@menuDisabledTextColor: @disabledTextColor;
+@menuOpacityHover: 0.08;
+@menuOpacityActive: 0.12;
+@menuOpacitySelected: 0.08;
+@menuDividerColor: rgba(0, 0, 0, 0.12);
+
+/*-------------------
+    Tabs
+--------------------*/
+@tabIconColor: rgba(@primaryTextColor, 0.7);
+@tabColorDefault: rgba(@primaryTextColor, 0.7);
+@tabColorActive: @primaryColor;
+@tabBgColor: @primaryColor;
+@tabOpacityHover: 0.04;
+@tabOpacityFocus: 0.12;
+
+/*-------------------
+    Slider
+--------------------*/
+@sliderColor: @primaryColor;
+@sliderHoverColor: rgba(@primaryColor, 0.05);
+@sliderActiveColor: rgba(@primaryColor, 0.15);
+@sliderDisabledColor: #9e9e9e;
+@sliderLabelRadius: 4px;
+
+/*-------------------
+    Progress indicator
+--------------------*/
+@indicatorTrackBg: rgba(@primaryColor, 0.1);
+
+/*-------------------
+     Sidebar
+--------------------*/
+@navItemActiveBg: transparent;
+
+/*-------------------
+    Tooltip
+--------------------*/
+@tooltipBg: #6d6d6d;
+@tooltipTextColor: @primaryTextColorDark;
+
+/*-------------------
+     Card
+--------------------*/
+@cardBorderRadius: 12px;
+
+/*-------------------
+     Sheet
+--------------------*/
+@sheetBorderRadius: 0px;
+
+/*-------------------
+    Message
+--------------------*/
+@messageBgLight: #e6e1e5;
+@messageBorderRadius: 8px;
+
+/*===================================================== DARK THEME =================================================*/
+/*-------------------
+    Common
+--------------------*/
+@pageBgDark: #121212;
+@surfaceBackgroundDark: #292929;
+@primaryTextColorDark: #fff;
+@grayColor: rgba(#fff, 0.3);
+@scrollThumbColorDark: @grayColor;
+@primaryColorDark: #bb86fc;
+@onPrimaryColorDark: #000;
+@outlineColorDark: #938f99;
+@primaryContainerDark: @primaryColorDark;
+@onPrimaryContainerDark: @onPrimaryColorDark;
+@onPrimaryContainerHoverDark: lighten(@primaryColorDark, 6%);
+@onPrimaryContainerActiveDark: lighten(@primaryColorDark, 10%);
+
+@surfaceVariantDark: #49454f;
+@onSurfaceColorDark: #fff;
+@onSurfaceVariantDark: #fff;
+@onSurfaceHoverDark: rgba(@onSurfaceColorDark, 0.08);
+@onSurfaceActiveDark: rgba(@onSurfaceColorDark, 0.12);
+@disabledBgColorDark: rgba(@onSurfaceColorDark, 0.12);
+@disabledTextColorDark: rgba(@onSurfaceColorDark, 0.38);
+
+@primaryColorHoverDark: rgba(@primaryColorDark, 0.04);
+@primaryColorActiveDark: rgba(@primaryColorDark, 0.1);
+@primaryColorFocusDark: rgba(@primaryColorDark, 0.08);
+
+/*-------------------
+    Button
+--------------------*/
+@buttonContainedTextColorDark: #371e73;
+@buttonDisabledBgDark: rgba(@onSurfaceColorDark, 0.12);
+@buttonContainedHoverBgDark: lighten(@primaryColorDark, 4%);
+@buttonContainedActiveBgDark: lighten(@primaryColorDark, 8%);
+@buttonContainedFocusBgDark: lighten(@primaryColorDark, 8%);
+
+@buttonOutlinedHoverBgDark: rgba(@primaryColorDark, 0.08);
+@buttonOutlinedActiveBgDark: rgba(@primaryColorDark, 0.12);
+@buttonOutlinedFocusBgDark: rgba(@primaryColorDark, 0.12);
+
+@fabFocusBgDark: @onPrimaryContainerActiveDark;
+@fabActiveBgDark: @onPrimaryContainerActiveDark;
+@fabHoverBgDark: @onPrimaryContainerHoverDark;
+
+/*-------------------
+    Checkbox
+--------------------*/
+@checkboxBorderColorDark: @outlineColorDark;
+@checkboxDisabledColorDark: @grayColor;
+@checkboxCheckedBgDark: @primaryColorDark;
+
+/*-------------------
+    Toggle
+--------------------*/
+@toggleTrackColorDark: @disabledTextColorDark;
+@toggleThumbActiveColorDark: @primaryColorDark;
+@toggleTrackActiveColorDark: rgba(@primaryColorDark, 0.4);
+@toggleBorderColorDark: @outlineColorDark;
+
+/*-------------------
+     Text Field
+--------------------*/
+@textFieldLabelColorDark: rgba(255, 255, 255, 0.7);
+@textFieldLabelDisabledColorDark: rgba(255, 255, 255, 0.5);
+
+@textFieldInputColorDark: #fff;
+@textFieldInputDisabledColorDark: rgba(255, 255, 255, 0.5);
+
+@textFieldNotchedColorDark: rgba(255, 255, 255, 0.3);
+@textFieldNotchedHoverColorDark: #fff;
+@textFieldNotchedDisabledColorDark: rgba(255, 255, 255, 0.3);
+
+@textFieldHelperTextColorDark: rgba(255, 255, 255, 0.7);
+@textFieldHelperTextDisabledColorDark: rgba(255, 255, 255, 0.5);
+
+@textFieldFilledBorderColorDark: rgba(255, 255, 255, 0.7);
+@textFieldFilledHoverBorderColorDark: #fff;
+@textFieldFilledDisabledBorderColorDark: rgba(255, 255, 255, 0.5);
+@textFieldFilledBgColorDark: rgba(255, 255, 255, 0.09);
+@textFieldFilledHoverBgColorDark: rgba(255, 255, 255, 0.13);
+@textFieldFilledFocusedBgColorDark: rgba(255, 255, 255, 0.13);
+@textFieldFilledDisabledBgColorDark: rgba(255, 255, 255, 0.045);
+
+/*-------------------
+    Select Field
+--------------------*/
+@selectFieldSearchMenuColorDark: @textFieldInputColorDark;
+
+/*-------------------
+    Chips
+--------------------*/
+@chipsBgDark: @onSurfaceHoverDark;
+@chipsHoverBgDark: @onSurfaceActiveDark;
+@chipsActiveBgDark: rgba(@onSurfaceColorDark, 0.16);
+@chipsOutlinedBorderDark: @outlineColorDark;
+@chipsIconColorDark: rgba(@onSurfaceColorDark, 0.6);
+@chipsIconColorHoverDark: @onSurfaceColorDark;
+@chipsSelectedBgDark: @chipsActiveBgDark;
+
+/*-------------------
+    Radio
+--------------------*/
+
+/*-------------------
+    Menu
+--------------------*/
+@menuTextColorDark: @onSurfaceColorDark;
+@menuDividerColorDark: rgba(255, 255, 255, 0.12);
+@menuDisabledTextColorDark: @grayColor;
+
+/*-------------------
+    Tabs
+--------------------*/
+@tabIconColorDark: rgba(@primaryTextColorDark, 0.7);
+@tabColorDefaultDark: rgba(@primaryTextColorDark, 0.7);
+
+/*-------------------
+    Progress indicator
+--------------------*/
+@indicatorTrackBgDark: @surfaceVariantDark;
+
+/*-------------------
+     App bar
+--------------------*/
+@appBarBgDark: @surfaceBackgroundDark;
+@appBarContentColorDark: @onSurfaceVariantDark;
+
+/*-------------------
+     Sidebar
+--------------------*/
+@navItemActiveBgDark: transparent;
+
+/*-------------------
+    Tooltip
+--------------------*/
+@tooltipBgDark: #fff;
+@tooltipTextColorDark: @primaryTextColor;
+
+/*-------------------
+    Message
+--------------------*/
+@messageBgDark: #313033;