@fluentui/react-theme 9.0.0-nightly.d730088d7f.0 → 9.0.0-rc.10

package/lib/global/colors.js

@@ -1,4 +1,4 @@
-export var grey = {
+export const grey = {
   '0': '#000000',
   '2': '#050505',
   '4': '#0a0a0a',
@@ -51,9 +51,7 @@ export var grey = {
   '98': '#fafafa',
   '100': '#ffffff'
 };
-export var white = '#ffffff';
-export var black = '#000000';
-export var whiteAlpha = {
+export const whiteAlpha = {
   '5': 'rgba(255, 255, 255, 0.05)',
   '10': 'rgba(255, 255, 255, 0.1)',
   '20': 'rgba(255, 255, 255, 0.2)',
@@ -65,7 +63,7 @@ export var whiteAlpha = {
   '80': 'rgba(255, 255, 255, 0.8)',
   '90': 'rgba(255, 255, 255, 0.9)'
 };
-export var blackAlpha = {
+export const blackAlpha = {
   '5': 'rgba(0, 0, 0, 0.05)',
   '10': 'rgba(0, 0, 0, 0.1)',
   '20': 'rgba(0, 0, 0, 0.2)',
@@ -77,15 +75,29 @@ export var blackAlpha = {
   '80': 'rgba(0, 0, 0, 0.8)',
   '90': 'rgba(0, 0, 0, 0.9)'
 };
-export var hcHyperlink = '#ffff00';
-export var hcHighlight = '#1aebff';
-export var hcDisabled = '#3ff23f';
-export var hcCanvas = '#000000';
-export var hcCanvasText = '#ffffff';
-export var hcHighlightText = '#000000';
-export var hcButtonText = '#000000';
-export var hcButtonFace = '#ffffff';
-var darkRed = {
+export const grey14Alpha = {
+  '5': 'rgba(36, 36, 36, 0.05)',
+  '10': 'rgba(36, 36, 36, 0.1)',
+  '20': 'rgba(36, 36, 36, 0.2)',
+  '30': 'rgba(36, 36, 36, 0.3)',
+  '40': 'rgba(36, 36, 36, 0.4)',
+  '50': 'rgba(36, 36, 36, 0.5)',
+  '60': 'rgba(36, 36, 36, 0.6)',
+  '70': 'rgba(36, 36, 36, 0.7)',
+  '80': 'rgba(36, 36, 36, 0.8)',
+  '90': 'rgba(36, 36, 36, 0.9)'
+};
+export const white = '#ffffff';
+export const black = '#000000';
+export const hcHyperlink = '#ffff00';
+export const hcHighlight = '#1aebff';
+export const hcDisabled = '#3ff23f';
+export const hcCanvas = '#000000';
+export const hcCanvasText = '#ffffff';
+export const hcHighlightText = '#000000';
+export const hcButtonText = '#000000';
+export const hcButtonFace = '#ffffff';
+const darkRed = {
   shade50: '#130204',
   shade40: '#230308',
   shade30: '#420610',
@@ -99,7 +111,7 @@ var darkRed = {
   tint50: '#e9c7cd',
   tint60: '#f9f0f2'
 };
-var burgundy = {
+const burgundy = {
   shade50: '#1a0607',
   shade40: '#310b0d',
   shade30: '#5c1519',
@@ -113,7 +125,7 @@ var burgundy = {
   tint50: '#f0d3d4',
   tint60: '#fbf4f4'
 };
-var cranberry = {
+const cranberry = {
   shade50: '#200205',
   shade40: '#3b0509',
   shade30: '#6e0811',
@@ -127,7 +139,7 @@ var cranberry = {
   tint50: '#f6d1d5',
   tint60: '#fdf3f4'
 };
-var red = {
+const red = {
   shade50: '#210809',
   shade40: '#3f1011',
   shade30: '#751d1f',
@@ -141,7 +153,7 @@ var red = {
   tint50: '#f8dadb',
   tint60: '#fdf6f6'
 };
-var darkOrange = {
+const darkOrange = {
   shade50: '#230900',
   shade40: '#411200',
   shade30: '#7a2101',
@@ -155,7 +167,7 @@ var darkOrange = {
   tint50: '#f9dcd1',
   tint60: '#fdf6f3'
 };
-var bronze = {
+const bronze = {
   shade50: '#1b0a01',
   shade40: '#321303',
   shade30: '#5e2405',
@@ -169,7 +181,7 @@ var bronze = {
   tint50: '#f1d9cc',
   tint60: '#fbf5f2'
 };
-var pumpkin = {
+const pumpkin = {
   shade50: '#200d03',
   shade40: '#3d1805',
   shade30: '#712d09',
@@ -183,7 +195,7 @@ var pumpkin = {
   tint50: '#f7dfd2',
   tint60: '#fdf7f4'
 };
-var orange = {
+const orange = {
   shade50: '#271002',
   shade40: '#4a1e04',
   shade30: '#8a3707',
@@ -197,7 +209,7 @@ var orange = {
   tint50: '#fee5d7',
   tint60: '#fff9f5'
 };
-var peach = {
+const peach = {
   shade50: '#291600',
   shade40: '#4d2a00',
   shade30: '#8f4e00',
@@ -211,7 +223,7 @@ var peach = {
   tint50: '#ffedd6',
   tint60: '#fffaf5'
 };
-var marigold = {
+const marigold = {
   shade50: '#251a00',
   shade40: '#463100',
   shade30: '#835b00',
@@ -225,13 +237,13 @@ var marigold = {
   tint50: '#fcefd3',
   tint60: '#fefbf4'
 };
-var yellow = {
-  shade50: '#282400',
-  shade40: '#4c4400',
-  shade30: '#8e7f00',
-  shade20: '#c0ad00',
-  shade10: '#e4cc00',
+const yellow = {
   primary: '#fde300',
+  shade10: '#e4cc00',
+  shade20: '#c0ad00',
+  shade30: '#817400',
+  shade40: '#4c4400',
+  shade50: '#282400',
   tint10: '#fde61e',
   tint20: '#fdea3d',
   tint30: '#feee66',
@@ -239,7 +251,7 @@ var yellow = {
   tint50: '#fffad6',
   tint60: '#fffef5'
 };
-var gold = {
+const gold = {
   shade50: '#1f1900',
   shade40: '#3a2f00',
   shade30: '#6c5700',
@@ -253,7 +265,7 @@ var gold = {
   tint50: '#f5eece',
   tint60: '#fdfbf2'
 };
-var brass = {
+const brass = {
   shade50: '#181202',
   shade40: '#2e2103',
   shade30: '#553e06',
@@ -267,7 +279,7 @@ var brass = {
   tint50: '#efe4cb',
   tint60: '#fbf8f2'
 };
-var brown = {
+const brown = {
   shade50: '#170e07',
   shade40: '#2b1a0e',
   shade30: '#50301a',
@@ -281,7 +293,7 @@ var brown = {
   tint50: '#edded3',
   tint60: '#faf7f4'
 };
-var darkBrown = {
+const darkBrown = {
   shade50: '#0c0704',
   shade40: '#170c08',
   shade30: '#2b1710',
@@ -295,7 +307,7 @@ var darkBrown = {
   tint50: '#e3d2cb',
   tint60: '#f8f3f2'
 };
-var lime = {
+const lime = {
   shade50: '#121b06',
   shade40: '#23330b',
   shade30: '#405f14',
@@ -309,7 +321,7 @@ var lime = {
   tint50: '#e5f1d3',
   tint60: '#f8fcf4'
 };
-var forest = {
+const forest = {
   shade50: '#0c1501',
   shade40: '#162702',
   shade30: '#294903',
@@ -323,7 +335,7 @@ var forest = {
   tint50: '#dbebc7',
   tint60: '#f6faf0'
 };
-var seafoam = {
+const seafoam = {
   shade50: '#002111',
   shade40: '#003d20',
   shade30: '#00723b',
@@ -337,7 +349,7 @@ var seafoam = {
   tint50: '#cff7e4',
   tint60: '#f3fdf8'
 };
-var lightGreen = {
+const lightGreen = {
   shade50: '#031a02',
   shade40: '#063004',
   shade30: '#0b5a08',
@@ -351,7 +363,7 @@ var lightGreen = {
   tint50: '#cef0cd',
   tint60: '#f2fbf2'
 };
-var green = {
+const green = {
   shade50: '#031403',
   shade40: '#052505',
   shade30: '#094509',
@@ -365,7 +377,7 @@ var green = {
   tint50: '#c9eac9',
   tint60: '#f1faf1'
 };
-var darkGreen = {
+const darkGreen = {
   shade50: '#021102',
   shade40: '#032003',
   shade30: '#063b06',
@@ -379,7 +391,7 @@ var darkGreen = {
   tint50: '#c6e7c6',
   tint60: '#f0f9f0'
 };
-var lightTeal = {
+const lightTeal = {
   shade50: '#001d1f',
   shade40: '#00373a',
   shade30: '#00666d',
@@ -393,7 +405,7 @@ var lightTeal = {
   tint50: '#cef3f5',
   tint60: '#f2fcfd'
 };
-var teal = {
+const teal = {
   shade50: '#001516',
   shade40: '#012728',
   shade30: '#02494c',
@@ -407,7 +419,7 @@ var teal = {
   tint50: '#c7ebec',
   tint60: '#f0fafa'
 };
-var darkTeal = {
+const darkTeal = {
   shade50: '#001010',
   shade40: '#001f1f',
   shade30: '#003939',
@@ -421,7 +433,7 @@ var darkTeal = {
   tint50: '#c2e7e7',
   tint60: '#eff9f9'
 };
-var cyan = {
+const cyan = {
   shade50: '#00181e',
   shade40: '#002e38',
   shade30: '#005669',
@@ -435,7 +447,7 @@ var cyan = {
   tint50: '#cdedf4',
   tint60: '#f2fafc'
 };
-var steel = {
+const steel = {
   shade50: '#000f12',
   shade40: '#001b22',
   shade30: '#00333f',
@@ -449,7 +461,7 @@ var steel = {
   tint50: '#c3e1e8',
   tint60: '#eff7f9'
 };
-var lightBlue = {
+const lightBlue = {
   shade50: '#091823',
   shade40: '#112d42',
   shade30: '#20547c',
@@ -463,7 +475,7 @@ var lightBlue = {
   tint50: '#dcedfa',
   tint60: '#f6fafe'
 };
-var blue = {
+const blue = {
   shade50: '#001322',
   shade40: '#002440',
   shade30: '#004377',
@@ -477,7 +489,7 @@ var blue = {
   tint50: '#d0e7f8',
   tint60: '#f3f9fd'
 };
-var royalBlue = {
+const royalBlue = {
   shade50: '#000c16',
   shade40: '#00172a',
   shade30: '#002c4e',
@@ -491,7 +503,7 @@ var royalBlue = {
   tint50: '#c7dced',
   tint60: '#f0f6fa'
 };
-var darkBlue = {
+const darkBlue = {
   shade50: '#000910',
   shade40: '#00111f',
   shade30: '#002039',
@@ -505,7 +517,7 @@ var darkBlue = {
   tint50: '#c2d6e7',
   tint60: '#eff4f9'
 };
-var cornflower = {
+const cornflower = {
   shade50: '#0d1126',
   shade40: '#182047',
   shade30: '#2c3c85',
@@ -519,7 +531,7 @@ var cornflower = {
   tint50: '#e1e6fc',
   tint60: '#f7f9fe'
 };
-var navy = {
+const navy = {
   shade50: '#00061d',
   shade40: '#000c36',
   shade30: '#001665',
@@ -533,7 +545,7 @@ var navy = {
   tint50: '#ccd5f3',
   tint60: '#f2f4fc'
 };
-var lavender = {
+const lavender = {
   shade50: '#120f25',
   shade40: '#221d46',
   shade30: '#3f3682',
@@ -547,7 +559,7 @@ var lavender = {
   tint50: '#e7e4fb',
   tint60: '#f9f8fe'
 };
-var purple = {
+const purple = {
   shade50: '#0f0717',
   shade40: '#1c0e2b',
   shade30: '#341a51',
@@ -561,7 +573,7 @@ var purple = {
   tint50: '#e0d3ed',
   tint60: '#f7f4fb'
 };
-var darkPurple = {
+const darkPurple = {
   shade50: '#0a0411',
   shade40: '#130820',
   shade30: '#240f3c',
@@ -575,7 +587,7 @@ var darkPurple = {
   tint50: '#d8cce7',
   tint60: '#f5f2f9'
 };
-var orchid = {
+const orchid = {
   shade50: '#16101d',
   shade40: '#281e37',
   shade30: '#4c3867',
@@ -589,7 +601,7 @@ var orchid = {
   tint50: '#e9e2f4',
   tint60: '#f9f8fc'
 };
-var grape = {
+const grape = {
   shade50: '#160418',
   shade40: '#29072e',
   shade30: '#4c0d55',
@@ -603,7 +615,7 @@ var grape = {
   tint50: '#eaceef',
   tint60: '#faf2fb'
 };
-var berry = {
+const berry = {
   shade50: '#1f091d',
   shade40: '#3a1136',
   shade30: '#6d2064',
@@ -617,7 +629,7 @@ var berry = {
   tint50: '#f5daf2',
   tint60: '#fdf5fc'
 };
-var lilac = {
+const lilac = {
   shade50: '#1c0b1f',
   shade40: '#35153a',
   shade30: '#63276d',
@@ -631,7 +643,7 @@ var lilac = {
   tint50: '#f2dcf5',
   tint60: '#fcf6fd'
 };
-var pink = {
+const pink = {
   shade50: '#24091b',
   shade40: '#441232',
   shade30: '#80215d',
@@ -645,7 +657,7 @@ var pink = {
   tint50: '#fbddf0',
   tint60: '#fef6fb'
 };
-var hotPink = {
+const hotPink = {
   shade50: '#240016',
   shade40: '#44002a',
   shade30: '#7f004e',
@@ -659,7 +671,7 @@ var hotPink = {
   tint50: '#fbd2eb',
   tint60: '#fef4fa'
 };
-var magenta = {
+const magenta = {
   shade50: '#1f0013',
   shade40: '#390024',
   shade30: '#6b0043',
@@ -673,7 +685,7 @@ var magenta = {
   tint50: '#f5cee6',
   tint60: '#fcf2f9'
 };
-var plum = {
+const plum = {
   shade50: '#13000c',
   shade40: '#240017',
   shade30: '#43002b',
@@ -687,7 +699,7 @@ var plum = {
   tint50: '#e9c4dc',
   tint60: '#faf0f6'
 };
-var beige = {
+const beige = {
   shade50: '#141313',
   shade40: '#252323',
   shade30: '#444241',
@@ -701,7 +713,7 @@ var beige = {
   tint50: '#eae8e8',
   tint60: '#faf9f9'
 };
-var mink = {
+const mink = {
   shade50: '#0f0e0e',
   shade40: '#1c1b1a',
   shade30: '#343231',
@@ -715,7 +727,7 @@ var mink = {
   tint50: '#e5e4e3',
   tint60: '#f8f8f8'
 };
-var silver = {
+const silver = {
   shade50: '#151818',
   shade40: '#282d2e',
   shade30: '#4a5356',
@@ -729,7 +741,7 @@ var silver = {
   tint50: '#eaeeef',
   tint60: '#fafbfb'
 };
-var platinum = {
+const platinum = {
   shade50: '#111314',
   shade40: '#1f2426',
   shade30: '#3b4447',
@@ -743,7 +755,7 @@ var platinum = {
   tint50: '#e4e9ea',
   tint60: '#f8f9fa'
 };
-var anchor = {
+const anchor = {
   shade50: '#090a0b',
   shade40: '#111315',
   shade30: '#202427',
@@ -757,69 +769,75 @@ var anchor = {
   tint50: '#dbdfe1',
   tint60: '#f6f7f8'
 };
-var charcoal = {
-  shade50: '#130204',
-  shade40: '#230308',
-  shade30: '#420610',
-  shade20: '#590815',
-  shade10: '#690a19',
-  primary: '#750b1c',
-  tint10: '#861b2c',
-  tint20: '#962f3f',
-  tint30: '#ac4f5e',
-  tint40: '#d69ca5',
-  tint50: '#e9c7cd',
-  tint60: '#f9f0f2'
-};
-export var sharedColors = {
-  darkRed: darkRed,
-  burgundy: burgundy,
-  cranberry: cranberry,
-  red: red,
-  darkOrange: darkOrange,
-  bronze: bronze,
-  pumpkin: pumpkin,
-  orange: orange,
-  peach: peach,
-  marigold: marigold,
-  yellow: yellow,
-  gold: gold,
-  brass: brass,
-  brown: brown,
-  darkBrown: darkBrown,
-  lime: lime,
-  forest: forest,
-  seafoam: seafoam,
-  lightGreen: lightGreen,
-  green: green,
-  darkGreen: darkGreen,
-  lightTeal: lightTeal,
-  teal: teal,
-  darkTeal: darkTeal,
-  cyan: cyan,
-  steel: steel,
-  lightBlue: lightBlue,
-  blue: blue,
-  royalBlue: royalBlue,
-  darkBlue: darkBlue,
-  cornflower: cornflower,
-  navy: navy,
-  lavender: lavender,
-  purple: purple,
-  darkPurple: darkPurple,
-  orchid: orchid,
-  grape: grape,
-  berry: berry,
-  lilac: lilac,
-  pink: pink,
-  hotPink: hotPink,
-  magenta: magenta,
-  plum: plum,
-  beige: beige,
-  mink: mink,
-  silver: silver,
-  platinum: platinum,
-  anchor: anchor,
-  charcoal: charcoal
+const charcoal = {
+  shade50: '#090909',
+  shade40: '#111111',
+  shade30: '#202020',
+  shade20: '#2b2b2b',
+  shade10: '#333333',
+  primary: '#393939',
+  tint10: '#515151',
+  tint20: '#686868',
+  tint30: '#888888',
+  tint40: '#c4c4c4',
+  tint50: '#dfdfdf',
+  tint60: '#f7f7f7'
+};
+export const statusSharedColors = {
+  red,
+  green,
+  darkOrange,
+  yellow,
+  berry,
+  lightGreen,
+  marigold
+};
+export const personaSharedColors = {
+  darkRed,
+  cranberry,
+  pumpkin,
+  peach,
+  gold,
+  brass,
+  brown,
+  forest,
+  seafoam,
+  darkGreen,
+  lightTeal,
+  teal,
+  steel,
+  blue,
+  royalBlue,
+  cornflower,
+  navy,
+  lavender,
+  purple,
+  grape,
+  lilac,
+  pink,
+  magenta,
+  plum,
+  beige,
+  mink,
+  platinum,
+  anchor
+}; // These shared colors are currently not used in themes
+// Not exported from the package, we can consider removing them
+
+export const unusedSharedColors = {
+  burgundy,
+  bronze,
+  orange,
+  darkBrown,
+  lime,
+  darkTeal,
+  cyan,
+  lightBlue,
+  darkBlue,
+  darkPurple,
+  orchid,
+  hotPink,
+  silver,
+  charcoal
 };
 //# sourceMappingURL=colors.js.map