@new-ui/colors 1.2.6 → 1.2.8

package/src/_theme-light--warm.scss

@@ -118,6 +118,84 @@
   --grey9: #272525;
   --grey10: #171414;
 
+  --warm1: var(--grey1);
+  --warm2: var(--grey2);
+  --warm3: var(--grey3);
+  --warm4: var(--grey4);
+  --warm5: var(--grey5);
+  --warm6: var(--grey6);
+  --warm7: var(--grey7);
+  --warm8: var(--grey8);
+  --warm9: var(--grey9);
+  --warm10: var(--grey10);
+
   --black: #000000;
   --white: #ffffff;
+
+  // Backgrounds
+  --background: var(--white);
+  --background-secondary: var(--warm1);
+  --background-hover: var(--warm1);
+  --background-selected: var(--warm2);
+  --background-selected-hover: var(--warm3);
+  --background-red: var(--red1);
+  --background-orange: var(--orange1);
+  --background-yellow: var(--yellow1);
+  --background-green: var(--green1);
+  --background-mint: var(--mint1);
+  --background-teal: var(--teal1);
+  --background-cyan: var(--cyan1);
+  --background-blue: var(--blue1);
+  --background-indigo: var(--indigo1);
+  --background-purple: var(--purple1);
+  --background-pink: var(--pink1);
+  --background-brown: var(--brown1);
+
+  // Borders
+  --border-muted: var(--warm2);
+  --border: var(--warm4);
+  --border-strong: var(--warm6);
+  --border-inked: var(--warm10);
+  --border-inverse: var(--white);
+  --border-focus: var(--blue5);
+
+  // Buttons
+  --button-primary: var(--blue5);
+  --button-primary-hover: var(--blue6);
+  --button-primary-active: var(--blue7);
+  --button-secondary: var(--warm8);
+  --button-secondary-hover: var(--warm7);
+  --button-secondary-active: var(--warm6);
+  --button-danger: var(--red5);
+  --button-danger-hover: var(--red6);
+  --button-danger-active: var(--red7);
+  --button-disabled: var(--warm4);
+
+  // Icons
+  --icon-primary: var(--warm9);
+  --icon-secondary: var(--warm7);
+  --icon-disabled: var(--warm4);
+  --icon-on-color: var(--white);
+
+  // Links
+  --link: var(--blue5);
+  --link-hover: var(--blue6);
+  --link-subtle: var(--warm8);
+  --link-visited: var(--indigo5);
+
+  // Support
+  --support-error: var(--red5);
+  --support-warning: var(--yellow5);
+  --support-success: var(--green5);
+  --support-info: var(--blue5);
+
+  // Text
+  --text-primary: var(--warm10);
+  --text-primary-alt: var(--warm8);
+  --text-secondary: var(--warm7);
+  --text-secondary-alt: var(--warm5);
+  --text-placeholder: var(--warm4);
+  --text-on-color: var(--white);
+  --text-error: var(--red6);
+  --text-success: var(--green6);
 }

package/src/_theme-light.scss

@@ -120,4 +120,71 @@
 
   --black: #000000;
   --white: #ffffff;
+
+  // Backgrounds
+  --background: var(--white);
+  --background-secondary: var(--grey1);
+  --background-hover: var(--grey1);
+  --background-selected: var(--grey2);
+  --background-selected-hover: var(--grey3);
+  --background-red: var(--red1);
+  --background-orange: var(--orange1);
+  --background-yellow: var(--yellow1);
+  --background-green: var(--green1);
+  --background-mint: var(--mint1);
+  --background-teal: var(--teal1);
+  --background-cyan: var(--cyan1);
+  --background-blue: var(--blue1);
+  --background-indigo: var(--indigo1);
+  --background-purple: var(--purple1);
+  --background-pink: var(--pink1);
+  --background-brown: var(--brown1);
+
+  // Borders
+  --border-muted: var(--grey2);
+  --border: var(--grey4);
+  --border-strong: var(--grey6);
+  --border-inked: var(--grey10);
+  --border-inverse: var(--white);
+  --border-focus: var(--blue5);
+
+  // Buttons
+  --button-primary: var(--blue5);
+  --button-primary-hover: var(--blue6);
+  --button-primary-active: var(--blue7);
+  --button-secondary: var(--grey8);
+  --button-secondary-hover: var(--grey7);
+  --button-secondary-active: var(--grey6);
+  --button-danger: var(--red5);
+  --button-danger-hover: var(--red6);
+  --button-danger-active: var(--red7);
+  --button-disabled: var(--grey4);
+
+  // Icons
+  --icon-primary: var(--grey9);
+  --icon-secondary: var(--grey7);
+  --icon-disabled: var(--grey4);
+  --icon-on-color: var(--white);
+
+  // Links
+  --link: var(--blue5);
+  --link-hover: var(--blue6);
+  --link-subtle: var(--grey8);
+  --link-visited: var(--indigo5);
+
+  // Support
+  --support-error: var(--red5);
+  --support-warning: var(--yellow5);
+  --support-success: var(--green5);
+  --support-info: var(--blue5);
+
+  // Text
+  --text-primary: var(--grey10);
+  --text-primary-alt: var(--grey8);
+  --text-secondary: var(--grey7);
+  --text-secondary-alt: var(--grey5);
+  --text-placeholder: var(--grey4);
+  --text-on-color: var(--white);
+  --text-error: var(--red6);
+  --text-success: var(--green6);
 }

