feat(components): add support for css variables (#13895)

* wip

* wip

* wip

* wip

* CSS variable cleanup
added css variable example

* reverted example

* wip

* name fixes for tabbar and item

* wip - alpha support

* wip - all the things

* wip

* wip

* PR cleanup

* cleanup to ion-color

* switched to double quotes

* PR cleanup
Added TODO for color-mod comments

* reverted ios variable for transition.

* style cleanup
added -ion prefix to all css variables
updated default.css to mirror SASS values
cleanup/update to oceanic css

* removed 'dark' theme files
cleanup from scss-lint report

packages/core/src/components/note/note.ios.scss

@@ -13,10 +13,10 @@
 // Generate iOS Note Colors
 // --------------------------------------------------
 
-@each $color-name, $color-base, $color-contrast in get-colors($colors-ios) {
+@each $color-name, $color-value in $colors-ios {
+  $color-base: ion-color($colors-ios, $color-name, base, ios);
 
   .note-ios-#{$color-name} {
     color: $color-base;
   }
-
 }

packages/core/src/components/note/note.ios.vars.scss

@@ -7,4 +7,4 @@
 $note-ios-font-family:    $font-family-ios-base !default;
 
 /// @prop - Text color of the note
-$note-ios-color:          darken($list-ios-border-color, 10%) !default;
+$note-ios-color:          $text-ios-color-step-400 !default;

packages/core/src/components/note/note.md.scss

@@ -13,10 +13,10 @@
 // Generate Material Design Note Colors
 // --------------------------------------------------
 
-@each $color-name, $color-base, $color-contrast in get-colors($colors-md) {
+@each $color-name, $color-value in $colors-md {
+  $color-base: ion-color($colors-md, $color-name, base, md);
 
   .note-md-#{$color-name} {
     color: $color-base;
   }
-
 }

packages/core/src/components/note/note.md.vars.scss

@@ -7,4 +7,4 @@
 $note-md-font-family:    $font-family-md-base !default;
 
 /// @prop - Text color of the note
-$note-md-color:          darken($list-md-border-color, 10%) !default;
+$note-md-color:          $text-md-color-step-400 !default;