matcha-theme 1.0.24 → 1.0.27

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "matcha-theme",
-    "version": "1.0.24",
+    "version": "1.0.27",
     "description": "styles for matcha-design-system",
     "main": "main.scss",
     "scripts": {

package/tokens/_color-tokens.scss

@@ -1136,65 +1136,14 @@ $light-theme-background-palette: (
     card-alpha: #ffffff80,
     card-alpha-inverse: #2b2c2d80,
 
-    // dialog: white,
-    // disabled-button: rgba(black, 0.12),
-    // raised-button: white,
-    // focused-button: rgba(black, 0.12),
-    // selected-button: $color-base-grey-300,
-    // selected-disabled-button: $color-base-grey-400,
-    // disabled-button-toggle: $color-base-grey-200,
-    // unselected-chip: $color-base-grey-300,
-    // disabled-list-option: $color-base-grey-200,
-    // MATCHA-DS
     sidebar: $color-base-blue-grey-50,
     sidebar-hover: white,
     table-row-hover: #788cb412,
-    disabled: $color-base-blue-grey-100,
-
-    error: $color-base-red-900,
-    warning: $color-base-yellow-900,
-    success: $color-base-green-600,
-    info: $color-base-blue-500,
-
-    red: $color-base-red-500,
-    red-alpha: $color-base-red-500-alpha,
-    pink: $color-base-pink-600,
-    pink-alpha: $color-base-pink-600-alpha,
-    purple: $color-base-purple-500,
-    purple-alpha: $color-base-purple-500-alpha,
-    deep-purple: $color-base-deep-purple-500,
-    deep-purple-alpha: $color-base-deep-purple-500-alpha,
-    indigo: $color-base-indigo-500,
-    indigo-alpha: $color-base-indigo-500-alpha,
-    blue: $color-base-blue-500,
-    blue-alpha: $color-base-blue-500-alpha,
-    light-blue: $color-base-light-blue-500,
-    light-blue-alpha: $color-base-light-blue-500-alpha,
-    cyan: $color-base-cyan-500,
-    cyan-alpha: $color-base-cyan-500-alpha,
-    teal: $color-base-teal-500,
-    teal-alpha: $color-base-teal-500-alpha,
-    green: $color-base-green-500,
-    green-alpha: $color-base-green-500-alpha,
-    light-green: $color-base-light-green-700,
-    light-green-alpha: $color-base-light-green-700-alpha,
-    lime: $color-base-lime-500,
-    lime-alpha: $color-base-lime-500-alpha,
-    yellow: $color-base-yellow-500,
-    yellow-alpha: $color-base-yellow-500-alpha,
-    amber: $color-base-amber-500,
-    amber-alpha: $color-base-amber-500-alpha,
-    orange: $color-base-orange-500,
-    orange-alpha: $color-base-orange-500-alpha,
-    deep-orange: $color-base-deep-orange-500,
-    deep-orange-alpha: $color-base-deep-orange-500-alpha
+    disabled: rgba(239, 239, 239, 0.3),
 );
 
 // Background palette for dark themes.
 $dark-theme-background-palette: (
-    // status-bar: black,
-    // app-bar: $color-base-blue-grey-800,
-    // hover: rgba(white, 0.04),
     background: $color-base-dark-grey-700,
     background-inverse: $color-base-blue-grey-50,
     background-alpha: #1b1b1b80,
@@ -1203,78 +1152,30 @@ $dark-theme-background-palette: (
     card-inverse: white,
     card-alpha: #2b2c2d80,
     card-alpha-inverse: #ffffff80,
-
-    // dialog: $color-base-blue-grey-800,
-    // disabled-button: rgba(white, 0.12),
-    // raised-button: $color-base-grey-800,
-    // focused-button: rgba(white, 0.12),
-    // selected-button: $color-base-blue-grey-900,
-    // selected-disabled-button: $color-base-grey-800,
-    // disabled-button-toggle: black,
-    // unselected-chip: $color-base-blue-grey-700,
-    // disabled-list-option: black,
-    // MATCHA-DS
+    
     sidebar: $color-base-dark-grey-700,
     sidebar-hover: $color-base-blue-grey-800,
     table-row-hover: #0000002b,
-    disabled: $color-base-dark-grey-800,
-
-    error: $color-base-red-200,
-    warning: $color-base-yellow-200,
-    success: $color-base-green-200,
-    info: $color-base-blue-200,
-
-    red: $color-base-red-200,
-    red-alpha: $color-base-red-200-alpha,
-    pink: $color-base-pink-200,
-    pink-alpha: $color-base-pink-200-alpha,
-    purple: $color-base-purple-200,
-    purple-alpha: $color-base-purple-200-alpha,
-    deep-purple: $color-base-deep-purple-200,
-    deep-purple-alpha: $color-base-deep-purple-200-alpha,
-    indigo: $color-base-indigo-200,
-    indigo-alpha: $color-base-indigo-200-alpha,
-    blue: $color-base-blue-200,
-    blue-alpha: $color-base-blue-200-alpha,
-    light-blue: $color-base-light-blue-200,
-    light-blue-alpha: $color-base-light-blue-200-alpha,
-    cyan: $color-base-cyan-200,
-    cyan-alpha: $color-base-cyan-200-alpha,
-    teal: $color-base-teal-200,
-    teal-alpha: $color-base-teal-200-alpha,
-    green: $color-base-green-200,
-    green-alpha: $color-base-green-200-alpha,
-    light-green: $color-base-light-green-200,
-    light-green-alpha: $color-base-light-green-200-alpha,
-    lime: $color-base-lime-200,
-    lime-alpha: $color-base-lime-200-alpha,
-    yellow: $color-base-yellow-200,
-    yellow-alpha: $color-base-yellow-200-alpha,
-    amber: $color-base-amber-200,
-    amber-alpha: $color-base-amber-200-alpha,
-    orange: $color-base-orange-200,
-    orange-alpha: $color-base-orange-200-alpha,
-    deep-orange: $color-base-deep-orange-200,
-    deep-orange-alpha: $color-base-deep-orange-200-alpha
+    disabled: rgba(15, 15, 15, 0.3),
 );
 
 // Foreground palette for light themes.
 $light-theme-foreground-palette: (
     base: $color-base-blue-grey-a700,
-    divider: rgba(black, 0.12),
-    dividers: rgba(black, 0.12),
-    disabled: rgba(black, 0.38),
-    // disabled-button: rgba(black, 0.26),
-    disabled-text: rgba(black, 0.38),
+    divider: rgba(0, 0, 0, 0.12),
+    dividers: rgba(0, 0, 0, 0.12),
+    disabled: rgba(16, 16, 16, 0.3),
+    // disabled-button: rgba(0, 0, 0, 0.26),
+    disabled-text: rgba(0, 0, 0, 0.38),
     elevation: black,
     hint-text: $color-base-blue-grey-400,
-    secondary-text: rgba(black, 0.54),
+    secondary-text: rgba(0, 0, 0, 0.54),
     icon: $color-base-blue-grey-400,
     icon-active: $color-base-blue-grey-a700,
-    icons: rgba(black, 0.54),
-    slider-min: rgba(black, 0.87),
-    slider-off: rgba(black, 0.26),
-    slider-off-active: rgba(black, 0.38),
+    icons: rgba(0, 0, 0, 0.54),
+    slider-min: rgba(0, 0, 0, 0.87),
+    slider-off: rgba(0, 0, 0, 0.26),
+    slider-off-active: rgba(0, 0, 0, 0.38),
     // helper classes
     text: $color-base-blue-grey-a700,
     text-inverse: $color-base-blue-grey-50,
@@ -1284,63 +1185,25 @@ $light-theme-foreground-palette: (
     disabled-icon: $color-base-blue-grey-200,
     placeholder: $color-base-blue-grey-400,
     label: $color-base-blue-grey-500,
-
-    error: $color-base-red-900,
-    warning: $color-base-yellow-900,
-    success: $color-base-green-600,
-    info: $color-base-blue-500,
-
-    red: $color-base-red-500,
-    red-alpha: $color-base-red-500-alpha,
-    pink: $color-base-pink-600,
-    pink-alpha: $color-base-pink-600-alpha,
-    purple: $color-base-purple-500,
-    purple-alpha: $color-base-purple-500-alpha,
-    deep-purple: $color-base-deep-purple-500,
-    deep-purple-alpha: $color-base-deep-purple-500-alpha,
-    indigo: $color-base-indigo-500,
-    indigo-alpha: $color-base-indigo-500-alpha,
-    blue: $color-base-blue-500,
-    blue-alpha: $color-base-blue-500-alpha,
-    light-blue: $color-base-light-blue-500,
-    light-blue-alpha: $color-base-light-blue-500-alpha,
-    cyan: $color-base-cyan-500,
-    cyan-alpha: $color-base-cyan-500-alpha,
-    teal: $color-base-teal-500,
-    teal-alpha: $color-base-teal-500-alpha,
-    green: $color-base-green-500,
-    green-alpha: $color-base-green-500-alpha,
-    light-green: $color-base-light-green-700,
-    light-green-alpha: $color-base-light-green-700-alpha,
-    lime: $color-base-lime-500,
-    lime-alpha: $color-base-lime-500-alpha,
-    yellow: $color-base-yellow-500,
-    yellow-alpha: $color-base-yellow-500-alpha,
-    amber: $color-base-amber-500,
-    amber-alpha: $color-base-amber-500-alpha,
-    orange: $color-base-orange-500,
-    orange-alpha: $color-base-orange-500-alpha,
-    deep-orange: $color-base-deep-orange-500,
-    deep-orange-alpha: $color-base-deep-orange-500-alpha
 );
 
 // Foreground palette for dark themes.
 $dark-theme-foreground-palette: (
     base: $color-base-blue-grey-50,
-    divider: rgba(white, 0.12),
-    dividers: rgba(white, 0.12),
-    disabled: rgba(white, 0.5),
+    divider: rgba(255, 255, 255, 0.12),
+    dividers: rgba(255, 255, 255, 0.12),
+    disabled: rgba(255, 255, 255, 0.3),
     // disabled-button: rgba(white, 0.3),
-    disabled-text: rgba(white, 0.5),
+    disabled-text: rgba(255, 255, 255, 0.5),
     elevation: black,
     hint-text: $color-base-blue-grey-200,
-    secondary-text: rgba(white, 0.7),
+    secondary-text: rgba(255, 255, 255, 0.7),
     icon: $color-base-blue-grey-200,
     icon-active: $color-base-blue-grey-50,
     icons: white,
     slider-min: white,
-    slider-off: rgba(white, 0.3),
-    slider-off-active: rgba(white, 0.3),
+    slider-off: rgba(255, 255, 255, 0.3),
+    slider-off-active: rgba(255, 255, 255, 0.3),
     // helper classes
     text: $color-base-blue-grey-50,
     text-inverse: $color-base-blue-grey-a700,
@@ -1350,42 +1213,4 @@ $dark-theme-foreground-palette: (
     disabled-icon: $color-base-blue-grey-400,
     placeholder: $color-base-blue-grey-200,
     label: $color-base-blue-grey-100,
-
-    error: $color-base-red-200,
-    warning: $color-base-yellow-200,
-    success: $color-base-green-200,
-    info: $color-base-blue-200,
-
-    red: $color-base-red-200,
-    red-alpha: $color-base-red-200-alpha,
-    pink: $color-base-pink-200,
-    pink-alpha: $color-base-pink-200-alpha,
-    purple: $color-base-purple-200,
-    purple-alpha: $color-base-purple-200-alpha,
-    deep-purple: $color-base-deep-purple-200,
-    deep-purple-alpha: $color-base-deep-purple-200-alpha,
-    indigo: $color-base-indigo-200,
-    indigo-alpha: $color-base-indigo-200-alpha,
-    blue: $color-base-blue-200,
-    blue-alpha: $color-base-blue-200-alpha,
-    light-blue: $color-base-light-blue-200,
-    light-blue-alpha: $color-base-light-blue-200-alpha,
-    cyan: $color-base-cyan-200,
-    cyan-alpha: $color-base-cyan-200-alpha,
-    teal: $color-base-teal-200,
-    teal-alpha: $color-base-teal-200-alpha,
-    green: $color-base-green-200,
-    green-alpha: $color-base-green-200-alpha,
-    light-green: $color-base-light-green-200,
-    light-green-alpha: $color-base-light-green-200-alpha,
-    lime: $color-base-lime-200,
-    lime-alpha: $color-base-lime-200-alpha,
-    yellow: $color-base-yellow-200,
-    yellow-alpha: $color-base-yellow-200-alpha,
-    amber: $color-base-amber-200,
-    amber-alpha: $color-base-amber-200-alpha,
-    orange: $color-base-orange-200,
-    orange-alpha: $color-base-orange-200-alpha,
-    deep-orange: $color-base-deep-orange-200,
-    deep-orange-alpha: $color-base-deep-orange-200-alpha
 );