package/src/_utilities.scss

@@ -237,55 +237,90 @@
 .nu-u-text-grey9 {color: var(--grey9);}
 .nu-u-text-grey10 {color: var(--grey10);}
 
-.nu-u-bg {background-color: var(--white);}
-.nu-u-bg-secondary {background-color: var(--grey1);}
-.nu-u-bg-hover {background-color: var(--grey1);}
-.nu-u-bg-selected {background-color: var(--grey2);}
-.nu-u-bg-selected-hover {background-color: var(--grey3);}
-.nu-u-bg-red {background-color: var(--red1);}
-.nu-u-bg-orange {background-color: var(--orange1);}
-.nu-u-bg-yellow {background-color: var(--yellow1);}
-.nu-u-bg-green {background-color: var(--green);}
-.nu-u-bg-mint {background-color: var(--mint);}
-.nu-u-bg-teal {background-color: var(--teal1);}
-.nu-u-bg-cyan {background-color: var(--cyan1);}
-.nu-u-bg-blue {background-color: var(--blue1);}
-.nu-u-bg-indigo {background-color: var(--indigo1);}
-.nu-u-bg-purple {background-color: var(--purple1);}
-.nu-u-bg-pink {background-color: var(--pink);}
-.nu-u-bg-brown {background-color: var(--brown);}
+[data-new-ui-theme="light--cold"], [data-new-ui-theme="dark--cold"] {
+  .nu-u-text-cold1 {color: var(--cold1);}
+  .nu-u-text-cold2 {color: var(--cold2);}
+  .nu-u-text-cold3 {color: var(--cold3);}
+  .nu-u-text-cold4 {color: var(--cold4);}
+  .nu-u-text-cold5 {color: var(--cold5);}
+  .nu-u-text-cold6 {color: var(--cold6);}
+  .nu-u-text-cold7 {color: var(--cold7);}
+  .nu-u-text-cold8 {color: var(--cold8);}
+  .nu-u-text-cold9 {color: var(--cold9);}
+  .nu-u-text-cold10 {color: var(--cold10);}
+}
+
+[data-new-ui-theme="light--warm"], [data-new-ui-theme="dark--warm"] {
+  .nu-u-text-warm1 {color: var(--warm1);}
+  .nu-u-text-warm2 {color: var(--warm2);}
+  .nu-u-text-warm3 {color: var(--warm3);}
+  .nu-u-text-warm4 {color: var(--warm4);}
+  .nu-u-text-warm5 {color: var(--warm5);}
+  .nu-u-text-warm6 {color: var(--warm6);}
+  .nu-u-text-warm7 {color: var(--warm7);}
+  .nu-u-text-warm8 {color: var(--warm8);}
+  .nu-u-text-warm9 {color: var(--warm9);}
+  .nu-u-text-warm10 {color: var(--warm10);}
+}
+
+.nu-u-bg {background-color: var(--background);}
+.nu-u-bg-secondary {background-color: var(--background-secondary);}
+.nu-u-bg-hover {background-color: var(--background-hover);}
+.nu-u-bg-selected {background-color: var(--background-selected);}
+.nu-u-bg-selected-hover {background-color: var(--background-selected-hover);}
+.nu-u-bg-red {background-color: var(--background-red);}
+.nu-u-bg-orange {background-color: var(--background-orange);}
+.nu-u-bg-yellow {background-color: var(--background-yellow);}
+.nu-u-bg-green {background-color: var(--background-green);}
+.nu-u-bg-mint {background-color: var(--background-mint);}
+.nu-u-bg-teal {background-color: var(--background-teal);}
+.nu-u-bg-cyan {background-color: var(--background-cyan);}
+.nu-u-bg-blue {background-color: var(--background-blue);}
+.nu-u-bg-indigo {background-color: var(--background-indigo);}
+.nu-u-bg-purple {background-color: var(--background-blue);}
+.nu-u-bg-pink {background-color: var(--background-pink);}
+.nu-u-bg-brown {background-color: var(--background-brown);}
 
 .nu-u-bg-black {background-color: var(--black);}
 .nu-u-bg-white {background-color: var(--white);}
 
 /* Border */
