@webpros/mui-theme 0.3.1 → 0.3.2

package/dist/package.json

@@ -1,7 +1,7 @@
 {
     "name": "@webpros/mui-theme",
     "description": "MUI v7 theme for WebPros products",
-    "version": "0.3.1",
+    "version": "0.3.2",
     "license": "MIT",
     "repository": {
         "type": "git",

package/dist/src/tokens/colors/Dark.js

@@ -298,6 +298,8 @@ export const DarkStateLayers = {
             opacity12: 'rgba(140, 49, 72, 0.12)',
             opacity16: 'rgba(140, 49, 72, 0.16)',
             opacity10: 'rgba(140, 49, 72, 0.1)',
+            opacity56: 'rgba(140, 49, 72, 0.56)',
+            opacity78: 'rgba(140, 49, 72, 0.78)',
         },
         onErrorContainer: {
             opacity08: 'rgba(255, 242, 245, 0.08)',
@@ -399,6 +401,8 @@ export const DarkStateLayers = {
             opacity08: 'rgba(123, 60, 15, 0.08)',
             opacity12: 'rgba(123, 60, 15, 0.12)',
             opacity16: 'rgba(123, 60, 15, 0.16)',
+            opacity56: 'rgba(123, 60, 15, 0.56)',
+            opacity78: 'rgba(123, 60, 15, 0.78)',
         },
         successContainer: {
             opacity08: 'rgba(18, 95, 22, 0.08)',
@@ -470,6 +474,7 @@ export const DarkStateLayers = {
             opacity16: 'rgba(159, 162, 179, 0.16)',
             opacity38: 'rgba(159, 162, 179, 0.38)',
             opacity10: 'rgba(159, 162, 179, 0.1)',
+            opacity78: 'rgba(159, 162, 179, 0.78)',
         },
         shadow: {
             opacity08: 'rgba(0, 0, 0, 0.08)',
@@ -1024,6 +1029,8 @@ export const DarkStateLayersGenerated = {
     'stateLayers.status.errorContainer.opacity12': { r: 140, g: 49, b: 72, a: 0.12 },
     'stateLayers.status.errorContainer.opacity16': { r: 140, g: 49, b: 72, a: 0.16 },
     'stateLayers.status.errorContainer.opacity10': { r: 140, g: 49, b: 72, a: 0.1 },
+    'stateLayers.status.errorContainer.opacity56': { r: 140, g: 49, b: 72, a: 0.56 },
+    'stateLayers.status.errorContainer.opacity78': { r: 140, g: 49, b: 72, a: 0.78 },
     'stateLayers.status.onErrorContainer.opacity08': { r: 255, g: 242, b: 245, a: 0.08 },
     'stateLayers.status.onErrorContainer.opacity12': { r: 255, g: 242, b: 245, a: 0.12 },
     'stateLayers.status.onErrorContainer.opacity16': { r: 255, g: 242, b: 245, a: 0.16 },
@@ -1097,6 +1104,8 @@ export const DarkStateLayersGenerated = {
     'stateLayers.status.warningContainer.opacity08': { r: 123, g: 60, b: 15, a: 0.08 },
     'stateLayers.status.warningContainer.opacity12': { r: 123, g: 60, b: 15, a: 0.12 },
     'stateLayers.status.warningContainer.opacity16': { r: 123, g: 60, b: 15, a: 0.16 },
+    'stateLayers.status.warningContainer.opacity56': { r: 123, g: 60, b: 15, a: 0.56 },
+    'stateLayers.status.warningContainer.opacity78': { r: 123, g: 60, b: 15, a: 0.78 },
     'stateLayers.status.successContainer.opacity08': { r: 18, g: 95, b: 22, a: 0.08 },
     'stateLayers.status.successContainer.opacity12': { r: 18, g: 95, b: 22, a: 0.12 },
     'stateLayers.status.successContainer.opacity16': { r: 18, g: 95, b: 22, a: 0.16 },
@@ -1146,6 +1155,7 @@ export const DarkStateLayersGenerated = {
     'stateLayers.surfaces.onSurfaceVariant.opacity16': { r: 159, g: 162, b: 179, a: 0.16 },
     'stateLayers.surfaces.onSurfaceVariant.opacity38': { r: 159, g: 162, b: 179, a: 0.38 },
     'stateLayers.surfaces.onSurfaceVariant.opacity10': { r: 159, g: 162, b: 179, a: 0.1 },
+    'stateLayers.surfaces.onSurfaceVariant.opacity78': { r: 159, g: 162, b: 179, a: 0.78 },
     'stateLayers.surfaces.shadow.opacity08': { r: 0, g: 0, b: 0, a: 0.08 },
     'stateLayers.surfaces.shadow.opacity12': { r: 0, g: 0, b: 0, a: 0.12 },
     'stateLayers.surfaces.shadow.opacity16': { r: 0, g: 0, b: 0, a: 0.16 },

package/dist/src/tokens/colors/Light.js

@@ -4,7 +4,7 @@ export const LightSchemes = {
     base: {
         primary: 'rgba(95, 77, 152, 1)',
         onPrimary: 'rgba(255, 255, 255, 1)',
-        primaryContainer: 'rgba(237, 235, 255, 1)',
+        primaryContainer: 'rgba(227, 224, 252, 1)',
         onPrimaryContainer: 'rgba(84, 66, 138, 1)',
         secondary: 'rgba(95, 102, 144, 1)',
         onSecondary: 'rgba(255, 255, 255, 1)',
@@ -14,7 +14,7 @@ export const LightSchemes = {
         onTertiary: 'rgba(255, 255, 255, 1)',
         tertiaryContainer: 'rgba(218, 233, 240, 1)',
         onTertiaryContainer: 'rgba(17, 38, 47, 1)',
-        primaryVariant: 'rgba(120, 100, 183, 1)',
+        primaryVariant: 'rgba(115, 95, 173, 1)',
         onPrimaryVariant: 'rgba(230, 228, 235, 1)',
         onPrimaryBase: 'rgba(255, 255, 255, 1)',
         onPrimaryBaseVariant: 'rgba(230, 228, 235, 1)',
@@ -23,7 +23,7 @@ export const LightSchemes = {
         surfaceTint: 'rgba(86, 77, 130, 1)',
         background: 'rgba(233, 235, 246, 1)',
         onBackground: 'rgba(27, 28, 33, 1)',
-        surface: 'rgba(233, 233, 247, 1)',
+        surface: 'rgba(235, 235, 244, 1)',
         onSurface: 'rgba(27, 28, 33, 1)',
         surfaceVariant: 'rgba(247, 247, 252, 1)',
         onSurfaceVariant: 'rgba(83, 86, 111, 1)',
@@ -128,10 +128,10 @@ export const LightStateLayers = {
             opacity28: 'rgba(255, 255, 255, 0.28)',
         },
         primaryContainer: {
-            opacity08: 'rgba(237, 235, 255, 0.08)',
-            opacity12: 'rgba(237, 235, 255, 0.12)',
-            opacity16: 'rgba(237, 235, 255, 0.16)',
-            opacity10: 'rgba(237, 235, 255, 0.1)',
+            opacity08: 'rgba(227, 224, 252, 0.08)',
+            opacity12: 'rgba(227, 224, 252, 0.12)',
+            opacity16: 'rgba(227, 224, 252, 0.16)',
+            opacity10: 'rgba(227, 224, 252, 0.1)',
         },
         onPrimaryContainer: {
             opacity08: 'rgba(84, 66, 138, 0.08)',
@@ -298,6 +298,8 @@ export const LightStateLayers = {
             opacity12: 'rgba(255, 233, 230, 0.12)',
             opacity16: 'rgba(255, 233, 230, 0.16)',
             opacity10: 'rgba(255, 233, 230, 0.1)',
+            opacity56: 'rgba(255, 233, 230, 0.56)',
+            opacity78: 'rgba(255, 233, 230, 0.78)',
         },
         onErrorContainer: {
             opacity08: 'rgba(155, 30, 30, 0.08)',
@@ -399,6 +401,8 @@ export const LightStateLayers = {
             opacity08: 'rgba(255, 239, 210, 0.08)',
             opacity12: 'rgba(255, 239, 210, 0.12)',
             opacity16: 'rgba(255, 239, 210, 0.16)',
+            opacity56: 'rgba(255, 239, 210, 0.56)',
+            opacity78: 'rgba(255, 239, 210, 0.78)',
         },
         successContainer: {
             opacity08: 'rgba(225, 245, 227, 0.08)',
@@ -470,6 +474,7 @@ export const LightStateLayers = {
             opacity16: 'rgba(83, 86, 111, 0.07)',
             opacity38: 'rgba(83, 86, 111, 0.38)',
             opacity10: 'rgba(83, 86, 111, 0.1)',
+            opacity78: 'rgba(83, 86, 111, 0.78)',
         },
         shadow: {
             opacity08: 'rgba(0, 0, 0, 0.08)',
@@ -799,7 +804,7 @@ export const LightInverseStateLayers = {
 export const LightSchemesGenerated = {
     'schemes.base.primary': { r: 95, g: 77, b: 152, a: 1 },
     'schemes.base.onPrimary': { r: 255, g: 255, b: 255, a: 1 },
-    'schemes.base.primaryContainer': { r: 237, g: 235, b: 255, a: 1 },
+    'schemes.base.primaryContainer': { r: 227, g: 224, b: 252, a: 1 },
     'schemes.base.onPrimaryContainer': { r: 84, g: 66, b: 138, a: 1 },
     'schemes.base.secondary': { r: 95, g: 102, b: 144, a: 1 },
     'schemes.base.onSecondary': { r: 255, g: 255, b: 255, a: 1 },
@@ -809,14 +814,14 @@ export const LightSchemesGenerated = {
     'schemes.base.onTertiary': { r: 255, g: 255, b: 255, a: 1 },
     'schemes.base.tertiaryContainer': { r: 218, g: 233, b: 240, a: 1 },
     'schemes.base.onTertiaryContainer': { r: 17, g: 38, b: 47, a: 1 },
-    'schemes.base.primaryVariant': { r: 120, g: 100, b: 183, a: 1 },
+    'schemes.base.primaryVariant': { r: 115, g: 95, b: 173, a: 1 },
     'schemes.base.onPrimaryVariant': { r: 230, g: 228, b: 235, a: 1 },
     'schemes.base.onPrimaryBase': { r: 255, g: 255, b: 255, a: 1 },
     'schemes.base.onPrimaryBaseVariant': { r: 230, g: 228, b: 235, a: 1 },
     'schemes.surfaces.surfaceTint': { r: 86, g: 77, b: 130, a: 1 },
     'schemes.surfaces.background': { r: 233, g: 235, b: 246, a: 1 },
     'schemes.surfaces.onBackground': { r: 27, g: 28, b: 33, a: 1 },
-    'schemes.surfaces.surface': { r: 233, g: 233, b: 247, a: 1 },
+    'schemes.surfaces.surface': { r: 235, g: 235, b: 244, a: 1 },
     'schemes.surfaces.onSurface': { r: 27, g: 28, b: 33, a: 1 },
     'schemes.surfaces.surfaceVariant': { r: 247, g: 247, b: 252, a: 1 },
     'schemes.surfaces.onSurfaceVariant': { r: 83, g: 86, b: 111, a: 1 },
@@ -906,10 +911,10 @@ export const LightStateLayersGenerated = {
     'stateLayers.base.onPrimary.opacity10': { r: 255, g: 255, b: 255, a: 0.1 },
     'stateLayers.base.onPrimary.opacity38': { r: 255, g: 255, b: 255, a: 0.38 },
     'stateLayers.base.onPrimary.opacity28': { r: 255, g: 255, b: 255, a: 0.28 },
-    'stateLayers.base.primaryContainer.opacity08': { r: 237, g: 235, b: 255, a: 0.08 },
-    'stateLayers.base.primaryContainer.opacity12': { r: 237, g: 235, b: 255, a: 0.12 },
-    'stateLayers.base.primaryContainer.opacity16': { r: 237, g: 235, b: 255, a: 0.16 },
-    'stateLayers.base.primaryContainer.opacity10': { r: 237, g: 235, b: 255, a: 0.1 },
+    'stateLayers.base.primaryContainer.opacity08': { r: 227, g: 224, b: 252, a: 0.08 },
+    'stateLayers.base.primaryContainer.opacity12': { r: 227, g: 224, b: 252, a: 0.12 },
+    'stateLayers.base.primaryContainer.opacity16': { r: 227, g: 224, b: 252, a: 0.16 },
+    'stateLayers.base.primaryContainer.opacity10': { r: 227, g: 224, b: 252, a: 0.1 },
     'stateLayers.base.onPrimaryContainer.opacity08': { r: 84, g: 66, b: 138, a: 0.08 },
     'stateLayers.base.onPrimaryContainer.opacity12': { r: 84, g: 66, b: 138, a: 0.12 },
     'stateLayers.base.onPrimaryContainer.opacity16': { r: 84, g: 66, b: 138, a: 0.16 },
@@ -1024,6 +1029,8 @@ export const LightStateLayersGenerated = {
     'stateLayers.status.errorContainer.opacity12': { r: 255, g: 233, b: 230, a: 0.12 },
     'stateLayers.status.errorContainer.opacity16': { r: 255, g: 233, b: 230, a: 0.16 },
     'stateLayers.status.errorContainer.opacity10': { r: 255, g: 233, b: 230, a: 0.1 },
+    'stateLayers.status.errorContainer.opacity56': { r: 255, g: 233, b: 230, a: 0.56 },
+    'stateLayers.status.errorContainer.opacity78': { r: 255, g: 233, b: 230, a: 0.78 },
     'stateLayers.status.onErrorContainer.opacity08': { r: 155, g: 30, b: 30, a: 0.08 },
     'stateLayers.status.onErrorContainer.opacity12': { r: 155, g: 30, b: 30, a: 0.12 },
     'stateLayers.status.onErrorContainer.opacity16': { r: 155, g: 30, b: 30, a: 0.16 },
@@ -1097,6 +1104,8 @@ export const LightStateLayersGenerated = {
     'stateLayers.status.warningContainer.opacity08': { r: 255, g: 239, b: 210, a: 0.08 },
     'stateLayers.status.warningContainer.opacity12': { r: 255, g: 239, b: 210, a: 0.12 },
     'stateLayers.status.warningContainer.opacity16': { r: 255, g: 239, b: 210, a: 0.16 },
+    'stateLayers.status.warningContainer.opacity56': { r: 255, g: 239, b: 210, a: 0.56 },
+    'stateLayers.status.warningContainer.opacity78': { r: 255, g: 239, b: 210, a: 0.78 },
     'stateLayers.status.successContainer.opacity08': { r: 225, g: 245, b: 227, a: 0.08 },
     'stateLayers.status.successContainer.opacity12': { r: 225, g: 245, b: 227, a: 0.12 },
     'stateLayers.status.successContainer.opacity16': { r: 225, g: 245, b: 227, a: 0.16 },
@@ -1146,6 +1155,7 @@ export const LightStateLayersGenerated = {
     'stateLayers.surfaces.onSurfaceVariant.opacity16': { r: 83, g: 86, b: 111, a: 0.07 },
     'stateLayers.surfaces.onSurfaceVariant.opacity38': { r: 83, g: 86, b: 111, a: 0.38 },
     'stateLayers.surfaces.onSurfaceVariant.opacity10': { r: 83, g: 86, b: 111, a: 0.1 },
+    'stateLayers.surfaces.onSurfaceVariant.opacity78': { r: 83, g: 86, b: 111, a: 0.78 },
     'stateLayers.surfaces.shadow.opacity08': { r: 0, g: 0, b: 0, a: 0.08 },
     'stateLayers.surfaces.shadow.opacity12': { r: 0, g: 0, b: 0, a: 0.12 },
     'stateLayers.surfaces.shadow.opacity16': { r: 0, g: 0, b: 0, a: 0.16 },

package/dist/src/tokens/colors/stateLayers.d.ts

@@ -189,6 +189,8 @@ export type StateLayers = {
             opacity12: string;
             opacity16: string;
             opacity10: string;
+            opacity56: string;
+            opacity78: string;
         };
         onErrorContainer: {
             opacity08: string;
@@ -290,6 +292,8 @@ export type StateLayers = {
             opacity08: string;
             opacity12: string;
             opacity16: string;
+            opacity56: string;
+            opacity78: string;
         };
         successContainer: {
             opacity08: string;
@@ -361,6 +365,7 @@ export type StateLayers = {
             opacity16: string;
             opacity38: string;
             opacity10: string;
+            opacity78: string;
         };
         shadow: {
             opacity08: string;

package/dist/src/tokens/typography/typography.js

@@ -57,8 +57,8 @@ export const typographyVariants = {
     },
     DisplaySmall: {
         fontFamily: 'Roboto',
-        fontSize: '24px',
-        lineHeight: '32px',
+        fontSize: '26px',
+        lineHeight: '44px',
         letterSpacing: '0px',
         fontWeight: 400,
     },
@@ -71,8 +71,8 @@ export const typographyVariants = {
     },
     HeadlineLarge: {
         fontFamily: 'Roboto',
-        fontSize: '20px',
-        lineHeight: '28px',
+        fontSize: '19px',
+        lineHeight: '32px',
         letterSpacing: '0px',
         fontWeight: 400,
     },

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@webpros/mui-theme",
   "description": "MUI v7 theme for WebPros products",
-  "version": "0.3.1",
+  "version": "0.3.2",
   "license": "MIT",
   "repository": {
     "type": "git",