add meta to all component schemas (#395)

* add meta to all component schemas

* chore(button): fix identation and add a comma

* chore(label): import extend function

* feat(theme): update css-vars-from-theme mixin

* chore(test): update theme tests

* refactor(banner): correct medatada for light schemas

---------

Co-authored-by: Simeon Simeonoff <[email protected]>

Author: didimmova

sass/themes/_mixins.scss

@@ -28,7 +28,7 @@ $ignored-keys: ('name', 'palette', 'variant', 'selector', 'type', 'theme', 'typo
 @mixin css-vars-from-theme($theme, $name, $ignored: $ignored-keys) {
     $themes: map.get($theme, 'themes');
     $prefix: map.get($theme, 'prefix');
-    $t: map.get($theme, 'theme');
+    $t: map.get($theme, '_meta', 'theme');
 
     // This is here only because the button theme consists of 4 nested themes.
     @if $themes and meta.type-of($themes) == 'map' {

sass/themes/schemas/components/dark/_action-strip.scss

@@ -10,7 +10,15 @@
 /// Generates a dark material action-strip schema.
 /// @type {Map}
 /// @requires $material-action-strip
-$dark-material-action-strip: $material-action-strip;
+$dark-material-action-strip: extend(
+    $material-action-strip,
+    (
+        _meta: (
+            theme: 'material',
+            variant: 'dark',
+        ),
+    )
+);
 
 /// Generates a dark fluent action strip schema.
 /// @type {Map}
@@ -25,6 +33,10 @@ $dark-fluent-action-strip: extend(
                 600,
             ),
         ),
+        _meta: (
+            theme: 'fluent',
+            variant: 'dark',
+        ),
     )
 );
 
@@ -41,10 +53,22 @@ $dark-bootstrap-action-strip: extend(
                 100,
             ),
         ),
+        _meta: (
+            theme: 'bootstrap',
+            variant: 'dark',
+        ),
     )
 );
 
 /// Generates a dark indigo action strip schema.
 /// @type {Map}
 /// @requires $indigo-action-strip
-$dark-indigo-action-strip: $indigo-action-strip;
+$dark-indigo-action-strip: extend(
+    $indigo-action-strip,
+    (
+        _meta: (
+            theme: 'indigo',
+            variant: 'dark',
+        ),
+    )
+);

sass/themes/schemas/components/dark/_avatar.scss

@@ -10,17 +10,41 @@
 /// Generates a dark material avatar schema.
 /// @type {Map}
 /// @requires $material-avatar
-$dark-material-avatar: $material-avatar;
+$dark-material-avatar: extend(
+    $material-avatar,
+    (
+        _meta: (
+            theme: 'material',
+            variant: 'dark',
+        ),
+    )
+);
 
 /// Generates a dark fluent avatar schema.
 /// @type {Map}
 /// @requires $fluent-avatar
-$dark-fluent-avatar: $fluent-avatar;
+$dark-fluent-avatar: extend(
+    $fluent-avatar,
+    (
+        _meta: (
+            theme: 'fluent',
+            variant: 'dark',
+        ),
+    )
+);
 
 /// Generates a dark bootstrap avatar schema.
 /// @type {Map}
 /// @requires $bootstrap-avatar
-$dark-bootstrap-avatar: $bootstrap-avatar;
+$dark-bootstrap-avatar: extend(
+    $bootstrap-avatar,
+    (
+        _meta: (
+            theme: 'bootstrap',
+            variant: 'dark',
+        ),
+    )
+);
 
 /// Generates a dark indigo avatar schema.
 /// @type {Map}
@@ -42,5 +66,9 @@ $dark-indigo-avatar: extend(
                 300,
             ),
         ),
+        _meta: (
+            theme: 'indigo',
+            variant: 'dark',
+        ),
     )
 );

sass/themes/schemas/components/dark/_badge.scss

@@ -10,12 +10,28 @@
 /// Generates a dark material badge schema.
 /// @type {Map}
 /// @requires $material-badge
-$dark-material-badge: $material-badge;
+$dark-material-badge: extend(
+    $material-badge,
+    (
+        _meta: (
+            theme: 'material',
+            variant: 'dark',
+        ),
+    )
+);
 
 /// Generates a dark fluent badge schema.
 /// @type {Map}
 /// @requires $fluent-badge
-$dark-fluent-badge: $fluent-badge;
+$dark-fluent-badge: extend(
+    $fluent-badge,
+    (
+        _meta: (
+            theme: 'fluent',
+            variant: 'dark',
+        ),
+    )
+);
 
 /// Generates a dark bootstrap badge schema.
 /// @type {Map}
@@ -30,10 +46,22 @@ $dark-bootstrap-badge: extend(
                 50,
             ),
         ),