-.nu-u-b--muted {border-color: var(--grey-2);}
-.nu-u-b {border-color: var(--grey4);}
-.nu-u-b--strong {border-color: var(--grey6);}
+.nu-u-b--muted {border-color: var(--border-muted);}
+.nu-u-b {border-color: var(--border);}
+.nu-u-b--strong {border-color: var(--border-strong);}
+.nu-u-b--inked {border-color: var(--border-inked);}
+.nu-u-b--inverse {border-color: var(--border-inverse);}
+.nu-u-b--focus {border-color: var(--border-focus);}
 
 /* Text */
-.nu-u-text--primary {color: var(--grey10);}
-.nu-u-text--primary-alt {color: var(--grey8);}
-.nu-u-text--secondary {color: var(--grey7);}
-.nu-u-text--secondary-alt {color: var(--grey5);}
+.nu-u-text--primary {color: var(--text-primary);}
+.nu-u-text--primary-alt {color: var(--text-primary-alt);}
+.nu-u-text--secondary {color: var(--text-secondary);}
+.nu-u-text--secondary-alt {color: var(--text-secondary-alt);}
 .nu-u-text--placeholder::placeholder, 
 .nu-u-text--placeholder::webkit-input-placeholder,
-.nu-u-text--placeholder:ms-input-placeholder {color: var(--grey4);}
-.nu-u-text--on-color {color: var(--white);}
-.nu-u-text--error {color: var(--red6);}
-.nu-u-text--success {color: var(--green6);}
+.nu-u-text--placeholder:ms-input-placeholder {color: var(--text-placeholder);}
+.nu-u-text--on-color {color: var(--text-on-color);}
+.nu-u-text--error {color: var(--text-error);}
+.nu-u-text--success {color: var(--text-success);}
 
 .nu-u-text-black {color: var(--black);}
 .nu-u-text-white {color: var(--white);}
 
 /* Icons */
-.nu-u-icon--primary {color: var(--grey9);}
-.nu-u-icon--secondary {color: var(--grey7);}
-.nu-u-icon--disabled {color: var(--grey4);}
-.nu-u-icon--on-color {color: var(--white);}
+.nu-u-icon--primary {color: var(--icon-primary);}
+.nu-u-icon--secondary {color: var(--icon-secondary);}
+.nu-u-icon--disabled {color: var(--icon-disabled);}
+.nu-u-icon--on-color {color: var(--icon-on-color);}
+
+/* Links */
+.nu-u-link {color: var(--link);}
+.nu-u-link--hover {color: var(--link-hover);}
+.nu-u-link--subtle {color: var(--link-subtle);}
+.nu-u-link--active {color: var(--link-active);}
 
 /* Support */
-.nu-u-support--error {color: var(--red5);}
-.nu-u-support--warning {color: var(--yellow5);}
-.nu-u-support--success {color: var(--green5);}
-.nu-u-support--info {color: var(--blue5);}
+.nu-u-support--error {color: var(--support-error);}
+.nu-u-support--warning {color: var(--support-warning);}
+.nu-u-support--success {color: var(--support-success);}
+.nu-u-support--info {color: var(--support-blue);}

package/src/index.scss

@@ -1,5 +1,8 @@
 @import 'theme-light';
 @import 'theme-light--warm';
 @import 'theme-light--cold';
+@import 'theme-dark';
+@import 'theme-dark--warm';
+@import 'theme-dark--cold';
 @import 'utilities';
 @import 'components';