+        _meta: (
+            theme: 'bootstrap',
+            variant: 'dark',
+        ),
     )
 );
 
 /// Generates a dark indigo badge schema.
 /// @type {Map}
 /// @requires $indigo-badge
-$dark-indigo-badge: $indigo-badge;
+$dark-indigo-badge: extend(
+    $indigo-badge,
+    (
+        _meta: (
+            theme: 'indigo',
+            variant: 'dark',
+        ),
+    )
+);

sass/themes/schemas/components/dark/_banner.scss

@@ -10,17 +10,41 @@
 /// Generates a dark material banner schema.
 /// @type {Map}
 /// @requires $material-banner
-$dark-material-banner: $material-banner;
+$dark-material-banner: extend(
+    $material-banner,
+    (
+        _meta: (
+            theme: 'material',
+            variant: 'dark',
+        ),
+    )
+);
 
 /// Generates a dark fluent banner schema.
 /// @type {Map}
 /// @requires $fluent-banner
-$dark-fluent-banner: $fluent-banner;
+$dark-fluent-banner: extend(
+    $fluent-banner,
+    (
+        _meta: (
+            theme: 'fluent',
+            variant: 'dark',
+        ),
+    )
+);
 
 /// Generates a dark bootstrap banner schema.
 /// @type {Map}
 /// @requires $bootstrap-banner
-$dark-bootstrap-banner: $bootstrap-banner;
+$dark-bootstrap-banner: extend(
+    $bootstrap-banner,
+    (
+        _meta: (
+            theme: 'bootstrap',
+            variant: 'dark',
+        ),
+    )
+);
 
 /// Generates a dark indigo banner schema.
 /// @type {Map}
@@ -43,5 +67,9 @@ $dark-indigo-banner: extend(
                 100,
             ),
         ),
+        _meta: (
+            theme: 'indigo',
+            variant: 'dark',
+        ),
     )
 );

sass/themes/schemas/components/dark/_bottom-nav.scss

@@ -10,17 +10,41 @@
 /// Generates a dark material bottom-nav schema.
 /// @type {Map}
 /// @requires $material-bottom-nav
-$dark-material-bottom-nav: $material-bottom-nav;
+$dark-material-bottom-nav: extend(
+    $material-bottom-nav,
+    (
+        _meta: (
+            theme: 'material',
+            variant: 'dark',
+        ),
+    )
+);
 
 /// Generates a dark fluent bottom-nav schema.
 /// @type {Map}
 /// @requires $fluent-bottom-nav
-$dark-fluent-bottom-nav: $fluent-bottom-nav;
+$dark-fluent-bottom-nav: extend(
+    $fluent-bottom-nav,
+    (
+        _meta: (
+            theme: 'fluent',
+            variant: 'dark',
+        ),
+    )
+);
 
 /// Generates a dark bootstrap bottom-nav schema.
 /// @type {Map}
 /// @requires $bootstrap-bottom-nav
-$dark-bootstrap-bottom-nav: $bootstrap-bottom-nav;
+$dark-bootstrap-bottom-nav: extend(
+    $bootstrap-bottom-nav,
+    (
+        _meta: (
+            theme: 'bootstrap',
+            variant: 'dark',
+        ),
+    )
+);
 
 /// Generates a dark indigo bottom-nav schema.
 /// @type {Map}
@@ -81,5 +105,9 @@ $dark-indigo-bottom-nav: extend(
                 0.2,
             ),
         ),
+        _meta: (
+            theme: 'indigo',
+            variant: 'dark',
+        ),
     )
 );

sass/themes/schemas/components/dark/_button-group.scss

@@ -127,6 +127,10 @@ $dark-material-button-group: extend(
                 0.8,
             ),
         ),
+        _meta: (
+            theme: 'material',
+            variant: 'dark',
+        ),
     )
 );
 
@@ -258,13 +262,25 @@ $dark-fluent-button-group: extend(
                 400,
             ),
         ),
+        _meta: (
+            theme: 'fluent',
+            variant: 'dark',
+        ),
     )
 );
 
 /// Generates a dark bootstrap button-group schema based on a mix of $bootstrap-button-group
 /// @type {Map}
 /// @requires $bootstrap-button-group
-$dark-bootstrap-button-group: $bootstrap-button-group;
+$dark-bootstrap-button-group: extend(
+    $bootstrap-button-group,
+    (
+        _meta: (
+            theme: 'bootstrap',
+            variant: 'dark',
+        ),
+    )
+);
 
 /// Generates a dark indigo button-group schema
 /// @type {Map}
@@ -412,5 +428,9 @@ $dark-indigo-button-group: extend(
                 0.2,
             ),
         ),
+        _meta: (
+            theme: 'indigo',
+            variant: 'dark',
+        ),
     )
 );