diff --git a/assets/figma/variables.json b/assets/figma/variables.json new file mode 100644 index 00000000..5eef56df --- /dev/null +++ b/assets/figma/variables.json @@ -0,0 +1,10890 @@ +{ + "version": "1.0.4", + "metadata": {}, + "collections": [ + { + "name": "_Primitives", + "modes": [ + { + "name": "Style", + "variables": [ + { + "name": "Colors/Base/white", + "type": "color", + "isAlias": false, + "value": "#FFFFFF" + }, + { + "name": "Colors/Base/black", + "type": "color", + "isAlias": false, + "value": "#000000" + }, + { + "name": "Colors/Base/transparent", + "type": "color", + "isAlias": false, + "value": "#FFFFFF00" + }, + { + "name": "Colors/Gray (light mode)/25", + "type": "color", + "isAlias": false, + "value": "#FCFCFD" + }, + { + "name": "Colors/Gray (light mode)/50", + "type": "color", + "isAlias": false, + "value": "#F9FAFB" + }, + { + "name": "Colors/Gray (light mode)/100", + "type": "color", + "isAlias": false, + "value": "#F2F4F7" + }, + { + "name": "Colors/Gray (light mode)/200", + "type": "color", + "isAlias": false, + "value": "#EAECF0" + }, + { + "name": "Colors/Gray (light mode)/300", + "type": "color", + "isAlias": false, + "value": "#D0D5DD" + }, + { + "name": "Colors/Gray (light mode)/400", + "type": "color", + "isAlias": false, + "value": "#98A2B3" + }, + { + "name": "Colors/Gray (light mode)/500", + "type": "color", + "isAlias": false, + "value": "#667085" + }, + { + "name": "Colors/Gray (light mode)/600", + "type": "color", + "isAlias": false, + "value": "#475467" + }, + { + "name": "Colors/Gray (light mode)/700", + "type": "color", + "isAlias": false, + "value": "#344054" + }, + { + "name": "Colors/Gray (light mode)/800", + "type": "color", + "isAlias": false, + "value": "#182230" + }, + { + "name": "Colors/Gray (light mode)/900", + "type": "color", + "isAlias": false, + "value": "#101828" + }, + { + "name": "Colors/Gray (light mode)/950", + "type": "color", + "isAlias": false, + "value": "#0C111D" + }, + { + "name": "Colors/Gray (dark mode)/25", + "type": "color", + "isAlias": false, + "value": "#FAFAFA" + }, + { + "name": "Colors/Gray (dark mode)/50", + "type": "color", + "isAlias": false, + "value": "#F5F5F6" + }, + { + "name": "Colors/Gray (dark mode)/100", + "type": "color", + "isAlias": false, + "value": "#F0F1F1" + }, + { + "name": "Colors/Gray (dark mode)/200", + "type": "color", + "isAlias": false, + "value": "#ECECED" + }, + { + "name": "Colors/Gray (dark mode)/300", + "type": "color", + "isAlias": false, + "value": "#CECFD2" + }, + { + "name": "Colors/Gray (dark mode)/400", + "type": "color", + "isAlias": false, + "value": "#94969C" + }, + { + "name": "Colors/Gray (dark mode)/500", + "type": "color", + "isAlias": false, + "value": "#85888E" + }, + { + "name": "Colors/Gray (dark mode)/600", + "type": "color", + "isAlias": false, + "value": "#61646C" + }, + { + "name": "Colors/Gray (dark mode)/700", + "type": "color", + "isAlias": false, + "value": "#333741" + }, + { + "name": "Colors/Gray (dark mode)/800", + "type": "color", + "isAlias": false, + "value": "#1F242F" + }, + { + "name": "Colors/Gray (dark mode)/900", + "type": "color", + "isAlias": false, + "value": "#161B26" + }, + { + "name": "Colors/Gray (dark mode)/950", + "type": "color", + "isAlias": false, + "value": "#0C111D" + }, + { + "name": "Colors/Gray (dark mode alpha)/25", + "type": "color", + "isAlias": false, + "value": "#FFFFFFFA" + }, + { + "name": "Colors/Gray (dark mode alpha)/50", + "type": "color", + "isAlias": false, + "value": "#FFFFFFF5" + }, + { + "name": "Colors/Gray (dark mode alpha)/100", + "type": "color", + "isAlias": false, + "value": "#FFFFFFF0" + }, + { + "name": "Colors/Gray (dark mode alpha)/200", + "type": "color", + "isAlias": false, + "value": "#FFFFFFEB" + }, + { + "name": "Colors/Gray (dark mode alpha)/300", + "type": "color", + "isAlias": false, + "value": "#FFFFFFCC" + }, + { + "name": "Colors/Gray (dark mode alpha)/400", + "type": "color", + "isAlias": false, + "value": "#FFFFFF8F" + }, + { + "name": "Colors/Gray (dark mode alpha)/500", + "type": "color", + "isAlias": false, + "value": "#FFFFFF80" + }, + { + "name": "Colors/Gray (dark mode alpha)/600", + "type": "color", + "isAlias": false, + "value": "#FFFFFF59" + }, + { + "name": "Colors/Gray (dark mode alpha)/700", + "type": "color", + "isAlias": false, + "value": "#FFFFFF29" + }, + { + "name": "Colors/Gray (dark mode alpha)/800", + "type": "color", + "isAlias": false, + "value": "#FFFFFF14" + }, + { + "name": "Colors/Gray (dark mode alpha)/900", + "type": "color", + "isAlias": false, + "value": "#FFFFFF0A" + }, + { + "name": "Colors/Gray (dark mode alpha)/950", + "type": "color", + "isAlias": false, + "value": "#FFFFFF00" + }, + { + "name": "Colors/Brand/25", + "type": "color", + "isAlias": false, + "value": "#FCFAFF" + }, + { + "name": "Colors/Brand/50", + "type": "color", + "isAlias": false, + "value": "#F9F5FF" + }, + { + "name": "Colors/Brand/100", + "type": "color", + "isAlias": false, + "value": "#F4EBFF" + }, + { + "name": "Colors/Brand/200", + "type": "color", + "isAlias": false, + "value": "#E9D7FE" + }, + { + "name": "Colors/Brand/300", + "type": "color", + "isAlias": false, + "value": "#D6BBFB" + }, + { + "name": "Colors/Brand/400", + "type": "color", + "isAlias": false, + "value": "#B692F6" + }, + { + "name": "Colors/Brand/500", + "type": "color", + "isAlias": false, + "value": "#9E77ED" + }, + { + "name": "Colors/Brand/600", + "type": "color", + "isAlias": false, + "value": "#7F56D9" + }, + { + "name": "Colors/Brand/700", + "type": "color", + "isAlias": false, + "value": "#6941C6" + }, + { + "name": "Colors/Brand/800", + "type": "color", + "isAlias": false, + "value": "#53389E" + }, + { + "name": "Colors/Brand/900", + "type": "color", + "isAlias": false, + "value": "#42307D" + }, + { + "name": "Colors/Brand/950", + "type": "color", + "isAlias": false, + "value": "#2C1C5F" + }, + { + "name": "Colors/Error/25", + "type": "color", + "isAlias": false, + "value": "#FFFBFA" + }, + { + "name": "Colors/Error/50", + "type": "color", + "isAlias": false, + "value": "#FEF3F2" + }, + { + "name": "Colors/Error/100", + "type": "color", + "isAlias": false, + "value": "#FEE4E2" + }, + { + "name": "Colors/Error/200", + "type": "color", + "isAlias": false, + "value": "#FECDCA" + }, + { + "name": "Colors/Error/300", + "type": "color", + "isAlias": false, + "value": "#FDA29B" + }, + { + "name": "Colors/Error/400", + "type": "color", + "isAlias": false, + "value": "#F97066" + }, + { + "name": "Colors/Error/500", + "type": "color", + "isAlias": false, + "value": "#F04438" + }, + { + "name": "Colors/Error/600", + "type": "color", + "isAlias": false, + "value": "#D92D20" + }, + { + "name": "Colors/Error/700", + "type": "color", + "isAlias": false, + "value": "#B42318" + }, + { + "name": "Colors/Error/800", + "type": "color", + "isAlias": false, + "value": "#912018" + }, + { + "name": "Colors/Error/900", + "type": "color", + "isAlias": false, + "value": "#7A271A" + }, + { + "name": "Colors/Error/950", + "type": "color", + "isAlias": false, + "value": "#55160C" + }, + { + "name": "Colors/Warning/25", + "type": "color", + "isAlias": false, + "value": "#FFFCF5" + }, + { + "name": "Colors/Warning/50", + "type": "color", + "isAlias": false, + "value": "#FFFAEB" + }, + { + "name": "Colors/Warning/100", + "type": "color", + "isAlias": false, + "value": "#FEF0C7" + }, + { + "name": "Colors/Warning/200", + "type": "color", + "isAlias": false, + "value": "#FEDF89" + }, + { + "name": "Colors/Warning/300", + "type": "color", + "isAlias": false, + "value": "#FEC84B" + }, + { + "name": "Colors/Warning/400", + "type": "color", + "isAlias": false, + "value": "#FDB022" + }, + { + "name": "Colors/Warning/500", + "type": "color", + "isAlias": false, + "value": "#F79009" + }, + { + "name": "Colors/Warning/600", + "type": "color", + "isAlias": false, + "value": "#DC6803" + }, + { + "name": "Colors/Warning/700", + "type": "color", + "isAlias": false, + "value": "#B54708" + }, + { + "name": "Colors/Warning/800", + "type": "color", + "isAlias": false, + "value": "#93370D" + }, + { + "name": "Colors/Warning/900", + "type": "color", + "isAlias": false, + "value": "#7A2E0E" + }, + { + "name": "Colors/Warning/950", + "type": "color", + "isAlias": false, + "value": "#4E1D09" + }, + { + "name": "Colors/Success/25", + "type": "color", + "isAlias": false, + "value": "#F6FEF9" + }, + { + "name": "Colors/Success/50", + "type": "color", + "isAlias": false, + "value": "#ECFDF3" + }, + { + "name": "Colors/Success/100", + "type": "color", + "isAlias": false, + "value": "#DCFAE6" + }, + { + "name": "Colors/Success/200", + "type": "color", + "isAlias": false, + "value": "#ABEFC6" + }, + { + "name": "Colors/Success/300", + "type": "color", + "isAlias": false, + "value": "#75E0A7" + }, + { + "name": "Colors/Success/400", + "type": "color", + "isAlias": false, + "value": "#47CD89" + }, + { + "name": "Colors/Success/500", + "type": "color", + "isAlias": false, + "value": "#17B26A" + }, + { + "name": "Colors/Success/600", + "type": "color", + "isAlias": false, + "value": "#079455" + }, + { + "name": "Colors/Success/700", + "type": "color", + "isAlias": false, + "value": "#067647" + }, + { + "name": "Colors/Success/800", + "type": "color", + "isAlias": false, + "value": "#085D3A" + }, + { + "name": "Colors/Success/900", + "type": "color", + "isAlias": false, + "value": "#074D31" + }, + { + "name": "Colors/Success/950", + "type": "color", + "isAlias": false, + "value": "#053321" + }, + { + "name": "Colors/Gray blue/25", + "type": "color", + "isAlias": false, + "value": "#FCFCFD" + }, + { + "name": "Colors/Gray blue/50", + "type": "color", + "isAlias": false, + "value": "#F8F9FC" + }, + { + "name": "Colors/Gray blue/100", + "type": "color", + "isAlias": false, + "value": "#EAECF5" + }, + { + "name": "Colors/Gray blue/200", + "type": "color", + "isAlias": false, + "value": "#D5D9EB" + }, + { + "name": "Colors/Gray blue/300", + "type": "color", + "isAlias": false, + "value": "#B3B8DB" + }, + { + "name": "Colors/Gray blue/400", + "type": "color", + "isAlias": false, + "value": "#717BBC" + }, + { + "name": "Colors/Gray blue/500", + "type": "color", + "isAlias": false, + "value": "#4E5BA6" + }, + { + "name": "Colors/Gray blue/600", + "type": "color", + "isAlias": false, + "value": "#3E4784" + }, + { + "name": "Colors/Gray blue/700", + "type": "color", + "isAlias": false, + "value": "#363F72" + }, + { + "name": "Colors/Gray blue/800", + "type": "color", + "isAlias": false, + "value": "#293056" + }, + { + "name": "Colors/Gray blue/900", + "type": "color", + "isAlias": false, + "value": "#101323" + }, + { + "name": "Colors/Gray blue/950", + "type": "color", + "isAlias": false, + "value": "#0D0F1C" + }, + { + "name": "Colors/Gray cool/25", + "type": "color", + "isAlias": false, + "value": "#FCFCFD" + }, + { + "name": "Colors/Gray cool/50", + "type": "color", + "isAlias": false, + "value": "#F9F9FB" + }, + { + "name": "Colors/Gray cool/100", + "type": "color", + "isAlias": false, + "value": "#EFF1F5" + }, + { + "name": "Colors/Gray cool/200", + "type": "color", + "isAlias": false, + "value": "#DCDFEA" + }, + { + "name": "Colors/Gray cool/300", + "type": "color", + "isAlias": false, + "value": "#B9C0D4" + }, + { + "name": "Colors/Gray cool/400", + "type": "color", + "isAlias": false, + "value": "#7D89B0" + }, + { + "name": "Colors/Gray cool/500", + "type": "color", + "isAlias": false, + "value": "#5D6B98" + }, + { + "name": "Colors/Gray cool/600", + "type": "color", + "isAlias": false, + "value": "#4A5578" + }, + { + "name": "Colors/Gray cool/700", + "type": "color", + "isAlias": false, + "value": "#404968" + }, + { + "name": "Colors/Gray cool/800", + "type": "color", + "isAlias": false, + "value": "#30374F" + }, + { + "name": "Colors/Gray cool/900", + "type": "color", + "isAlias": false, + "value": "#111322" + }, + { + "name": "Colors/Gray cool/950", + "type": "color", + "isAlias": false, + "value": "#0E101B" + }, + { + "name": "Colors/Gray modern/25", + "type": "color", + "isAlias": false, + "value": "#FCFCFD" + }, + { + "name": "Colors/Gray modern/50", + "type": "color", + "isAlias": false, + "value": "#F8FAFC" + }, + { + "name": "Colors/Gray modern/100", + "type": "color", + "isAlias": false, + "value": "#EEF2F6" + }, + { + "name": "Colors/Gray modern/200", + "type": "color", + "isAlias": false, + "value": "#E3E8EF" + }, + { + "name": "Colors/Gray modern/300", + "type": "color", + "isAlias": false, + "value": "#CDD5DF" + }, + { + "name": "Colors/Gray modern/400", + "type": "color", + "isAlias": false, + "value": "#9AA4B2" + }, + { + "name": "Colors/Gray modern/500", + "type": "color", + "isAlias": false, + "value": "#697586" + }, + { + "name": "Colors/Gray modern/600", + "type": "color", + "isAlias": false, + "value": "#4B5565" + }, + { + "name": "Colors/Gray modern/700", + "type": "color", + "isAlias": false, + "value": "#364152" + }, + { + "name": "Colors/Gray modern/800", + "type": "color", + "isAlias": false, + "value": "#202939" + }, + { + "name": "Colors/Gray modern/900", + "type": "color", + "isAlias": false, + "value": "#121926" + }, + { + "name": "Colors/Gray modern/950", + "type": "color", + "isAlias": false, + "value": "#0D121C" + }, + { + "name": "Colors/Gray neutral/25", + "type": "color", + "isAlias": false, + "value": "#FCFCFD" + }, + { + "name": "Colors/Gray neutral/50", + "type": "color", + "isAlias": false, + "value": "#F9FAFB" + }, + { + "name": "Colors/Gray neutral/100", + "type": "color", + "isAlias": false, + "value": "#F3F4F6" + }, + { + "name": "Colors/Gray neutral/200", + "type": "color", + "isAlias": false, + "value": "#E5E7EB" + }, + { + "name": "Colors/Gray neutral/300", + "type": "color", + "isAlias": false, + "value": "#D2D6DB" + }, + { + "name": "Colors/Gray neutral/400", + "type": "color", + "isAlias": false, + "value": "#9DA4AE" + }, + { + "name": "Colors/Gray neutral/500", + "type": "color", + "isAlias": false, + "value": "#6C737F" + }, + { + "name": "Colors/Gray neutral/600", + "type": "color", + "isAlias": false, + "value": "#4D5761" + }, + { + "name": "Colors/Gray neutral/700", + "type": "color", + "isAlias": false, + "value": "#384250" + }, + { + "name": "Colors/Gray neutral/800", + "type": "color", + "isAlias": false, + "value": "#1F2A37" + }, + { + "name": "Colors/Gray neutral/900", + "type": "color", + "isAlias": false, + "value": "#111927" + }, + { + "name": "Colors/Gray neutral/950", + "type": "color", + "isAlias": false, + "value": "#0D121C" + }, + { + "name": "Colors/Gray iron/25", + "type": "color", + "isAlias": false, + "value": "#FCFCFC" + }, + { + "name": "Colors/Gray iron/50", + "type": "color", + "isAlias": false, + "value": "#FAFAFA" + }, + { + "name": "Colors/Gray iron/100", + "type": "color", + "isAlias": false, + "value": "#F4F4F5" + }, + { + "name": "Colors/Gray iron/200", + "type": "color", + "isAlias": false, + "value": "#E4E4E7" + }, + { + "name": "Colors/Gray iron/300", + "type": "color", + "isAlias": false, + "value": "#D1D1D6" + }, + { + "name": "Colors/Gray iron/400", + "type": "color", + "isAlias": false, + "value": "#A0A0AB" + }, + { + "name": "Colors/Gray iron/500", + "type": "color", + "isAlias": false, + "value": "#70707B" + }, + { + "name": "Colors/Gray iron/600", + "type": "color", + "isAlias": false, + "value": "#51525C" + }, + { + "name": "Colors/Gray iron/700", + "type": "color", + "isAlias": false, + "value": "#3F3F46" + }, + { + "name": "Colors/Gray iron/800", + "type": "color", + "isAlias": false, + "value": "#26272B" + }, + { + "name": "Colors/Gray iron/900", + "type": "color", + "isAlias": false, + "value": "#1A1A1E" + }, + { + "name": "Colors/Gray iron/950", + "type": "color", + "isAlias": false, + "value": "#131316" + }, + { + "name": "Colors/Gray true/25", + "type": "color", + "isAlias": false, + "value": "#FCFCFC" + }, + { + "name": "Colors/Gray true/50", + "type": "color", + "isAlias": false, + "value": "#FAFAFA" + }, + { + "name": "Colors/Gray true/100", + "type": "color", + "isAlias": false, + "value": "#F5F5F5" + }, + { + "name": "Colors/Gray true/200", + "type": "color", + "isAlias": false, + "value": "#E5E5E5" + }, + { + "name": "Colors/Gray true/300", + "type": "color", + "isAlias": false, + "value": "#D6D6D6" + }, + { + "name": "Colors/Gray true/400", + "type": "color", + "isAlias": false, + "value": "#A3A3A3" + }, + { + "name": "Colors/Gray true/500", + "type": "color", + "isAlias": false, + "value": "#737373" + }, + { + "name": "Colors/Gray true/600", + "type": "color", + "isAlias": false, + "value": "#525252" + }, + { + "name": "Colors/Gray true/700", + "type": "color", + "isAlias": false, + "value": "#424242" + }, + { + "name": "Colors/Gray true/800", + "type": "color", + "isAlias": false, + "value": "#292929" + }, + { + "name": "Colors/Gray true/900", + "type": "color", + "isAlias": false, + "value": "#141414" + }, + { + "name": "Colors/Gray true/950", + "type": "color", + "isAlias": false, + "value": "#0F0F0F" + }, + { + "name": "Colors/Gray warm/25", + "type": "color", + "isAlias": false, + "value": "#FDFDFC" + }, + { + "name": "Colors/Gray warm/50", + "type": "color", + "isAlias": false, + "value": "#FAFAF9" + }, + { + "name": "Colors/Gray warm/100", + "type": "color", + "isAlias": false, + "value": "#F5F5F4" + }, + { + "name": "Colors/Gray warm/200", + "type": "color", + "isAlias": false, + "value": "#E7E5E4" + }, + { + "name": "Colors/Gray warm/300", + "type": "color", + "isAlias": false, + "value": "#D7D3D0" + }, + { + "name": "Colors/Gray warm/400", + "type": "color", + "isAlias": false, + "value": "#A9A29D" + }, + { + "name": "Colors/Gray warm/500", + "type": "color", + "isAlias": false, + "value": "#79716B" + }, + { + "name": "Colors/Gray warm/600", + "type": "color", + "isAlias": false, + "value": "#57534E" + }, + { + "name": "Colors/Gray warm/700", + "type": "color", + "isAlias": false, + "value": "#44403C" + }, + { + "name": "Colors/Gray warm/800", + "type": "color", + "isAlias": false, + "value": "#292524" + }, + { + "name": "Colors/Gray warm/900", + "type": "color", + "isAlias": false, + "value": "#1C1917" + }, + { + "name": "Colors/Gray warm/950", + "type": "color", + "isAlias": false, + "value": "#171412" + }, + { + "name": "Colors/Moss/25", + "type": "color", + "isAlias": false, + "value": "#FAFDF7" + }, + { + "name": "Colors/Moss/50", + "type": "color", + "isAlias": false, + "value": "#F5FBEE" + }, + { + "name": "Colors/Moss/100", + "type": "color", + "isAlias": false, + "value": "#E6F4D7" + }, + { + "name": "Colors/Moss/200", + "type": "color", + "isAlias": false, + "value": "#CEEAB0" + }, + { + "name": "Colors/Moss/300", + "type": "color", + "isAlias": false, + "value": "#ACDC79" + }, + { + "name": "Colors/Moss/400", + "type": "color", + "isAlias": false, + "value": "#86CB3C" + }, + { + "name": "Colors/Moss/500", + "type": "color", + "isAlias": false, + "value": "#669F2A" + }, + { + "name": "Colors/Moss/600", + "type": "color", + "isAlias": false, + "value": "#4F7A21" + }, + { + "name": "Colors/Moss/700", + "type": "color", + "isAlias": false, + "value": "#3F621A" + }, + { + "name": "Colors/Moss/800", + "type": "color", + "isAlias": false, + "value": "#335015" + }, + { + "name": "Colors/Moss/900", + "type": "color", + "isAlias": false, + "value": "#2B4212" + }, + { + "name": "Colors/Moss/950", + "type": "color", + "isAlias": false, + "value": "#1A280B" + }, + { + "name": "Colors/Green light/25", + "type": "color", + "isAlias": false, + "value": "#FAFEF5" + }, + { + "name": "Colors/Green light/50", + "type": "color", + "isAlias": false, + "value": "#F3FEE7" + }, + { + "name": "Colors/Green light/100", + "type": "color", + "isAlias": false, + "value": "#E3FBCC" + }, + { + "name": "Colors/Green light/200", + "type": "color", + "isAlias": false, + "value": "#D0F8AB" + }, + { + "name": "Colors/Green light/300", + "type": "color", + "isAlias": false, + "value": "#A6EF67" + }, + { + "name": "Colors/Green light/400", + "type": "color", + "isAlias": false, + "value": "#85E13A" + }, + { + "name": "Colors/Green light/500", + "type": "color", + "isAlias": false, + "value": "#66C61C" + }, + { + "name": "Colors/Green light/600", + "type": "color", + "isAlias": false, + "value": "#4CA30D" + }, + { + "name": "Colors/Green light/700", + "type": "color", + "isAlias": false, + "value": "#3B7C0F" + }, + { + "name": "Colors/Green light/800", + "type": "color", + "isAlias": false, + "value": "#326212" + }, + { + "name": "Colors/Green light/900", + "type": "color", + "isAlias": false, + "value": "#2B5314" + }, + { + "name": "Colors/Green light/950", + "type": "color", + "isAlias": false, + "value": "#15290A" + }, + { + "name": "Colors/Green/25", + "type": "color", + "isAlias": false, + "value": "#F6FEF9" + }, + { + "name": "Colors/Green/50", + "type": "color", + "isAlias": false, + "value": "#EDFCF2" + }, + { + "name": "Colors/Green/100", + "type": "color", + "isAlias": false, + "value": "#D3F8DF" + }, + { + "name": "Colors/Green/200", + "type": "color", + "isAlias": false, + "value": "#AAF0C4" + }, + { + "name": "Colors/Green/300", + "type": "color", + "isAlias": false, + "value": "#73E2A3" + }, + { + "name": "Colors/Green/400", + "type": "color", + "isAlias": false, + "value": "#3CCB7F" + }, + { + "name": "Colors/Green/500", + "type": "color", + "isAlias": false, + "value": "#16B364" + }, + { + "name": "Colors/Green/600", + "type": "color", + "isAlias": false, + "value": "#099250" + }, + { + "name": "Colors/Green/700", + "type": "color", + "isAlias": false, + "value": "#087443" + }, + { + "name": "Colors/Green/800", + "type": "color", + "isAlias": false, + "value": "#095C37" + }, + { + "name": "Colors/Green/900", + "type": "color", + "isAlias": false, + "value": "#084C2E" + }, + { + "name": "Colors/Green/950", + "type": "color", + "isAlias": false, + "value": "#052E1C" + }, + { + "name": "Colors/Teal/25", + "type": "color", + "isAlias": false, + "value": "#F6FEFC" + }, + { + "name": "Colors/Teal/50", + "type": "color", + "isAlias": false, + "value": "#F0FDF9" + }, + { + "name": "Colors/Teal/100", + "type": "color", + "isAlias": false, + "value": "#CCFBEF" + }, + { + "name": "Colors/Teal/200", + "type": "color", + "isAlias": false, + "value": "#99F6E0" + }, + { + "name": "Colors/Teal/300", + "type": "color", + "isAlias": false, + "value": "#5FE9D0" + }, + { + "name": "Colors/Teal/400", + "type": "color", + "isAlias": false, + "value": "#2ED3B7" + }, + { + "name": "Colors/Teal/500", + "type": "color", + "isAlias": false, + "value": "#15B79E" + }, + { + "name": "Colors/Teal/600", + "type": "color", + "isAlias": false, + "value": "#0E9384" + }, + { + "name": "Colors/Teal/700", + "type": "color", + "isAlias": false, + "value": "#107569" + }, + { + "name": "Colors/Teal/800", + "type": "color", + "isAlias": false, + "value": "#125D56" + }, + { + "name": "Colors/Teal/900", + "type": "color", + "isAlias": false, + "value": "#134E48" + }, + { + "name": "Colors/Teal/950", + "type": "color", + "isAlias": false, + "value": "#0A2926" + }, + { + "name": "Colors/Cyan/25", + "type": "color", + "isAlias": false, + "value": "#F5FEFF" + }, + { + "name": "Colors/Cyan/50", + "type": "color", + "isAlias": false, + "value": "#ECFDFF" + }, + { + "name": "Colors/Cyan/100", + "type": "color", + "isAlias": false, + "value": "#CFF9FE" + }, + { + "name": "Colors/Cyan/200", + "type": "color", + "isAlias": false, + "value": "#A5F0FC" + }, + { + "name": "Colors/Cyan/300", + "type": "color", + "isAlias": false, + "value": "#67E3F9" + }, + { + "name": "Colors/Cyan/400", + "type": "color", + "isAlias": false, + "value": "#22CCEE" + }, + { + "name": "Colors/Cyan/500", + "type": "color", + "isAlias": false, + "value": "#06AED4" + }, + { + "name": "Colors/Cyan/600", + "type": "color", + "isAlias": false, + "value": "#088AB2" + }, + { + "name": "Colors/Cyan/700", + "type": "color", + "isAlias": false, + "value": "#0E7090" + }, + { + "name": "Colors/Cyan/800", + "type": "color", + "isAlias": false, + "value": "#155B75" + }, + { + "name": "Colors/Cyan/900", + "type": "color", + "isAlias": false, + "value": "#164C63" + }, + { + "name": "Colors/Cyan/950", + "type": "color", + "isAlias": false, + "value": "#0D2D3A" + }, + { + "name": "Colors/BlueLight/25", + "type": "color", + "isAlias": false, + "value": "#F5FBFF" + }, + { + "name": "Colors/BlueLight/50", + "type": "color", + "isAlias": false, + "value": "#F0F9FF" + }, + { + "name": "Colors/BlueLight/100", + "type": "color", + "isAlias": false, + "value": "#E0F2FE" + }, + { + "name": "Colors/BlueLight/200", + "type": "color", + "isAlias": false, + "value": "#B9E6FE" + }, + { + "name": "Colors/BlueLight/300", + "type": "color", + "isAlias": false, + "value": "#7CD4FD" + }, + { + "name": "Colors/BlueLight/400", + "type": "color", + "isAlias": false, + "value": "#36BFFA" + }, + { + "name": "Colors/BlueLight/500", + "type": "color", + "isAlias": false, + "value": "#0BA5EC" + }, + { + "name": "Colors/BlueLight/600", + "type": "color", + "isAlias": false, + "value": "#0086C9" + }, + { + "name": "Colors/BlueLight/700", + "type": "color", + "isAlias": false, + "value": "#026AA2" + }, + { + "name": "Colors/BlueLight/800", + "type": "color", + "isAlias": false, + "value": "#065986" + }, + { + "name": "Colors/BlueLight/900", + "type": "color", + "isAlias": false, + "value": "#0B4A6F" + }, + { + "name": "Colors/BlueLight/950", + "type": "color", + "isAlias": false, + "value": "#062C41" + }, + { + "name": "Colors/Blue/25", + "type": "color", + "isAlias": false, + "value": "#F5FAFF" + }, + { + "name": "Colors/Blue/50", + "type": "color", + "isAlias": false, + "value": "#EFF8FF" + }, + { + "name": "Colors/Blue/100", + "type": "color", + "isAlias": false, + "value": "#D1E9FF" + }, + { + "name": "Colors/Blue/200", + "type": "color", + "isAlias": false, + "value": "#B2DDFF" + }, + { + "name": "Colors/Blue/300", + "type": "color", + "isAlias": false, + "value": "#84CAFF" + }, + { + "name": "Colors/Blue/400", + "type": "color", + "isAlias": false, + "value": "#53B1FD" + }, + { + "name": "Colors/Blue/500", + "type": "color", + "isAlias": false, + "value": "#2E90FA" + }, + { + "name": "Colors/Blue/600", + "type": "color", + "isAlias": false, + "value": "#1570EF" + }, + { + "name": "Colors/Blue/700", + "type": "color", + "isAlias": false, + "value": "#175CD3" + }, + { + "name": "Colors/Blue/800", + "type": "color", + "isAlias": false, + "value": "#1849A9" + }, + { + "name": "Colors/Blue/900", + "type": "color", + "isAlias": false, + "value": "#194185" + }, + { + "name": "Colors/Blue/950", + "type": "color", + "isAlias": false, + "value": "#102A56" + }, + { + "name": "Colors/BlueDark/25", + "type": "color", + "isAlias": false, + "value": "#F5F8FF" + }, + { + "name": "Colors/BlueDark/50", + "type": "color", + "isAlias": false, + "value": "#EFF4FF" + }, + { + "name": "Colors/BlueDark/100", + "type": "color", + "isAlias": false, + "value": "#D1E0FF" + }, + { + "name": "Colors/BlueDark/200", + "type": "color", + "isAlias": false, + "value": "#B2CCFF" + }, + { + "name": "Colors/BlueDark/300", + "type": "color", + "isAlias": false, + "value": "#84ADFF" + }, + { + "name": "Colors/BlueDark/400", + "type": "color", + "isAlias": false, + "value": "#528BFF" + }, + { + "name": "Colors/BlueDark/500", + "type": "color", + "isAlias": false, + "value": "#2970FF" + }, + { + "name": "Colors/BlueDark/600", + "type": "color", + "isAlias": false, + "value": "#155EEF" + }, + { + "name": "Colors/BlueDark/700", + "type": "color", + "isAlias": false, + "value": "#004EEB" + }, + { + "name": "Colors/BlueDark/800", + "type": "color", + "isAlias": false, + "value": "#0040C1" + }, + { + "name": "Colors/BlueDark/900", + "type": "color", + "isAlias": false, + "value": "#00359E" + }, + { + "name": "Colors/BlueDark/950", + "type": "color", + "isAlias": false, + "value": "#002266" + }, + { + "name": "Colors/Indigo/25", + "type": "color", + "isAlias": false, + "value": "#F5F8FF" + }, + { + "name": "Colors/Indigo/50", + "type": "color", + "isAlias": false, + "value": "#EEF4FF" + }, + { + "name": "Colors/Indigo/100", + "type": "color", + "isAlias": false, + "value": "#E0EAFF" + }, + { + "name": "Colors/Indigo/200", + "type": "color", + "isAlias": false, + "value": "#C7D7FE" + }, + { + "name": "Colors/Indigo/300", + "type": "color", + "isAlias": false, + "value": "#A4BCFD" + }, + { + "name": "Colors/Indigo/400", + "type": "color", + "isAlias": false, + "value": "#8098F9" + }, + { + "name": "Colors/Indigo/500", + "type": "color", + "isAlias": false, + "value": "#6172F3" + }, + { + "name": "Colors/Indigo/600", + "type": "color", + "isAlias": false, + "value": "#444CE7" + }, + { + "name": "Colors/Indigo/700", + "type": "color", + "isAlias": false, + "value": "#3538CD" + }, + { + "name": "Colors/Indigo/800", + "type": "color", + "isAlias": false, + "value": "#2D31A6" + }, + { + "name": "Colors/Indigo/900", + "type": "color", + "isAlias": false, + "value": "#2D3282" + }, + { + "name": "Colors/Indigo/950", + "type": "color", + "isAlias": false, + "value": "#1F235B" + }, + { + "name": "Colors/Violet/25", + "type": "color", + "isAlias": false, + "value": "#FBFAFF" + }, + { + "name": "Colors/Violet/50", + "type": "color", + "isAlias": false, + "value": "#F5F3FF" + }, + { + "name": "Colors/Violet/100", + "type": "color", + "isAlias": false, + "value": "#ECE9FE" + }, + { + "name": "Colors/Violet/200", + "type": "color", + "isAlias": false, + "value": "#DDD6FE" + }, + { + "name": "Colors/Violet/300", + "type": "color", + "isAlias": false, + "value": "#C3B5FD" + }, + { + "name": "Colors/Violet/400", + "type": "color", + "isAlias": false, + "value": "#A48AFB" + }, + { + "name": "Colors/Violet/500", + "type": "color", + "isAlias": false, + "value": "#875BF7" + }, + { + "name": "Colors/Violet/600", + "type": "color", + "isAlias": false, + "value": "#7839EE" + }, + { + "name": "Colors/Violet/700", + "type": "color", + "isAlias": false, + "value": "#6927DA" + }, + { + "name": "Colors/Violet/800", + "type": "color", + "isAlias": false, + "value": "#5720B7" + }, + { + "name": "Colors/Violet/900", + "type": "color", + "isAlias": false, + "value": "#491C96" + }, + { + "name": "Colors/Violet/950", + "type": "color", + "isAlias": false, + "value": "#2E125E" + }, + { + "name": "Colors/Purple/25", + "type": "color", + "isAlias": false, + "value": "#FAFAFF" + }, + { + "name": "Colors/Purple/50", + "type": "color", + "isAlias": false, + "value": "#F4F3FF" + }, + { + "name": "Colors/Purple/100", + "type": "color", + "isAlias": false, + "value": "#EBE9FE" + }, + { + "name": "Colors/Purple/200", + "type": "color", + "isAlias": false, + "value": "#D9D6FE" + }, + { + "name": "Colors/Purple/300", + "type": "color", + "isAlias": false, + "value": "#BDB4FE" + }, + { + "name": "Colors/Purple/400", + "type": "color", + "isAlias": false, + "value": "#9B8AFB" + }, + { + "name": "Colors/Purple/500", + "type": "color", + "isAlias": false, + "value": "#7A5AF8" + }, + { + "name": "Colors/Purple/600", + "type": "color", + "isAlias": false, + "value": "#6938EF" + }, + { + "name": "Colors/Purple/700", + "type": "color", + "isAlias": false, + "value": "#5925DC" + }, + { + "name": "Colors/Purple/800", + "type": "color", + "isAlias": false, + "value": "#4A1FB8" + }, + { + "name": "Colors/Purple/900", + "type": "color", + "isAlias": false, + "value": "#3E1C96" + }, + { + "name": "Colors/Purple/950", + "type": "color", + "isAlias": false, + "value": "#27115F" + }, + { + "name": "Colors/Fuchsia/25", + "type": "color", + "isAlias": false, + "value": "#FEFAFF" + }, + { + "name": "Colors/Fuchsia/50", + "type": "color", + "isAlias": false, + "value": "#FDF4FF" + }, + { + "name": "Colors/Fuchsia/100", + "type": "color", + "isAlias": false, + "value": "#FBE8FF" + }, + { + "name": "Colors/Fuchsia/200", + "type": "color", + "isAlias": false, + "value": "#F6D0FE" + }, + { + "name": "Colors/Fuchsia/300", + "type": "color", + "isAlias": false, + "value": "#EEAAFD" + }, + { + "name": "Colors/Fuchsia/400", + "type": "color", + "isAlias": false, + "value": "#E478FA" + }, + { + "name": "Colors/Fuchsia/500", + "type": "color", + "isAlias": false, + "value": "#D444F1" + }, + { + "name": "Colors/Fuchsia/600", + "type": "color", + "isAlias": false, + "value": "#BA24D5" + }, + { + "name": "Colors/Fuchsia/700", + "type": "color", + "isAlias": false, + "value": "#9F1AB1" + }, + { + "name": "Colors/Fuchsia/800", + "type": "color", + "isAlias": false, + "value": "#821890" + }, + { + "name": "Colors/Fuchsia/900", + "type": "color", + "isAlias": false, + "value": "#6F1877" + }, + { + "name": "Colors/Fuchsia/950", + "type": "color", + "isAlias": false, + "value": "#47104C" + }, + { + "name": "Colors/Pink/25", + "type": "color", + "isAlias": false, + "value": "#FEF6FB" + }, + { + "name": "Colors/Pink/50", + "type": "color", + "isAlias": false, + "value": "#FDF2FA" + }, + { + "name": "Colors/Pink/100", + "type": "color", + "isAlias": false, + "value": "#FCE7F6" + }, + { + "name": "Colors/Pink/200", + "type": "color", + "isAlias": false, + "value": "#FCCEEE" + }, + { + "name": "Colors/Pink/300", + "type": "color", + "isAlias": false, + "value": "#FAA7E0" + }, + { + "name": "Colors/Pink/400", + "type": "color", + "isAlias": false, + "value": "#F670C7" + }, + { + "name": "Colors/Pink/500", + "type": "color", + "isAlias": false, + "value": "#EE46BC" + }, + { + "name": "Colors/Pink/600", + "type": "color", + "isAlias": false, + "value": "#DD2590" + }, + { + "name": "Colors/Pink/700", + "type": "color", + "isAlias": false, + "value": "#C11574" + }, + { + "name": "Colors/Pink/800", + "type": "color", + "isAlias": false, + "value": "#9E165F" + }, + { + "name": "Colors/Pink/900", + "type": "color", + "isAlias": false, + "value": "#851651" + }, + { + "name": "Colors/Pink/950", + "type": "color", + "isAlias": false, + "value": "#4E0D30" + }, + { + "name": "Colors/Rose/25", + "type": "color", + "isAlias": false, + "value": "#FFF5F6" + }, + { + "name": "Colors/Rose/50", + "type": "color", + "isAlias": false, + "value": "#FFF1F3" + }, + { + "name": "Colors/Rose/100", + "type": "color", + "isAlias": false, + "value": "#FFE4E8" + }, + { + "name": "Colors/Rose/200", + "type": "color", + "isAlias": false, + "value": "#FECDD6" + }, + { + "name": "Colors/Rose/300", + "type": "color", + "isAlias": false, + "value": "#FEA3B4" + }, + { + "name": "Colors/Rose/400", + "type": "color", + "isAlias": false, + "value": "#FD6F8E" + }, + { + "name": "Colors/Rose/500", + "type": "color", + "isAlias": false, + "value": "#F63D68" + }, + { + "name": "Colors/Rose/600", + "type": "color", + "isAlias": false, + "value": "#E31B54" + }, + { + "name": "Colors/Rose/700", + "type": "color", + "isAlias": false, + "value": "#C01048" + }, + { + "name": "Colors/Rose/800", + "type": "color", + "isAlias": false, + "value": "#A11043" + }, + { + "name": "Colors/Rose/900", + "type": "color", + "isAlias": false, + "value": "#89123E" + }, + { + "name": "Colors/Rose/950", + "type": "color", + "isAlias": false, + "value": "#510B24" + }, + { + "name": "Colors/Orange dark/25", + "type": "color", + "isAlias": false, + "value": "#FFF9F5" + }, + { + "name": "Colors/Orange dark/50", + "type": "color", + "isAlias": false, + "value": "#FFF4ED" + }, + { + "name": "Colors/Orange dark/100", + "type": "color", + "isAlias": false, + "value": "#FFE6D5" + }, + { + "name": "Colors/Orange dark/200", + "type": "color", + "isAlias": false, + "value": "#FFD6AE" + }, + { + "name": "Colors/Orange dark/300", + "type": "color", + "isAlias": false, + "value": "#FF9C66" + }, + { + "name": "Colors/Orange dark/400", + "type": "color", + "isAlias": false, + "value": "#FF692E" + }, + { + "name": "Colors/Orange dark/500", + "type": "color", + "isAlias": false, + "value": "#FF4405" + }, + { + "name": "Colors/Orange dark/600", + "type": "color", + "isAlias": false, + "value": "#E62E05" + }, + { + "name": "Colors/Orange dark/700", + "type": "color", + "isAlias": false, + "value": "#BC1B06" + }, + { + "name": "Colors/Orange dark/800", + "type": "color", + "isAlias": false, + "value": "#97180C" + }, + { + "name": "Colors/Orange dark/900", + "type": "color", + "isAlias": false, + "value": "#771A0D" + }, + { + "name": "Colors/Orange dark/950", + "type": "color", + "isAlias": false, + "value": "#57130A" + }, + { + "name": "Colors/Orange/25", + "type": "color", + "isAlias": false, + "value": "#FEFAF5" + }, + { + "name": "Colors/Orange/50", + "type": "color", + "isAlias": false, + "value": "#FEF6EE" + }, + { + "name": "Colors/Orange/100", + "type": "color", + "isAlias": false, + "value": "#FDEAD7" + }, + { + "name": "Colors/Orange/200", + "type": "color", + "isAlias": false, + "value": "#F9DBAF" + }, + { + "name": "Colors/Orange/300", + "type": "color", + "isAlias": false, + "value": "#F7B27A" + }, + { + "name": "Colors/Orange/400", + "type": "color", + "isAlias": false, + "value": "#F38744" + }, + { + "name": "Colors/Orange/500", + "type": "color", + "isAlias": false, + "value": "#EF6820" + }, + { + "name": "Colors/Orange/600", + "type": "color", + "isAlias": false, + "value": "#E04F16" + }, + { + "name": "Colors/Orange/700", + "type": "color", + "isAlias": false, + "value": "#B93815" + }, + { + "name": "Colors/Orange/800", + "type": "color", + "isAlias": false, + "value": "#932F19" + }, + { + "name": "Colors/Orange/900", + "type": "color", + "isAlias": false, + "value": "#772917" + }, + { + "name": "Colors/Orange/950", + "type": "color", + "isAlias": false, + "value": "#511C10" + }, + { + "name": "Colors/Yellow/25", + "type": "color", + "isAlias": false, + "value": "#FEFDF0" + }, + { + "name": "Colors/Yellow/50", + "type": "color", + "isAlias": false, + "value": "#FEFBE8" + }, + { + "name": "Colors/Yellow/100", + "type": "color", + "isAlias": false, + "value": "#FEF7C3" + }, + { + "name": "Colors/Yellow/200", + "type": "color", + "isAlias": false, + "value": "#FEEE95" + }, + { + "name": "Colors/Yellow/300", + "type": "color", + "isAlias": false, + "value": "#FDE272" + }, + { + "name": "Colors/Yellow/400", + "type": "color", + "isAlias": false, + "value": "#FAC515" + }, + { + "name": "Colors/Yellow/500", + "type": "color", + "isAlias": false, + "value": "#EAAA08" + }, + { + "name": "Colors/Yellow/600", + "type": "color", + "isAlias": false, + "value": "#CA8504" + }, + { + "name": "Colors/Yellow/700", + "type": "color", + "isAlias": false, + "value": "#A15C07" + }, + { + "name": "Colors/Yellow/800", + "type": "color", + "isAlias": false, + "value": "#854A0E" + }, + { + "name": "Colors/Yellow/900", + "type": "color", + "isAlias": false, + "value": "#713B12" + }, + { + "name": "Colors/Yellow/950", + "type": "color", + "isAlias": false, + "value": "#542C0D" + }, + { + "name": "Spacing/0 (0px)", + "type": "number", + "isAlias": false, + "value": 0 + }, + { + "name": "Spacing/0․5 (2px)", + "type": "number", + "isAlias": false, + "value": 2 + }, + { + "name": "Spacing/1 (4px)", + "type": "number", + "isAlias": false, + "value": 4 + }, + { + "name": "Spacing/1․5 (6px)", + "type": "number", + "isAlias": false, + "value": 6 + }, + { + "name": "Spacing/2 (8px)", + "type": "number", + "isAlias": false, + "value": 8 + }, + { + "name": "Spacing/3 (12px)", + "type": "number", + "isAlias": false, + "value": 12 + }, + { + "name": "Spacing/4 (16px)", + "type": "number", + "isAlias": false, + "value": 16 + }, + { + "name": "Spacing/5 (20px)", + "type": "number", + "isAlias": false, + "value": 20 + }, + { + "name": "Spacing/6 (24px)", + "type": "number", + "isAlias": false, + "value": 24 + }, + { + "name": "Spacing/8 (32px)", + "type": "number", + "isAlias": false, + "value": 32 + }, + { + "name": "Spacing/10 (40px)", + "type": "number", + "isAlias": false, + "value": 40 + }, + { + "name": "Spacing/12 (48px)", + "type": "number", + "isAlias": false, + "value": 48 + }, + { + "name": "Spacing/16 (64px)", + "type": "number", + "isAlias": false, + "value": 64 + }, + { + "name": "Spacing/20 (80px)", + "type": "number", + "isAlias": false, + "value": 80 + }, + { + "name": "Spacing/24 (96px)", + "type": "number", + "isAlias": false, + "value": 96 + }, + { + "name": "Spacing/32 (128px)", + "type": "number", + "isAlias": false, + "value": 128 + }, + { + "name": "Spacing/40 (160px)", + "type": "number", + "isAlias": false, + "value": 160 + }, + { + "name": "Spacing/48 (192px)", + "type": "number", + "isAlias": false, + "value": 192 + }, + { + "name": "Spacing/56 (224px)", + "type": "number", + "isAlias": false, + "value": 224 + }, + { + "name": "Spacing/64 (256px)", + "type": "number", + "isAlias": false, + "value": 256 + }, + { + "name": "Spacing/80 (320px)", + "type": "number", + "isAlias": false, + "value": 320 + }, + { + "name": "Spacing/96 (384px)", + "type": "number", + "isAlias": false, + "value": 384 + }, + { + "name": "Spacing/120 (480px)", + "type": "number", + "isAlias": false, + "value": 480 + }, + { + "name": "Spacing/140 (560px)", + "type": "number", + "isAlias": false, + "value": 560 + }, + { + "name": "Spacing/160 (640px)", + "type": "number", + "isAlias": false, + "value": 640 + }, + { + "name": "Spacing/180 (720px)", + "type": "number", + "isAlias": false, + "value": 720 + }, + { + "name": "Spacing/192 (768px)", + "type": "number", + "isAlias": false, + "value": 768 + }, + { + "name": "Spacing/256 (1,024px)", + "type": "number", + "isAlias": false, + "value": 1024 + }, + { + "name": "Spacing/320 (1,280px)", + "type": "number", + "isAlias": false, + "value": 1280 + }, + { + "name": "Spacing/360 (1,440px)", + "type": "number", + "isAlias": false, + "value": 1440 + }, + { + "name": "Spacing/400 (1,600px)", + "type": "number", + "isAlias": false, + "value": 1600 + }, + { + "name": "Spacing/480 (1,920px)", + "type": "number", + "isAlias": false, + "value": 1920 + } + ] + } + ] + }, + { + "name": "1. Color modes", + "modes": [ + { + "name": "Light mode", + "variables": [ + { + "name": "Colors/Text/text-primary (900)", + "type": "color", + "isAlias": true, + "value": { + "collection": "_Primitives", + "name": "Colors/Gray (light mode)/900" + } + }, + { + "name": "Colors/Text/text-primary_on-brand", + "type": "color", + "isAlias": true, + "value": { + "collection": "_Primitives", + "name": "Colors/Base/white" + } + }, + { + "name": "Colors/Text/text-secondary (700)", + "type": "color", + "isAlias": true, + "value": { + "collection": "_Primitives", + "name": "Colors/Gray (light mode)/700" + } + }, + { + "name": "Colors/Text/text-secondary_hover", + "type": "color", + "isAlias": true, + "value": { + "collection": "_Primitives", + "name": "Colors/Gray (light mode)/800" + } + }, + { + "name": "Colors/Text/text-secondary_on-brand", + "type": "color", + "isAlias": true, + "value": { + "collection": "_Primitives", + "name": "Colors/Brand/200" + } + }, + { + "name": "Colors/Text/text-tertiary (600)", + "type": "color", + "isAlias": true, + "value": { + "collection": "_Primitives", + "name": "Colors/Gray (light mode)/600" + } + }, + { + "name": "Colors/Text/text-tertiary_hover", + "type": "color", + "isAlias": true, + "value": { + "collection": "_Primitives", + "name": "Colors/Gray (light mode)/700" + } + }, + { + "name": "Colors/Text/text-tertiary_on-brand", + "type": "color", + "isAlias": true, + "value": { + "collection": "_Primitives", + "name": "Colors/Brand/200" + } + }, + { + "name": "Colors/Text/text-quarterary (500)", + "type": "color", + "isAlias": true, + "value": { + "collection": "_Primitives", + "name": "Colors/Gray (light mode)/500" + } + }, + { + "name": "Colors/Text/text-quarterary_on-brand", + "type": "color", + "isAlias": true, + "value": { + "collection": "_Primitives", + "name": "Colors/Brand/300" + } + }, + { + "name": "Colors/Text/text-white", + "type": "color", + "isAlias": true, + "value": { + "collection": "_Primitives", + "name": "Colors/Base/white" + } + }, + { + "name": "Colors/Text/text-disabled", + "type": "color", + "isAlias": true, + "value": { + "collection": "_Primitives", + "name": "Colors/Gray (light mode)/500" + } + }, + { + "name": "Colors/Text/text-placeholder", + "type": "color", + "isAlias": true, + "value": { + "collection": "_Primitives", + "name": "Colors/Gray (light mode)/500" + } + }, + { + "name": "Colors/Text/text-placeholder_subtle", + "type": "color", + "isAlias": true, + "value": { + "collection": "_Primitives", + "name": "Colors/Gray (light mode)/300" + } + }, + { + "name": "Colors/Text/text-brand-primary (900)", + "type": "color", + "isAlias": true, + "value": { + "collection": "_Primitives", + "name": "Colors/Brand/900" + } + }, + { + "name": "Colors/Text/text-brand-secondary (700)", + "type": "color", + "isAlias": true, + "value": { + "collection": "_Primitives", + "name": "Colors/Brand/700" + } + }, + { + "name": "Colors/Text/text-brand-tertiary (600)", + "type": "color", + "isAlias": true, + "value": { + "collection": "_Primitives", + "name": "Colors/Brand/600" + } + }, + { + "name": "Colors/Text/text-brand-tertiary_alt", + "type": "color", + "isAlias": true, + "value": { + "collection": "_Primitives", + "name": "Colors/Brand/600" + } + }, + { + "name": "Colors/Text/text-error-primary (600)", + "type": "color", + "isAlias": true, + "value": { + "collection": "_Primitives", + "name": "Colors/Error/600" + } + }, + { + "name": "Colors/Text/text-warning-primary (600)", + "type": "color", + "isAlias": true, + "value": { + "collection": "_Primitives", + "name": "Colors/Warning/600" + } + }, + { + "name": "Colors/Text/text-success-primary (600)", + "type": "color", + "isAlias": true, + "value": { + "collection": "_Primitives", + "name": "Colors/Success/600" + } + }, + { + "name": "Colors/Border/border-primary", + "type": "color", + "isAlias": true, + "value": { + "collection": "_Primitives", + "name": "Colors/Gray (light mode)/300" + } + }, + { + "name": "Colors/Border/border-secondary", + "type": "color", + "isAlias": true, + "value": { + "collection": "_Primitives", + "name": "Colors/Gray (light mode)/200" + } + }, + { + "name": "Colors/Border/border-tertiary", + "type": "color", + "isAlias": true, + "value": { + "collection": "_Primitives", + "name": "Colors/Gray (light mode)/100" + } + }, + { + "name": "Colors/Border/border-disabled", + "type": "color", + "isAlias": true, + "value": { + "collection": "_Primitives", + "name": "Colors/Gray (light mode)/300" + } + }, + { + "name": "Colors/Border/border-disabled_subtle", + "type": "color", + "isAlias": true, + "value": { + "collection": "_Primitives", + "name": "Colors/Gray (light mode)/200" + } + }, + { + "name": "Colors/Border/border-brand", + "type": "color", + "isAlias": true, + "value": { + "collection": "_Primitives", + "name": "Colors/Brand/300" + } + }, + { + "name": "Colors/Border/border-brand-solid", + "type": "color", + "isAlias": true, + "value": { + "collection": "_Primitives", + "name": "Colors/Brand/600" + } + }, + { + "name": "Colors/Border/border-brand-solid_alt", + "type": "color", + "isAlias": true, + "value": { + "collection": "_Primitives", + "name": "Colors/Brand/600" + } + }, + { + "name": "Colors/Border/border-error", + "type": "color", + "isAlias": true, + "value": { + "collection": "_Primitives", + "name": "Colors/Error/300" + } + }, + { + "name": "Colors/Border/border-error-solid", + "type": "color", + "isAlias": true, + "value": { + "collection": "_Primitives", + "name": "Colors/Error/600" + } + }, + { + "name": "Colors/Foreground/fg-primary (900)", + "type": "color", + "isAlias": true, + "value": { + "collection": "_Primitives", + "name": "Colors/Gray (light mode)/900" + } + }, + { + "name": "Component colors/Alpha/alpha-white-10", + "type": "color", + "isAlias": false, + "value": "#FFFFFF1A" + }, + { + "name": "Component colors/Alpha/alpha-white-20", + "type": "color", + "isAlias": false, + "value": "#FFFFFF33" + }, + { + "name": "Component colors/Alpha/alpha-white-30", + "type": "color", + "isAlias": false, + "value": "#FFFFFF4D" + }, + { + "name": "Component colors/Alpha/alpha-white-40", + "type": "color", + "isAlias": false, + "value": "#FFFFFF66" + }, + { + "name": "Component colors/Alpha/alpha-white-50", + "type": "color", + "isAlias": false, + "value": "#FFFFFF80" + }, + { + "name": "Component colors/Alpha/alpha-white-60", + "type": "color", + "isAlias": false, + "value": "#FFFFFF99" + }, + { + "name": "Component colors/Alpha/alpha-white-70", + "type": "color", + "isAlias": false, + "value": "#FFFFFFB3" + }, + { + "name": "Component colors/Alpha/alpha-white-80", + "type": "color", + "isAlias": false, + "value": "#FFFFFFCC" + }, + { + "name": "Component colors/Alpha/alpha-white-90", + "type": "color", + "isAlias": false, + "value": "#FFFFFFE6" + }, + { + "name": "Component colors/Alpha/alpha-white-100", + "type": "color", + "isAlias": false, + "value": "#FFFFFF" + }, + { + "name": "Component colors/Alpha/alpha-black-10", + "type": "color", + "isAlias": false, + "value": "#0000001A" + }, + { + "name": "Component colors/Alpha/alpha-black-20", + "type": "color", + "isAlias": false, + "value": "#00000033" + }, + { + "name": "Component colors/Alpha/alpha-black-30", + "type": "color", + "isAlias": false, + "value": "#0000004D" + }, + { + "name": "Component colors/Alpha/alpha-black-40", + "type": "color", + "isAlias": false, + "value": "#00000066" + }, + { + "name": "Component colors/Alpha/alpha-black-50", + "type": "color", + "isAlias": false, + "value": "#00000080" + }, + { + "name": "Component colors/Alpha/alpha-black-60", + "type": "color", + "isAlias": false, + "value": "#00000099" + }, + { + "name": "Component colors/Alpha/alpha-black-70", + "type": "color", + "isAlias": false, + "value": "#000000B3" + }, + { + "name": "Component colors/Alpha/alpha-black-80", + "type": "color", + "isAlias": false, + "value": "#000000CC" + }, + { + "name": "Component colors/Alpha/alpha-black-90", + "type": "color", + "isAlias": false, + "value": "#000000E6" + }, + { + "name": "Component colors/Alpha/alpha-black-100", + "type": "color", + "isAlias": false, + "value": "#000000" + }, + { + "name": "Component colors/Utility/Gray/utility-gray-50", + "type": "color", + "isAlias": true, + "value": { + "collection": "_Primitives", + "name": "Colors/Gray (light mode)/50" + } + }, + { + "name": "Component colors/Utility/Gray/utility-gray-100", + "type": "color", + "isAlias": true, + "value": { + "collection": "_Primitives", + "name": "Colors/Gray (light mode)/100" + } + }, + { + "name": "Component colors/Utility/Gray/utility-gray-200", + "type": "color", + "isAlias": true, + "value": { + "collection": "_Primitives", + "name": "Colors/Gray (light mode)/200" + } + }, + { + "name": "Component colors/Utility/Gray/utility-gray-300", + "type": "color", + "isAlias": true, + "value": { + "collection": "_Primitives", + "name": "Colors/Gray (light mode)/300" + } + }, + { + "name": "Component colors/Utility/Gray/utility-gray-400", + "type": "color", + "isAlias": true, + "value": { + "collection": "_Primitives", + "name": "Colors/Gray (light mode)/400" + } + }, + { + "name": "Component colors/Utility/Gray/utility-gray-500", + "type": "color", + "isAlias": true, + "value": { + "collection": "_Primitives", + "name": "Colors/Gray (light mode)/500" + } + }, + { + "name": "Component colors/Utility/Gray/utility-gray-600", + "type": "color", + "isAlias": true, + "value": { + "collection": "_Primitives", + "name": "Colors/Gray (light mode)/600" + } + }, + { + "name": "Component colors/Utility/Gray/utility-gray-700", + "type": "color", + "isAlias": true, + "value": { + "collection": "_Primitives", + "name": "Colors/Gray (light mode)/700" + } + }, + { + "name": "Component colors/Utility/Gray/utility-gray-800", + "type": "color", + "isAlias": true, + "value": { + "collection": "_Primitives", + "name": "Colors/Gray (light mode)/800" + } + }, + { + "name": "Component colors/Utility/Gray/utility-gray-900", + "type": "color", + "isAlias": true, + "value": { + "collection": "_Primitives", + "name": "Colors/Gray (light mode)/900" + } + }, + { + "name": "Component colors/Utility/Brand/utility-brand-50", + "type": "color", + "isAlias": true, + "value": { + "collection": "_Primitives", + "name": "Colors/Brand/50" + } + }, + { + "name": "Component colors/Utility/Brand/utility-brand-50_alt", + "type": "color", + "isAlias": true, + "value": { + "collection": "_Primitives", + "name": "Colors/Brand/50" + } + }, + { + "name": "Component colors/Utility/Brand/utility-brand-100", + "type": "color", + "isAlias": true, + "value": { + "collection": "_Primitives", + "name": "Colors/Brand/100" + } + }, + { + "name": "Component colors/Utility/Brand/utility-brand-100_alt", + "type": "color", + "isAlias": true, + "value": { + "collection": "_Primitives", + "name": "Colors/Brand/100" + } + }, + { + "name": "Component colors/Utility/Brand/utility-brand-200", + "type": "color", + "isAlias": true, + "value": { + "collection": "_Primitives", + "name": "Colors/Brand/200" + } + }, + { + "name": "Component colors/Utility/Brand/utility-brand-200_alt", + "type": "color", + "isAlias": true, + "value": { + "collection": "_Primitives", + "name": "Colors/Brand/200" + } + }, + { + "name": "Component colors/Utility/Brand/utility-brand-300", + "type": "color", + "isAlias": true, + "value": { + "collection": "_Primitives", + "name": "Colors/Brand/300" + } + }, + { + "name": "Component colors/Utility/Brand/utility-brand-300_alt", + "type": "color", + "isAlias": true, + "value": { + "collection": "_Primitives", + "name": "Colors/Brand/300" + } + }, + { + "name": "Component colors/Utility/Brand/utility-brand-400", + "type": "color", + "isAlias": true, + "value": { + "collection": "_Primitives", + "name": "Colors/Brand/400" + } + }, + { + "name": "Component colors/Utility/Brand/utility-brand-400_alt", + "type": "color", + "isAlias": true, + "value": { + "collection": "_Primitives", + "name": "Colors/Brand/400" + } + }, + { + "name": "Component colors/Utility/Brand/utility-brand-500", + "type": "color", + "isAlias": true, + "value": { + "collection": "_Primitives", + "name": "Colors/Brand/500" + } + }, + { + "name": "Component colors/Utility/Brand/utility-brand-500_alt", + "type": "color", + "isAlias": true, + "value": { + "collection": "_Primitives", + "name": "Colors/Brand/500" + } + }, + { + "name": "Component colors/Utility/Brand/utility-brand-600", + "type": "color", + "isAlias": true, + "value": { + "collection": "_Primitives", + "name": "Colors/Brand/600" + } + }, + { + "name": "Component colors/Utility/Brand/utility-brand-600_alt", + "type": "color", + "isAlias": true, + "value": { + "collection": "_Primitives", + "name": "Colors/Brand/600" + } + }, + { + "name": "Component colors/Utility/Brand/utility-brand-700", + "type": "color", + "isAlias": true, + "value": { + "collection": "_Primitives", + "name": "Colors/Brand/700" + } + }, + { + "name": "Component colors/Utility/Brand/utility-brand-700_alt", + "type": "color", + "isAlias": true, + "value": { + "collection": "_Primitives", + "name": "Colors/Brand/700" + } + }, + { + "name": "Component colors/Utility/Brand/utility-brand-800", + "type": "color", + "isAlias": true, + "value": { + "collection": "_Primitives", + "name": "Colors/Brand/800" + } + }, + { + "name": "Component colors/Utility/Brand/utility-brand-800_alt", + "type": "color", + "isAlias": true, + "value": { + "collection": "_Primitives", + "name": "Colors/Brand/800" + } + }, + { + "name": "Component colors/Utility/Brand/utility-brand-900", + "type": "color", + "isAlias": true, + "value": { + "collection": "_Primitives", + "name": "Colors/Brand/900" + } + }, + { + "name": "Component colors/Utility/Brand/utility-brand-900_alt", + "type": "color", + "isAlias": true, + "value": { + "collection": "_Primitives", + "name": "Colors/Brand/900" + } + }, + { + "name": "Component colors/Utility/Error/utility-error-50", + "type": "color", + "isAlias": true, + "value": { + "collection": "_Primitives", + "name": "Colors/Error/50" + } + }, + { + "name": "Component colors/Utility/Error/utility-error-100", + "type": "color", + "isAlias": true, + "value": { + "collection": "_Primitives", + "name": "Colors/Error/100" + } + }, + { + "name": "Component colors/Utility/Error/utility-error-200", + "type": "color", + "isAlias": true, + "value": { + "collection": "_Primitives", + "name": "Colors/Error/200" + } + }, + { + "name": "Component colors/Utility/Error/utility-error-300", + "type": "color", + "isAlias": true, + "value": { + "collection": "_Primitives", + "name": "Colors/Error/300" + } + }, + { + "name": "Component colors/Utility/Error/utility-error-400", + "type": "color", + "isAlias": true, + "value": { + "collection": "_Primitives", + "name": "Colors/Error/400" + } + }, + { + "name": "Component colors/Utility/Error/utility-error-500", + "type": "color", + "isAlias": true, + "value": { + "collection": "_Primitives", + "name": "Colors/Error/500" + } + }, + { + "name": "Component colors/Utility/Error/utility-error-600", + "type": "color", + "isAlias": true, + "value": { + "collection": "_Primitives", + "name": "Colors/Error/600" + } + }, + { + "name": "Component colors/Utility/Error/utility-error-700", + "type": "color", + "isAlias": true, + "value": { + "collection": "_Primitives", + "name": "Colors/Error/700" + } + }, + { + "name": "Component colors/Utility/Warning/utility-warning-50", + "type": "color", + "isAlias": true, + "value": { + "collection": "_Primitives", + "name": "Colors/Warning/50" + } + }, + { + "name": "Component colors/Utility/Warning/utility-warning-100", + "type": "color", + "isAlias": true, + "value": { + "collection": "_Primitives", + "name": "Colors/Warning/100" + } + }, + { + "name": "Component colors/Utility/Warning/utility-warning-200", + "type": "color", + "isAlias": true, + "value": { + "collection": "_Primitives", + "name": "Colors/Warning/200" + } + }, + { + "name": "Component colors/Utility/Warning/utility-warning-300", + "type": "color", + "isAlias": true, + "value": { + "collection": "_Primitives", + "name": "Colors/Warning/300" + } + }, + { + "name": "Component colors/Utility/Warning/utility-warning-400", + "type": "color", + "isAlias": true, + "value": { + "collection": "_Primitives", + "name": "Colors/Warning/400" + } + }, + { + "name": "Component colors/Utility/Warning/utility-warning-500", + "type": "color", + "isAlias": true, + "value": { + "collection": "_Primitives", + "name": "Colors/Warning/500" + } + }, + { + "name": "Component colors/Utility/Warning/utility-warning-600", + "type": "color", + "isAlias": true, + "value": { + "collection": "_Primitives", + "name": "Colors/Warning/600" + } + }, + { + "name": "Component colors/Utility/Warning/utility-warning-700", + "type": "color", + "isAlias": true, + "value": { + "collection": "_Primitives", + "name": "Colors/Warning/700" + } + }, + { + "name": "Component colors/Utility/Success/utility-success-50", + "type": "color", + "isAlias": true, + "value": { + "collection": "_Primitives", + "name": "Colors/Success/50" + } + }, + { + "name": "Component colors/Utility/Success/utility-success-100", + "type": "color", + "isAlias": true, + "value": { + "collection": "_Primitives", + "name": "Colors/Success/100" + } + }, + { + "name": "Component colors/Utility/Success/utility-success-200", + "type": "color", + "isAlias": true, + "value": { + "collection": "_Primitives", + "name": "Colors/Success/200" + } + }, + { + "name": "Component colors/Utility/Success/utility-success-300", + "type": "color", + "isAlias": true, + "value": { + "collection": "_Primitives", + "name": "Colors/Success/300" + } + }, + { + "name": "Component colors/Utility/Success/utility-success-400", + "type": "color", + "isAlias": true, + "value": { + "collection": "_Primitives", + "name": "Colors/Success/400" + } + }, + { + "name": "Component colors/Utility/Success/utility-success-500", + "type": "color", + "isAlias": true, + "value": { + "collection": "_Primitives", + "name": "Colors/Success/500" + } + }, + { + "name": "Component colors/Utility/Success/utility-success-600", + "type": "color", + "isAlias": true, + "value": { + "collection": "_Primitives", + "name": "Colors/Success/600" + } + }, + { + "name": "Component colors/Utility/Success/utility-success-700", + "type": "color", + "isAlias": true, + "value": { + "collection": "_Primitives", + "name": "Colors/Success/700" + } + }, + { + "name": "Component colors/Utility/Gray blue/utility-gray-blue-50", + "type": "color", + "isAlias": true, + "value": { + "collection": "_Primitives", + "name": "Colors/Gray blue/50" + } + }, + { + "name": "Component colors/Utility/Gray blue/utility-gray-blue-100", + "type": "color", + "isAlias": true, + "value": { + "collection": "_Primitives", + "name": "Colors/Gray blue/100" + } + }, + { + "name": "Component colors/Utility/Gray blue/utility-gray-blue-200", + "type": "color", + "isAlias": true, + "value": { + "collection": "_Primitives", + "name": "Colors/Gray blue/200" + } + }, + { + "name": "Component colors/Utility/Gray blue/utility-gray-blue-300", + "type": "color", + "isAlias": true, + "value": { + "collection": "_Primitives", + "name": "Colors/Gray blue/300" + } + }, + { + "name": "Component colors/Utility/Gray blue/utility-gray-blue-400", + "type": "color", + "isAlias": true, + "value": { + "collection": "_Primitives", + "name": "Colors/Gray blue/400" + } + }, + { + "name": "Component colors/Utility/Gray blue/utility-gray-blue-500", + "type": "color", + "isAlias": true, + "value": { + "collection": "_Primitives", + "name": "Colors/Gray blue/500" + } + }, + { + "name": "Component colors/Utility/Gray blue/utility-gray-blue-600", + "type": "color", + "isAlias": true, + "value": { + "collection": "_Primitives", + "name": "Colors/Gray blue/600" + } + }, + { + "name": "Component colors/Utility/Gray blue/utility-gray-blue-700", + "type": "color", + "isAlias": true, + "value": { + "collection": "_Primitives", + "name": "Colors/Gray blue/700" + } + }, + { + "name": "Component colors/Utility/Blue light/utility-blue-light-50", + "type": "color", + "isAlias": true, + "value": { + "collection": "_Primitives", + "name": "Colors/BlueLight/50" + } + }, + { + "name": "Component colors/Utility/Blue light/utility-blue-light-100", + "type": "color", + "isAlias": true, + "value": { + "collection": "_Primitives", + "name": "Colors/BlueLight/100" + } + }, + { + "name": "Component colors/Utility/Blue light/utility-blue-light-200", + "type": "color", + "isAlias": true, + "value": { + "collection": "_Primitives", + "name": "Colors/BlueLight/200" + } + }, + { + "name": "Component colors/Utility/Blue light/utility-blue-light-300", + "type": "color", + "isAlias": true, + "value": { + "collection": "_Primitives", + "name": "Colors/BlueLight/300" + } + }, + { + "name": "Component colors/Utility/Blue light/utility-blue-light-400", + "type": "color", + "isAlias": true, + "value": { + "collection": "_Primitives", + "name": "Colors/BlueLight/400" + } + }, + { + "name": "Component colors/Utility/Blue light/utility-blue-light-500", + "type": "color", + "isAlias": true, + "value": { + "collection": "_Primitives", + "name": "Colors/BlueLight/500" + } + }, + { + "name": "Component colors/Utility/Blue light/utility-blue-light-600", + "type": "color", + "isAlias": true, + "value": { + "collection": "_Primitives", + "name": "Colors/BlueLight/600" + } + }, + { + "name": "Component colors/Utility/Blue light/utility-blue-light-700", + "type": "color", + "isAlias": true, + "value": { + "collection": "_Primitives", + "name": "Colors/BlueLight/700" + } + }, + { + "name": "Component colors/Utility/Blue/utility-blue-50", + "type": "color", + "isAlias": true, + "value": { + "collection": "_Primitives", + "name": "Colors/Blue/50" + } + }, + { + "name": "Component colors/Utility/Blue/utility-blue-100", + "type": "color", + "isAlias": true, + "value": { + "collection": "_Primitives", + "name": "Colors/Blue/100" + } + }, + { + "name": "Component colors/Utility/Blue/utility-blue-200", + "type": "color", + "isAlias": true, + "value": { + "collection": "_Primitives", + "name": "Colors/Blue/200" + } + }, + { + "name": "Component colors/Utility/Blue/utility-blue-300", + "type": "color", + "isAlias": true, + "value": { + "collection": "_Primitives", + "name": "Colors/Blue/300" + } + }, + { + "name": "Component colors/Utility/Blue/utility-blue-400", + "type": "color", + "isAlias": true, + "value": { + "collection": "_Primitives", + "name": "Colors/Blue/400" + } + }, + { + "name": "Component colors/Utility/Blue/utility-blue-500", + "type": "color", + "isAlias": true, + "value": { + "collection": "_Primitives", + "name": "Colors/Blue/500" + } + }, + { + "name": "Component colors/Utility/Blue/utility-blue-600", + "type": "color", + "isAlias": true, + "value": { + "collection": "_Primitives", + "name": "Colors/Blue/600" + } + }, + { + "name": "Component colors/Utility/Blue/utility-blue-700", + "type": "color", + "isAlias": true, + "value": { + "collection": "_Primitives", + "name": "Colors/Blue/700" + } + }, + { + "name": "Component colors/Utility/Blue dark/utility-blue-dark-50", + "type": "color", + "isAlias": true, + "value": { + "collection": "_Primitives", + "name": "Colors/BlueDark/50" + } + }, + { + "name": "Component colors/Utility/Blue dark/utility-blue-dark-100", + "type": "color", + "isAlias": true, + "value": { + "collection": "_Primitives", + "name": "Colors/BlueDark/100" + } + }, + { + "name": "Component colors/Utility/Blue dark/utility-blue-dark-200", + "type": "color", + "isAlias": true, + "value": { + "collection": "_Primitives", + "name": "Colors/BlueDark/200" + } + }, + { + "name": "Component colors/Utility/Blue dark/utility-blue-dark-300", + "type": "color", + "isAlias": true, + "value": { + "collection": "_Primitives", + "name": "Colors/BlueDark/300" + } + }, + { + "name": "Component colors/Utility/Blue dark/utility-blue-dark-400", + "type": "color", + "isAlias": true, + "value": { + "collection": "_Primitives", + "name": "Colors/BlueDark/400" + } + }, + { + "name": "Component colors/Utility/Blue dark/utility-blue-dark-500", + "type": "color", + "isAlias": true, + "value": { + "collection": "_Primitives", + "name": "Colors/BlueDark/500" + } + }, + { + "name": "Component colors/Utility/Blue dark/utility-blue-dark-600", + "type": "color", + "isAlias": true, + "value": { + "collection": "_Primitives", + "name": "Colors/BlueDark/600" + } + }, + { + "name": "Component colors/Utility/Blue dark/utility-blue-dark-700", + "type": "color", + "isAlias": true, + "value": { + "collection": "_Primitives", + "name": "Colors/BlueDark/700" + } + }, + { + "name": "Component colors/Utility/Indigo/utility-indigo-50", + "type": "color", + "isAlias": true, + "value": { + "collection": "_Primitives", + "name": "Colors/Indigo/50" + } + }, + { + "name": "Component colors/Utility/Indigo/utility-indigo-100", + "type": "color", + "isAlias": true, + "value": { + "collection": "_Primitives", + "name": "Colors/Indigo/100" + } + }, + { + "name": "Component colors/Utility/Indigo/utility-indigo-200", + "type": "color", + "isAlias": true, + "value": { + "collection": "_Primitives", + "name": "Colors/Indigo/200" + } + }, + { + "name": "Component colors/Utility/Indigo/utility-indigo-300", + "type": "color", + "isAlias": true, + "value": { + "collection": "_Primitives", + "name": "Colors/Indigo/300" + } + }, + { + "name": "Component colors/Utility/Indigo/utility-indigo-400", + "type": "color", + "isAlias": true, + "value": { + "collection": "_Primitives", + "name": "Colors/Indigo/400" + } + }, + { + "name": "Component colors/Utility/Indigo/utility-indigo-500", + "type": "color", + "isAlias": true, + "value": { + "collection": "_Primitives", + "name": "Colors/Indigo/500" + } + }, + { + "name": "Component colors/Utility/Indigo/utility-indigo-600", + "type": "color", + "isAlias": true, + "value": { + "collection": "_Primitives", + "name": "Colors/Indigo/600" + } + }, + { + "name": "Component colors/Utility/Indigo/utility-indigo-700", + "type": "color", + "isAlias": true, + "value": { + "collection": "_Primitives", + "name": "Colors/Indigo/700" + } + }, + { + "name": "Component colors/Utility/Purple/utility-purple-50", + "type": "color", + "isAlias": true, + "value": { + "collection": "_Primitives", + "name": "Colors/Purple/50" + } + }, + { + "name": "Component colors/Utility/Purple/utility-purple-100", + "type": "color", + "isAlias": true, + "value": { + "collection": "_Primitives", + "name": "Colors/Purple/100" + } + }, + { + "name": "Component colors/Utility/Purple/utility-purple-200", + "type": "color", + "isAlias": true, + "value": { + "collection": "_Primitives", + "name": "Colors/Purple/200" + } + }, + { + "name": "Component colors/Utility/Purple/utility-purple-300", + "type": "color", + "isAlias": true, + "value": { + "collection": "_Primitives", + "name": "Colors/Purple/300" + } + }, + { + "name": "Component colors/Utility/Purple/utility-purple-400", + "type": "color", + "isAlias": true, + "value": { + "collection": "_Primitives", + "name": "Colors/Purple/400" + } + }, + { + "name": "Component colors/Utility/Purple/utility-purple-500", + "type": "color", + "isAlias": true, + "value": { + "collection": "_Primitives", + "name": "Colors/Purple/500" + } + }, + { + "name": "Component colors/Utility/Purple/utility-purple-600", + "type": "color", + "isAlias": true, + "value": { + "collection": "_Primitives", + "name": "Colors/Purple/600" + } + }, + { + "name": "Component colors/Utility/Purple/utility-purple-700", + "type": "color", + "isAlias": true, + "value": { + "collection": "_Primitives", + "name": "Colors/Purple/700" + } + }, + { + "name": "Component colors/Utility/Fuchsia/utility-fuchsia-50", + "type": "color", + "isAlias": true, + "value": { + "collection": "_Primitives", + "name": "Colors/Fuchsia/50" + } + }, + { + "name": "Component colors/Utility/Fuchsia/utility-fuchsia-100", + "type": "color", + "isAlias": true, + "value": { + "collection": "_Primitives", + "name": "Colors/Fuchsia/100" + } + }, + { + "name": "Component colors/Utility/Fuchsia/utility-fuchsia-200", + "type": "color", + "isAlias": true, + "value": { + "collection": "_Primitives", + "name": "Colors/Fuchsia/200" + } + }, + { + "name": "Component colors/Utility/Fuchsia/utility-fuchsia-300", + "type": "color", + "isAlias": true, + "value": { + "collection": "_Primitives", + "name": "Colors/Fuchsia/300" + } + }, + { + "name": "Component colors/Utility/Fuchsia/utility-fuchsia-400", + "type": "color", + "isAlias": true, + "value": { + "collection": "_Primitives", + "name": "Colors/Fuchsia/400" + } + }, + { + "name": "Component colors/Utility/Fuchsia/utility-fuchsia-500", + "type": "color", + "isAlias": true, + "value": { + "collection": "_Primitives", + "name": "Colors/Fuchsia/500" + } + }, + { + "name": "Component colors/Utility/Fuchsia/utility-fuchsia-600", + "type": "color", + "isAlias": true, + "value": { + "collection": "_Primitives", + "name": "Colors/Fuchsia/600" + } + }, + { + "name": "Component colors/Utility/Fuchsia/utility-fuchsia-700", + "type": "color", + "isAlias": true, + "value": { + "collection": "_Primitives", + "name": "Colors/Fuchsia/700" + } + }, + { + "name": "Component colors/Utility/Pink/utility-pink-50", + "type": "color", + "isAlias": true, + "value": { + "collection": "_Primitives", + "name": "Colors/Pink/50" + } + }, + { + "name": "Component colors/Utility/Pink/utility-pink-100", + "type": "color", + "isAlias": true, + "value": { + "collection": "_Primitives", + "name": "Colors/Pink/100" + } + }, + { + "name": "Component colors/Utility/Pink/utility-pink-200", + "type": "color", + "isAlias": true, + "value": { + "collection": "_Primitives", + "name": "Colors/Pink/200" + } + }, + { + "name": "Component colors/Utility/Pink/utility-pink-300", + "type": "color", + "isAlias": true, + "value": { + "collection": "_Primitives", + "name": "Colors/Pink/300" + } + }, + { + "name": "Component colors/Utility/Pink/utility-pink-400", + "type": "color", + "isAlias": true, + "value": { + "collection": "_Primitives", + "name": "Colors/Pink/400" + } + }, + { + "name": "Component colors/Utility/Pink/utility-pink-500", + "type": "color", + "isAlias": true, + "value": { + "collection": "_Primitives", + "name": "Colors/Pink/500" + } + }, + { + "name": "Component colors/Utility/Pink/utility-pink-600", + "type": "color", + "isAlias": true, + "value": { + "collection": "_Primitives", + "name": "Colors/Pink/600" + } + }, + { + "name": "Component colors/Utility/Pink/utility-pink-700", + "type": "color", + "isAlias": true, + "value": { + "collection": "_Primitives", + "name": "Colors/Pink/700" + } + }, + { + "name": "Component colors/Utility/Orange dark/utility-orange-dark-50", + "type": "color", + "isAlias": true, + "value": { + "collection": "_Primitives", + "name": "Colors/Orange dark/50" + } + }, + { + "name": "Component colors/Utility/Orange dark/utility-orange-dark-100", + "type": "color", + "isAlias": true, + "value": { + "collection": "_Primitives", + "name": "Colors/Orange dark/100" + } + }, + { + "name": "Component colors/Utility/Orange dark/utility-orange-dark-200", + "type": "color", + "isAlias": true, + "value": { + "collection": "_Primitives", + "name": "Colors/Orange dark/200" + } + }, + { + "name": "Component colors/Utility/Orange dark/utility-orange-dark-300", + "type": "color", + "isAlias": true, + "value": { + "collection": "_Primitives", + "name": "Colors/Orange dark/300" + } + }, + { + "name": "Component colors/Utility/Orange dark/utility-orange-dark-400", + "type": "color", + "isAlias": true, + "value": { + "collection": "_Primitives", + "name": "Colors/Orange dark/400" + } + }, + { + "name": "Component colors/Utility/Orange dark/utility-orange-dark-500", + "type": "color", + "isAlias": true, + "value": { + "collection": "_Primitives", + "name": "Colors/Orange dark/500" + } + }, + { + "name": "Component colors/Utility/Orange dark/utility-orange-dark-600", + "type": "color", + "isAlias": true, + "value": { + "collection": "_Primitives", + "name": "Colors/Orange dark/600" + } + }, + { + "name": "Component colors/Utility/Orange dark/utility-orange-dark-700", + "type": "color", + "isAlias": true, + "value": { + "collection": "_Primitives", + "name": "Colors/Orange dark/700" + } + }, + { + "name": "Component colors/Utility/Orange/utility-orange-50", + "type": "color", + "isAlias": true, + "value": { + "collection": "_Primitives", + "name": "Colors/Orange/50" + } + }, + { + "name": "Component colors/Utility/Orange/utility-orange-100", + "type": "color", + "isAlias": true, + "value": { + "collection": "_Primitives", + "name": "Colors/Orange/100" + } + }, + { + "name": "Component colors/Utility/Orange/utility-orange-200", + "type": "color", + "isAlias": true, + "value": { + "collection": "_Primitives", + "name": "Colors/Orange/200" + } + }, + { + "name": "Component colors/Utility/Orange/utility-orange-300", + "type": "color", + "isAlias": true, + "value": { + "collection": "_Primitives", + "name": "Colors/Orange/300" + } + }, + { + "name": "Component colors/Utility/Orange/utility-orange-400", + "type": "color", + "isAlias": true, + "value": { + "collection": "_Primitives", + "name": "Colors/Orange/400" + } + }, + { + "name": "Component colors/Utility/Orange/utility-orange-500", + "type": "color", + "isAlias": true, + "value": { + "collection": "_Primitives", + "name": "Colors/Orange/500" + } + }, + { + "name": "Component colors/Utility/Orange/utility-orange-600", + "type": "color", + "isAlias": true, + "value": { + "collection": "_Primitives", + "name": "Colors/Orange/600" + } + }, + { + "name": "Component colors/Utility/Orange/utility-orange-700", + "type": "color", + "isAlias": true, + "value": { + "collection": "_Primitives", + "name": "Colors/Orange/700" + } + }, + { + "name": "Component colors/Components/App store badges/app-store-badge-border", + "type": "color", + "isAlias": false, + "value": "#A6A6A6" + }, + { + "name": "Component colors/Components/Application navigation/nav-item-button-icon-fg", + "type": "color", + "isAlias": true, + "value": { + "collection": "_Primitives", + "name": "Colors/Gray (light mode)/500" + } + }, + { + "name": "Component colors/Components/Application navigation/nav-item-button-icon-fg_active", + "type": "color", + "isAlias": true, + "value": { + "collection": "_Primitives", + "name": "Colors/Gray (light mode)/700" + } + }, + { + "name": "Component colors/Components/Application navigation/nav-item-icon-fg", + "type": "color", + "isAlias": true, + "value": { + "collection": "_Primitives", + "name": "Colors/Gray (light mode)/500" + } + }, + { + "name": "Component colors/Components/Application navigation/nav-item-icon-fg_active", + "type": "color", + "isAlias": true, + "value": { + "collection": "_Primitives", + "name": "Colors/Gray (light mode)/500" + } + }, + { + "name": "Component colors/Components/Avatars/avatar-bg", + "type": "color", + "isAlias": true, + "value": { + "collection": "_Primitives", + "name": "Colors/Gray (light mode)/100" + } + }, + { + "name": "Component colors/Components/Avatars/avatar-profile-photo-border", + "type": "color", + "isAlias": true, + "value": { + "collection": "_Primitives", + "name": "Colors/Base/white" + } + }, + { + "name": "Component colors/Components/Avatars/avatar-contrast-border", + "type": "color", + "isAlias": false, + "value": "#00000014" + }, + { + "name": "Component colors/Components/Avatars/avatar-focus-border", + "type": "color", + "isAlias": false, + "value": "#98A2B324" + }, + { + "name": "Component colors/Components/Breadcrumbs/breadcrumb-fg", + "type": "color", + "isAlias": true, + "value": { + "collection": "_Primitives", + "name": "Colors/Gray (light mode)/600" + } + }, + { + "name": "Component colors/Components/Breadcrumbs/breadcrumb-fg_hover", + "type": "color", + "isAlias": true, + "value": { + "collection": "_Primitives", + "name": "Colors/Gray (light mode)/700" + } + }, + { + "name": "Component colors/Components/Breadcrumbs/breadcrumb-bg_hover", + "type": "color", + "isAlias": true, + "value": { + "collection": "_Primitives", + "name": "Colors/Gray (light mode)/50" + } + }, + { + "name": "Component colors/Components/Breadcrumbs/breadcrumb-brand-fg_hover", + "type": "color", + "isAlias": true, + "value": { + "collection": "_Primitives", + "name": "Colors/Brand/700" + } + }, + { + "name": "Component colors/Components/Breadcrumbs/breadcrumb-brand-bg_hover", + "type": "color", + "isAlias": true, + "value": { + "collection": "_Primitives", + "name": "Colors/Brand/50" + } + }, + { + "name": "Component colors/Components/Breadcrumbs/breadcrumb-icon-fg", + "type": "color", + "isAlias": true, + "value": { + "collection": "_Primitives", + "name": "Colors/Gray (light mode)/500" + } + }, + { + "name": "Component colors/Components/Breadcrumbs/breadcrumb-icon-fg_hover", + "type": "color", + "isAlias": true, + "value": { + "collection": "_Primitives", + "name": "Colors/Gray (light mode)/700" + } + }, + { + "name": "Component colors/Components/Breadcrumbs/breadcrumb-brand-icon-fg_hover", + "type": "color", + "isAlias": true, + "value": { + "collection": "_Primitives", + "name": "Colors/Brand/700" + } + }, + { + "name": "Component colors/Components/Buttons/Primary/button-primary-fg", + "type": "color", + "isAlias": true, + "value": { + "collection": "_Primitives", + "name": "Colors/Base/white" + } + }, + { + "name": "Component colors/Components/Buttons/Primary/button-primary-fg_hover", + "type": "color", + "isAlias": true, + "value": { + "collection": "_Primitives", + "name": "Colors/Base/white" + } + }, + { + "name": "Component colors/Components/Buttons/Primary/button-primary-bg", + "type": "color", + "isAlias": true, + "value": { + "collection": "_Primitives", + "name": "Colors/Brand/600" + } + }, + { + "name": "Component colors/Components/Buttons/Primary/button-primary-bg_hover", + "type": "color", + "isAlias": true, + "value": { + "collection": "_Primitives", + "name": "Colors/Brand/700" + } + }, + { + "name": "Component colors/Components/Buttons/Primary/button-primary-border", + "type": "color", + "isAlias": true, + "value": { + "collection": "_Primitives", + "name": "Colors/Brand/600" + } + }, + { + "name": "Component colors/Components/Buttons/Primary/button-primary-border_hover", + "type": "color", + "isAlias": true, + "value": { + "collection": "_Primitives", + "name": "Colors/Brand/700" + } + }, + { + "name": "Component colors/Components/Buttons/Secondary/button-secondary-fg", + "type": "color", + "isAlias": true, + "value": { + "collection": "_Primitives", + "name": "Colors/Gray (light mode)/700" + } + }, + { + "name": "Component colors/Components/Buttons/Secondary/button-secondary-fg_hover", + "type": "color", + "isAlias": true, + "value": { + "collection": "_Primitives", + "name": "Colors/Gray (light mode)/800" + } + }, + { + "name": "Component colors/Components/Buttons/Secondary/button-secondary-bg", + "type": "color", + "isAlias": true, + "value": { + "collection": "_Primitives", + "name": "Colors/Base/white" + } + }, + { + "name": "Component colors/Components/Buttons/Secondary/button-secondary-bg_hover", + "type": "color", + "isAlias": true, + "value": { + "collection": "_Primitives", + "name": "Colors/Gray (light mode)/50" + } + }, + { + "name": "Component colors/Components/Buttons/Secondary/button-secondary-border", + "type": "color", + "isAlias": true, + "value": { + "collection": "1. Color modes", + "name": "Colors/Text/text-brand-secondary (700)" + } + }, + { + "name": "Component colors/Components/Buttons/Secondary/button-secondary-border_hover", + "type": "color", + "isAlias": true, + "value": { + "collection": "_Primitives", + "name": "Colors/Gray (light mode)/300" + } + }, + { + "name": "Component colors/Components/Buttons/Secondary color/button-secondary-color-fg", + "type": "color", + "isAlias": true, + "value": { + "collection": "_Primitives", + "name": "Colors/Brand/700" + } + }, + { + "name": "Component colors/Components/Buttons/Secondary color/button-secondary-color-fg_hover", + "type": "color", + "isAlias": true, + "value": { + "collection": "_Primitives", + "name": "Colors/Brand/800" + } + }, + { + "name": "Component colors/Components/Buttons/Secondary color/button-secondary-color-bg", + "type": "color", + "isAlias": true, + "value": { + "collection": "_Primitives", + "name": "Colors/Base/white" + } + }, + { + "name": "Component colors/Components/Buttons/Secondary color/button-secondary-color-bg_hover", + "type": "color", + "isAlias": true, + "value": { + "collection": "_Primitives", + "name": "Colors/Brand/50" + } + }, + { + "name": "Component colors/Components/Buttons/Secondary color/button-secondary-color-border", + "type": "color", + "isAlias": true, + "value": { + "collection": "_Primitives", + "name": "Colors/Brand/300" + } + }, + { + "name": "Component colors/Components/Buttons/Secondary color/button-secondary-color-border_hover", + "type": "color", + "isAlias": true, + "value": { + "collection": "_Primitives", + "name": "Colors/Brand/300" + } + }, + { + "name": "Component colors/Components/Buttons/Tertiary/button-tertiary-fg", + "type": "color", + "isAlias": true, + "value": { + "collection": "_Primitives", + "name": "Colors/Gray (light mode)/600" + } + }, + { + "name": "Component colors/Components/Buttons/Tertiary/button-tertiary-fg_hover", + "type": "color", + "isAlias": true, + "value": { + "collection": "_Primitives", + "name": "Colors/Gray (light mode)/700" + } + }, + { + "name": "Component colors/Components/Buttons/Tertiary/button-tertiary-bg_hover", + "type": "color", + "isAlias": true, + "value": { + "collection": "_Primitives", + "name": "Colors/Gray (light mode)/50" + } + }, + { + "name": "Component colors/Components/Buttons/Tertiary color/button-tertiary-color-fg", + "type": "color", + "isAlias": true, + "value": { + "collection": "_Primitives", + "name": "Colors/Brand/700" + } + }, + { + "name": "Component colors/Components/Buttons/Tertiary color/button-tertiary-color-fg_hover", + "type": "color", + "isAlias": true, + "value": { + "collection": "_Primitives", + "name": "Colors/Brand/800" + } + }, + { + "name": "Component colors/Components/Buttons/Tertiary color/button-tertiary-color-bg_hover", + "type": "color", + "isAlias": true, + "value": { + "collection": "_Primitives", + "name": "Colors/Brand/50" + } + }, + { + "name": "Component colors/Components/Buttons/Primary error/button-primary-error-fg", + "type": "color", + "isAlias": true, + "value": { + "collection": "_Primitives", + "name": "Colors/Base/white" + } + }, + { + "name": "Component colors/Components/Buttons/Primary error/button-primary-error-fg_hover", + "type": "color", + "isAlias": true, + "value": { + "collection": "_Primitives", + "name": "Colors/Base/white" + } + }, + { + "name": "Component colors/Components/Buttons/Primary error/button-primary-error-bg", + "type": "color", + "isAlias": true, + "value": { + "collection": "_Primitives", + "name": "Colors/Error/600" + } + }, + { + "name": "Component colors/Components/Buttons/Primary error/button-primary-error-bg_hover", + "type": "color", + "isAlias": true, + "value": { + "collection": "_Primitives", + "name": "Colors/Error/700" + } + }, + { + "name": "Component colors/Components/Buttons/Primary error/button-primary-error-border", + "type": "color", + "isAlias": true, + "value": { + "collection": "_Primitives", + "name": "Colors/Error/600" + } + }, + { + "name": "Component colors/Components/Buttons/Primary error/button-primary-error-border_hover", + "type": "color", + "isAlias": true, + "value": { + "collection": "_Primitives", + "name": "Colors/Error/700" + } + }, + { + "name": "Component colors/Components/Buttons/Secondary error/button-secondary-error-fg", + "type": "color", + "isAlias": true, + "value": { + "collection": "_Primitives", + "name": "Colors/Error/700" + } + }, + { + "name": "Component colors/Components/Buttons/Secondary error/button-secondary-error-fg_hover", + "type": "color", + "isAlias": true, + "value": { + "collection": "_Primitives", + "name": "Colors/Error/800" + } + }, + { + "name": "Component colors/Components/Buttons/Secondary error/button-secondary-error-bg", + "type": "color", + "isAlias": true, + "value": { + "collection": "_Primitives", + "name": "Colors/Base/white" + } + }, + { + "name": "Component colors/Components/Buttons/Secondary error/button-secondary-error-bg_hover", + "type": "color", + "isAlias": true, + "value": { + "collection": "_Primitives", + "name": "Colors/Error/50" + } + }, + { + "name": "Component colors/Components/Buttons/Secondary error/button-secondary-error-border", + "type": "color", + "isAlias": true, + "value": { + "collection": "_Primitives", + "name": "Colors/Error/300" + } + }, + { + "name": "Component colors/Components/Buttons/Secondary error/button-secondary-error-border_hover", + "type": "color", + "isAlias": true, + "value": { + "collection": "_Primitives", + "name": "Colors/Error/300" + } + }, + { + "name": "Component colors/Components/Buttons/Tertiary error/button-tertiary-error-fg", + "type": "color", + "isAlias": true, + "value": { + "collection": "_Primitives", + "name": "Colors/Error/700" + } + }, + { + "name": "Component colors/Components/Buttons/Tertiary error/button-tertiary-error-fg_hover", + "type": "color", + "isAlias": true, + "value": { + "collection": "_Primitives", + "name": "Colors/Error/800" + } + }, + { + "name": "Component colors/Components/Buttons/Tertiary error/button-tertiary-error-bg_hover", + "type": "color", + "isAlias": true, + "value": { + "collection": "_Primitives", + "name": "Colors/Error/50" + } + }, + { + "name": "Colors/Foreground/fg-secondary (700)", + "type": "color", + "isAlias": true, + "value": { + "collection": "_Primitives", + "name": "Colors/Gray (light mode)/700" + } + }, + { + "name": "Colors/Foreground/fg-secondary_hover", + "type": "color", + "isAlias": true, + "value": { + "collection": "_Primitives", + "name": "Colors/Gray (light mode)/800" + } + }, + { + "name": "Colors/Foreground/fg-tertiary (600)", + "type": "color", + "isAlias": true, + "value": { + "collection": "_Primitives", + "name": "Colors/Gray (light mode)/600" + } + }, + { + "name": "Colors/Foreground/fg-tertiary_hover", + "type": "color", + "isAlias": true, + "value": { + "collection": "_Primitives", + "name": "Colors/Gray (light mode)/700" + } + }, + { + "name": "Colors/Foreground/fg-quarterary (500)", + "type": "color", + "isAlias": true, + "value": { + "collection": "_Primitives", + "name": "Colors/Gray (light mode)/500" + } + }, + { + "name": "Colors/Foreground/fg-quarterary_hover", + "type": "color", + "isAlias": true, + "value": { + "collection": "_Primitives", + "name": "Colors/Gray (light mode)/600" + } + }, + { + "name": "Colors/Foreground/fg-quinary (400)", + "type": "color", + "isAlias": true, + "value": { + "collection": "_Primitives", + "name": "Colors/Gray (light mode)/400" + } + }, + { + "name": "Colors/Foreground/fg-quinary_hover", + "type": "color", + "isAlias": true, + "value": { + "collection": "_Primitives", + "name": "Colors/Gray (light mode)/500" + } + }, + { + "name": "Colors/Foreground/fg-senary (300)", + "type": "color", + "isAlias": true, + "value": { + "collection": "_Primitives", + "name": "Colors/Gray (light mode)/300" + } + }, + { + "name": "Colors/Foreground/fg-white", + "type": "color", + "isAlias": true, + "value": { + "collection": "_Primitives", + "name": "Colors/Base/white" + } + }, + { + "name": "Colors/Foreground/fg-disabled", + "type": "color", + "isAlias": true, + "value": { + "collection": "_Primitives", + "name": "Colors/Gray (light mode)/400" + } + }, + { + "name": "Colors/Foreground/fg-disabled_subtle", + "type": "color", + "isAlias": true, + "value": { + "collection": "_Primitives", + "name": "Colors/Gray (light mode)/300" + } + }, + { + "name": "Component colors/Components/Footers/footer-button-fg", + "type": "color", + "isAlias": true, + "value": { + "collection": "_Primitives", + "name": "Colors/Brand/200" + } + }, + { + "name": "Component colors/Components/Footers/footer-button-fg_hover", + "type": "color", + "isAlias": true, + "value": { + "collection": "_Primitives", + "name": "Colors/Base/white" + } + }, + { + "name": "Component colors/Components/Footers/footer-badge-fg", + "type": "color", + "isAlias": true, + "value": { + "collection": "_Primitives", + "name": "Colors/Success/700" + } + }, + { + "name": "Component colors/Components/Footers/footer-badge-bg", + "type": "color", + "isAlias": true, + "value": { + "collection": "_Primitives", + "name": "Colors/Success/50" + } + }, + { + "name": "Component colors/Components/Footers/footer-badge-border", + "type": "color", + "isAlias": true, + "value": { + "collection": "_Primitives", + "name": "Colors/Success/200" + } + }, + { + "name": "Component colors/Components/Header sections/header-abstract-50-bg", + "type": "color", + "isAlias": true, + "value": { + "collection": "_Primitives", + "name": "Colors/Brand/50" + } + }, + { + "name": "Component colors/Components/Header sections/header-abstract-100-bg", + "type": "color", + "isAlias": true, + "value": { + "collection": "_Primitives", + "name": "Colors/Brand/100" + } + }, + { + "name": "Component colors/Components/Header sections/header-abstract-200-bg", + "type": "color", + "isAlias": true, + "value": { + "collection": "_Primitives", + "name": "Colors/Brand/200" + } + }, + { + "name": "Component colors/Components/Header sections/header-abstract-300-bg", + "type": "color", + "isAlias": true, + "value": { + "collection": "_Primitives", + "name": "Colors/Brand/300" + } + }, + { + "name": "Component colors/Components/Icons/Icons/icon-fg-brand", + "type": "color", + "isAlias": true, + "value": { + "collection": "_Primitives", + "name": "Colors/Brand/600" + } + }, + { + "name": "Component colors/Components/Icons/Icons/icon-fg-brand_on-brand", + "type": "color", + "isAlias": true, + "value": { + "collection": "_Primitives", + "name": "Colors/Brand/200" + } + }, + { + "name": "Component colors/Components/Icons/Featured icons/Light/featured-icon-light-fg-brand", + "type": "color", + "isAlias": true, + "value": { + "collection": "_Primitives", + "name": "Colors/Brand/600" + } + }, + { + "name": "Component colors/Components/Icons/Featured icons/Light/featured-icon-light-fg-gray", + "type": "color", + "isAlias": true, + "value": { + "collection": "_Primitives", + "name": "Colors/Gray (light mode)/500" + } + }, + { + "name": "Component colors/Components/Icons/Featured icons/Light/featured-icon-light-fg-error", + "type": "color", + "isAlias": true, + "value": { + "collection": "_Primitives", + "name": "Colors/Error/600" + } + }, + { + "name": "Component colors/Components/Icons/Featured icons/Light/featured-icon-light-fg-warning", + "type": "color", + "isAlias": true, + "value": { + "collection": "_Primitives", + "name": "Colors/Warning/600" + } + }, + { + "name": "Component colors/Components/Icons/Featured icons/Light/featured-icon-light-fg-success", + "type": "color", + "isAlias": true, + "value": { + "collection": "_Primitives", + "name": "Colors/Success/600" + } + }, + { + "name": "Component colors/Components/Icons/Featured icons/Dark/featured-icon-dark-fg-brand", + "type": "color", + "isAlias": true, + "value": { + "collection": "_Primitives", + "name": "Colors/Base/white" + } + }, + { + "name": "Component colors/Components/Icons/Featured icons/Dark/featured-icon-dark-fg-gray", + "type": "color", + "isAlias": true, + "value": { + "collection": "_Primitives", + "name": "Colors/Base/white" + } + }, + { + "name": "Component colors/Components/Icons/Featured icons/Dark/featured-icon-dark-fg-error", + "type": "color", + "isAlias": true, + "value": { + "collection": "_Primitives", + "name": "Colors/Base/white" + } + }, + { + "name": "Component colors/Components/Icons/Featured icons/Dark/featured-icon-dark-fg-warning", + "type": "color", + "isAlias": true, + "value": { + "collection": "_Primitives", + "name": "Colors/Base/white" + } + }, + { + "name": "Component colors/Components/Icons/Featured icons/Dark/featured-icon-dark-fg-success", + "type": "color", + "isAlias": true, + "value": { + "collection": "_Primitives", + "name": "Colors/Base/white" + } + }, + { + "name": "Component colors/Components/Icons/Featured icons/Modern/featured-icon-modern-border", + "type": "color", + "isAlias": true, + "value": { + "collection": "_Primitives", + "name": "Colors/Gray (light mode)/200" + } + }, + { + "name": "Component colors/Components/Icons/Social icons/social-icon-fg-x", + "type": "color", + "isAlias": false, + "value": "#242E36" + }, + { + "name": "Component colors/Components/Icons/Social icons/social-icon-fg-instagram", + "type": "color", + "isAlias": false, + "value": "#000100" + }, + { + "name": "Component colors/Components/Icons/Social icons/social-icon-fg-apple", + "type": "color", + "isAlias": true, + "value": { + "collection": "_Primitives", + "name": "Colors/Base/black" + } + }, + { + "name": "Component colors/Components/Icons/Social icons/social-icon-fg-github", + "type": "color", + "isAlias": true, + "value": { + "collection": "_Primitives", + "name": "Colors/Base/black" + } + }, + { + "name": "Component colors/Components/Icons/Social icons/social-icon-fg-angellist", + "type": "color", + "isAlias": true, + "value": { + "collection": "_Primitives", + "name": "Colors/Base/black" + } + }, + { + "name": "Component colors/Components/Icons/Social icons/social-icon-fg-tumblr", + "type": "color", + "isAlias": false, + "value": "#001935" + }, + { + "name": "Component colors/Components/Mockups/screen-mockup-border", + "type": "color", + "isAlias": true, + "value": { + "collection": "_Primitives", + "name": "Colors/Gray (light mode)/900" + } + }, + { + "name": "Component colors/Components/Sliders/slider-handle-bg", + "type": "color", + "isAlias": true, + "value": { + "collection": "_Primitives", + "name": "Colors/Base/white" + } + }, + { + "name": "Component colors/Components/Sliders/slider-handle-border", + "type": "color", + "isAlias": true, + "value": { + "collection": "1. Color modes", + "name": "Colors/Border/border-brand-solid" + } + }, + { + "name": "Component colors/Components/Thumbnail/thumbnail-badge-brand-fg", + "type": "color", + "isAlias": true, + "value": { + "collection": "_Primitives", + "name": "Colors/Brand/700" + } + }, + { + "name": "Component colors/Components/Thumbnail/thumbnail-badge-success-fg", + "type": "color", + "isAlias": true, + "value": { + "collection": "_Primitives", + "name": "Colors/Success/700" + } + }, + { + "name": "Component colors/Components/Toggles/toggle-button-fg_disabled", + "type": "color", + "isAlias": true, + "value": { + "collection": "_Primitives", + "name": "Colors/Gray (light mode)/50" + } + }, + { + "name": "Component colors/Components/Tooltips/tooltip-supporting-text", + "type": "color", + "isAlias": true, + "value": { + "collection": "_Primitives", + "name": "Colors/Gray (light mode)/300" + } + }, + { + "name": "Component colors/Components/WYSIWYG editor/wysiwyg-editor-icon-fg", + "type": "color", + "isAlias": true, + "value": { + "collection": "_Primitives", + "name": "Colors/Gray (light mode)/400" + } + }, + { + "name": "Component colors/Components/WYSIWYG editor/wysiwyg-editor-icon-fg_active", + "type": "color", + "isAlias": true, + "value": { + "collection": "_Primitives", + "name": "Colors/Gray (light mode)/500" + } + }, + { + "name": "Colors/Foreground/fg-brand-primary (600)", + "type": "color", + "isAlias": true, + "value": { + "collection": "_Primitives", + "name": "Colors/Brand/600" + } + }, + { + "name": "Colors/Foreground/fg-brand-primary_alt", + "type": "color", + "isAlias": true, + "value": { + "collection": "_Primitives", + "name": "Colors/Brand/600" + } + }, + { + "name": "Colors/Foreground/fg-brand-secondary (500)", + "type": "color", + "isAlias": true, + "value": { + "collection": "_Primitives", + "name": "Colors/Brand/500" + } + }, + { + "name": "Colors/Foreground/fg-error-primary", + "type": "color", + "isAlias": true, + "value": { + "collection": "_Primitives", + "name": "Colors/Error/600" + } + }, + { + "name": "Colors/Foreground/fg-error-secondary", + "type": "color", + "isAlias": true, + "value": { + "collection": "_Primitives", + "name": "Colors/Error/500" + } + }, + { + "name": "Colors/Foreground/fg-warning-primary", + "type": "color", + "isAlias": true, + "value": { + "collection": "_Primitives", + "name": "Colors/Warning/600" + } + }, + { + "name": "Colors/Foreground/fg-warning-secondary", + "type": "color", + "isAlias": true, + "value": { + "collection": "_Primitives", + "name": "Colors/Warning/500" + } + }, + { + "name": "Colors/Foreground/fg-success-primary", + "type": "color", + "isAlias": true, + "value": { + "collection": "_Primitives", + "name": "Colors/Success/600" + } + }, + { + "name": "Colors/Foreground/fg-success-secondary", + "type": "color", + "isAlias": true, + "value": { + "collection": "_Primitives", + "name": "Colors/Success/500" + } + }, + { + "name": "Colors/Background/bg-primary", + "type": "color", + "isAlias": true, + "value": { + "collection": "_Primitives", + "name": "Colors/Base/white" + } + }, + { + "name": "Colors/Background/bg-primary_alt", + "type": "color", + "isAlias": true, + "value": { + "collection": "_Primitives", + "name": "Colors/Base/white" + } + }, + { + "name": "Colors/Background/bg-primary_hover", + "type": "color", + "isAlias": true, + "value": { + "collection": "_Primitives", + "name": "Colors/Gray (light mode)/50" + } + }, + { + "name": "Colors/Background/bg-primary-solid", + "type": "color", + "isAlias": true, + "value": { + "collection": "_Primitives", + "name": "Colors/Gray (light mode)/950" + } + }, + { + "name": "Colors/Background/bg-secondary", + "type": "color", + "isAlias": true, + "value": { + "collection": "_Primitives", + "name": "Colors/Gray (light mode)/50" + } + }, + { + "name": "Colors/Background/bg-secondary_alt", + "type": "color", + "isAlias": true, + "value": { + "collection": "_Primitives", + "name": "Colors/Gray (light mode)/50" + } + }, + { + "name": "Colors/Background/bg-secondary_hover", + "type": "color", + "isAlias": true, + "value": { + "collection": "_Primitives", + "name": "Colors/Gray (light mode)/100" + } + }, + { + "name": "Colors/Background/bg-secondary_subtle", + "type": "color", + "isAlias": true, + "value": { + "collection": "_Primitives", + "name": "Colors/Gray (light mode)/25" + } + }, + { + "name": "Colors/Background/bg-secondary-solid", + "type": "color", + "isAlias": true, + "value": { + "collection": "_Primitives", + "name": "Colors/Gray (light mode)/600" + } + }, + { + "name": "Colors/Background/bg-tertiary", + "type": "color", + "isAlias": true, + "value": { + "collection": "_Primitives", + "name": "Colors/Gray (light mode)/100" + } + }, + { + "name": "Colors/Background/bg-quaternary", + "type": "color", + "isAlias": true, + "value": { + "collection": "_Primitives", + "name": "Colors/Gray (light mode)/200" + } + }, + { + "name": "Colors/Background/bg-active", + "type": "color", + "isAlias": true, + "value": { + "collection": "_Primitives", + "name": "Colors/Gray (light mode)/50" + } + }, + { + "name": "Colors/Background/bg-disabled", + "type": "color", + "isAlias": true, + "value": { + "collection": "_Primitives", + "name": "Colors/Gray (light mode)/100" + } + }, + { + "name": "Colors/Background/bg-disabled_subtle", + "type": "color", + "isAlias": true, + "value": { + "collection": "_Primitives", + "name": "Colors/Gray (light mode)/50" + } + }, + { + "name": "Colors/Background/bg-overlay", + "type": "color", + "isAlias": true, + "value": { + "collection": "_Primitives", + "name": "Colors/Gray (light mode)/950" + } + }, + { + "name": "Colors/Background/bg-brand-primary", + "type": "color", + "isAlias": true, + "value": { + "collection": "_Primitives", + "name": "Colors/Brand/50" + } + }, + { + "name": "Colors/Background/bg-brand-primary_alt", + "type": "color", + "isAlias": true, + "value": { + "collection": "_Primitives", + "name": "Colors/Brand/50" + } + }, + { + "name": "Colors/Background/bg-brand-secondary", + "type": "color", + "isAlias": true, + "value": { + "collection": "_Primitives", + "name": "Colors/Brand/100" + } + }, + { + "name": "Colors/Background/bg-brand-solid", + "type": "color", + "isAlias": true, + "value": { + "collection": "_Primitives", + "name": "Colors/Brand/600" + } + }, + { + "name": "Colors/Background/bg-brand-solid_hover", + "type": "color", + "isAlias": true, + "value": { + "collection": "_Primitives", + "name": "Colors/Brand/700" + } + }, + { + "name": "Colors/Background/bg-brand-section", + "type": "color", + "isAlias": true, + "value": { + "collection": "_Primitives", + "name": "Colors/Brand/800" + } + }, + { + "name": "Colors/Background/bg-brand-section_subtle", + "type": "color", + "isAlias": true, + "value": { + "collection": "_Primitives", + "name": "Colors/Brand/700" + } + }, + { + "name": "Colors/Background/bg-error-primary", + "type": "color", + "isAlias": true, + "value": { + "collection": "_Primitives", + "name": "Colors/Error/50" + } + }, + { + "name": "Colors/Background/bg-error-secondary", + "type": "color", + "isAlias": true, + "value": { + "collection": "_Primitives", + "name": "Colors/Error/100" + } + }, + { + "name": "Colors/Background/bg-error-solid", + "type": "color", + "isAlias": true, + "value": { + "collection": "_Primitives", + "name": "Colors/Error/600" + } + }, + { + "name": "Colors/Background/bg-warning-primary", + "type": "color", + "isAlias": true, + "value": { + "collection": "_Primitives", + "name": "Colors/Warning/50" + } + }, + { + "name": "Colors/Background/bg-warning-secondary", + "type": "color", + "isAlias": true, + "value": { + "collection": "_Primitives", + "name": "Colors/Warning/100" + } + }, + { + "name": "Colors/Background/bg-warning-solid", + "type": "color", + "isAlias": true, + "value": { + "collection": "_Primitives", + "name": "Colors/Warning/600" + } + }, + { + "name": "Colors/Background/bg-success-primary", + "type": "color", + "isAlias": true, + "value": { + "collection": "_Primitives", + "name": "Colors/Success/50" + } + }, + { + "name": "Colors/Background/bg-success-secondary", + "type": "color", + "isAlias": true, + "value": { + "collection": "_Primitives", + "name": "Colors/Success/100" + } + }, + { + "name": "Colors/Background/bg-success-solid", + "type": "color", + "isAlias": true, + "value": { + "collection": "_Primitives", + "name": "Colors/Success/600" + } + }, + { + "name": "Component colors/Components/Logo/logo-text", + "type": "color", + "isAlias": false, + "value": "#290064" + }, + { + "name": "Component colors/Components/Logo/logo-violet", + "type": "color", + "isAlias": true, + "value": { + "collection": "1. Color modes", + "name": "Colors/Text/text-brand-secondary (700)" + } + }, + { + "name": "Component colors/Components/Logo/logo-dodge", + "type": "color", + "isAlias": false, + "value": "#2697F7" + }, + { + "name": "Component colors/Components/Logo/logo-blue", + "type": "color", + "isAlias": false, + "value": "#24BEFC" + }, + { + "name": "Component colors/Components/Logo/mark-1", + "type": "color", + "isAlias": true, + "value": { + "collection": "1. Color modes", + "name": "Colors/Text/text-brand-secondary (700)" + } + }, + { + "name": "Component colors/Components/Logo/mark-2", + "type": "color", + "isAlias": false, + "value": "#2697F7" + }, + { + "name": "Component colors/Components/Logo/mark-3", + "type": "color", + "isAlias": false, + "value": "#24BEFC" + } + ] + }, + { + "name": "Dark mode", + "variables": [ + { + "name": "Colors/Text/text-primary (900)", + "type": "color", + "isAlias": true, + "value": { + "collection": "_Primitives", + "name": "Colors/Gray (dark mode)/50" + } + }, + { + "name": "Colors/Text/text-primary_on-brand", + "type": "color", + "isAlias": true, + "value": { + "collection": "_Primitives", + "name": "Colors/Gray (dark mode)/50" + } + }, + { + "name": "Colors/Text/text-secondary (700)", + "type": "color", + "isAlias": true, + "value": { + "collection": "_Primitives", + "name": "Colors/Gray (dark mode)/300" + } + }, + { + "name": "Colors/Text/text-secondary_hover", + "type": "color", + "isAlias": true, + "value": { + "collection": "_Primitives", + "name": "Colors/Gray (dark mode)/200" + } + }, + { + "name": "Colors/Text/text-secondary_on-brand", + "type": "color", + "isAlias": true, + "value": { + "collection": "_Primitives", + "name": "Colors/Gray (dark mode)/300" + } + }, + { + "name": "Colors/Text/text-tertiary (600)", + "type": "color", + "isAlias": true, + "value": { + "collection": "_Primitives", + "name": "Colors/Gray (dark mode)/400" + } + }, + { + "name": "Colors/Text/text-tertiary_hover", + "type": "color", + "isAlias": true, + "value": { + "collection": "_Primitives", + "name": "Colors/Gray (dark mode)/300" + } + }, + { + "name": "Colors/Text/text-tertiary_on-brand", + "type": "color", + "isAlias": true, + "value": { + "collection": "_Primitives", + "name": "Colors/Gray (dark mode)/400" + } + }, + { + "name": "Colors/Text/text-quarterary (500)", + "type": "color", + "isAlias": true, + "value": { + "collection": "_Primitives", + "name": "Colors/Gray (dark mode)/400" + } + }, + { + "name": "Colors/Text/text-quarterary_on-brand", + "type": "color", + "isAlias": true, + "value": { + "collection": "_Primitives", + "name": "Colors/Gray (dark mode)/400" + } + }, + { + "name": "Colors/Text/text-white", + "type": "color", + "isAlias": true, + "value": { + "collection": "_Primitives", + "name": "Colors/Base/white" + } + }, + { + "name": "Colors/Text/text-disabled", + "type": "color", + "isAlias": true, + "value": { + "collection": "_Primitives", + "name": "Colors/Gray (dark mode)/500" + } + }, + { + "name": "Colors/Text/text-placeholder", + "type": "color", + "isAlias": true, + "value": { + "collection": "_Primitives", + "name": "Colors/Gray (dark mode)/500" + } + }, + { + "name": "Colors/Text/text-placeholder_subtle", + "type": "color", + "isAlias": true, + "value": { + "collection": "_Primitives", + "name": "Colors/Gray (dark mode)/700" + } + }, + { + "name": "Colors/Text/text-brand-primary (900)", + "type": "color", + "isAlias": true, + "value": { + "collection": "_Primitives", + "name": "Colors/Gray (dark mode)/50" + } + }, + { + "name": "Colors/Text/text-brand-secondary (700)", + "type": "color", + "isAlias": true, + "value": { + "collection": "_Primitives", + "name": "Colors/Gray (dark mode)/300" + } + }, + { + "name": "Colors/Text/text-brand-tertiary (600)", + "type": "color", + "isAlias": true, + "value": { + "collection": "_Primitives", + "name": "Colors/Gray (dark mode)/400" + } + }, + { + "name": "Colors/Text/text-brand-tertiary_alt", + "type": "color", + "isAlias": true, + "value": { + "collection": "_Primitives", + "name": "Colors/Gray (dark mode)/50" + } + }, + { + "name": "Colors/Text/text-error-primary (600)", + "type": "color", + "isAlias": true, + "value": { + "collection": "_Primitives", + "name": "Colors/Error/400" + } + }, + { + "name": "Colors/Text/text-warning-primary (600)", + "type": "color", + "isAlias": true, + "value": { + "collection": "_Primitives", + "name": "Colors/Warning/400" + } + }, + { + "name": "Colors/Text/text-success-primary (600)", + "type": "color", + "isAlias": true, + "value": { + "collection": "_Primitives", + "name": "Colors/Success/400" + } + }, + { + "name": "Colors/Border/border-primary", + "type": "color", + "isAlias": true, + "value": { + "collection": "_Primitives", + "name": "Colors/Gray (dark mode)/700" + } + }, + { + "name": "Colors/Border/border-secondary", + "type": "color", + "isAlias": true, + "value": { + "collection": "_Primitives", + "name": "Colors/Gray (dark mode)/800" + } + }, + { + "name": "Colors/Border/border-tertiary", + "type": "color", + "isAlias": true, + "value": { + "collection": "_Primitives", + "name": "Colors/Gray (dark mode)/800" + } + }, + { + "name": "Colors/Border/border-disabled", + "type": "color", + "isAlias": true, + "value": { + "collection": "_Primitives", + "name": "Colors/Gray (dark mode)/700" + } + }, + { + "name": "Colors/Border/border-disabled_subtle", + "type": "color", + "isAlias": true, + "value": { + "collection": "_Primitives", + "name": "Colors/Gray (dark mode)/800" + } + }, + { + "name": "Colors/Border/border-brand", + "type": "color", + "isAlias": true, + "value": { + "collection": "_Primitives", + "name": "Colors/Brand/400" + } + }, + { + "name": "Colors/Border/border-brand-solid", + "type": "color", + "isAlias": true, + "value": { + "collection": "_Primitives", + "name": "Colors/Brand/500" + } + }, + { + "name": "Colors/Border/border-brand-solid_alt", + "type": "color", + "isAlias": true, + "value": { + "collection": "_Primitives", + "name": "Colors/Gray (dark mode)/700" + } + }, + { + "name": "Colors/Border/border-error", + "type": "color", + "isAlias": true, + "value": { + "collection": "_Primitives", + "name": "Colors/Error/400" + } + }, + { + "name": "Colors/Border/border-error-solid", + "type": "color", + "isAlias": true, + "value": { + "collection": "_Primitives", + "name": "Colors/Error/500" + } + }, + { + "name": "Colors/Foreground/fg-primary (900)", + "type": "color", + "isAlias": true, + "value": { + "collection": "_Primitives", + "name": "Colors/Base/white" + } + }, + { + "name": "Component colors/Alpha/alpha-white-10", + "type": "color", + "isAlias": false, + "value": "#0C111D1A" + }, + { + "name": "Component colors/Alpha/alpha-white-20", + "type": "color", + "isAlias": false, + "value": "#0C111D33" + }, + { + "name": "Component colors/Alpha/alpha-white-30", + "type": "color", + "isAlias": false, + "value": "#0C111D4D" + }, + { + "name": "Component colors/Alpha/alpha-white-40", + "type": "color", + "isAlias": false, + "value": "#0C111D66" + }, + { + "name": "Component colors/Alpha/alpha-white-50", + "type": "color", + "isAlias": false, + "value": "#0C111D80" + }, + { + "name": "Component colors/Alpha/alpha-white-60", + "type": "color", + "isAlias": false, + "value": "#0C111D99" + }, + { + "name": "Component colors/Alpha/alpha-white-70", + "type": "color", + "isAlias": false, + "value": "#0C111DB3" + }, + { + "name": "Component colors/Alpha/alpha-white-80", + "type": "color", + "isAlias": false, + "value": "#0C111DCC" + }, + { + "name": "Component colors/Alpha/alpha-white-90", + "type": "color", + "isAlias": false, + "value": "#0C111DE6" + }, + { + "name": "Component colors/Alpha/alpha-white-100", + "type": "color", + "isAlias": true, + "value": { + "collection": "_Primitives", + "name": "Colors/Gray (dark mode)/950" + } + }, + { + "name": "Component colors/Alpha/alpha-black-10", + "type": "color", + "isAlias": false, + "value": "#FFFFFF1A" + }, + { + "name": "Component colors/Alpha/alpha-black-20", + "type": "color", + "isAlias": false, + "value": "#FFFFFF33" + }, + { + "name": "Component colors/Alpha/alpha-black-30", + "type": "color", + "isAlias": false, + "value": "#FFFFFF4D" + }, + { + "name": "Component colors/Alpha/alpha-black-40", + "type": "color", + "isAlias": false, + "value": "#FFFFFF66" + }, + { + "name": "Component colors/Alpha/alpha-black-50", + "type": "color", + "isAlias": false, + "value": "#FFFFFF80" + }, + { + "name": "Component colors/Alpha/alpha-black-60", + "type": "color", + "isAlias": false, + "value": "#FFFFFF99" + }, + { + "name": "Component colors/Alpha/alpha-black-70", + "type": "color", + "isAlias": false, + "value": "#FFFFFFB3" + }, + { + "name": "Component colors/Alpha/alpha-black-80", + "type": "color", + "isAlias": false, + "value": "#FFFFFFCC" + }, + { + "name": "Component colors/Alpha/alpha-black-90", + "type": "color", + "isAlias": false, + "value": "#FFFFFFE6" + }, + { + "name": "Component colors/Alpha/alpha-black-100", + "type": "color", + "isAlias": false, + "value": "#FFFFFF" + }, + { + "name": "Component colors/Utility/Gray/utility-gray-50", + "type": "color", + "isAlias": true, + "value": { + "collection": "_Primitives", + "name": "Colors/Gray (dark mode)/900" + } + }, + { + "name": "Component colors/Utility/Gray/utility-gray-100", + "type": "color", + "isAlias": true, + "value": { + "collection": "_Primitives", + "name": "Colors/Gray (dark mode)/800" + } + }, + { + "name": "Component colors/Utility/Gray/utility-gray-200", + "type": "color", + "isAlias": true, + "value": { + "collection": "_Primitives", + "name": "Colors/Gray (dark mode)/700" + } + }, + { + "name": "Component colors/Utility/Gray/utility-gray-300", + "type": "color", + "isAlias": true, + "value": { + "collection": "_Primitives", + "name": "Colors/Gray (dark mode)/700" + } + }, + { + "name": "Component colors/Utility/Gray/utility-gray-400", + "type": "color", + "isAlias": true, + "value": { + "collection": "_Primitives", + "name": "Colors/Gray (dark mode)/600" + } + }, + { + "name": "Component colors/Utility/Gray/utility-gray-500", + "type": "color", + "isAlias": true, + "value": { + "collection": "_Primitives", + "name": "Colors/Gray (dark mode)/500" + } + }, + { + "name": "Component colors/Utility/Gray/utility-gray-600", + "type": "color", + "isAlias": true, + "value": { + "collection": "_Primitives", + "name": "Colors/Gray (dark mode)/400" + } + }, + { + "name": "Component colors/Utility/Gray/utility-gray-700", + "type": "color", + "isAlias": true, + "value": { + "collection": "_Primitives", + "name": "Colors/Gray (dark mode)/300" + } + }, + { + "name": "Component colors/Utility/Gray/utility-gray-800", + "type": "color", + "isAlias": true, + "value": { + "collection": "_Primitives", + "name": "Colors/Gray (dark mode)/200" + } + }, + { + "name": "Component colors/Utility/Gray/utility-gray-900", + "type": "color", + "isAlias": true, + "value": { + "collection": "_Primitives", + "name": "Colors/Gray (dark mode)/100" + } + }, + { + "name": "Component colors/Utility/Brand/utility-brand-50", + "type": "color", + "isAlias": true, + "value": { + "collection": "_Primitives", + "name": "Colors/Brand/950" + } + }, + { + "name": "Component colors/Utility/Brand/utility-brand-50_alt", + "type": "color", + "isAlias": true, + "value": { + "collection": "1. Color modes", + "name": "Component colors/Utility/Gray/utility-gray-50" + } + }, + { + "name": "Component colors/Utility/Brand/utility-brand-100", + "type": "color", + "isAlias": true, + "value": { + "collection": "_Primitives", + "name": "Colors/Brand/900" + } + }, + { + "name": "Component colors/Utility/Brand/utility-brand-100_alt", + "type": "color", + "isAlias": true, + "value": { + "collection": "1. Color modes", + "name": "Component colors/Utility/Gray/utility-gray-100" + } + }, + { + "name": "Component colors/Utility/Brand/utility-brand-200", + "type": "color", + "isAlias": true, + "value": { + "collection": "_Primitives", + "name": "Colors/Brand/800" + } + }, + { + "name": "Component colors/Utility/Brand/utility-brand-200_alt", + "type": "color", + "isAlias": true, + "value": { + "collection": "1. Color modes", + "name": "Component colors/Utility/Gray/utility-gray-200" + } + }, + { + "name": "Component colors/Utility/Brand/utility-brand-300", + "type": "color", + "isAlias": true, + "value": { + "collection": "_Primitives", + "name": "Colors/Brand/700" + } + }, + { + "name": "Component colors/Utility/Brand/utility-brand-300_alt", + "type": "color", + "isAlias": true, + "value": { + "collection": "1. Color modes", + "name": "Component colors/Utility/Gray/utility-gray-300" + } + }, + { + "name": "Component colors/Utility/Brand/utility-brand-400", + "type": "color", + "isAlias": true, + "value": { + "collection": "_Primitives", + "name": "Colors/Brand/600" + } + }, + { + "name": "Component colors/Utility/Brand/utility-brand-400_alt", + "type": "color", + "isAlias": true, + "value": { + "collection": "1. Color modes", + "name": "Component colors/Utility/Gray/utility-gray-400" + } + }, + { + "name": "Component colors/Utility/Brand/utility-brand-500", + "type": "color", + "isAlias": true, + "value": { + "collection": "_Primitives", + "name": "Colors/Brand/500" + } + }, + { + "name": "Component colors/Utility/Brand/utility-brand-500_alt", + "type": "color", + "isAlias": true, + "value": { + "collection": "1. Color modes", + "name": "Component colors/Utility/Gray/utility-gray-500" + } + }, + { + "name": "Component colors/Utility/Brand/utility-brand-600", + "type": "color", + "isAlias": true, + "value": { + "collection": "_Primitives", + "name": "Colors/Brand/400" + } + }, + { + "name": "Component colors/Utility/Brand/utility-brand-600_alt", + "type": "color", + "isAlias": true, + "value": { + "collection": "1. Color modes", + "name": "Component colors/Utility/Gray/utility-gray-600" + } + }, + { + "name": "Component colors/Utility/Brand/utility-brand-700", + "type": "color", + "isAlias": true, + "value": { + "collection": "_Primitives", + "name": "Colors/Brand/300" + } + }, + { + "name": "Component colors/Utility/Brand/utility-brand-700_alt", + "type": "color", + "isAlias": true, + "value": { + "collection": "1. Color modes", + "name": "Component colors/Utility/Gray/utility-gray-700" + } + }, + { + "name": "Component colors/Utility/Brand/utility-brand-800", + "type": "color", + "isAlias": true, + "value": { + "collection": "_Primitives", + "name": "Colors/Brand/200" + } + }, + { + "name": "Component colors/Utility/Brand/utility-brand-800_alt", + "type": "color", + "isAlias": true, + "value": { + "collection": "1. Color modes", + "name": "Component colors/Utility/Gray/utility-gray-800" + } + }, + { + "name": "Component colors/Utility/Brand/utility-brand-900", + "type": "color", + "isAlias": true, + "value": { + "collection": "_Primitives", + "name": "Colors/Brand/100" + } + }, + { + "name": "Component colors/Utility/Brand/utility-brand-900_alt", + "type": "color", + "isAlias": true, + "value": { + "collection": "1. Color modes", + "name": "Component colors/Utility/Gray/utility-gray-900" + } + }, + { + "name": "Component colors/Utility/Error/utility-error-50", + "type": "color", + "isAlias": true, + "value": { + "collection": "_Primitives", + "name": "Colors/Error/950" + } + }, + { + "name": "Component colors/Utility/Error/utility-error-100", + "type": "color", + "isAlias": true, + "value": { + "collection": "_Primitives", + "name": "Colors/Error/900" + } + }, + { + "name": "Component colors/Utility/Error/utility-error-200", + "type": "color", + "isAlias": true, + "value": { + "collection": "_Primitives", + "name": "Colors/Error/800" + } + }, + { + "name": "Component colors/Utility/Error/utility-error-300", + "type": "color", + "isAlias": true, + "value": { + "collection": "_Primitives", + "name": "Colors/Error/700" + } + }, + { + "name": "Component colors/Utility/Error/utility-error-400", + "type": "color", + "isAlias": true, + "value": { + "collection": "_Primitives", + "name": "Colors/Error/600" + } + }, + { + "name": "Component colors/Utility/Error/utility-error-500", + "type": "color", + "isAlias": true, + "value": { + "collection": "_Primitives", + "name": "Colors/Error/500" + } + }, + { + "name": "Component colors/Utility/Error/utility-error-600", + "type": "color", + "isAlias": true, + "value": { + "collection": "_Primitives", + "name": "Colors/Error/400" + } + }, + { + "name": "Component colors/Utility/Error/utility-error-700", + "type": "color", + "isAlias": true, + "value": { + "collection": "_Primitives", + "name": "Colors/Error/300" + } + }, + { + "name": "Component colors/Utility/Warning/utility-warning-50", + "type": "color", + "isAlias": true, + "value": { + "collection": "_Primitives", + "name": "Colors/Warning/950" + } + }, + { + "name": "Component colors/Utility/Warning/utility-warning-100", + "type": "color", + "isAlias": true, + "value": { + "collection": "_Primitives", + "name": "Colors/Warning/900" + } + }, + { + "name": "Component colors/Utility/Warning/utility-warning-200", + "type": "color", + "isAlias": true, + "value": { + "collection": "_Primitives", + "name": "Colors/Warning/800" + } + }, + { + "name": "Component colors/Utility/Warning/utility-warning-300", + "type": "color", + "isAlias": true, + "value": { + "collection": "_Primitives", + "name": "Colors/Warning/700" + } + }, + { + "name": "Component colors/Utility/Warning/utility-warning-400", + "type": "color", + "isAlias": true, + "value": { + "collection": "_Primitives", + "name": "Colors/Warning/600" + } + }, + { + "name": "Component colors/Utility/Warning/utility-warning-500", + "type": "color", + "isAlias": true, + "value": { + "collection": "_Primitives", + "name": "Colors/Warning/500" + } + }, + { + "name": "Component colors/Utility/Warning/utility-warning-600", + "type": "color", + "isAlias": true, + "value": { + "collection": "_Primitives", + "name": "Colors/Warning/400" + } + }, + { + "name": "Component colors/Utility/Warning/utility-warning-700", + "type": "color", + "isAlias": true, + "value": { + "collection": "_Primitives", + "name": "Colors/Warning/300" + } + }, + { + "name": "Component colors/Utility/Success/utility-success-50", + "type": "color", + "isAlias": true, + "value": { + "collection": "_Primitives", + "name": "Colors/Success/950" + } + }, + { + "name": "Component colors/Utility/Success/utility-success-100", + "type": "color", + "isAlias": true, + "value": { + "collection": "_Primitives", + "name": "Colors/Success/900" + } + }, + { + "name": "Component colors/Utility/Success/utility-success-200", + "type": "color", + "isAlias": true, + "value": { + "collection": "_Primitives", + "name": "Colors/Success/800" + } + }, + { + "name": "Component colors/Utility/Success/utility-success-300", + "type": "color", + "isAlias": true, + "value": { + "collection": "_Primitives", + "name": "Colors/Success/700" + } + }, + { + "name": "Component colors/Utility/Success/utility-success-400", + "type": "color", + "isAlias": true, + "value": { + "collection": "_Primitives", + "name": "Colors/Success/600" + } + }, + { + "name": "Component colors/Utility/Success/utility-success-500", + "type": "color", + "isAlias": true, + "value": { + "collection": "_Primitives", + "name": "Colors/Success/500" + } + }, + { + "name": "Component colors/Utility/Success/utility-success-600", + "type": "color", + "isAlias": true, + "value": { + "collection": "_Primitives", + "name": "Colors/Success/400" + } + }, + { + "name": "Component colors/Utility/Success/utility-success-700", + "type": "color", + "isAlias": true, + "value": { + "collection": "_Primitives", + "name": "Colors/Success/300" + } + }, + { + "name": "Component colors/Utility/Gray blue/utility-gray-blue-50", + "type": "color", + "isAlias": true, + "value": { + "collection": "_Primitives", + "name": "Colors/Gray blue/900" + } + }, + { + "name": "Component colors/Utility/Gray blue/utility-gray-blue-100", + "type": "color", + "isAlias": true, + "value": { + "collection": "_Primitives", + "name": "Colors/Gray blue/900" + } + }, + { + "name": "Component colors/Utility/Gray blue/utility-gray-blue-200", + "type": "color", + "isAlias": true, + "value": { + "collection": "_Primitives", + "name": "Colors/Gray blue/800" + } + }, + { + "name": "Component colors/Utility/Gray blue/utility-gray-blue-300", + "type": "color", + "isAlias": true, + "value": { + "collection": "_Primitives", + "name": "Colors/Gray blue/700" + } + }, + { + "name": "Component colors/Utility/Gray blue/utility-gray-blue-400", + "type": "color", + "isAlias": true, + "value": { + "collection": "_Primitives", + "name": "Colors/Gray blue/600" + } + }, + { + "name": "Component colors/Utility/Gray blue/utility-gray-blue-500", + "type": "color", + "isAlias": true, + "value": { + "collection": "_Primitives", + "name": "Colors/Gray blue/500" + } + }, + { + "name": "Component colors/Utility/Gray blue/utility-gray-blue-600", + "type": "color", + "isAlias": true, + "value": { + "collection": "_Primitives", + "name": "Colors/Gray blue/400" + } + }, + { + "name": "Component colors/Utility/Gray blue/utility-gray-blue-700", + "type": "color", + "isAlias": true, + "value": { + "collection": "_Primitives", + "name": "Colors/Gray blue/300" + } + }, + { + "name": "Component colors/Utility/Blue light/utility-blue-light-50", + "type": "color", + "isAlias": true, + "value": { + "collection": "_Primitives", + "name": "Colors/BlueLight/950" + } + }, + { + "name": "Component colors/Utility/Blue light/utility-blue-light-100", + "type": "color", + "isAlias": true, + "value": { + "collection": "_Primitives", + "name": "Colors/BlueLight/900" + } + }, + { + "name": "Component colors/Utility/Blue light/utility-blue-light-200", + "type": "color", + "isAlias": true, + "value": { + "collection": "_Primitives", + "name": "Colors/BlueLight/800" + } + }, + { + "name": "Component colors/Utility/Blue light/utility-blue-light-300", + "type": "color", + "isAlias": true, + "value": { + "collection": "_Primitives", + "name": "Colors/BlueLight/700" + } + }, + { + "name": "Component colors/Utility/Blue light/utility-blue-light-400", + "type": "color", + "isAlias": true, + "value": { + "collection": "_Primitives", + "name": "Colors/BlueLight/600" + } + }, + { + "name": "Component colors/Utility/Blue light/utility-blue-light-500", + "type": "color", + "isAlias": true, + "value": { + "collection": "_Primitives", + "name": "Colors/BlueLight/500" + } + }, + { + "name": "Component colors/Utility/Blue light/utility-blue-light-600", + "type": "color", + "isAlias": true, + "value": { + "collection": "_Primitives", + "name": "Colors/BlueLight/400" + } + }, + { + "name": "Component colors/Utility/Blue light/utility-blue-light-700", + "type": "color", + "isAlias": true, + "value": { + "collection": "_Primitives", + "name": "Colors/BlueLight/300" + } + }, + { + "name": "Component colors/Utility/Blue/utility-blue-50", + "type": "color", + "isAlias": true, + "value": { + "collection": "_Primitives", + "name": "Colors/Blue/950" + } + }, + { + "name": "Component colors/Utility/Blue/utility-blue-100", + "type": "color", + "isAlias": true, + "value": { + "collection": "_Primitives", + "name": "Colors/Blue/900" + } + }, + { + "name": "Component colors/Utility/Blue/utility-blue-200", + "type": "color", + "isAlias": true, + "value": { + "collection": "_Primitives", + "name": "Colors/Blue/800" + } + }, + { + "name": "Component colors/Utility/Blue/utility-blue-300", + "type": "color", + "isAlias": true, + "value": { + "collection": "_Primitives", + "name": "Colors/Blue/700" + } + }, + { + "name": "Component colors/Utility/Blue/utility-blue-400", + "type": "color", + "isAlias": true, + "value": { + "collection": "_Primitives", + "name": "Colors/Blue/600" + } + }, + { + "name": "Component colors/Utility/Blue/utility-blue-500", + "type": "color", + "isAlias": true, + "value": { + "collection": "_Primitives", + "name": "Colors/Blue/500" + } + }, + { + "name": "Component colors/Utility/Blue/utility-blue-600", + "type": "color", + "isAlias": true, + "value": { + "collection": "_Primitives", + "name": "Colors/Blue/400" + } + }, + { + "name": "Component colors/Utility/Blue/utility-blue-700", + "type": "color", + "isAlias": true, + "value": { + "collection": "_Primitives", + "name": "Colors/Blue/300" + } + }, + { + "name": "Component colors/Utility/Blue dark/utility-blue-dark-50", + "type": "color", + "isAlias": true, + "value": { + "collection": "_Primitives", + "name": "Colors/BlueDark/950" + } + }, + { + "name": "Component colors/Utility/Blue dark/utility-blue-dark-100", + "type": "color", + "isAlias": true, + "value": { + "collection": "_Primitives", + "name": "Colors/BlueDark/900" + } + }, + { + "name": "Component colors/Utility/Blue dark/utility-blue-dark-200", + "type": "color", + "isAlias": true, + "value": { + "collection": "_Primitives", + "name": "Colors/BlueDark/800" + } + }, + { + "name": "Component colors/Utility/Blue dark/utility-blue-dark-300", + "type": "color", + "isAlias": true, + "value": { + "collection": "_Primitives", + "name": "Colors/BlueDark/700" + } + }, + { + "name": "Component colors/Utility/Blue dark/utility-blue-dark-400", + "type": "color", + "isAlias": true, + "value": { + "collection": "_Primitives", + "name": "Colors/BlueDark/600" + } + }, + { + "name": "Component colors/Utility/Blue dark/utility-blue-dark-500", + "type": "color", + "isAlias": true, + "value": { + "collection": "_Primitives", + "name": "Colors/BlueDark/500" + } + }, + { + "name": "Component colors/Utility/Blue dark/utility-blue-dark-600", + "type": "color", + "isAlias": true, + "value": { + "collection": "_Primitives", + "name": "Colors/BlueDark/400" + } + }, + { + "name": "Component colors/Utility/Blue dark/utility-blue-dark-700", + "type": "color", + "isAlias": true, + "value": { + "collection": "_Primitives", + "name": "Colors/BlueDark/300" + } + }, + { + "name": "Component colors/Utility/Indigo/utility-indigo-50", + "type": "color", + "isAlias": true, + "value": { + "collection": "_Primitives", + "name": "Colors/Indigo/950" + } + }, + { + "name": "Component colors/Utility/Indigo/utility-indigo-100", + "type": "color", + "isAlias": true, + "value": { + "collection": "_Primitives", + "name": "Colors/Indigo/900" + } + }, + { + "name": "Component colors/Utility/Indigo/utility-indigo-200", + "type": "color", + "isAlias": true, + "value": { + "collection": "_Primitives", + "name": "Colors/Indigo/800" + } + }, + { + "name": "Component colors/Utility/Indigo/utility-indigo-300", + "type": "color", + "isAlias": true, + "value": { + "collection": "_Primitives", + "name": "Colors/Indigo/700" + } + }, + { + "name": "Component colors/Utility/Indigo/utility-indigo-400", + "type": "color", + "isAlias": true, + "value": { + "collection": "_Primitives", + "name": "Colors/Indigo/600" + } + }, + { + "name": "Component colors/Utility/Indigo/utility-indigo-500", + "type": "color", + "isAlias": true, + "value": { + "collection": "_Primitives", + "name": "Colors/Indigo/500" + } + }, + { + "name": "Component colors/Utility/Indigo/utility-indigo-600", + "type": "color", + "isAlias": true, + "value": { + "collection": "_Primitives", + "name": "Colors/Indigo/400" + } + }, + { + "name": "Component colors/Utility/Indigo/utility-indigo-700", + "type": "color", + "isAlias": true, + "value": { + "collection": "_Primitives", + "name": "Colors/Indigo/300" + } + }, + { + "name": "Component colors/Utility/Purple/utility-purple-50", + "type": "color", + "isAlias": true, + "value": { + "collection": "_Primitives", + "name": "Colors/Purple/950" + } + }, + { + "name": "Component colors/Utility/Purple/utility-purple-100", + "type": "color", + "isAlias": true, + "value": { + "collection": "_Primitives", + "name": "Colors/Purple/900" + } + }, + { + "name": "Component colors/Utility/Purple/utility-purple-200", + "type": "color", + "isAlias": true, + "value": { + "collection": "_Primitives", + "name": "Colors/Purple/800" + } + }, + { + "name": "Component colors/Utility/Purple/utility-purple-300", + "type": "color", + "isAlias": true, + "value": { + "collection": "_Primitives", + "name": "Colors/Purple/700" + } + }, + { + "name": "Component colors/Utility/Purple/utility-purple-400", + "type": "color", + "isAlias": true, + "value": { + "collection": "_Primitives", + "name": "Colors/Purple/600" + } + }, + { + "name": "Component colors/Utility/Purple/utility-purple-500", + "type": "color", + "isAlias": true, + "value": { + "collection": "_Primitives", + "name": "Colors/Purple/500" + } + }, + { + "name": "Component colors/Utility/Purple/utility-purple-600", + "type": "color", + "isAlias": true, + "value": { + "collection": "_Primitives", + "name": "Colors/Purple/400" + } + }, + { + "name": "Component colors/Utility/Purple/utility-purple-700", + "type": "color", + "isAlias": true, + "value": { + "collection": "_Primitives", + "name": "Colors/Purple/300" + } + }, + { + "name": "Component colors/Utility/Fuchsia/utility-fuchsia-50", + "type": "color", + "isAlias": true, + "value": { + "collection": "_Primitives", + "name": "Colors/Fuchsia/950" + } + }, + { + "name": "Component colors/Utility/Fuchsia/utility-fuchsia-100", + "type": "color", + "isAlias": true, + "value": { + "collection": "_Primitives", + "name": "Colors/Fuchsia/900" + } + }, + { + "name": "Component colors/Utility/Fuchsia/utility-fuchsia-200", + "type": "color", + "isAlias": true, + "value": { + "collection": "_Primitives", + "name": "Colors/Fuchsia/800" + } + }, + { + "name": "Component colors/Utility/Fuchsia/utility-fuchsia-300", + "type": "color", + "isAlias": true, + "value": { + "collection": "_Primitives", + "name": "Colors/Fuchsia/700" + } + }, + { + "name": "Component colors/Utility/Fuchsia/utility-fuchsia-400", + "type": "color", + "isAlias": true, + "value": { + "collection": "_Primitives", + "name": "Colors/Fuchsia/600" + } + }, + { + "name": "Component colors/Utility/Fuchsia/utility-fuchsia-500", + "type": "color", + "isAlias": true, + "value": { + "collection": "_Primitives", + "name": "Colors/Fuchsia/500" + } + }, + { + "name": "Component colors/Utility/Fuchsia/utility-fuchsia-600", + "type": "color", + "isAlias": true, + "value": { + "collection": "_Primitives", + "name": "Colors/Fuchsia/400" + } + }, + { + "name": "Component colors/Utility/Fuchsia/utility-fuchsia-700", + "type": "color", + "isAlias": true, + "value": { + "collection": "_Primitives", + "name": "Colors/Fuchsia/300" + } + }, + { + "name": "Component colors/Utility/Pink/utility-pink-50", + "type": "color", + "isAlias": true, + "value": { + "collection": "_Primitives", + "name": "Colors/Pink/950" + } + }, + { + "name": "Component colors/Utility/Pink/utility-pink-100", + "type": "color", + "isAlias": true, + "value": { + "collection": "_Primitives", + "name": "Colors/Pink/900" + } + }, + { + "name": "Component colors/Utility/Pink/utility-pink-200", + "type": "color", + "isAlias": true, + "value": { + "collection": "_Primitives", + "name": "Colors/Pink/800" + } + }, + { + "name": "Component colors/Utility/Pink/utility-pink-300", + "type": "color", + "isAlias": true, + "value": { + "collection": "_Primitives", + "name": "Colors/Pink/700" + } + }, + { + "name": "Component colors/Utility/Pink/utility-pink-400", + "type": "color", + "isAlias": true, + "value": { + "collection": "_Primitives", + "name": "Colors/Pink/600" + } + }, + { + "name": "Component colors/Utility/Pink/utility-pink-500", + "type": "color", + "isAlias": true, + "value": { + "collection": "_Primitives", + "name": "Colors/Pink/500" + } + }, + { + "name": "Component colors/Utility/Pink/utility-pink-600", + "type": "color", + "isAlias": true, + "value": { + "collection": "_Primitives", + "name": "Colors/Pink/400" + } + }, + { + "name": "Component colors/Utility/Pink/utility-pink-700", + "type": "color", + "isAlias": true, + "value": { + "collection": "_Primitives", + "name": "Colors/Pink/300" + } + }, + { + "name": "Component colors/Utility/Orange dark/utility-orange-dark-50", + "type": "color", + "isAlias": true, + "value": { + "collection": "_Primitives", + "name": "Colors/Orange dark/950" + } + }, + { + "name": "Component colors/Utility/Orange dark/utility-orange-dark-100", + "type": "color", + "isAlias": true, + "value": { + "collection": "_Primitives", + "name": "Colors/Orange dark/900" + } + }, + { + "name": "Component colors/Utility/Orange dark/utility-orange-dark-200", + "type": "color", + "isAlias": true, + "value": { + "collection": "_Primitives", + "name": "Colors/Orange dark/800" + } + }, + { + "name": "Component colors/Utility/Orange dark/utility-orange-dark-300", + "type": "color", + "isAlias": true, + "value": { + "collection": "_Primitives", + "name": "Colors/Orange dark/700" + } + }, + { + "name": "Component colors/Utility/Orange dark/utility-orange-dark-400", + "type": "color", + "isAlias": true, + "value": { + "collection": "_Primitives", + "name": "Colors/Orange dark/600" + } + }, + { + "name": "Component colors/Utility/Orange dark/utility-orange-dark-500", + "type": "color", + "isAlias": true, + "value": { + "collection": "_Primitives", + "name": "Colors/Orange dark/500" + } + }, + { + "name": "Component colors/Utility/Orange dark/utility-orange-dark-600", + "type": "color", + "isAlias": true, + "value": { + "collection": "_Primitives", + "name": "Colors/Orange dark/400" + } + }, + { + "name": "Component colors/Utility/Orange dark/utility-orange-dark-700", + "type": "color", + "isAlias": true, + "value": { + "collection": "_Primitives", + "name": "Colors/Orange dark/300" + } + }, + { + "name": "Component colors/Utility/Orange/utility-orange-50", + "type": "color", + "isAlias": true, + "value": { + "collection": "_Primitives", + "name": "Colors/Orange/950" + } + }, + { + "name": "Component colors/Utility/Orange/utility-orange-100", + "type": "color", + "isAlias": true, + "value": { + "collection": "_Primitives", + "name": "Colors/Orange/900" + } + }, + { + "name": "Component colors/Utility/Orange/utility-orange-200", + "type": "color", + "isAlias": true, + "value": { + "collection": "_Primitives", + "name": "Colors/Orange/800" + } + }, + { + "name": "Component colors/Utility/Orange/utility-orange-300", + "type": "color", + "isAlias": true, + "value": { + "collection": "_Primitives", + "name": "Colors/Orange/700" + } + }, + { + "name": "Component colors/Utility/Orange/utility-orange-400", + "type": "color", + "isAlias": true, + "value": { + "collection": "_Primitives", + "name": "Colors/Orange/600" + } + }, + { + "name": "Component colors/Utility/Orange/utility-orange-500", + "type": "color", + "isAlias": true, + "value": { + "collection": "_Primitives", + "name": "Colors/Orange/500" + } + }, + { + "name": "Component colors/Utility/Orange/utility-orange-600", + "type": "color", + "isAlias": true, + "value": { + "collection": "_Primitives", + "name": "Colors/Orange/400" + } + }, + { + "name": "Component colors/Utility/Orange/utility-orange-700", + "type": "color", + "isAlias": true, + "value": { + "collection": "_Primitives", + "name": "Colors/Orange/300" + } + }, + { + "name": "Component colors/Components/App store badges/app-store-badge-border", + "type": "color", + "isAlias": true, + "value": { + "collection": "_Primitives", + "name": "Colors/Base/white" + } + }, + { + "name": "Component colors/Components/Application navigation/nav-item-button-icon-fg", + "type": "color", + "isAlias": true, + "value": { + "collection": "_Primitives", + "name": "Colors/Gray (dark mode)/400" + } + }, + { + "name": "Component colors/Components/Application navigation/nav-item-button-icon-fg_active", + "type": "color", + "isAlias": true, + "value": { + "collection": "_Primitives", + "name": "Colors/Gray (dark mode)/200" + } + }, + { + "name": "Component colors/Components/Application navigation/nav-item-icon-fg", + "type": "color", + "isAlias": true, + "value": { + "collection": "_Primitives", + "name": "Colors/Gray (dark mode)/400" + } + }, + { + "name": "Component colors/Components/Application navigation/nav-item-icon-fg_active", + "type": "color", + "isAlias": true, + "value": { + "collection": "_Primitives", + "name": "Colors/Gray (dark mode)/200" + } + }, + { + "name": "Component colors/Components/Avatars/avatar-bg", + "type": "color", + "isAlias": true, + "value": { + "collection": "_Primitives", + "name": "Colors/Gray (dark mode)/800" + } + }, + { + "name": "Component colors/Components/Avatars/avatar-profile-photo-border", + "type": "color", + "isAlias": true, + "value": { + "collection": "_Primitives", + "name": "Colors/Gray (dark mode)/950" + } + }, + { + "name": "Component colors/Components/Avatars/avatar-contrast-border", + "type": "color", + "isAlias": false, + "value": "#FFFFFF1F" + }, + { + "name": "Component colors/Components/Avatars/avatar-focus-border", + "type": "color", + "isAlias": false, + "value": "#98A2B324" + }, + { + "name": "Component colors/Components/Breadcrumbs/breadcrumb-fg", + "type": "color", + "isAlias": true, + "value": { + "collection": "_Primitives", + "name": "Colors/Gray (dark mode)/300" + } + }, + { + "name": "Component colors/Components/Breadcrumbs/breadcrumb-fg_hover", + "type": "color", + "isAlias": true, + "value": { + "collection": "_Primitives", + "name": "Colors/Base/white" + } + }, + { + "name": "Component colors/Components/Breadcrumbs/breadcrumb-bg_hover", + "type": "color", + "isAlias": true, + "value": { + "collection": "_Primitives", + "name": "Colors/Gray (dark mode)/800" + } + }, + { + "name": "Component colors/Components/Breadcrumbs/breadcrumb-brand-fg_hover", + "type": "color", + "isAlias": true, + "value": { + "collection": "_Primitives", + "name": "Colors/Base/white" + } + }, + { + "name": "Component colors/Components/Breadcrumbs/breadcrumb-brand-bg_hover", + "type": "color", + "isAlias": true, + "value": { + "collection": "_Primitives", + "name": "Colors/Gray (dark mode)/800" + } + }, + { + "name": "Component colors/Components/Breadcrumbs/breadcrumb-icon-fg", + "type": "color", + "isAlias": true, + "value": { + "collection": "_Primitives", + "name": "Colors/Gray (dark mode)/400" + } + }, + { + "name": "Component colors/Components/Breadcrumbs/breadcrumb-icon-fg_hover", + "type": "color", + "isAlias": true, + "value": { + "collection": "_Primitives", + "name": "Colors/Base/white" + } + }, + { + "name": "Component colors/Components/Breadcrumbs/breadcrumb-brand-icon-fg_hover", + "type": "color", + "isAlias": true, + "value": { + "collection": "_Primitives", + "name": "Colors/Base/white" + } + }, + { + "name": "Component colors/Components/Buttons/Primary/button-primary-fg", + "type": "color", + "isAlias": true, + "value": { + "collection": "_Primitives", + "name": "Colors/Base/white" + } + }, + { + "name": "Component colors/Components/Buttons/Primary/button-primary-fg_hover", + "type": "color", + "isAlias": true, + "value": { + "collection": "_Primitives", + "name": "Colors/Base/white" + } + }, + { + "name": "Component colors/Components/Buttons/Primary/button-primary-bg", + "type": "color", + "isAlias": true, + "value": { + "collection": "_Primitives", + "name": "Colors/Brand/600" + } + }, + { + "name": "Component colors/Components/Buttons/Primary/button-primary-bg_hover", + "type": "color", + "isAlias": true, + "value": { + "collection": "_Primitives", + "name": "Colors/Brand/700" + } + }, + { + "name": "Component colors/Components/Buttons/Primary/button-primary-border", + "type": "color", + "isAlias": true, + "value": { + "collection": "_Primitives", + "name": "Colors/Brand/600" + } + }, + { + "name": "Component colors/Components/Buttons/Primary/button-primary-border_hover", + "type": "color", + "isAlias": true, + "value": { + "collection": "_Primitives", + "name": "Colors/Brand/700" + } + }, + { + "name": "Component colors/Components/Buttons/Secondary/button-secondary-fg", + "type": "color", + "isAlias": true, + "value": { + "collection": "_Primitives", + "name": "Colors/Gray (dark mode)/300" + } + }, + { + "name": "Component colors/Components/Buttons/Secondary/button-secondary-fg_hover", + "type": "color", + "isAlias": true, + "value": { + "collection": "_Primitives", + "name": "Colors/Gray (dark mode)/100" + } + }, + { + "name": "Component colors/Components/Buttons/Secondary/button-secondary-bg", + "type": "color", + "isAlias": true, + "value": { + "collection": "_Primitives", + "name": "Colors/Gray (dark mode)/900" + } + }, + { + "name": "Component colors/Components/Buttons/Secondary/button-secondary-bg_hover", + "type": "color", + "isAlias": true, + "value": { + "collection": "_Primitives", + "name": "Colors/Gray (dark mode)/800" + } + }, + { + "name": "Component colors/Components/Buttons/Secondary/button-secondary-border", + "type": "color", + "isAlias": true, + "value": { + "collection": "_Primitives", + "name": "Colors/Gray (dark mode)/700" + } + }, + { + "name": "Component colors/Components/Buttons/Secondary/button-secondary-border_hover", + "type": "color", + "isAlias": true, + "value": { + "collection": "_Primitives", + "name": "Colors/Gray (dark mode)/700" + } + }, + { + "name": "Component colors/Components/Buttons/Secondary color/button-secondary-color-fg", + "type": "color", + "isAlias": true, + "value": { + "collection": "_Primitives", + "name": "Colors/Gray (dark mode)/300" + } + }, + { + "name": "Component colors/Components/Buttons/Secondary color/button-secondary-color-fg_hover", + "type": "color", + "isAlias": true, + "value": { + "collection": "_Primitives", + "name": "Colors/Gray (dark mode)/100" + } + }, + { + "name": "Component colors/Components/Buttons/Secondary color/button-secondary-color-bg", + "type": "color", + "isAlias": true, + "value": { + "collection": "_Primitives", + "name": "Colors/Gray (dark mode)/900" + } + }, + { + "name": "Component colors/Components/Buttons/Secondary color/button-secondary-color-bg_hover", + "type": "color", + "isAlias": true, + "value": { + "collection": "_Primitives", + "name": "Colors/Gray (dark mode)/800" + } + }, + { + "name": "Component colors/Components/Buttons/Secondary color/button-secondary-color-border", + "type": "color", + "isAlias": true, + "value": { + "collection": "_Primitives", + "name": "Colors/Gray (dark mode)/700" + } + }, + { + "name": "Component colors/Components/Buttons/Secondary color/button-secondary-color-border_hover", + "type": "color", + "isAlias": true, + "value": { + "collection": "_Primitives", + "name": "Colors/Gray (dark mode)/700" + } + }, + { + "name": "Component colors/Components/Buttons/Tertiary/button-tertiary-fg", + "type": "color", + "isAlias": true, + "value": { + "collection": "_Primitives", + "name": "Colors/Gray (dark mode)/400" + } + }, + { + "name": "Component colors/Components/Buttons/Tertiary/button-tertiary-fg_hover", + "type": "color", + "isAlias": true, + "value": { + "collection": "_Primitives", + "name": "Colors/Gray (dark mode)/200" + } + }, + { + "name": "Component colors/Components/Buttons/Tertiary/button-tertiary-bg_hover", + "type": "color", + "isAlias": true, + "value": { + "collection": "_Primitives", + "name": "Colors/Gray (dark mode)/800" + } + }, + { + "name": "Component colors/Components/Buttons/Tertiary color/button-tertiary-color-fg", + "type": "color", + "isAlias": true, + "value": { + "collection": "_Primitives", + "name": "Colors/Gray (dark mode)/300" + } + }, + { + "name": "Component colors/Components/Buttons/Tertiary color/button-tertiary-color-fg_hover", + "type": "color", + "isAlias": true, + "value": { + "collection": "_Primitives", + "name": "Colors/Gray (dark mode)/100" + } + }, + { + "name": "Component colors/Components/Buttons/Tertiary color/button-tertiary-color-bg_hover", + "type": "color", + "isAlias": true, + "value": { + "collection": "_Primitives", + "name": "Colors/Gray (dark mode)/800" + } + }, + { + "name": "Component colors/Components/Buttons/Primary error/button-primary-error-fg", + "type": "color", + "isAlias": true, + "value": { + "collection": "_Primitives", + "name": "Colors/Base/white" + } + }, + { + "name": "Component colors/Components/Buttons/Primary error/button-primary-error-fg_hover", + "type": "color", + "isAlias": true, + "value": { + "collection": "_Primitives", + "name": "Colors/Base/white" + } + }, + { + "name": "Component colors/Components/Buttons/Primary error/button-primary-error-bg", + "type": "color", + "isAlias": true, + "value": { + "collection": "_Primitives", + "name": "Colors/Error/600" + } + }, + { + "name": "Component colors/Components/Buttons/Primary error/button-primary-error-bg_hover", + "type": "color", + "isAlias": true, + "value": { + "collection": "_Primitives", + "name": "Colors/Error/700" + } + }, + { + "name": "Component colors/Components/Buttons/Primary error/button-primary-error-border", + "type": "color", + "isAlias": true, + "value": { + "collection": "_Primitives", + "name": "Colors/Error/600" + } + }, + { + "name": "Component colors/Components/Buttons/Primary error/button-primary-error-border_hover", + "type": "color", + "isAlias": true, + "value": { + "collection": "_Primitives", + "name": "Colors/Error/700" + } + }, + { + "name": "Component colors/Components/Buttons/Secondary error/button-secondary-error-fg", + "type": "color", + "isAlias": true, + "value": { + "collection": "_Primitives", + "name": "Colors/Error/200" + } + }, + { + "name": "Component colors/Components/Buttons/Secondary error/button-secondary-error-fg_hover", + "type": "color", + "isAlias": true, + "value": { + "collection": "_Primitives", + "name": "Colors/Error/100" + } + }, + { + "name": "Component colors/Components/Buttons/Secondary error/button-secondary-error-bg", + "type": "color", + "isAlias": true, + "value": { + "collection": "_Primitives", + "name": "Colors/Error/950" + } + }, + { + "name": "Component colors/Components/Buttons/Secondary error/button-secondary-error-bg_hover", + "type": "color", + "isAlias": true, + "value": { + "collection": "_Primitives", + "name": "Colors/Error/900" + } + }, + { + "name": "Component colors/Components/Buttons/Secondary error/button-secondary-error-border", + "type": "color", + "isAlias": true, + "value": { + "collection": "_Primitives", + "name": "Colors/Error/800" + } + }, + { + "name": "Component colors/Components/Buttons/Secondary error/button-secondary-error-border_hover", + "type": "color", + "isAlias": true, + "value": { + "collection": "_Primitives", + "name": "Colors/Error/700" + } + }, + { + "name": "Component colors/Components/Buttons/Tertiary error/button-tertiary-error-fg", + "type": "color", + "isAlias": true, + "value": { + "collection": "_Primitives", + "name": "Colors/Error/300" + } + }, + { + "name": "Component colors/Components/Buttons/Tertiary error/button-tertiary-error-fg_hover", + "type": "color", + "isAlias": true, + "value": { + "collection": "_Primitives", + "name": "Colors/Error/200" + } + }, + { + "name": "Component colors/Components/Buttons/Tertiary error/button-tertiary-error-bg_hover", + "type": "color", + "isAlias": true, + "value": { + "collection": "_Primitives", + "name": "Colors/Error/900" + } + }, + { + "name": "Colors/Foreground/fg-secondary (700)", + "type": "color", + "isAlias": true, + "value": { + "collection": "_Primitives", + "name": "Colors/Gray (dark mode)/300" + } + }, + { + "name": "Colors/Foreground/fg-secondary_hover", + "type": "color", + "isAlias": true, + "value": { + "collection": "_Primitives", + "name": "Colors/Gray (dark mode)/200" + } + }, + { + "name": "Colors/Foreground/fg-tertiary (600)", + "type": "color", + "isAlias": true, + "value": { + "collection": "_Primitives", + "name": "Colors/Gray (dark mode)/400" + } + }, + { + "name": "Colors/Foreground/fg-tertiary_hover", + "type": "color", + "isAlias": true, + "value": { + "collection": "_Primitives", + "name": "Colors/Gray (dark mode)/300" + } + }, + { + "name": "Colors/Foreground/fg-quarterary (500)", + "type": "color", + "isAlias": true, + "value": { + "collection": "_Primitives", + "name": "Colors/Gray (dark mode)/400" + } + }, + { + "name": "Colors/Foreground/fg-quarterary_hover", + "type": "color", + "isAlias": true, + "value": { + "collection": "_Primitives", + "name": "Colors/Gray (dark mode)/300" + } + }, + { + "name": "Colors/Foreground/fg-quinary (400)", + "type": "color", + "isAlias": true, + "value": { + "collection": "_Primitives", + "name": "Colors/Gray (dark mode)/500" + } + }, + { + "name": "Colors/Foreground/fg-quinary_hover", + "type": "color", + "isAlias": true, + "value": { + "collection": "_Primitives", + "name": "Colors/Gray (dark mode)/400" + } + }, + { + "name": "Colors/Foreground/fg-senary (300)", + "type": "color", + "isAlias": true, + "value": { + "collection": "_Primitives", + "name": "Colors/Gray (dark mode)/600" + } + }, + { + "name": "Colors/Foreground/fg-white", + "type": "color", + "isAlias": true, + "value": { + "collection": "_Primitives", + "name": "Colors/Base/white" + } + }, + { + "name": "Colors/Foreground/fg-disabled", + "type": "color", + "isAlias": true, + "value": { + "collection": "_Primitives", + "name": "Colors/Gray (dark mode)/500" + } + }, + { + "name": "Colors/Foreground/fg-disabled_subtle", + "type": "color", + "isAlias": true, + "value": { + "collection": "_Primitives", + "name": "Colors/Gray (dark mode)/600" + } + }, + { + "name": "Component colors/Components/Footers/footer-button-fg", + "type": "color", + "isAlias": true, + "value": { + "collection": "_Primitives", + "name": "Colors/Gray (dark mode)/300" + } + }, + { + "name": "Component colors/Components/Footers/footer-button-fg_hover", + "type": "color", + "isAlias": true, + "value": { + "collection": "_Primitives", + "name": "Colors/Gray (dark mode)/100" + } + }, + { + "name": "Component colors/Components/Footers/footer-badge-fg", + "type": "color", + "isAlias": true, + "value": { + "collection": "_Primitives", + "name": "Colors/Base/white" + } + }, + { + "name": "Component colors/Components/Footers/footer-badge-bg", + "type": "color", + "isAlias": false, + "value": "#FFFFFF1A" + }, + { + "name": "Component colors/Components/Footers/footer-badge-border", + "type": "color", + "isAlias": false, + "value": "#FFFFFF4D" + }, + { + "name": "Component colors/Components/Header sections/header-abstract-50-bg", + "type": "color", + "isAlias": true, + "value": { + "collection": "_Primitives", + "name": "Colors/Gray (dark mode)/900" + } + }, + { + "name": "Component colors/Components/Header sections/header-abstract-100-bg", + "type": "color", + "isAlias": true, + "value": { + "collection": "_Primitives", + "name": "Colors/Gray (dark mode)/800" + } + }, + { + "name": "Component colors/Components/Header sections/header-abstract-200-bg", + "type": "color", + "isAlias": true, + "value": { + "collection": "_Primitives", + "name": "Colors/Gray (dark mode)/700" + } + }, + { + "name": "Component colors/Components/Header sections/header-abstract-300-bg", + "type": "color", + "isAlias": true, + "value": { + "collection": "_Primitives", + "name": "Colors/Gray (dark mode)/600" + } + }, + { + "name": "Component colors/Components/Icons/Icons/icon-fg-brand", + "type": "color", + "isAlias": true, + "value": { + "collection": "_Primitives", + "name": "Colors/Gray (dark mode)/400" + } + }, + { + "name": "Component colors/Components/Icons/Icons/icon-fg-brand_on-brand", + "type": "color", + "isAlias": true, + "value": { + "collection": "_Primitives", + "name": "Colors/Gray (dark mode)/400" + } + }, + { + "name": "Component colors/Components/Icons/Featured icons/Light/featured-icon-light-fg-brand", + "type": "color", + "isAlias": true, + "value": { + "collection": "_Primitives", + "name": "Colors/Brand/200" + } + }, + { + "name": "Component colors/Components/Icons/Featured icons/Light/featured-icon-light-fg-gray", + "type": "color", + "isAlias": true, + "value": { + "collection": "_Primitives", + "name": "Colors/Gray (dark mode)/200" + } + }, + { + "name": "Component colors/Components/Icons/Featured icons/Light/featured-icon-light-fg-error", + "type": "color", + "isAlias": true, + "value": { + "collection": "_Primitives", + "name": "Colors/Error/200" + } + }, + { + "name": "Component colors/Components/Icons/Featured icons/Light/featured-icon-light-fg-warning", + "type": "color", + "isAlias": true, + "value": { + "collection": "_Primitives", + "name": "Colors/Warning/200" + } + }, + { + "name": "Component colors/Components/Icons/Featured icons/Light/featured-icon-light-fg-success", + "type": "color", + "isAlias": true, + "value": { + "collection": "_Primitives", + "name": "Colors/Success/200" + } + }, + { + "name": "Component colors/Components/Icons/Featured icons/Dark/featured-icon-dark-fg-brand", + "type": "color", + "isAlias": true, + "value": { + "collection": "_Primitives", + "name": "Colors/Brand/200" + } + }, + { + "name": "Component colors/Components/Icons/Featured icons/Dark/featured-icon-dark-fg-gray", + "type": "color", + "isAlias": true, + "value": { + "collection": "_Primitives", + "name": "Colors/Gray (dark mode)/200" + } + }, + { + "name": "Component colors/Components/Icons/Featured icons/Dark/featured-icon-dark-fg-error", + "type": "color", + "isAlias": true, + "value": { + "collection": "_Primitives", + "name": "Colors/Error/200" + } + }, + { + "name": "Component colors/Components/Icons/Featured icons/Dark/featured-icon-dark-fg-warning", + "type": "color", + "isAlias": true, + "value": { + "collection": "_Primitives", + "name": "Colors/Warning/200" + } + }, + { + "name": "Component colors/Components/Icons/Featured icons/Dark/featured-icon-dark-fg-success", + "type": "color", + "isAlias": true, + "value": { + "collection": "_Primitives", + "name": "Colors/Success/200" + } + }, + { + "name": "Component colors/Components/Icons/Featured icons/Modern/featured-icon-modern-border", + "type": "color", + "isAlias": true, + "value": { + "collection": "_Primitives", + "name": "Colors/Gray (dark mode)/700" + } + }, + { + "name": "Component colors/Components/Icons/Social icons/social-icon-fg-x", + "type": "color", + "isAlias": true, + "value": { + "collection": "_Primitives", + "name": "Colors/Base/white" + } + }, + { + "name": "Component colors/Components/Icons/Social icons/social-icon-fg-instagram", + "type": "color", + "isAlias": true, + "value": { + "collection": "_Primitives", + "name": "Colors/Base/white" + } + }, + { + "name": "Component colors/Components/Icons/Social icons/social-icon-fg-apple", + "type": "color", + "isAlias": true, + "value": { + "collection": "_Primitives", + "name": "Colors/Base/white" + } + }, + { + "name": "Component colors/Components/Icons/Social icons/social-icon-fg-github", + "type": "color", + "isAlias": true, + "value": { + "collection": "_Primitives", + "name": "Colors/Base/white" + } + }, + { + "name": "Component colors/Components/Icons/Social icons/social-icon-fg-angellist", + "type": "color", + "isAlias": true, + "value": { + "collection": "_Primitives", + "name": "Colors/Base/white" + } + }, + { + "name": "Component colors/Components/Icons/Social icons/social-icon-fg-tumblr", + "type": "color", + "isAlias": true, + "value": { + "collection": "_Primitives", + "name": "Colors/Base/white" + } + }, + { + "name": "Component colors/Components/Mockups/screen-mockup-border", + "type": "color", + "isAlias": true, + "value": { + "collection": "_Primitives", + "name": "Colors/Gray (dark mode)/700" + } + }, + { + "name": "Component colors/Components/Sliders/slider-handle-bg", + "type": "color", + "isAlias": true, + "value": { + "collection": "1. Color modes", + "name": "Colors/Foreground/fg-brand-primary (600)" + } + }, + { + "name": "Component colors/Components/Sliders/slider-handle-border", + "type": "color", + "isAlias": true, + "value": { + "collection": "1. Color modes", + "name": "Colors/Background/bg-primary" + } + }, + { + "name": "Component colors/Components/Thumbnail/thumbnail-badge-brand-fg", + "type": "color", + "isAlias": true, + "value": { + "collection": "_Primitives", + "name": "Colors/Gray (dark mode)/300" + } + }, + { + "name": "Component colors/Components/Thumbnail/thumbnail-badge-success-fg", + "type": "color", + "isAlias": true, + "value": { + "collection": "_Primitives", + "name": "Colors/Gray (dark mode)/300" + } + }, + { + "name": "Component colors/Components/Toggles/toggle-button-fg_disabled", + "type": "color", + "isAlias": true, + "value": { + "collection": "_Primitives", + "name": "Colors/Gray (dark mode)/600" + } + }, + { + "name": "Component colors/Components/Tooltips/tooltip-supporting-text", + "type": "color", + "isAlias": true, + "value": { + "collection": "_Primitives", + "name": "Colors/Gray (dark mode)/300" + } + }, + { + "name": "Component colors/Components/WYSIWYG editor/wysiwyg-editor-icon-fg", + "type": "color", + "isAlias": true, + "value": { + "collection": "_Primitives", + "name": "Colors/Gray (dark mode)/400" + } + }, + { + "name": "Component colors/Components/WYSIWYG editor/wysiwyg-editor-icon-fg_active", + "type": "color", + "isAlias": true, + "value": { + "collection": "_Primitives", + "name": "Colors/Base/white" + } + }, + { + "name": "Colors/Foreground/fg-brand-primary (600)", + "type": "color", + "isAlias": true, + "value": { + "collection": "_Primitives", + "name": "Colors/Brand/500" + } + }, + { + "name": "Colors/Foreground/fg-brand-primary_alt", + "type": "color", + "isAlias": true, + "value": { + "collection": "_Primitives", + "name": "Colors/Gray (dark mode)/300" + } + }, + { + "name": "Colors/Foreground/fg-brand-secondary (500)", + "type": "color", + "isAlias": true, + "value": { + "collection": "_Primitives", + "name": "Colors/Brand/500" + } + }, + { + "name": "Colors/Foreground/fg-error-primary", + "type": "color", + "isAlias": true, + "value": { + "collection": "_Primitives", + "name": "Colors/Error/500" + } + }, + { + "name": "Colors/Foreground/fg-error-secondary", + "type": "color", + "isAlias": true, + "value": { + "collection": "_Primitives", + "name": "Colors/Error/400" + } + }, + { + "name": "Colors/Foreground/fg-warning-primary", + "type": "color", + "isAlias": true, + "value": { + "collection": "_Primitives", + "name": "Colors/Warning/500" + } + }, + { + "name": "Colors/Foreground/fg-warning-secondary", + "type": "color", + "isAlias": true, + "value": { + "collection": "_Primitives", + "name": "Colors/Warning/400" + } + }, + { + "name": "Colors/Foreground/fg-success-primary", + "type": "color", + "isAlias": true, + "value": { + "collection": "_Primitives", + "name": "Colors/Success/500" + } + }, + { + "name": "Colors/Foreground/fg-success-secondary", + "type": "color", + "isAlias": true, + "value": { + "collection": "_Primitives", + "name": "Colors/Success/400" + } + }, + { + "name": "Colors/Background/bg-primary", + "type": "color", + "isAlias": true, + "value": { + "collection": "_Primitives", + "name": "Colors/Gray (dark mode)/950" + } + }, + { + "name": "Colors/Background/bg-primary_alt", + "type": "color", + "isAlias": true, + "value": { + "collection": "1. Color modes", + "name": "Colors/Background/bg-secondary" + } + }, + { + "name": "Colors/Background/bg-primary_hover", + "type": "color", + "isAlias": true, + "value": { + "collection": "_Primitives", + "name": "Colors/Gray (dark mode)/800" + } + }, + { + "name": "Colors/Background/bg-primary-solid", + "type": "color", + "isAlias": true, + "value": { + "collection": "1. Color modes", + "name": "Colors/Background/bg-secondary" + } + }, + { + "name": "Colors/Background/bg-secondary", + "type": "color", + "isAlias": true, + "value": { + "collection": "_Primitives", + "name": "Colors/Gray (dark mode)/900" + } + }, + { + "name": "Colors/Background/bg-secondary_alt", + "type": "color", + "isAlias": true, + "value": { + "collection": "1. Color modes", + "name": "Colors/Background/bg-primary" + } + }, + { + "name": "Colors/Background/bg-secondary_hover", + "type": "color", + "isAlias": true, + "value": { + "collection": "_Primitives", + "name": "Colors/Gray (dark mode)/800" + } + }, + { + "name": "Colors/Background/bg-secondary_subtle", + "type": "color", + "isAlias": true, + "value": { + "collection": "_Primitives", + "name": "Colors/Gray (dark mode)/900" + } + }, + { + "name": "Colors/Background/bg-secondary-solid", + "type": "color", + "isAlias": true, + "value": { + "collection": "_Primitives", + "name": "Colors/Gray (dark mode)/600" + } + }, + { + "name": "Colors/Background/bg-tertiary", + "type": "color", + "isAlias": true, + "value": { + "collection": "_Primitives", + "name": "Colors/Gray (dark mode)/800" + } + }, + { + "name": "Colors/Background/bg-quaternary", + "type": "color", + "isAlias": true, + "value": { + "collection": "_Primitives", + "name": "Colors/Gray (dark mode)/700" + } + }, + { + "name": "Colors/Background/bg-active", + "type": "color", + "isAlias": true, + "value": { + "collection": "_Primitives", + "name": "Colors/Gray (dark mode)/800" + } + }, + { + "name": "Colors/Background/bg-disabled", + "type": "color", + "isAlias": true, + "value": { + "collection": "_Primitives", + "name": "Colors/Gray (dark mode)/800" + } + }, + { + "name": "Colors/Background/bg-disabled_subtle", + "type": "color", + "isAlias": true, + "value": { + "collection": "_Primitives", + "name": "Colors/Gray (dark mode)/900" + } + }, + { + "name": "Colors/Background/bg-overlay", + "type": "color", + "isAlias": true, + "value": { + "collection": "_Primitives", + "name": "Colors/Gray (dark mode)/800" + } + }, + { + "name": "Colors/Background/bg-brand-primary", + "type": "color", + "isAlias": true, + "value": { + "collection": "_Primitives", + "name": "Colors/Brand/500" + } + }, + { + "name": "Colors/Background/bg-brand-primary_alt", + "type": "color", + "isAlias": true, + "value": { + "collection": "1. Color modes", + "name": "Colors/Background/bg-secondary" + } + }, + { + "name": "Colors/Background/bg-brand-secondary", + "type": "color", + "isAlias": true, + "value": { + "collection": "_Primitives", + "name": "Colors/Brand/600" + } + }, + { + "name": "Colors/Background/bg-brand-solid", + "type": "color", + "isAlias": true, + "value": { + "collection": "_Primitives", + "name": "Colors/Brand/600" + } + }, + { + "name": "Colors/Background/bg-brand-solid_hover", + "type": "color", + "isAlias": true, + "value": { + "collection": "_Primitives", + "name": "Colors/Brand/500" + } + }, + { + "name": "Colors/Background/bg-brand-section", + "type": "color", + "isAlias": true, + "value": { + "collection": "1. Color modes", + "name": "Colors/Background/bg-secondary" + } + }, + { + "name": "Colors/Background/bg-brand-section_subtle", + "type": "color", + "isAlias": true, + "value": { + "collection": "1. Color modes", + "name": "Colors/Background/bg-primary" + } + }, + { + "name": "Colors/Background/bg-error-primary", + "type": "color", + "isAlias": true, + "value": { + "collection": "_Primitives", + "name": "Colors/Error/500" + } + }, + { + "name": "Colors/Background/bg-error-secondary", + "type": "color", + "isAlias": true, + "value": { + "collection": "_Primitives", + "name": "Colors/Error/600" + } + }, + { + "name": "Colors/Background/bg-error-solid", + "type": "color", + "isAlias": true, + "value": { + "collection": "_Primitives", + "name": "Colors/Error/600" + } + }, + { + "name": "Colors/Background/bg-warning-primary", + "type": "color", + "isAlias": true, + "value": { + "collection": "_Primitives", + "name": "Colors/Warning/500" + } + }, + { + "name": "Colors/Background/bg-warning-secondary", + "type": "color", + "isAlias": true, + "value": { + "collection": "_Primitives", + "name": "Colors/Warning/600" + } + }, + { + "name": "Colors/Background/bg-warning-solid", + "type": "color", + "isAlias": true, + "value": { + "collection": "_Primitives", + "name": "Colors/Warning/600" + } + }, + { + "name": "Colors/Background/bg-success-primary", + "type": "color", + "isAlias": true, + "value": { + "collection": "_Primitives", + "name": "Colors/Success/500" + } + }, + { + "name": "Colors/Background/bg-success-secondary", + "type": "color", + "isAlias": true, + "value": { + "collection": "_Primitives", + "name": "Colors/Success/600" + } + }, + { + "name": "Colors/Background/bg-success-solid", + "type": "color", + "isAlias": true, + "value": { + "collection": "_Primitives", + "name": "Colors/Success/600" + } + }, + { + "name": "Component colors/Components/Logo/logo-text", + "type": "color", + "isAlias": false, + "value": "#FFFFFF" + }, + { + "name": "Component colors/Components/Logo/logo-violet", + "type": "color", + "isAlias": false, + "value": "#FFFFFF" + }, + { + "name": "Component colors/Components/Logo/logo-dodge", + "type": "color", + "isAlias": false, + "value": "#A1E4FF" + }, + { + "name": "Component colors/Components/Logo/logo-blue", + "type": "color", + "isAlias": false, + "value": "#09BDFF" + }, + { + "name": "Component colors/Components/Logo/mark-1", + "type": "color", + "isAlias": false, + "value": "#FFFFFF" + }, + { + "name": "Component colors/Components/Logo/mark-2", + "type": "color", + "isAlias": false, + "value": "#A1E4FF" + }, + { + "name": "Component colors/Components/Logo/mark-3", + "type": "color", + "isAlias": false, + "value": "#09BDFF" + } + ] + } + ] + }, + { + "name": "5. Containers", + "modes": [ + { + "name": "Value", + "variables": [ + { + "name": "container-padding-mobile", + "type": "number", + "isAlias": true, + "value": { + "collection": "_Primitives", + "name": "Spacing/4 (16px)" + } + }, + { + "name": "container-padding-desktop", + "type": "number", + "isAlias": true, + "value": { + "collection": "_Primitives", + "name": "Spacing/8 (32px)" + } + }, + { + "name": "container-max-width-desktop", + "type": "number", + "isAlias": true, + "value": { + "collection": "_Primitives", + "name": "Spacing/320 (1,280px)" + } + } + ] + } + ] + }, + { + "name": "4. Widths", + "modes": [ + { + "name": "Mode 1", + "variables": [ + { + "name": "width-xxs", + "type": "number", + "isAlias": true, + "value": { + "collection": "_Primitives", + "name": "Spacing/80 (320px)" + } + }, + { + "name": "width-xs", + "type": "number", + "isAlias": true, + "value": { + "collection": "_Primitives", + "name": "Spacing/96 (384px)" + } + }, + { + "name": "width-sm", + "type": "number", + "isAlias": true, + "value": { + "collection": "_Primitives", + "name": "Spacing/120 (480px)" + } + }, + { + "name": "width-md", + "type": "number", + "isAlias": true, + "value": { + "collection": "_Primitives", + "name": "Spacing/140 (560px)" + } + }, + { + "name": "width-lg", + "type": "number", + "isAlias": true, + "value": { + "collection": "_Primitives", + "name": "Spacing/160 (640px)" + } + }, + { + "name": "width-xl", + "type": "number", + "isAlias": true, + "value": { + "collection": "_Primitives", + "name": "Spacing/192 (768px)" + } + }, + { + "name": "width-2xl", + "type": "number", + "isAlias": true, + "value": { + "collection": "_Primitives", + "name": "Spacing/256 (1,024px)" + } + }, + { + "name": "width-3xl", + "type": "number", + "isAlias": true, + "value": { + "collection": "_Primitives", + "name": "Spacing/320 (1,280px)" + } + }, + { + "name": "width-4xl", + "type": "number", + "isAlias": true, + "value": { + "collection": "_Primitives", + "name": "Spacing/360 (1,440px)" + } + }, + { + "name": "width-5xl", + "type": "number", + "isAlias": true, + "value": { + "collection": "_Primitives", + "name": "Spacing/400 (1,600px)" + } + }, + { + "name": "width-6xl", + "type": "number", + "isAlias": true, + "value": { + "collection": "_Primitives", + "name": "Spacing/480 (1,920px)" + } + }, + { + "name": "paragraph-max-width", + "type": "number", + "isAlias": true, + "value": { + "collection": "_Primitives", + "name": "Spacing/180 (720px)" + } + }, + { + "name": "width-ios", + "type": "number", + "isAlias": false, + "value": 375 + }, + { + "name": "width-android", + "type": "number", + "isAlias": false, + "value": 360 + } + ] + } + ] + }, + { + "name": "3. Spacing", + "modes": [ + { + "name": "Mode 1", + "variables": [ + { + "name": "spacing-none", + "type": "number", + "isAlias": true, + "value": { + "collection": "_Primitives", + "name": "Spacing/0 (0px)" + } + }, + { + "name": "spacing-xxs", + "type": "number", + "isAlias": true, + "value": { + "collection": "_Primitives", + "name": "Spacing/0․5 (2px)" + } + }, + { + "name": "spacing-xs", + "type": "number", + "isAlias": true, + "value": { + "collection": "_Primitives", + "name": "Spacing/1 (4px)" + } + }, + { + "name": "spacing-sm", + "type": "number", + "isAlias": true, + "value": { + "collection": "_Primitives", + "name": "Spacing/1․5 (6px)" + } + }, + { + "name": "spacing-md", + "type": "number", + "isAlias": true, + "value": { + "collection": "_Primitives", + "name": "Spacing/2 (8px)" + } + }, + { + "name": "spacing-lg", + "type": "number", + "isAlias": true, + "value": { + "collection": "_Primitives", + "name": "Spacing/3 (12px)" + } + }, + { + "name": "spacing-xl", + "type": "number", + "isAlias": true, + "value": { + "collection": "_Primitives", + "name": "Spacing/4 (16px)" + } + }, + { + "name": "spacing-2xl", + "type": "number", + "isAlias": true, + "value": { + "collection": "_Primitives", + "name": "Spacing/5 (20px)" + } + }, + { + "name": "spacing-3xl", + "type": "number", + "isAlias": true, + "value": { + "collection": "_Primitives", + "name": "Spacing/6 (24px)" + } + }, + { + "name": "spacing-4xl", + "type": "number", + "isAlias": true, + "value": { + "collection": "_Primitives", + "name": "Spacing/8 (32px)" + } + }, + { + "name": "spacing-5xl", + "type": "number", + "isAlias": true, + "value": { + "collection": "_Primitives", + "name": "Spacing/10 (40px)" + } + }, + { + "name": "spacing-6xl", + "type": "number", + "isAlias": true, + "value": { + "collection": "_Primitives", + "name": "Spacing/12 (48px)" + } + }, + { + "name": "spacing-7xl", + "type": "number", + "isAlias": true, + "value": { + "collection": "_Primitives", + "name": "Spacing/16 (64px)" + } + }, + { + "name": "spacing-8xl", + "type": "number", + "isAlias": true, + "value": { + "collection": "_Primitives", + "name": "Spacing/20 (80px)" + } + }, + { + "name": "spacing-9xl", + "type": "number", + "isAlias": true, + "value": { + "collection": "_Primitives", + "name": "Spacing/24 (96px)" + } + }, + { + "name": "spacing-10xl", + "type": "number", + "isAlias": true, + "value": { + "collection": "_Primitives", + "name": "Spacing/32 (128px)" + } + }, + { + "name": "spacing-11xl", + "type": "number", + "isAlias": true, + "value": { + "collection": "_Primitives", + "name": "Spacing/40 (160px)" + } + } + ] + } + ] + }, + { + "name": "2. Radius", + "modes": [ + { + "name": "Mode 1", + "variables": [ + { + "name": "radius-none", + "type": "number", + "isAlias": false, + "value": 0 + }, + { + "name": "radius-xxs", + "type": "number", + "isAlias": false, + "value": 2 + }, + { + "name": "radius-xs", + "type": "number", + "isAlias": false, + "value": 4 + }, + { + "name": "radius-sm", + "type": "number", + "isAlias": false, + "value": 6 + }, + { + "name": "radius-md", + "type": "number", + "isAlias": false, + "value": 8 + }, + { + "name": "radius-lg", + "type": "number", + "isAlias": false, + "value": 10 + }, + { + "name": "radius-xl", + "type": "number", + "isAlias": false, + "value": 12 + }, + { + "name": "radius-2xl", + "type": "number", + "isAlias": false, + "value": 16 + }, + { + "name": "radius-3xl", + "type": "number", + "isAlias": false, + "value": 20 + }, + { + "name": "radius-4xl", + "type": "number", + "isAlias": false, + "value": 24 + }, + { + "name": "radius-full", + "type": "number", + "isAlias": false, + "value": 9999 + } + ] + } + ] + }, + { + "name": "Typography", + "modes": [ + { + "name": "Style", + "variables": [ + { + "name": "Display 2xl/Regular", + "type": "typography", + "isAlias": false, + "value": { + "fontSize": 72, + "fontFamily": "Inter", + "fontWeight": "Regular", + "lineHeight": 90, + "lineHeightUnit": "PIXELS", + "letterSpacing": -2, + "letterSpacingUnit": "PERCENT", + "textCase": "ORIGINAL", + "textDecoration": "NONE" + } + }, + { + "name": "Display 2xl/Medium", + "type": "typography", + "isAlias": false, + "value": { + "fontSize": 72, + "fontFamily": "Inter", + "fontWeight": "Medium", + "lineHeight": 90, + "lineHeightUnit": "PIXELS", + "letterSpacing": -2, + "letterSpacingUnit": "PERCENT", + "textCase": "ORIGINAL", + "textDecoration": "NONE" + } + }, + { + "name": "Display 2xl/Semibold", + "type": "typography", + "isAlias": false, + "value": { + "fontSize": 72, + "fontFamily": "Inter", + "fontWeight": "Semi Bold", + "lineHeight": 90, + "lineHeightUnit": "PIXELS", + "letterSpacing": -2, + "letterSpacingUnit": "PERCENT", + "textCase": "ORIGINAL", + "textDecoration": "NONE" + } + }, + { + "name": "Display 2xl/Bold", + "type": "typography", + "isAlias": false, + "value": { + "fontSize": 72, + "fontFamily": "Inter", + "fontWeight": "Bold", + "lineHeight": 90, + "lineHeightUnit": "PIXELS", + "letterSpacing": -2, + "letterSpacingUnit": "PERCENT", + "textCase": "ORIGINAL", + "textDecoration": "NONE" + } + }, + { + "name": "Display xl/Regular", + "type": "typography", + "isAlias": false, + "value": { + "fontSize": 60, + "fontFamily": "Inter", + "fontWeight": "Regular", + "lineHeight": 72, + "lineHeightUnit": "PIXELS", + "letterSpacing": -2, + "letterSpacingUnit": "PERCENT", + "textCase": "ORIGINAL", + "textDecoration": "NONE" + } + }, + { + "name": "Display xl/Medium", + "type": "typography", + "isAlias": false, + "value": { + "fontSize": 60, + "fontFamily": "Inter", + "fontWeight": "Medium", + "lineHeight": 72, + "lineHeightUnit": "PIXELS", + "letterSpacing": -2, + "letterSpacingUnit": "PERCENT", + "textCase": "ORIGINAL", + "textDecoration": "NONE" + } + }, + { + "name": "Display xl/Semibold", + "type": "typography", + "isAlias": false, + "value": { + "fontSize": 60, + "fontFamily": "Inter", + "fontWeight": "Semi Bold", + "lineHeight": 72, + "lineHeightUnit": "PIXELS", + "letterSpacing": -2, + "letterSpacingUnit": "PERCENT", + "textCase": "ORIGINAL", + "textDecoration": "NONE" + } + }, + { + "name": "Display xl/Bold", + "type": "typography", + "isAlias": false, + "value": { + "fontSize": 60, + "fontFamily": "Inter", + "fontWeight": "Bold", + "lineHeight": 72, + "lineHeightUnit": "PIXELS", + "letterSpacing": -2, + "letterSpacingUnit": "PERCENT", + "textCase": "ORIGINAL", + "textDecoration": "NONE" + } + }, + { + "name": "Display lg/Regular", + "type": "typography", + "isAlias": false, + "value": { + "fontSize": 48, + "fontFamily": "Inter", + "fontWeight": "Regular", + "lineHeight": 60, + "lineHeightUnit": "PIXELS", + "letterSpacing": -2, + "letterSpacingUnit": "PERCENT", + "textCase": "ORIGINAL", + "textDecoration": "NONE" + } + }, + { + "name": "Display lg/Medium", + "type": "typography", + "isAlias": false, + "value": { + "fontSize": 48, + "fontFamily": "Inter", + "fontWeight": "Medium", + "lineHeight": 60, + "lineHeightUnit": "PIXELS", + "letterSpacing": -2, + "letterSpacingUnit": "PERCENT", + "textCase": "ORIGINAL", + "textDecoration": "NONE" + } + }, + { + "name": "Display lg/Semibold", + "type": "typography", + "isAlias": false, + "value": { + "fontSize": 48, + "fontFamily": "Inter", + "fontWeight": "Semi Bold", + "lineHeight": 60, + "lineHeightUnit": "PIXELS", + "letterSpacing": -2, + "letterSpacingUnit": "PERCENT", + "textCase": "ORIGINAL", + "textDecoration": "NONE" + } + }, + { + "name": "Display lg/Bold", + "type": "typography", + "isAlias": false, + "value": { + "fontSize": 48, + "fontFamily": "Inter", + "fontWeight": "Bold", + "lineHeight": 60, + "lineHeightUnit": "PIXELS", + "letterSpacing": -2, + "letterSpacingUnit": "PERCENT", + "textCase": "ORIGINAL", + "textDecoration": "NONE" + } + }, + { + "name": "Display md/Regular", + "type": "typography", + "isAlias": false, + "value": { + "fontSize": 36, + "fontFamily": "Inter", + "fontWeight": "Regular", + "lineHeight": 44, + "lineHeightUnit": "PIXELS", + "letterSpacing": -2, + "letterSpacingUnit": "PERCENT", + "textCase": "ORIGINAL", + "textDecoration": "NONE" + } + }, + { + "name": "Display md/Medium", + "type": "typography", + "isAlias": false, + "value": { + "fontSize": 36, + "fontFamily": "Inter", + "fontWeight": "Medium", + "lineHeight": 44, + "lineHeightUnit": "PIXELS", + "letterSpacing": -2, + "letterSpacingUnit": "PERCENT", + "textCase": "ORIGINAL", + "textDecoration": "NONE" + } + }, + { + "name": "Display md/Semibold", + "type": "typography", + "isAlias": false, + "value": { + "fontSize": 36, + "fontFamily": "Inter", + "fontWeight": "Semi Bold", + "lineHeight": 44, + "lineHeightUnit": "PIXELS", + "letterSpacing": -2, + "letterSpacingUnit": "PERCENT", + "textCase": "ORIGINAL", + "textDecoration": "NONE" + } + }, + { + "name": "Display md/Bold", + "type": "typography", + "isAlias": false, + "value": { + "fontSize": 36, + "fontFamily": "Inter", + "fontWeight": "Bold", + "lineHeight": 44, + "lineHeightUnit": "PIXELS", + "letterSpacing": -2, + "letterSpacingUnit": "PERCENT", + "textCase": "ORIGINAL", + "textDecoration": "NONE" + } + }, + { + "name": "Display sm/Regular", + "type": "typography", + "isAlias": false, + "value": { + "fontSize": 30, + "fontFamily": "Inter", + "fontWeight": "Regular", + "lineHeight": 38, + "lineHeightUnit": "PIXELS", + "letterSpacing": 0, + "letterSpacingUnit": "PERCENT", + "textCase": "ORIGINAL", + "textDecoration": "NONE" + } + }, + { + "name": "Display sm/Medium", + "type": "typography", + "isAlias": false, + "value": { + "fontSize": 30, + "fontFamily": "Inter", + "fontWeight": "Medium", + "lineHeight": 38, + "lineHeightUnit": "PIXELS", + "letterSpacing": 0, + "letterSpacingUnit": "PERCENT", + "textCase": "ORIGINAL", + "textDecoration": "NONE" + } + }, + { + "name": "Display sm/Semibold", + "type": "typography", + "isAlias": false, + "value": { + "fontSize": 30, + "fontFamily": "Inter", + "fontWeight": "Semi Bold", + "lineHeight": 38, + "lineHeightUnit": "PIXELS", + "letterSpacing": 0, + "letterSpacingUnit": "PERCENT", + "textCase": "ORIGINAL", + "textDecoration": "NONE" + } + }, + { + "name": "Display sm/Bold", + "type": "typography", + "isAlias": false, + "value": { + "fontSize": 30, + "fontFamily": "Inter", + "fontWeight": "Bold", + "lineHeight": 38, + "lineHeightUnit": "PIXELS", + "letterSpacing": 0, + "letterSpacingUnit": "PERCENT", + "textCase": "ORIGINAL", + "textDecoration": "NONE" + } + }, + { + "name": "Display sm / Medium italic", + "type": "typography", + "isAlias": false, + "value": { + "fontSize": 30, + "fontFamily": "Inter", + "fontWeight": "Medium Italic", + "lineHeight": 44, + "lineHeightUnit": "PIXELS", + "letterSpacing": 0, + "letterSpacingUnit": "PERCENT", + "textCase": "ORIGINAL", + "textDecoration": "NONE" + } + }, + { + "name": "Display xs/Regular", + "type": "typography", + "isAlias": false, + "value": { + "fontSize": 24, + "fontFamily": "Inter", + "fontWeight": "Regular", + "lineHeight": 32, + "lineHeightUnit": "PIXELS", + "letterSpacing": 0, + "letterSpacingUnit": "PERCENT", + "textCase": "ORIGINAL", + "textDecoration": "NONE" + } + }, + { + "name": "Display xs/Medium", + "type": "typography", + "isAlias": false, + "value": { + "fontSize": 24, + "fontFamily": "Inter", + "fontWeight": "Medium", + "lineHeight": 32, + "lineHeightUnit": "PIXELS", + "letterSpacing": 0, + "letterSpacingUnit": "PERCENT", + "textCase": "ORIGINAL", + "textDecoration": "NONE" + } + }, + { + "name": "Display xs/Semibold", + "type": "typography", + "isAlias": false, + "value": { + "fontSize": 24, + "fontFamily": "Inter", + "fontWeight": "Semi Bold", + "lineHeight": 32, + "lineHeightUnit": "PIXELS", + "letterSpacing": 0, + "letterSpacingUnit": "PERCENT", + "textCase": "ORIGINAL", + "textDecoration": "NONE" + } + }, + { + "name": "Display xs/Bold", + "type": "typography", + "isAlias": false, + "value": { + "fontSize": 24, + "fontFamily": "Inter", + "fontWeight": "Bold", + "lineHeight": 32, + "lineHeightUnit": "PIXELS", + "letterSpacing": 0, + "letterSpacingUnit": "PERCENT", + "textCase": "ORIGINAL", + "textDecoration": "NONE" + } + }, + { + "name": "Display xs/Medium italic", + "type": "typography", + "isAlias": false, + "value": { + "fontSize": 24, + "fontFamily": "Inter", + "fontWeight": "Medium Italic", + "lineHeight": 36, + "lineHeightUnit": "PIXELS", + "letterSpacing": 0, + "letterSpacingUnit": "PERCENT", + "textCase": "ORIGINAL", + "textDecoration": "NONE" + } + }, + { + "name": "Text xl/Regular", + "type": "typography", + "isAlias": false, + "value": { + "fontSize": 20, + "fontFamily": "Inter", + "fontWeight": "Regular", + "lineHeight": 30, + "lineHeightUnit": "PIXELS", + "letterSpacing": 0, + "letterSpacingUnit": "PERCENT", + "textCase": "ORIGINAL", + "textDecoration": "NONE" + } + }, + { + "name": "Text xl/Medium", + "type": "typography", + "isAlias": false, + "value": { + "fontSize": 20, + "fontFamily": "Inter", + "fontWeight": "Medium", + "lineHeight": 30, + "lineHeightUnit": "PIXELS", + "letterSpacing": 0, + "letterSpacingUnit": "PERCENT", + "textCase": "ORIGINAL", + "textDecoration": "NONE" + } + }, + { + "name": "Text xl/Semibold", + "type": "typography", + "isAlias": false, + "value": { + "fontSize": 20, + "fontFamily": "Inter", + "fontWeight": "Semi Bold", + "lineHeight": 30, + "lineHeightUnit": "PIXELS", + "letterSpacing": 0, + "letterSpacingUnit": "PERCENT", + "textCase": "ORIGINAL", + "textDecoration": "NONE" + } + }, + { + "name": "Text xl/Bold", + "type": "typography", + "isAlias": false, + "value": { + "fontSize": 20, + "fontFamily": "Inter", + "fontWeight": "Bold", + "lineHeight": 30, + "lineHeightUnit": "PIXELS", + "letterSpacing": 0, + "letterSpacingUnit": "PERCENT", + "textCase": "ORIGINAL", + "textDecoration": "NONE" + } + }, + { + "name": "Text xl/Regular italic", + "type": "typography", + "isAlias": false, + "value": { + "fontSize": 20, + "fontFamily": "Inter", + "fontWeight": "Italic", + "lineHeight": 30, + "lineHeightUnit": "PIXELS", + "letterSpacing": 0, + "letterSpacingUnit": "PERCENT", + "textCase": "ORIGINAL", + "textDecoration": "NONE" + } + }, + { + "name": "Text xl/Medium italic", + "type": "typography", + "isAlias": false, + "value": { + "fontSize": 20, + "fontFamily": "Inter", + "fontWeight": "Medium Italic", + "lineHeight": 30, + "lineHeightUnit": "PIXELS", + "letterSpacing": 0, + "letterSpacingUnit": "PERCENT", + "textCase": "ORIGINAL", + "textDecoration": "NONE" + } + }, + { + "name": "Text xl/Semibold italic", + "type": "typography", + "isAlias": false, + "value": { + "fontSize": 20, + "fontFamily": "Inter", + "fontWeight": "Semi Bold Italic", + "lineHeight": 30, + "lineHeightUnit": "PIXELS", + "letterSpacing": 0, + "letterSpacingUnit": "PERCENT", + "textCase": "ORIGINAL", + "textDecoration": "NONE" + } + }, + { + "name": "Text xl/Bold italic", + "type": "typography", + "isAlias": false, + "value": { + "fontSize": 20, + "fontFamily": "Inter", + "fontWeight": "Bold Italic", + "lineHeight": 30, + "lineHeightUnit": "PIXELS", + "letterSpacing": 0, + "letterSpacingUnit": "PERCENT", + "textCase": "ORIGINAL", + "textDecoration": "NONE" + } + }, + { + "name": "Text xl/Regular underlined", + "type": "typography", + "isAlias": false, + "value": { + "fontSize": 20, + "fontFamily": "Inter", + "fontWeight": "Regular", + "lineHeight": 30, + "lineHeightUnit": "PIXELS", + "letterSpacing": 0, + "letterSpacingUnit": "PERCENT", + "textCase": "ORIGINAL", + "textDecoration": "UNDERLINE" + } + }, + { + "name": "Text lg/Regular", + "type": "typography", + "isAlias": false, + "value": { + "fontSize": 18, + "fontFamily": "Inter", + "fontWeight": "Regular", + "lineHeight": 28, + "lineHeightUnit": "PIXELS", + "letterSpacing": 0, + "letterSpacingUnit": "PERCENT", + "textCase": "ORIGINAL", + "textDecoration": "NONE" + } + }, + { + "name": "Text lg/Medium", + "type": "typography", + "isAlias": false, + "value": { + "fontSize": 18, + "fontFamily": "Inter", + "fontWeight": "Medium", + "lineHeight": 28, + "lineHeightUnit": "PIXELS", + "letterSpacing": 0, + "letterSpacingUnit": "PERCENT", + "textCase": "ORIGINAL", + "textDecoration": "NONE" + } + }, + { + "name": "Text lg/Semibold", + "type": "typography", + "isAlias": false, + "value": { + "fontSize": 18, + "fontFamily": "Inter", + "fontWeight": "Semi Bold", + "lineHeight": 28, + "lineHeightUnit": "PIXELS", + "letterSpacing": 0, + "letterSpacingUnit": "PERCENT", + "textCase": "ORIGINAL", + "textDecoration": "NONE" + } + }, + { + "name": "Text lg/Bold", + "type": "typography", + "isAlias": false, + "value": { + "fontSize": 18, + "fontFamily": "Inter", + "fontWeight": "Bold", + "lineHeight": 28, + "lineHeightUnit": "PIXELS", + "letterSpacing": 0, + "letterSpacingUnit": "PERCENT", + "textCase": "ORIGINAL", + "textDecoration": "NONE" + } + }, + { + "name": "Text lg/Regular italic", + "type": "typography", + "isAlias": false, + "value": { + "fontSize": 18, + "fontFamily": "Inter", + "fontWeight": "Italic", + "lineHeight": 28, + "lineHeightUnit": "PIXELS", + "letterSpacing": 0, + "letterSpacingUnit": "PERCENT", + "textCase": "ORIGINAL", + "textDecoration": "NONE" + } + }, + { + "name": "Text lg/Medium italic", + "type": "typography", + "isAlias": false, + "value": { + "fontSize": 18, + "fontFamily": "Inter", + "fontWeight": "Medium Italic", + "lineHeight": 28, + "lineHeightUnit": "PIXELS", + "letterSpacing": 0, + "letterSpacingUnit": "PERCENT", + "textCase": "ORIGINAL", + "textDecoration": "NONE" + } + }, + { + "name": "Text lg/Semibold italic", + "type": "typography", + "isAlias": false, + "value": { + "fontSize": 18, + "fontFamily": "Inter", + "fontWeight": "Semi Bold Italic", + "lineHeight": 28, + "lineHeightUnit": "PIXELS", + "letterSpacing": 0, + "letterSpacingUnit": "PERCENT", + "textCase": "ORIGINAL", + "textDecoration": "NONE" + } + }, + { + "name": "Text lg/Bold italic", + "type": "typography", + "isAlias": false, + "value": { + "fontSize": 18, + "fontFamily": "Inter", + "fontWeight": "Bold Italic", + "lineHeight": 28, + "lineHeightUnit": "PIXELS", + "letterSpacing": 0, + "letterSpacingUnit": "PERCENT", + "textCase": "ORIGINAL", + "textDecoration": "NONE" + } + }, + { + "name": "Text lg/Regular underlined", + "type": "typography", + "isAlias": false, + "value": { + "fontSize": 18, + "fontFamily": "Inter", + "fontWeight": "Regular", + "lineHeight": 28, + "lineHeightUnit": "PIXELS", + "letterSpacing": 0, + "letterSpacingUnit": "PERCENT", + "textCase": "ORIGINAL", + "textDecoration": "UNDERLINE" + } + }, + { + "name": "Text lg / Medium underlined", + "type": "typography", + "isAlias": false, + "value": { + "fontSize": 18, + "fontFamily": "Inter", + "fontWeight": "Medium", + "lineHeight": 28, + "lineHeightUnit": "PIXELS", + "letterSpacing": 0, + "letterSpacingUnit": "PERCENT", + "textCase": "ORIGINAL", + "textDecoration": "UNDERLINE" + } + }, + { + "name": "Text lg/Semibold underlined", + "type": "typography", + "isAlias": false, + "value": { + "fontSize": 18, + "fontFamily": "Inter", + "fontWeight": "Semi Bold", + "lineHeight": 28, + "lineHeightUnit": "PIXELS", + "letterSpacing": 0, + "letterSpacingUnit": "PERCENT", + "textCase": "ORIGINAL", + "textDecoration": "UNDERLINE" + } + }, + { + "name": "Text md/Regular", + "type": "typography", + "isAlias": false, + "value": { + "fontSize": 16, + "fontFamily": "Inter", + "fontWeight": "Regular", + "lineHeight": 24, + "lineHeightUnit": "PIXELS", + "letterSpacing": 0, + "letterSpacingUnit": "PERCENT", + "textCase": "ORIGINAL", + "textDecoration": "NONE" + } + }, + { + "name": "Text md/Medium", + "type": "typography", + "isAlias": false, + "value": { + "fontSize": 16, + "fontFamily": "Inter", + "fontWeight": "Medium", + "lineHeight": 24, + "lineHeightUnit": "PIXELS", + "letterSpacing": 0, + "letterSpacingUnit": "PERCENT", + "textCase": "ORIGINAL", + "textDecoration": "NONE" + } + }, + { + "name": "Text md/Semibold", + "type": "typography", + "isAlias": false, + "value": { + "fontSize": 16, + "fontFamily": "Inter", + "fontWeight": "Semi Bold", + "lineHeight": 24, + "lineHeightUnit": "PIXELS", + "letterSpacing": 0, + "letterSpacingUnit": "PERCENT", + "textCase": "ORIGINAL", + "textDecoration": "NONE" + } + }, + { + "name": "Text md/Bold", + "type": "typography", + "isAlias": false, + "value": { + "fontSize": 16, + "fontFamily": "Inter", + "fontWeight": "Bold", + "lineHeight": 24, + "lineHeightUnit": "PIXELS", + "letterSpacing": 0, + "letterSpacingUnit": "PERCENT", + "textCase": "ORIGINAL", + "textDecoration": "NONE" + } + }, + { + "name": "Text md/Regular italic", + "type": "typography", + "isAlias": false, + "value": { + "fontSize": 16, + "fontFamily": "Inter", + "fontWeight": "Italic", + "lineHeight": 24, + "lineHeightUnit": "PIXELS", + "letterSpacing": 0, + "letterSpacingUnit": "PERCENT", + "textCase": "ORIGINAL", + "textDecoration": "NONE" + } + }, + { + "name": "Text md/Medium italic", + "type": "typography", + "isAlias": false, + "value": { + "fontSize": 16, + "fontFamily": "Inter", + "fontWeight": "Medium Italic", + "lineHeight": 24, + "lineHeightUnit": "PIXELS", + "letterSpacing": 0, + "letterSpacingUnit": "PERCENT", + "textCase": "ORIGINAL", + "textDecoration": "NONE" + } + }, + { + "name": "Text md/Semibold italic", + "type": "typography", + "isAlias": false, + "value": { + "fontSize": 16, + "fontFamily": "Inter", + "fontWeight": "Semi Bold Italic", + "lineHeight": 24, + "lineHeightUnit": "PIXELS", + "letterSpacing": 0, + "letterSpacingUnit": "PERCENT", + "textCase": "ORIGINAL", + "textDecoration": "NONE" + } + }, + { + "name": "Text md/Bold italic", + "type": "typography", + "isAlias": false, + "value": { + "fontSize": 16, + "fontFamily": "Inter", + "fontWeight": "Bold Italic", + "lineHeight": 24, + "lineHeightUnit": "PIXELS", + "letterSpacing": 0, + "letterSpacingUnit": "PERCENT", + "textCase": "ORIGINAL", + "textDecoration": "NONE" + } + }, + { + "name": "Text md/Regular underlined", + "type": "typography", + "isAlias": false, + "value": { + "fontSize": 16, + "fontFamily": "Inter", + "fontWeight": "Regular", + "lineHeight": 24, + "lineHeightUnit": "PIXELS", + "letterSpacing": 0, + "letterSpacingUnit": "PERCENT", + "textCase": "ORIGINAL", + "textDecoration": "UNDERLINE" + } + }, + { + "name": "Text md / Medium underlined", + "type": "typography", + "isAlias": false, + "value": { + "fontSize": 16, + "fontFamily": "Inter", + "fontWeight": "Medium", + "lineHeight": 24, + "lineHeightUnit": "PIXELS", + "letterSpacing": 0, + "letterSpacingUnit": "PERCENT", + "textCase": "ORIGINAL", + "textDecoration": "UNDERLINE" + } + }, + { + "name": "Text md/Semibold underlined", + "type": "typography", + "isAlias": false, + "value": { + "fontSize": 16, + "fontFamily": "Inter", + "fontWeight": "Semi Bold", + "lineHeight": 24, + "lineHeightUnit": "PIXELS", + "letterSpacing": 0, + "letterSpacingUnit": "PERCENT", + "textCase": "ORIGINAL", + "textDecoration": "UNDERLINE" + } + }, + { + "name": "Text sm/Regular", + "type": "typography", + "isAlias": false, + "value": { + "fontSize": 14, + "fontFamily": "Inter", + "fontWeight": "Regular", + "lineHeight": 20, + "lineHeightUnit": "PIXELS", + "letterSpacing": 0, + "letterSpacingUnit": "PERCENT", + "textCase": "ORIGINAL", + "textDecoration": "NONE" + } + }, + { + "name": "Text sm/Medium", + "type": "typography", + "isAlias": false, + "value": { + "fontSize": 14, + "fontFamily": "Inter", + "fontWeight": "Medium", + "lineHeight": 20, + "lineHeightUnit": "PIXELS", + "letterSpacing": 0, + "letterSpacingUnit": "PERCENT", + "textCase": "ORIGINAL", + "textDecoration": "NONE" + } + }, + { + "name": "Text sm/Semibold", + "type": "typography", + "isAlias": false, + "value": { + "fontSize": 14, + "fontFamily": "Inter", + "fontWeight": "Semi Bold", + "lineHeight": 20, + "lineHeightUnit": "PIXELS", + "letterSpacing": 0, + "letterSpacingUnit": "PERCENT", + "textCase": "ORIGINAL", + "textDecoration": "NONE" + } + }, + { + "name": "Text sm / Bold", + "type": "typography", + "isAlias": false, + "value": { + "fontSize": 14, + "fontFamily": "Inter", + "fontWeight": "Bold", + "lineHeight": 20, + "lineHeightUnit": "PIXELS", + "letterSpacing": 0, + "letterSpacingUnit": "PERCENT", + "textCase": "ORIGINAL", + "textDecoration": "NONE" + } + }, + { + "name": "Text sm/Regular underlined", + "type": "typography", + "isAlias": false, + "value": { + "fontSize": 14, + "fontFamily": "Inter", + "fontWeight": "Regular", + "lineHeight": 20, + "lineHeightUnit": "PIXELS", + "letterSpacing": 0, + "letterSpacingUnit": "PERCENT", + "textCase": "ORIGINAL", + "textDecoration": "UNDERLINE" + } + }, + { + "name": "Text sm / Medium underlined", + "type": "typography", + "isAlias": false, + "value": { + "fontSize": 14, + "fontFamily": "Inter", + "fontWeight": "Medium", + "lineHeight": 20, + "lineHeightUnit": "PIXELS", + "letterSpacing": 0, + "letterSpacingUnit": "PERCENT", + "textCase": "ORIGINAL", + "textDecoration": "UNDERLINE" + } + }, + { + "name": "Text sm/Semibold underlined", + "type": "typography", + "isAlias": false, + "value": { + "fontSize": 14, + "fontFamily": "Inter", + "fontWeight": "Semi Bold", + "lineHeight": 20, + "lineHeightUnit": "PIXELS", + "letterSpacing": 0, + "letterSpacingUnit": "PERCENT", + "textCase": "ORIGINAL", + "textDecoration": "UNDERLINE" + } + }, + { + "name": "Text xs/Regular", + "type": "typography", + "isAlias": false, + "value": { + "fontSize": 12, + "fontFamily": "Inter", + "fontWeight": "Regular", + "lineHeight": 18, + "lineHeightUnit": "PIXELS", + "letterSpacing": 0, + "letterSpacingUnit": "PERCENT", + "textCase": "ORIGINAL", + "textDecoration": "NONE" + } + }, + { + "name": "Text xs/Medium", + "type": "typography", + "isAlias": false, + "value": { + "fontSize": 12, + "fontFamily": "Inter", + "fontWeight": "Medium", + "lineHeight": 18, + "lineHeightUnit": "PIXELS", + "letterSpacing": 0, + "letterSpacingUnit": "PERCENT", + "textCase": "ORIGINAL", + "textDecoration": "NONE" + } + }, + { + "name": "Text xs/Semibold", + "type": "typography", + "isAlias": false, + "value": { + "fontSize": 12, + "fontFamily": "Inter", + "fontWeight": "Semi Bold", + "lineHeight": 18, + "lineHeightUnit": "PIXELS", + "letterSpacing": 0, + "letterSpacingUnit": "PERCENT", + "textCase": "ORIGINAL", + "textDecoration": "NONE" + } + }, + { + "name": "Text xs / Bold", + "type": "typography", + "isAlias": false, + "value": { + "fontSize": 12, + "fontFamily": "Inter", + "fontWeight": "Bold", + "lineHeight": 18, + "lineHeightUnit": "PIXELS", + "letterSpacing": 0, + "letterSpacingUnit": "PERCENT", + "textCase": "ORIGINAL", + "textDecoration": "NONE" + } + } + ] + } + ] + }, + { + "name": "Effects", + "modes": [ + { + "name": "Style", + "variables": [ + { + "name": "Focus rings/ring-brand", + "type": "effect", + "isAlias": false, + "value": { + "effects": [ + { + "type": "DROP_SHADOW", + "color": { + "r": 158, + "g": 119, + "b": 237, + "a": 0.24 + }, + "offset": { + "x": 0, + "y": 0 + }, + "radius": 0, + "spread": 4 + } + ] + } + }, + { + "name": "Focus rings/ring-brand-shadow-xs", + "type": "effect", + "isAlias": false, + "value": { + "effects": [ + { + "type": "DROP_SHADOW", + "color": { + "r": 158, + "g": 119, + "b": 237, + "a": 0.24 + }, + "offset": { + "x": 0, + "y": 0 + }, + "radius": 0, + "spread": 4 + }, + { + "type": "DROP_SHADOW", + "color": { + "r": 16, + "g": 24, + "b": 40, + "a": 0.05 + }, + "offset": { + "x": 0, + "y": 1 + }, + "radius": 2, + "spread": 0 + } + ] + } + }, + { + "name": "Focus rings/ring-brand-shadow-sm", + "type": "effect", + "isAlias": false, + "value": { + "effects": [ + { + "type": "DROP_SHADOW", + "color": { + "r": 158, + "g": 119, + "b": 237, + "a": 0.24 + }, + "offset": { + "x": 0, + "y": 0 + }, + "radius": 0, + "spread": 4 + }, + { + "type": "DROP_SHADOW", + "color": { + "r": 16, + "g": 24, + "b": 40, + "a": 0.06 + }, + "offset": { + "x": 0, + "y": 1 + }, + "radius": 2, + "spread": 0 + }, + { + "type": "DROP_SHADOW", + "color": { + "r": 16, + "g": 24, + "b": 40, + "a": 0.1 + }, + "offset": { + "x": 0, + "y": 1 + }, + "radius": 3, + "spread": 0 + } + ] + } + }, + { + "name": "Focus rings/ring-gray", + "type": "effect", + "isAlias": false, + "value": { + "effects": [ + { + "type": "DROP_SHADOW", + "color": { + "r": 152, + "g": 162, + "b": 179, + "a": 0.14 + }, + "offset": { + "x": 0, + "y": 0 + }, + "radius": 0, + "spread": 4 + } + ] + } + }, + { + "name": "Focus rings/ring-gray-shadow-xs", + "type": "effect", + "isAlias": false, + "value": { + "effects": [ + { + "type": "DROP_SHADOW", + "color": { + "r": 152, + "g": 162, + "b": 179, + "a": 0.14 + }, + "offset": { + "x": 0, + "y": 0 + }, + "radius": 0, + "spread": 4 + }, + { + "type": "DROP_SHADOW", + "color": { + "r": 16, + "g": 24, + "b": 40, + "a": 0.05 + }, + "offset": { + "x": 0, + "y": 1 + }, + "radius": 2, + "spread": 0 + } + ] + } + }, + { + "name": "Focus rings/ring-gray-shadow-sm", + "type": "effect", + "isAlias": false, + "value": { + "effects": [ + { + "type": "DROP_SHADOW", + "color": { + "r": 152, + "g": 162, + "b": 179, + "a": 0.14 + }, + "offset": { + "x": 0, + "y": 0 + }, + "radius": 0, + "spread": 4 + }, + { + "type": "DROP_SHADOW", + "color": { + "r": 16, + "g": 24, + "b": 40, + "a": 0.06 + }, + "offset": { + "x": 0, + "y": 1 + }, + "radius": 2, + "spread": 0 + }, + { + "type": "DROP_SHADOW", + "color": { + "r": 16, + "g": 24, + "b": 40, + "a": 0.1 + }, + "offset": { + "x": 0, + "y": 1 + }, + "radius": 3, + "spread": 0 + } + ] + } + }, + { + "name": "Focus rings/ring-gray-secondary", + "type": "effect", + "isAlias": false, + "value": { + "effects": [ + { + "type": "DROP_SHADOW", + "color": { + "r": 152, + "g": 162, + "b": 179, + "a": 0.2 + }, + "offset": { + "x": 0, + "y": 0 + }, + "radius": 0, + "spread": 4 + } + ] + } + }, + { + "name": "Focus rings/ring-error", + "type": "effect", + "isAlias": false, + "value": { + "effects": [ + { + "type": "DROP_SHADOW", + "color": { + "r": 240, + "g": 68, + "b": 56, + "a": 0.24 + }, + "offset": { + "x": 0, + "y": 0 + }, + "radius": 0, + "spread": 4 + } + ] + } + }, + { + "name": "Focus rings/ring-error-shadow-xs", + "type": "effect", + "isAlias": false, + "value": { + "effects": [ + { + "type": "DROP_SHADOW", + "color": { + "r": 240, + "g": 68, + "b": 56, + "a": 0.24 + }, + "offset": { + "x": 0, + "y": 0 + }, + "radius": 0, + "spread": 4 + }, + { + "type": "DROP_SHADOW", + "color": { + "r": 16, + "g": 24, + "b": 40, + "a": 0.05 + }, + "offset": { + "x": 0, + "y": 1 + }, + "radius": 2, + "spread": 0 + } + ] + } + }, + { + "name": "Shadows/shadow-xs", + "type": "effect", + "isAlias": false, + "value": { + "effects": [ + { + "type": "DROP_SHADOW", + "color": { + "r": 16, + "g": 24, + "b": 40, + "a": 0.05 + }, + "offset": { + "x": 0, + "y": 1 + }, + "radius": 2, + "spread": 0 + } + ] + } + }, + { + "name": "Shadows/shadow-sm", + "type": "effect", + "isAlias": false, + "value": { + "effects": [ + { + "type": "DROP_SHADOW", + "color": { + "r": 16, + "g": 24, + "b": 40, + "a": 0.06 + }, + "offset": { + "x": 0, + "y": 1 + }, + "radius": 2, + "spread": 0 + }, + { + "type": "DROP_SHADOW", + "color": { + "r": 16, + "g": 24, + "b": 40, + "a": 0.1 + }, + "offset": { + "x": 0, + "y": 1 + }, + "radius": 3, + "spread": 0 + } + ] + } + }, + { + "name": "Shadows/shadow-md", + "type": "effect", + "isAlias": false, + "value": { + "effects": [ + { + "type": "DROP_SHADOW", + "color": { + "r": 16, + "g": 24, + "b": 40, + "a": 0.06 + }, + "offset": { + "x": 0, + "y": 2 + }, + "radius": 4, + "spread": -2 + }, + { + "type": "DROP_SHADOW", + "color": { + "r": 16, + "g": 24, + "b": 40, + "a": 0.1 + }, + "offset": { + "x": 0, + "y": 4 + }, + "radius": 8, + "spread": -2 + } + ] + } + }, + { + "name": "Shadows/shadow-lg", + "type": "effect", + "isAlias": false, + "value": { + "effects": [ + { + "type": "DROP_SHADOW", + "color": { + "r": 16, + "g": 24, + "b": 40, + "a": 0.03 + }, + "offset": { + "x": 0, + "y": 4 + }, + "radius": 6, + "spread": -2 + }, + { + "type": "DROP_SHADOW", + "color": { + "r": 16, + "g": 24, + "b": 40, + "a": 0.08 + }, + "offset": { + "x": 0, + "y": 12 + }, + "radius": 16, + "spread": -4 + } + ] + } + }, + { + "name": "Shadows/shadow-xl", + "type": "effect", + "isAlias": false, + "value": { + "effects": [ + { + "type": "DROP_SHADOW", + "color": { + "r": 16, + "g": 24, + "b": 40, + "a": 0.03 + }, + "offset": { + "x": 0, + "y": 8 + }, + "radius": 8, + "spread": -4 + }, + { + "type": "DROP_SHADOW", + "color": { + "r": 16, + "g": 24, + "b": 40, + "a": 0.08 + }, + "offset": { + "x": 0, + "y": 20 + }, + "radius": 24, + "spread": -4 + } + ] + } + }, + { + "name": "Shadows/shadow-2xl", + "type": "effect", + "isAlias": false, + "value": { + "effects": [ + { + "type": "DROP_SHADOW", + "color": { + "r": 16, + "g": 24, + "b": 40, + "a": 0.18 + }, + "offset": { + "x": 0, + "y": 24 + }, + "radius": 48, + "spread": -12 + } + ] + } + }, + { + "name": "Shadows/shadow-3xl", + "type": "effect", + "isAlias": false, + "value": { + "effects": [ + { + "type": "DROP_SHADOW", + "color": { + "r": 16, + "g": 24, + "b": 40, + "a": 0.14 + }, + "offset": { + "x": 0, + "y": 32 + }, + "radius": 64, + "spread": -12 + } + ] + } + }, + { + "name": "Shadows/Portfolio mockup shadows/shadow-main-centre-md", + "type": "effect", + "isAlias": false, + "value": { + "effects": [ + { + "type": "DROP_SHADOW", + "color": { + "r": 52, + "g": 64, + "b": 84, + "a": 0.14 + }, + "offset": { + "x": 0, + "y": 75 + }, + "radius": 150, + "spread": 0 + } + ] + } + }, + { + "name": "Shadows/Portfolio mockup shadows/shadow-main-centre-lg", + "type": "effect", + "isAlias": false, + "value": { + "effects": [ + { + "type": "DROP_SHADOW", + "color": { + "r": 52, + "g": 64, + "b": 84, + "a": 0.18 + }, + "offset": { + "x": 0, + "y": 100 + }, + "radius": 200, + "spread": 0 + } + ] + } + }, + { + "name": "Shadows/Portfolio mockup shadows/shadow-overlay-right-lg", + "type": "effect", + "isAlias": false, + "value": { + "effects": [ + { + "type": "DROP_SHADOW", + "color": { + "r": 52, + "g": 64, + "b": 84, + "a": 0.12 + }, + "offset": { + "x": -40, + "y": 40 + }, + "radius": 72, + "spread": 0 + } + ] + } + }, + { + "name": "Shadows/Portfolio mockup shadows/shadow-overlay-left-lg", + "type": "effect", + "isAlias": false, + "value": { + "effects": [ + { + "type": "DROP_SHADOW", + "color": { + "r": 52, + "g": 64, + "b": 84, + "a": 0.12 + }, + "offset": { + "x": 100, + "y": 100 + }, + "radius": 150, + "spread": 0 + } + ] + } + }, + { + "name": "Shadows/Portfolio mockup shadows/shadow-grid-md", + "type": "effect", + "isAlias": false, + "value": { + "effects": [ + { + "type": "DROP_SHADOW", + "color": { + "r": 52, + "g": 64, + "b": 84, + "a": 0.08 + }, + "offset": { + "x": 32, + "y": 32 + }, + "radius": 64, + "spread": 0 + } + ] + } + }, + { + "name": "Backdrop blurs/backdrop-blur-sm", + "type": "effect", + "isAlias": false, + "value": { + "effects": [ + { + "type": "BACKGROUND_BLUR", + "radius": 8 + } + ] + } + }, + { + "name": "Backdrop blurs/backdrop-blur-md", + "type": "effect", + "isAlias": false, + "value": { + "effects": [ + { + "type": "BACKGROUND_BLUR", + "radius": 16 + } + ] + } + }, + { + "name": "Backdrop blurs/backdrop-blur-lg", + "type": "effect", + "isAlias": false, + "value": { + "effects": [ + { + "type": "BACKGROUND_BLUR", + "radius": 24 + } + ] + } + }, + { + "name": "Backdrop blurs/backdrop-blur-xl", + "type": "effect", + "isAlias": false, + "value": { + "effects": [ + { + "type": "BACKGROUND_BLUR", + "radius": 40 + } + ] + } + } + ] + } + ] + }, + { + "name": "Grids", + "modes": [ + { + "name": "Style", + "variables": [ + { + "name": "Grid desktop", + "type": "grid", + "isAlias": false, + "value": { + "layoutGrids": [ + { + "pattern": "COLUMNS", + "color": { + "r": 255, + "g": 0, + "b": 0, + "a": 0.04 + }, + "alignment": "STRETCH", + "gutterSize": 32, + "offset": 112, + "count": 12 + }, + { + "pattern": "COLUMNS", + "sectionSize": 32, + "color": { + "r": 255, + "g": 0, + "b": 0, + "a": 0.1 + }, + "alignment": "CENTER", + "gutterSize": 1216, + "count": 2 + }, + { + "pattern": "ROWS", + "sectionSize": 96, + "color": { + "r": 255, + "g": 0, + "b": 0, + "a": 0.04 + }, + "alignment": "MIN", + "gutterSize": 20, + "offset": 0, + "count": 1 + } + ] + } + }, + { + "name": "Grid tablet", + "type": "grid", + "isAlias": false, + "value": { + "layoutGrids": [ + { + "pattern": "COLUMNS", + "color": { + "r": 255, + "g": 0, + "b": 0, + "a": 0.04 + }, + "alignment": "STRETCH", + "gutterSize": 32, + "offset": 32, + "count": 6 + }, + { + "pattern": "COLUMNS", + "sectionSize": 32, + "color": { + "r": 255, + "g": 0, + "b": 0, + "a": 0.1 + }, + "alignment": "CENTER", + "gutterSize": 704, + "count": 2 + }, + { + "pattern": "ROWS", + "sectionSize": 96, + "color": { + "r": 255, + "g": 0, + "b": 0, + "a": 0.04 + }, + "alignment": "MIN", + "gutterSize": 20, + "offset": 0, + "count": 1 + } + ] + } + }, + { + "name": "Grid mobile", + "type": "grid", + "isAlias": false, + "value": { + "layoutGrids": [ + { + "pattern": "COLUMNS", + "color": { + "r": 255, + "g": 0, + "b": 0, + "a": 0.04 + }, + "alignment": "STRETCH", + "gutterSize": 16, + "offset": 16, + "count": 4 + }, + { + "pattern": "ROWS", + "sectionSize": 56, + "color": { + "r": 255, + "g": 0, + "b": 0, + "a": 0.04 + }, + "alignment": "MIN", + "gutterSize": 20, + "offset": 0, + "count": 1 + }, + { + "pattern": "ROWS", + "sectionSize": 32, + "color": { + "r": 255, + "g": 0, + "b": 0, + "a": 0.04 + }, + "alignment": "MAX", + "gutterSize": 20, + "offset": 0, + "count": 1 + }, + { + "pattern": "COLUMNS", + "sectionSize": 16, + "color": { + "r": 255, + "g": 0, + "b": 0, + "a": 0.1 + }, + "alignment": "CENTER", + "gutterSize": 343, + "count": 2 + } + ] + } + }, + { + "name": "12 columns (auto)", + "type": "grid", + "isAlias": false, + "value": { + "layoutGrids": [ + { + "pattern": "COLUMNS", + "color": { + "r": 255, + "g": 0, + "b": 0, + "a": 0.1 + }, + "alignment": "STRETCH", + "gutterSize": 32, + "offset": 0, + "count": 12 + } + ] + } + }, + { + "name": "6 columns (auto)", + "type": "grid", + "isAlias": false, + "value": { + "layoutGrids": [ + { + "pattern": "COLUMNS", + "color": { + "r": 255, + "g": 0, + "b": 0, + "a": 0.1 + }, + "alignment": "STRETCH", + "gutterSize": 32, + "offset": 0, + "count": 6 + } + ] + } + }, + { + "name": "5 columns (auto)", + "type": "grid", + "isAlias": false, + "value": { + "layoutGrids": [ + { + "pattern": "COLUMNS", + "color": { + "r": 255, + "g": 0, + "b": 0, + "a": 0.1 + }, + "alignment": "STRETCH", + "gutterSize": 32, + "offset": 0, + "count": 5 + } + ] + } + }, + { + "name": "3 columns (auto)", + "type": "grid", + "isAlias": false, + "value": { + "layoutGrids": [ + { + "pattern": "COLUMNS", + "color": { + "r": 255, + "g": 0, + "b": 0, + "a": 0.1 + }, + "alignment": "STRETCH", + "gutterSize": 32, + "offset": 0, + "count": 3 + } + ] + } + }, + { + "name": "2 columns (auto)", + "type": "grid", + "isAlias": false, + "value": { + "layoutGrids": [ + { + "pattern": "COLUMNS", + "color": { + "r": 255, + "g": 0, + "b": 0, + "a": 0.1 + }, + "alignment": "STRETCH", + "gutterSize": 32, + "offset": 0, + "count": 2 + } + ] + } + } + ] + } + ] + } + ] +} diff --git a/scripts/generate_theme.js b/scripts/generate_theme.js new file mode 100644 index 00000000..770bbb43 --- /dev/null +++ b/scripts/generate_theme.js @@ -0,0 +1,165 @@ +#!/usr/bin/env node +// eslint-disable-next-line @typescript-eslint/no-var-requires +const fs = require('fs') + +const json = fs.readFileSync('./assets/figma/variables.json') + +const figmaVariables = JSON.parse(json) + +const collections = figmaVariables.collections + +const primitivesCollection = collections.find((collection) => collection.name === '_Primitives') +const colorsCollection = collections.find((collection) => collection.name === '1. Color modes') + +const primitivesColors = primitivesCollection.modes + .find((mode) => mode.name === 'Style') + .variables.filter((variable) => variable.type === 'color') + .map((color) => ({ name: color.name, value: color.value })) + +// colorMode could be either 'light' or 'dark' +const getModeColors = (colorMode) => { + const modeName = colorMode === 'light' ? 'Light mode' : 'Dark mode' + const modeColors = colorsCollection.modes.find((mode) => mode.name === modeName)?.variables + const colors = modeColors + .map((variable) => { + if (variable.isAlias) { + if (variable.value.collection === '_Primitives') { + const primitiveColor = primitivesColors.find( + (color) => color.name === variable.value.name + ) + if (primitiveColor) { + return { name: variable.name, value: primitiveColor.value } + } + return null + } else { + const newColor = modeColors.find((color) => color.name === variable.value.name) + if (newColor) { + const primitiveColor = primitivesColors.find( + (color) => color.name === newColor.value.name + ) + if (primitiveColor) { + return { name: variable.name, value: primitiveColor.value } + } + } + } + return null + } else if (!variable.isAlias) { + return { name: variable.name, value: variable.value } + } else return null + }) + .filter(Boolean) + + const colorsArray = colors.map((color) => { + return { [color.name.split('/').pop().split(' ').shift() || '']: color.value } + }) + + const colorsInMode = colorsArray.reduceRight((acc, color) => { + const [entries] = Object.entries(color) + + const nestedKeys = entries[0].split('-') + + const newValue = createNestedObject(nestedKeys, entries[1]) + + return mergeObjects(acc, newValue) + }, {}) + + const sortedColors = sortObject(colorsInMode) + return sortedColors +} + +const light = getModeColors('light') +const dark = getModeColors('dark') + +const primitivesColorsArray = primitivesColors.map((color) => { + return { [color.name.split('/').slice(1).join('-')]: color.value } +}) + +const primitives = primitivesColorsArray.reduceRight((acc, color) => { + const [entries] = Object.entries(color) + + const colorName = entries[0].split('_') + + const nestedKeys = colorName[0].split('-') + if (colorName[1]) { + nestedKeys.push(colorName[1]) + } + + const newValue = createNestedObject(nestedKeys, entries[1]) + + return mergeObjects(acc, newValue) +}, {}) + +// Export colors to file + +const theme = { + darkMode: dark, + lightMode: light, + primitives: sortObject(primitives), +} + +const objectString = `export const themeColors = ${JSON.stringify(theme, null, 2)}` + +// Specify the file path +const filePath = './src/constants/colors.ts' + +fs.writeFileSync(filePath, objectString, 'utf-8') + +// Utils +function createNestedObject(keys, value) { + if (keys.length === 0) { + return value + } + + const key = keys[0] + const remainingKeys = keys.slice(1) + + const nestedObject = {} + nestedObject[key] = createNestedObject(remainingKeys, value) + + return nestedObject +} + +function mergeObjects(obj1, obj2) { + // Initialize the result object + const result = {} + + // Loop through keys in obj1 + for (const key in obj1) { + // If the key is present in both obj1 and obj2 and both values are objects + if (key in obj2 && typeof obj1[key] === 'object' && typeof obj2[key] === 'object') { + // Recursively merge the nested objects + result[key] = mergeObjects(obj1[key], obj2[key]) + } else { + // Otherwise, prioritize the value from obj2 + result[key] = obj2[key] !== undefined ? obj2[key] : obj1[key] + } + } + + // Loop through keys in obj2 + for (const key in obj2) { + // If the key is not present in obj1, add it to the result object + if (!(key in obj1)) { + result[key] = obj2[key] + } + } + + return result +} + +function sortObject(obj) { + if (typeof obj !== 'object' || obj === null) { + return obj + } + + if (Array.isArray(obj)) { + return obj.map(sortObject) + } + + const sorted = {} + Object.keys(obj) + .sort() + .forEach((key) => { + sorted[key] = sortObject(obj[key]) + }) + return sorted +} diff --git a/src/components/AppLoading.tsx b/src/components/AppLoading.tsx index 4fd129f1..5dc39826 100644 --- a/src/components/AppLoading.tsx +++ b/src/components/AppLoading.tsx @@ -70,7 +70,7 @@ export const AppLoading: FC = ({ children }) => { {isLoading ? null : children} {isLoading || isDelayLoading ? ( - +
diff --git a/src/components/Header.tsx b/src/components/Header.tsx index 5ce3536e..a2fdde7e 100644 --- a/src/components/Header.tsx +++ b/src/components/Header.tsx @@ -19,12 +19,12 @@ export const Header = ({ options, ...rest }: NativeStackHeaderProps) => { }) return ( - - + + {router.canGoBack() && ( - + )} @@ -32,7 +32,7 @@ export const Header = ({ options, ...rest }: NativeStackHeaderProps) => { <> - + {options.title} diff --git a/src/components/LanguagePicker.tsx b/src/components/LanguagePicker.tsx index 39e65ed8..81fca1b0 100644 --- a/src/components/LanguagePicker.tsx +++ b/src/components/LanguagePicker.tsx @@ -13,13 +13,11 @@ import { Touchable, TouchableProps } from './atoms/Touchables/Touchable' import { Menu } from './organisms/Menu' import languages from '../../assets/languages.json' -import { useColorScheme } from '~contexts' import { useCallback, useTranslation, useTheme } from '~hooks' export const LanguagePicker: React.FC = () => { const { size } = useTheme() - const { colorScheme } = useColorScheme() const { i18n } = useTranslation() const language = i18n?.language?.slice?.(0, 2).toUpperCase() as keyof typeof languages const isOpen = useSharedValue(false) @@ -33,7 +31,7 @@ export const LanguagePicker: React.FC = () => { icon: { height: size['8'], justifyContent: 'center' }, }) - const iconColor = colorScheme === 'light' ? 'black' : 'white' + const iconColor = 'text.brand.primary' const renderTrigger = useCallback( ( diff --git a/src/components/Modal.tsx b/src/components/Modal.tsx index c1141744..24d51081 100644 --- a/src/components/Modal.tsx +++ b/src/components/Modal.tsx @@ -43,13 +43,13 @@ export const Modal = ({ {children} diff --git a/src/components/atoms/Button/Button.test.tsx b/src/components/atoms/Button/Button.test.tsx index e7297c43..5aacf57c 100644 --- a/src/components/atoms/Button/Button.test.tsx +++ b/src/components/atoms/Button/Button.test.tsx @@ -2,7 +2,7 @@ import { StyleSheet } from 'react-native' import { Button } from '.' -import { _appTheme } from '~constants' +import { theme } from '~constants' import { cleanup, render, fireEvent, act } from '~utils/testUtils' afterEach(cleanup) @@ -16,7 +16,7 @@ describe('Button', () => { const { getByTestId } = render() expect(getByTestId('baseButton').props.style).toStrictEqual({ alignItems: 'center', - backgroundColor: _appTheme.colors.primary, + backgroundColor: theme.light.colors.button.primary.bg, borderColor: 'transparent', borderRadius: 4, borderWidth: undefined, @@ -32,7 +32,7 @@ describe('Button', () => { const { getByTestId } = render() expect(getByTestId('baseButton').props.style).toStrictEqual({ alignItems: 'center', - backgroundColor: _appTheme.colors.secondary, + backgroundColor: theme.light.colors.button.secondary.bg, borderColor: 'transparent', borderRadius: 4, borderWidth: undefined, @@ -48,8 +48,8 @@ describe('Button', () => { const { getByTestId } = render() expect(getByTestId('baseButton').props.style).toStrictEqual({ alignItems: 'center', - backgroundColor: 'transparent', - borderColor: _appTheme.colors.primary, + backgroundColor: theme.light.colors.button.tertiary.fg, + borderColor: theme.light.colors.border.primary, borderRadius: 4, borderWidth: StyleSheet.hairlineWidth, flexDirection: 'row', @@ -64,7 +64,7 @@ describe('Button', () => { const { getByTestId } = render() expect(getByTestId('baseButton').props.style).toStrictEqual({ alignItems: 'center', - backgroundColor: 'transparent', + backgroundColor: theme.light.colors.button.tertiary.fg, borderColor: 'transparent', borderRadius: 4, borderWidth: undefined, @@ -80,7 +80,7 @@ describe('Button', () => { const { getByTestId } = render() expect(getByTestId('baseButton').props.style).toStrictEqual({ alignItems: 'center', - backgroundColor: 'transparent', + backgroundColor: theme.light.colors.button.tertiary.fg, borderColor: 'transparent', borderRadius: 4, borderWidth: undefined, diff --git a/src/components/atoms/Button/Button.tsx b/src/components/atoms/Button/Button.tsx index 48b9344d..63dc16c7 100644 --- a/src/components/atoms/Button/Button.tsx +++ b/src/components/atoms/Button/Button.tsx @@ -26,6 +26,7 @@ import { StyledProps } from '../types' import { theme } from '~constants' import { buttonVariants } from '~constants/buttonVariants' +import { useColorScheme } from '~contexts' import { getColorValue } from '~utils' export type ButtonProps = StyledProps & @@ -51,7 +52,7 @@ const styles = StyleSheet.create({ paddingVertical: 8, }, baseText: { - color: theme.light.colors.white, + color: theme.light.colors.text.primary, fontStyle: 'normal', fontWeight: '400', letterSpacing: 0, @@ -77,6 +78,7 @@ const RawButton = memo( }, ref ) => { + const { colorScheme } = useColorScheme() const { pressedStyle, notPressedStyle, disabledStyle } = useMemo( () => buttonVariants[variant], [variant] @@ -86,75 +88,90 @@ const RawButton = memo( () => ({ backgroundColor: getColorValue({ color: pressedStyle.backgroundColor, - colors: theme.light.colors, + colors: colorScheme === 'light' ? theme.light.colors : theme.dark.colors, }), borderColor: getColorValue({ color: pressedStyle.borderColor!, - colors: theme.light.colors, + colors: colorScheme === 'light' ? theme.light.colors : theme.dark.colors, }), borderWidth: pressedStyle.borderWidth, }), - [pressedStyle] + [ + colorScheme, + pressedStyle.backgroundColor, + pressedStyle.borderColor, + pressedStyle.borderWidth, + ] ) const pressedColorStyle = useMemo( () => ({ color: getColorValue({ color: pressedStyle.color!, - colors: theme.light.colors, + colors: colorScheme === 'light' ? theme.light.colors : theme.dark.colors, }), }), - [pressedStyle] + [colorScheme, pressedStyle.color] ) const notPressedStyles = useMemo( () => ({ backgroundColor: getColorValue({ color: notPressedStyle.backgroundColor, - colors: theme.light.colors, + colors: colorScheme === 'light' ? theme.light.colors : theme.dark.colors, }), borderColor: getColorValue({ color: notPressedStyle.borderColor!, - colors: theme.light.colors, + colors: colorScheme === 'light' ? theme.light.colors : theme.dark.colors, }), borderWidth: notPressedStyle.borderWidth, }), - [notPressedStyle] + [ + colorScheme, + notPressedStyle.backgroundColor, + notPressedStyle.borderColor, + notPressedStyle.borderWidth, + ] ) const notPressedColorStyle = useMemo( () => ({ color: getColorValue({ color: notPressedStyle.color!, - colors: theme.light.colors, + colors: colorScheme === 'light' ? theme.light.colors : theme.dark.colors, }), }), - [notPressedStyle] + [colorScheme, notPressedStyle.color] ) const disabledStyles = useMemo( () => ({ backgroundColor: getColorValue({ color: disabledStyle.backgroundColor, - colors: theme.light.colors, + colors: colorScheme === 'light' ? theme.light.colors : theme.dark.colors, }), borderColor: getColorValue({ color: disabledStyle.borderColor!, - colors: theme.light.colors, + colors: colorScheme === 'light' ? theme.light.colors : theme.dark.colors, }), borderWidth: disabledStyle.borderWidth, }), - [disabledStyle] + [ + colorScheme, + disabledStyle.backgroundColor, + disabledStyle.borderColor, + disabledStyle.borderWidth, + ] ) const disabledColorStyle = useMemo( () => ({ color: getColorValue({ color: disabledStyle.color!, - colors: theme.light.colors, + colors: colorScheme === 'light' ? theme.light.colors : theme.dark.colors, }), }), - [disabledStyle] + [colorScheme, disabledStyle.color] ) const buttonSizeStyle = useMemo( diff --git a/src/components/atoms/Button/__snapshots__/Button.test.tsx.snap b/src/components/atoms/Button/__snapshots__/Button.test.tsx.snap index 7f4b1f9b..29186051 100644 --- a/src/components/atoms/Button/__snapshots__/Button.test.tsx.snap +++ b/src/components/atoms/Button/__snapshots__/Button.test.tsx.snap @@ -36,7 +36,7 @@ exports[`Button renders correctly 1`] = ` style={ { "alignItems": "center", - "backgroundColor": "#3b82f6", + "backgroundColor": "#7F56D9", "borderColor": "transparent", "borderRadius": 4, "borderWidth": undefined, @@ -53,7 +53,7 @@ exports[`Button renders correctly 1`] = ` allowFontScaling={false} style={ { - "color": "#ffffff", + "color": "#FFFFFF", "fontFamily": "Lato_700Bold", "fontSize": 16, "fontStyle": "normal", diff --git a/src/components/atoms/Checkbox.tsx b/src/components/atoms/Checkbox.tsx index 6203ea59..2e98c69d 100644 --- a/src/components/atoms/Checkbox.tsx +++ b/src/components/atoms/Checkbox.tsx @@ -30,25 +30,25 @@ export const Checkbox = forwardRef( const iconColor = useMemo(() => { if (disabled && value) { - return 'gray.500' + return 'icon.fg.brand' } - return 'text' + return 'text.primary' }, [disabled, value]) const bgColor = useMemo(() => { if (!value) { - return colors.white + return colors.text.white } if (disabled) { - return colors.gray['200'] + return colors.text.placeholder } - return 'transparent' + return colors.alpha.black[10] }, [disabled, value, colors]) const borderColor = useMemo( - () => (isError ? 'red.500' : disabled ? 'gray.500' : 'inputBorder'), + () => (isError ? 'border.error' : disabled ? 'border.disabled' : 'border.primary'), [isError, disabled] ) diff --git a/src/components/atoms/DiskLoader.tsx b/src/components/atoms/DiskLoader.tsx index 5db15b44..27e165ac 100644 --- a/src/components/atoms/DiskLoader.tsx +++ b/src/components/atoms/DiskLoader.tsx @@ -19,7 +19,7 @@ export type DiskLoaderType = { } export const DiskLoader = ({ - circleColor = 'green.400', + circleColor = 'bg.success.primary', containerColor = '#b3c430', size = 40, }: DiskLoaderType): JSX.Element => { diff --git a/src/components/atoms/FormErrorMessage.tsx b/src/components/atoms/FormErrorMessage.tsx index e50c9819..42b30081 100644 --- a/src/components/atoms/FormErrorMessage.tsx +++ b/src/components/atoms/FormErrorMessage.tsx @@ -6,7 +6,9 @@ import { useTheme } from '~hooks' export const FormErrorMessage = ({ errorMessage }: { errorMessage?: string }) => { const { colors } = useTheme() return ( - errorMessage && {errorMessage} + errorMessage && ( + {errorMessage} + ) ) } diff --git a/src/components/atoms/FormLabel.tsx b/src/components/atoms/FormLabel.tsx index aba6cd6f..252447ff 100644 --- a/src/components/atoms/FormLabel.tsx +++ b/src/components/atoms/FormLabel.tsx @@ -4,12 +4,11 @@ import { StyleSheet, View } from 'react-native' import { Text } from './Text' import { FormLabelProps } from './types' -import { useColorScheme } from '~contexts' import { useTheme } from '~hooks' export const FormLabel = ({ label, isRequired, labelStyle }: FormLabelProps) => { const { colors } = useTheme() - const { colorScheme } = useColorScheme() + const stylesForRequired = labelStyle && Object.fromEntries( @@ -21,14 +20,11 @@ export const FormLabel = ({ label, isRequired, labelStyle }: FormLabelProps) => return ( {label && ( - + {label} - {isRequired && *} + {isRequired && ( + * + )} )} diff --git a/src/components/atoms/Icon.tsx b/src/components/atoms/Icon.tsx index fbd43bbd..d5679684 100644 --- a/src/components/atoms/Icon.tsx +++ b/src/components/atoms/Icon.tsx @@ -23,7 +23,7 @@ export const Icon = ({ color, name, size, style }: IconProps) => { ) diff --git a/src/components/atoms/Input.tsx b/src/components/atoms/Input.tsx index f574ac73..43b31797 100644 --- a/src/components/atoms/Input.tsx +++ b/src/components/atoms/Input.tsx @@ -69,7 +69,7 @@ const StyledInput = forwardRef((props, ref) => { const textColorStyle = useMemo( () => ({ - color: props.color ? getColorValue({ color: props.color, colors }) : colors.text, + color: props.color ? getColorValue({ color: props.color, colors }) : colors.text.primary, }), [colors, props.color] ) @@ -230,10 +230,12 @@ export const Input = forwardRef( flexDirection="row" alignItems="center" overflow="hidden" - borderColor={isInvalid ? 'danger' : isFocused ? 'primaryLight' : 'inputBorder'} + borderColor={isInvalid ? 'border.error' : isFocused ? 'border.primary' : 'border.brand'} borderRadius={4} borderWidth={1} - backgroundColor={isInvalid ? 'danger' : isFocused ? 'primaryLight' : 'background'} + backgroundColor={ + isInvalid ? 'bg.error.primary' : isFocused ? 'bg.brand.primary' : 'bg.active' + } bgOpacity={isFocused ? 0.1 : 1} {...inputShadow} {...layoutProps} @@ -241,8 +243,8 @@ export const Input = forwardRef( ( px={3} py={2} secureTextEntry={securePassword} - selectionColor={colors.primaryLight} + selectionColor={colors.text.secondary} width="100%" {...inputProps} onFocus={handleFocus} @@ -266,7 +268,7 @@ export const Input = forwardRef( diff --git a/src/components/atoms/Select.tsx b/src/components/atoms/Select.tsx index 1dfaf15f..491d174e 100644 --- a/src/components/atoms/Select.tsx +++ b/src/components/atoms/Select.tsx @@ -55,7 +55,7 @@ const SelectItem = ({ }, [closeDropdown, item.value, maxSelectedItems, setValue, value]) const color = useMemo( - () => (disabled && !selected ? colors.gray['500'] : colors.black), + () => (disabled && !selected ? colors.bg.brand.primary : colors.bg.active), [disabled, selected, colors] ) @@ -70,7 +70,7 @@ const SelectItem = ({ ({ justifyContent="center" alignItems="center" > - {selected ? : null} + {selected ? : null} {item.labelInDropdown ?? item.label} @@ -157,7 +157,7 @@ export const Select = ({ ) const inputColor = useMemo(() => { - return isError ? 'red.500' : dropdownDisabled ? 'gray.500' : 'text' + return isError ? 'text.error.primary' : dropdownDisabled ? 'utility.gray.500' : 'text.primary' }, [dropdownDisabled, isError]) return ( @@ -167,7 +167,9 @@ export const Select = ({ numberOfLines={1} style={[ styles.textInput, - isError ? { borderColor: colors.red['500'] } : { borderColor: colors.inputBorder }, + isError + ? { borderColor: colors.text.error.primary } + : { borderColor: colors.border.brand }, ]} color={inputColor} > diff --git a/src/components/atoms/Text/Text.test.tsx b/src/components/atoms/Text/Text.test.tsx index 40449834..d9360f98 100644 --- a/src/components/atoms/Text/Text.test.tsx +++ b/src/components/atoms/Text/Text.test.tsx @@ -10,7 +10,7 @@ console.warn = jest.fn() const defaultTextStyles = { textTransform: 'none', - color: theme.light.colors.text, + color: theme.light.colors.text.brand.primary, } describe('Text', () => { @@ -78,10 +78,10 @@ describe('Text', () => { }) it('renders correctly with a custom color', () => { - const { getByText } = render(Hello World) + const { getByText } = render(Hello World) expect(getByText('Hello World').props.style).toStrictEqual({ ...defaultTextStyles, - color: theme.light.colors.red[400], + color: theme.light.colors.text.error.primary, textTransform: 'none', }) }) @@ -112,7 +112,7 @@ describe('Text', () => { it('renders correctly with multiple styles', () => { const { getByText } = render( - + Hello World ) @@ -120,7 +120,7 @@ describe('Text', () => { ...defaultTextStyles, fontStyle: 'italic', fontWeight: 'bold', - color: theme.light.colors.red[400], + color: theme.light.colors.text.error.primary, textDecorationLine: 'underline', }) }) @@ -332,7 +332,7 @@ describe('Text', () => { }) }) - it('renders correctly compound Text.H6Bold', () => { + it('renders correctly compound Text.H6Bold', async () => { const { getByText } = render(Hello World) expect(getByText('Hello World').props.style).toStrictEqual({ ...defaultTextStyles, diff --git a/src/components/atoms/Text/Text.tsx b/src/components/atoms/Text/Text.tsx index a540f81d..3fda3f69 100644 --- a/src/components/atoms/Text/Text.tsx +++ b/src/components/atoms/Text/Text.tsx @@ -36,7 +36,7 @@ const RawText = memo( { bold, capitalize, - color = 'text', + color = 'text.brand.primary', italic, letterSpacing, lineHeight, @@ -86,7 +86,9 @@ const RawText = memo( const textColor = useMemo( () => ({ - color: color ? getColorValue({ color, colors: theme.colors }) : theme.colors.text, + color: color + ? getColorValue({ color, colors: theme.colors }) + : theme.colors.text.brand.primary, }), [theme, color] ) diff --git a/src/components/bottomSheets/BottomSheet.tsx b/src/components/bottomSheets/BottomSheet.tsx index 9113b162..89485b12 100644 --- a/src/components/bottomSheets/BottomSheet.tsx +++ b/src/components/bottomSheets/BottomSheet.tsx @@ -11,7 +11,6 @@ import { Dimensions } from 'react-native' import { BottomSheetHeader } from './BottomSheetHeader' import { Box } from '~components/atoms/Box' -import { useColorScheme } from '~contexts' import { useSafeAreaInsets } from '~hooks' const screenHeight = Dimensions.get('screen').height @@ -34,8 +33,6 @@ export const BottomSheet = ({ }: Props) => { const { top } = useSafeAreaInsets() - const { colorScheme } = useColorScheme() - const handleClose = useCallback(() => { bottomSheetRef?.current?.snapToPosition(-1) }, [bottomSheetRef]) @@ -61,7 +58,7 @@ export const BottomSheet = ({ showCloseButton={showCloseButton} onClose={handleClose} /> - + {children} diff --git a/src/components/bottomSheets/BottomSheet.web.tsx b/src/components/bottomSheets/BottomSheet.web.tsx index 4e261efe..66ad2829 100644 --- a/src/components/bottomSheets/BottomSheet.web.tsx +++ b/src/components/bottomSheets/BottomSheet.web.tsx @@ -5,7 +5,6 @@ import { ScrollView } from 'react-native' import { BottomSheetHeader } from './BottomSheetHeader' import { Box, Modal } from '~components' -import { useColorScheme } from '~contexts' import { useBoolean, useWeb } from '~hooks' type Props = { @@ -26,7 +25,6 @@ export const BottomSheet = ({ }: Props) => { const [isOpen, setIsOpen] = useBoolean(false) const { webContentWidth } = useWeb() - const { colorScheme } = useColorScheme() useImperativeHandle(bottomSheetRef, () => ({ snapToPosition: (index: string | number) => { @@ -54,9 +52,9 @@ export const BottomSheet = ({ @@ -66,7 +64,7 @@ export const BottomSheet = ({ showCloseButton={showCloseButton} onClose={setIsOpen.off} /> - + {children} diff --git a/src/components/bottomSheets/BottomSheetHeader.tsx b/src/components/bottomSheets/BottomSheetHeader.tsx index 819e8638..f6af310d 100644 --- a/src/components/bottomSheets/BottomSheetHeader.tsx +++ b/src/components/bottomSheets/BottomSheetHeader.tsx @@ -28,7 +28,7 @@ export const BottomSheetHeader = ({ {showCloseButton && ( - + )} diff --git a/src/components/molecules/Field/Radio.tsx b/src/components/molecules/Field/Radio.tsx index 7abd0936..d89c02da 100644 --- a/src/components/molecules/Field/Radio.tsx +++ b/src/components/molecules/Field/Radio.tsx @@ -19,12 +19,12 @@ export const Radio = forwardRef( }, ref ) => { - const borderColor = useMemo( - () => (isError ? 'red.500' : isDisabled ? 'gray.400' : 'inputBorder'), + const borderColor: ColorNames = useMemo( + () => (isError ? 'border.error' : isDisabled ? 'border.disabled' : 'border.brand'), [isError, isDisabled] ) const bgColor = useCallback( - (item: string) => (item === value ? 'blue.500' : 'gray.500'), + (item: string): ColorNames => (item === value ? 'bg.brand.primary' : 'bg.tertiary'), [value] ) diff --git a/src/components/organisms/Menu/index.tsx b/src/components/organisms/Menu/index.tsx index ea819fc4..aad3ef30 100644 --- a/src/components/organisms/Menu/index.tsx +++ b/src/components/organisms/Menu/index.tsx @@ -122,7 +122,7 @@ const Menu = memo( onRequestClose={handleClose} > - + {triggerPosition && ( ( top={triggerPosition?.y} left={triggerPosition?.x} p={2} - backgroundColor="white" + backgroundColor="fg.white" borderRadius={4} {...shadows['4']} > diff --git a/src/constants/buttonVariants.ts b/src/constants/buttonVariants.ts index afb5c337..8986f755 100644 --- a/src/constants/buttonVariants.ts +++ b/src/constants/buttonVariants.ts @@ -25,78 +25,78 @@ type VariantStyle = { export const buttonVariants: { [key in ButtonVariant]: VariantStyle } = { Primary: { pressedStyle: { - backgroundColor: 'primaryDark', - color: 'white', + backgroundColor: 'button.primary.bg', + color: 'button.primary.fg', }, notPressedStyle: { - backgroundColor: 'primary', - color: 'white', + backgroundColor: 'button.primary.bg', + color: 'button.primary.fg', }, disabledStyle: { - backgroundColor: 'primaryLight', - color: 'white', + backgroundColor: 'toggle.button.fg_disabled', + color: 'text.white', }, }, Secondary: { pressedStyle: { - backgroundColor: 'secondaryDark', - color: 'white', + backgroundColor: 'button.secondary.bg', + color: 'text.brand.tertiary', }, notPressedStyle: { - backgroundColor: 'secondary', - color: 'white', + backgroundColor: 'button.secondary.bg', + color: 'text.brand.tertiary', }, disabledStyle: { - backgroundColor: 'secondaryLight', - color: 'white', + backgroundColor: 'toggle.button.fg_disabled', + color: 'text.brand.secondary', }, }, Outline: { pressedStyle: { - backgroundColor: 'transparent', - borderColor: 'primaryLight', + backgroundColor: 'button.tertiary.fg', + borderColor: 'border.primary', borderWidth: StyleSheet.hairlineWidth, - color: 'primaryLight', + color: 'text.brand.primary', }, notPressedStyle: { - backgroundColor: 'transparent', - borderColor: 'primary', + backgroundColor: 'button.tertiary.fg', + borderColor: 'border.primary', borderWidth: StyleSheet.hairlineWidth, - color: 'primary', + color: 'text.brand.secondary', }, disabledStyle: { - backgroundColor: 'transparent', - borderColor: 'gray.200', + backgroundColor: 'button.tertiary.fg', + borderColor: 'border.disabled', borderWidth: StyleSheet.hairlineWidth, - color: 'gray.200', + color: 'text.disabled', }, }, Ghost: { pressedStyle: { - backgroundColor: 'primary', - color: 'white', + backgroundColor: 'button.primary.bg', + color: 'text.primary', }, notPressedStyle: { - backgroundColor: 'transparent', - color: 'primary', + backgroundColor: 'button.tertiary.fg', + color: 'text.primary', }, disabledStyle: { - backgroundColor: 'transparent', - color: 'black', + backgroundColor: 'button.tertiary.fg', + color: 'text.brand.secondary', }, }, Link: { pressedStyle: { - backgroundColor: 'transparent', - color: 'blue.800', + backgroundColor: 'button.tertiary.fg', + color: 'text.brand.primary', }, notPressedStyle: { - backgroundColor: 'transparent', - color: 'blue.500', + backgroundColor: 'button.tertiary.fg', + color: 'text.brand.secondary', }, disabledStyle: { - backgroundColor: 'transparent', - color: 'gray.200', + backgroundColor: 'button.tertiary.fg', + color: 'text.disabled', }, }, } diff --git a/src/constants/colors.ts b/src/constants/colors.ts new file mode 100644 index 00000000..f4c73373 --- /dev/null +++ b/src/constants/colors.ts @@ -0,0 +1,1529 @@ +export const themeColors = { + darkMode: { + alpha: { + black: { + '10': '#FFFFFF1A', + '20': '#FFFFFF33', + '30': '#FFFFFF4D', + '40': '#FFFFFF66', + '50': '#FFFFFF80', + '60': '#FFFFFF99', + '70': '#FFFFFFB3', + '80': '#FFFFFFCC', + '90': '#FFFFFFE6', + '100': '#FFFFFF', + }, + white: { + '10': '#0C111D1A', + '20': '#0C111D33', + '30': '#0C111D4D', + '40': '#0C111D66', + '50': '#0C111D80', + '60': '#0C111D99', + '70': '#0C111DB3', + '80': '#0C111DCC', + '90': '#0C111DE6', + '100': '#0C111D', + }, + }, + app: { + store: { + badge: { + border: '#FFFFFF', + }, + }, + }, + avatar: { + bg: '#1F242F', + contrast: { + border: '#FFFFFF1F', + }, + focus: { + border: '#98A2B324', + }, + profile: { + photo: { + border: '#0C111D', + }, + }, + }, + bg: { + active: '#1F242F', + brand: { + primary: '#9E77ED', + primary_alt: '#161B26', + secondary: '#7F56D9', + section: '#161B26', + section_subtle: '#0C111D', + solid: '#7F56D9', + solid_hover: '#9E77ED', + }, + disabled: '#1F242F', + disabled_subtle: '#161B26', + error: { + primary: '#F04438', + secondary: '#D92D20', + solid: '#D92D20', + }, + overlay: '#1F242F', + primary: '#0C111D', + primary_alt: '#161B26', + primary_hover: '#1F242F', + quaternary: '#333741', + secondary: '#161B26', + secondary_alt: '#0C111D', + secondary_hover: '#1F242F', + secondary_subtle: '#161B26', + success: { + primary: '#17B26A', + secondary: '#079455', + solid: '#079455', + }, + tertiary: '#1F242F', + warning: { + primary: '#F79009', + secondary: '#DC6803', + solid: '#DC6803', + }, + }, + border: { + brand: '#B692F6', + disabled: '#333741', + disabled_subtle: '#1F242F', + error: '#F97066', + primary: '#333741', + secondary: '#1F242F', + tertiary: '#1F242F', + }, + breadcrumb: { + bg_hover: '#1F242F', + brand: { + bg_hover: '#1F242F', + fg_hover: '#FFFFFF', + icon: { + fg_hover: '#FFFFFF', + }, + }, + fg: '#CECFD2', + fg_hover: '#FFFFFF', + icon: { + fg: '#94969C', + fg_hover: '#FFFFFF', + }, + }, + button: { + primary: { + bg: '#7F56D9', + bg_hover: '#6941C6', + border: '#7F56D9', + border_hover: '#6941C6', + error: { + bg: '#D92D20', + bg_hover: '#B42318', + border: '#D92D20', + border_hover: '#B42318', + fg: '#FFFFFF', + fg_hover: '#FFFFFF', + }, + fg: '#FFFFFF', + fg_hover: '#FFFFFF', + }, + secondary: { + bg: '#161B26', + bg_hover: '#1F242F', + border: '#333741', + border_hover: '#333741', + color: { + bg: '#161B26', + bg_hover: '#1F242F', + border: '#333741', + border_hover: '#333741', + fg: '#CECFD2', + fg_hover: '#F0F1F1', + }, + error: { + bg: '#55160C', + bg_hover: '#7A271A', + border: '#912018', + border_hover: '#B42318', + fg: '#FECDCA', + fg_hover: '#FEE4E2', + }, + fg: '#CECFD2', + fg_hover: '#F0F1F1', + }, + tertiary: { + bg_hover: '#1F242F', + color: { + bg_hover: '#1F242F', + fg: '#CECFD2', + fg_hover: '#F0F1F1', + }, + error: { + bg_hover: '#7A271A', + fg: '#FDA29B', + fg_hover: '#FECDCA', + }, + fg: '#94969C', + fg_hover: '#ECECED', + }, + }, + featured: { + icon: { + dark: { + fg: { + brand: '#E9D7FE', + error: '#FECDCA', + gray: '#ECECED', + success: '#ABEFC6', + warning: '#FEDF89', + }, + }, + light: { + fg: { + brand: '#E9D7FE', + error: '#FECDCA', + gray: '#ECECED', + success: '#ABEFC6', + warning: '#FEDF89', + }, + }, + modern: { + border: '#333741', + }, + }, + }, + fg: { + brand: { + primary: '#9E77ED', + primary_alt: '#CECFD2', + secondary: '#9E77ED', + }, + disabled: '#85888E', + disabled_subtle: '#61646C', + error: { + primary: '#F04438', + secondary: '#F97066', + }, + primary: '#FFFFFF', + quarterary: '#94969C', + quarterary_hover: '#CECFD2', + quinary: '#85888E', + quinary_hover: '#94969C', + secondary: '#CECFD2', + secondary_hover: '#ECECED', + senary: '#61646C', + success: { + primary: '#17B26A', + secondary: '#47CD89', + }, + tertiary: '#94969C', + tertiary_hover: '#CECFD2', + warning: { + primary: '#F79009', + secondary: '#FDB022', + }, + white: '#FFFFFF', + }, + footer: { + badge: { + bg: '#FFFFFF1A', + border: '#FFFFFF4D', + fg: '#FFFFFF', + }, + button: { + fg: '#CECFD2', + fg_hover: '#F0F1F1', + }, + }, + header: { + abstract: { + '50': { + bg: '#161B26', + }, + '100': { + bg: '#1F242F', + }, + '200': { + bg: '#333741', + }, + '300': { + bg: '#61646C', + }, + }, + }, + icon: { + fg: { + brand: '#94969C', + brand_on: { + brand: '#94969C', + }, + }, + }, + logo: { + blue: '#09BDFF', + dodge: '#A1E4FF', + text: '#FFFFFF', + violet: '#FFFFFF', + }, + mark: { + '1': '#FFFFFF', + '2': '#A1E4FF', + '3': '#09BDFF', + }, + nav: { + item: { + button: { + icon: { + fg: '#94969C', + fg_active: '#ECECED', + }, + }, + icon: { + fg: '#94969C', + fg_active: '#ECECED', + }, + }, + }, + screen: { + mockup: { + border: '#333741', + }, + }, + slider: { + handle: { + bg: '#9E77ED', + border: '#0C111D', + }, + }, + social: { + icon: { + fg: { + angellist: '#FFFFFF', + apple: '#FFFFFF', + github: '#FFFFFF', + instagram: '#FFFFFF', + tumblr: '#FFFFFF', + x: '#FFFFFF', + }, + }, + }, + text: { + brand: { + primary: '#F5F5F6', + secondary: '#CECFD2', + tertiary: '#94969C', + tertiary_alt: '#F5F5F6', + }, + disabled: '#85888E', + error: { + primary: '#F97066', + }, + placeholder: '#85888E', + placeholder_subtle: '#333741', + primary: '#F5F5F6', + primary_on: { + brand: '#F5F5F6', + }, + quarterary: '#94969C', + quarterary_on: { + brand: '#94969C', + }, + secondary: '#CECFD2', + secondary_hover: '#ECECED', + secondary_on: { + brand: '#CECFD2', + }, + success: { + primary: '#47CD89', + }, + tertiary: '#94969C', + tertiary_hover: '#CECFD2', + tertiary_on: { + brand: '#94969C', + }, + warning: { + primary: '#FDB022', + }, + white: '#FFFFFF', + }, + thumbnail: { + badge: { + brand: { + fg: '#CECFD2', + }, + success: { + fg: '#CECFD2', + }, + }, + }, + toggle: { + button: { + fg_disabled: '#61646C', + }, + }, + tooltip: { + supporting: { + text: '#CECFD2', + }, + }, + utility: { + blue: { + '50': '#102A56', + '100': '#194185', + '200': '#1849A9', + '300': '#175CD3', + '400': '#1570EF', + '500': '#2E90FA', + '600': '#53B1FD', + '700': '#84CAFF', + dark: { + '50': '#002266', + '100': '#00359E', + '200': '#0040C1', + '300': '#004EEB', + '400': '#155EEF', + '500': '#2970FF', + '600': '#528BFF', + '700': '#84ADFF', + }, + light: { + '50': '#062C41', + '100': '#0B4A6F', + '200': '#065986', + '300': '#026AA2', + '400': '#0086C9', + '500': '#0BA5EC', + '600': '#36BFFA', + '700': '#7CD4FD', + }, + }, + brand: { + '50': '#2C1C5F', + '100': '#42307D', + '200': '#53389E', + '300': '#6941C6', + '400': '#7F56D9', + '500': '#9E77ED', + '600': '#B692F6', + '700': '#D6BBFB', + '800': '#E9D7FE', + '900': '#F4EBFF', + '100_alt': '#1F242F', + '200_alt': '#333741', + '300_alt': '#333741', + '400_alt': '#61646C', + '500_alt': '#85888E', + '50_alt': '#161B26', + '600_alt': '#94969C', + '700_alt': '#CECFD2', + '800_alt': '#ECECED', + '900_alt': '#F0F1F1', + }, + error: { + '50': '#55160C', + '100': '#7A271A', + '200': '#912018', + '300': '#B42318', + '400': '#D92D20', + '500': '#F04438', + '600': '#F97066', + '700': '#FDA29B', + }, + fuchsia: { + '50': '#47104C', + '100': '#6F1877', + '200': '#821890', + '300': '#9F1AB1', + '400': '#BA24D5', + '500': '#D444F1', + '600': '#E478FA', + '700': '#EEAAFD', + }, + gray: { + '50': '#161B26', + '100': '#1F242F', + '200': '#333741', + '300': '#333741', + '400': '#61646C', + '500': '#85888E', + '600': '#94969C', + '700': '#CECFD2', + '800': '#ECECED', + '900': '#F0F1F1', + blue: { + '50': '#101323', + '100': '#101323', + '200': '#293056', + '300': '#363F72', + '400': '#3E4784', + '500': '#4E5BA6', + '600': '#717BBC', + '700': '#B3B8DB', + }, + }, + indigo: { + '50': '#1F235B', + '100': '#2D3282', + '200': '#2D31A6', + '300': '#3538CD', + '400': '#444CE7', + '500': '#6172F3', + '600': '#8098F9', + '700': '#A4BCFD', + }, + orange: { + '50': '#511C10', + '100': '#772917', + '200': '#932F19', + '300': '#B93815', + '400': '#E04F16', + '500': '#EF6820', + '600': '#F38744', + '700': '#F7B27A', + dark: { + '50': '#57130A', + '100': '#771A0D', + '200': '#97180C', + '300': '#BC1B06', + '400': '#E62E05', + '500': '#FF4405', + '600': '#FF692E', + '700': '#FF9C66', + }, + }, + pink: { + '50': '#4E0D30', + '100': '#851651', + '200': '#9E165F', + '300': '#C11574', + '400': '#DD2590', + '500': '#EE46BC', + '600': '#F670C7', + '700': '#FAA7E0', + }, + purple: { + '50': '#27115F', + '100': '#3E1C96', + '200': '#4A1FB8', + '300': '#5925DC', + '400': '#6938EF', + '500': '#7A5AF8', + '600': '#9B8AFB', + '700': '#BDB4FE', + }, + success: { + '50': '#053321', + '100': '#074D31', + '200': '#085D3A', + '300': '#067647', + '400': '#079455', + '500': '#17B26A', + '600': '#47CD89', + '700': '#75E0A7', + }, + warning: { + '50': '#4E1D09', + '100': '#7A2E0E', + '200': '#93370D', + '300': '#B54708', + '400': '#DC6803', + '500': '#F79009', + '600': '#FDB022', + '700': '#FEC84B', + }, + }, + wysiwyg: { + editor: { + icon: { + fg: '#94969C', + fg_active: '#FFFFFF', + }, + }, + }, + }, + lightMode: { + alpha: { + black: { + '10': '#0000001A', + '20': '#00000033', + '30': '#0000004D', + '40': '#00000066', + '50': '#00000080', + '60': '#00000099', + '70': '#000000B3', + '80': '#000000CC', + '90': '#000000E6', + '100': '#000000', + }, + white: { + '10': '#FFFFFF1A', + '20': '#FFFFFF33', + '30': '#FFFFFF4D', + '40': '#FFFFFF66', + '50': '#FFFFFF80', + '60': '#FFFFFF99', + '70': '#FFFFFFB3', + '80': '#FFFFFFCC', + '90': '#FFFFFFE6', + '100': '#FFFFFF', + }, + }, + app: { + store: { + badge: { + border: '#A6A6A6', + }, + }, + }, + avatar: { + bg: '#F2F4F7', + contrast: { + border: '#00000014', + }, + focus: { + border: '#98A2B324', + }, + profile: { + photo: { + border: '#FFFFFF', + }, + }, + }, + bg: { + active: '#F9FAFB', + brand: { + primary: '#F9F5FF', + primary_alt: '#F9F5FF', + secondary: '#F4EBFF', + section: '#53389E', + section_subtle: '#6941C6', + solid: '#7F56D9', + solid_hover: '#6941C6', + }, + disabled: '#F2F4F7', + disabled_subtle: '#F9FAFB', + error: { + primary: '#FEF3F2', + secondary: '#FEE4E2', + solid: '#D92D20', + }, + overlay: '#0C111D', + primary: '#FFFFFF', + primary_alt: '#FFFFFF', + primary_hover: '#F9FAFB', + quaternary: '#EAECF0', + secondary: '#F9FAFB', + secondary_alt: '#F9FAFB', + secondary_hover: '#F2F4F7', + secondary_subtle: '#FCFCFD', + success: { + primary: '#ECFDF3', + secondary: '#DCFAE6', + solid: '#079455', + }, + tertiary: '#F2F4F7', + warning: { + primary: '#FFFAEB', + secondary: '#FEF0C7', + solid: '#DC6803', + }, + }, + border: { + brand: '#D6BBFB', + disabled: '#D0D5DD', + disabled_subtle: '#EAECF0', + error: '#FDA29B', + primary: '#D0D5DD', + secondary: '#EAECF0', + tertiary: '#F2F4F7', + }, + breadcrumb: { + bg_hover: '#F9FAFB', + brand: { + bg_hover: '#F9F5FF', + fg_hover: '#6941C6', + icon: { + fg_hover: '#6941C6', + }, + }, + fg: '#475467', + fg_hover: '#344054', + icon: { + fg: '#667085', + fg_hover: '#344054', + }, + }, + button: { + primary: { + bg: '#7F56D9', + bg_hover: '#6941C6', + border: '#7F56D9', + border_hover: '#6941C6', + error: { + bg: '#D92D20', + bg_hover: '#B42318', + border: '#D92D20', + border_hover: '#B42318', + fg: '#FFFFFF', + fg_hover: '#FFFFFF', + }, + fg: '#FFFFFF', + fg_hover: '#FFFFFF', + }, + secondary: { + bg: '#FFFFFF', + bg_hover: '#F9FAFB', + border: '#6941C6', + border_hover: '#D0D5DD', + color: { + bg: '#FFFFFF', + bg_hover: '#F9F5FF', + border: '#D6BBFB', + border_hover: '#D6BBFB', + fg: '#6941C6', + fg_hover: '#53389E', + }, + error: { + bg: '#FFFFFF', + bg_hover: '#FEF3F2', + border: '#FDA29B', + border_hover: '#FDA29B', + fg: '#B42318', + fg_hover: '#912018', + }, + fg: '#344054', + fg_hover: '#182230', + }, + tertiary: { + bg_hover: '#F9FAFB', + color: { + bg_hover: '#F9F5FF', + fg: '#6941C6', + fg_hover: '#53389E', + }, + error: { + bg_hover: '#FEF3F2', + fg: '#B42318', + fg_hover: '#912018', + }, + fg: '#475467', + fg_hover: '#344054', + }, + }, + featured: { + icon: { + dark: { + fg: { + brand: '#FFFFFF', + error: '#FFFFFF', + gray: '#FFFFFF', + success: '#FFFFFF', + warning: '#FFFFFF', + }, + }, + light: { + fg: { + brand: '#7F56D9', + error: '#D92D20', + gray: '#667085', + success: '#079455', + warning: '#DC6803', + }, + }, + modern: { + border: '#EAECF0', + }, + }, + }, + fg: { + brand: { + primary: '#7F56D9', + primary_alt: '#7F56D9', + secondary: '#9E77ED', + }, + disabled: '#98A2B3', + disabled_subtle: '#D0D5DD', + error: { + primary: '#D92D20', + secondary: '#F04438', + }, + primary: '#101828', + quarterary: '#667085', + quarterary_hover: '#475467', + quinary: '#98A2B3', + quinary_hover: '#667085', + secondary: '#344054', + secondary_hover: '#182230', + senary: '#D0D5DD', + success: { + primary: '#079455', + secondary: '#17B26A', + }, + tertiary: '#475467', + tertiary_hover: '#344054', + warning: { + primary: '#DC6803', + secondary: '#F79009', + }, + white: '#FFFFFF', + }, + footer: { + badge: { + bg: '#ECFDF3', + border: '#ABEFC6', + fg: '#067647', + }, + button: { + fg: '#E9D7FE', + fg_hover: '#FFFFFF', + }, + }, + header: { + abstract: { + '50': { + bg: '#F9F5FF', + }, + '100': { + bg: '#F4EBFF', + }, + '200': { + bg: '#E9D7FE', + }, + '300': { + bg: '#D6BBFB', + }, + }, + }, + icon: { + fg: { + brand: '#7F56D9', + brand_on: { + brand: '#E9D7FE', + }, + }, + }, + logo: { + blue: '#24BEFC', + dodge: '#2697F7', + text: '#290064', + violet: '#6941C6', + }, + mark: { + '1': '#6941C6', + '2': '#2697F7', + '3': '#24BEFC', + }, + nav: { + item: { + button: { + icon: { + fg: '#667085', + fg_active: '#344054', + }, + }, + icon: { + fg: '#667085', + fg_active: '#667085', + }, + }, + }, + screen: { + mockup: { + border: '#101828', + }, + }, + slider: { + handle: { + bg: '#FFFFFF', + border: '#7F56D9', + }, + }, + social: { + icon: { + fg: { + angellist: '#000000', + apple: '#000000', + github: '#000000', + instagram: '#000100', + tumblr: '#001935', + x: '#242E36', + }, + }, + }, + text: { + brand: { + primary: '#42307D', + secondary: '#6941C6', + tertiary: '#7F56D9', + tertiary_alt: '#7F56D9', + }, + disabled: '#667085', + error: { + primary: '#D92D20', + }, + placeholder: '#667085', + placeholder_subtle: '#D0D5DD', + primary: '#101828', + primary_on: { + brand: '#FFFFFF', + }, + quarterary: '#667085', + quarterary_on: { + brand: '#D6BBFB', + }, + secondary: '#344054', + secondary_hover: '#182230', + secondary_on: { + brand: '#E9D7FE', + }, + success: { + primary: '#079455', + }, + tertiary: '#475467', + tertiary_hover: '#344054', + tertiary_on: { + brand: '#E9D7FE', + }, + warning: { + primary: '#DC6803', + }, + white: '#FFFFFF', + }, + thumbnail: { + badge: { + brand: { + fg: '#6941C6', + }, + success: { + fg: '#067647', + }, + }, + }, + toggle: { + button: { + fg_disabled: '#F9FAFB', + }, + }, + tooltip: { + supporting: { + text: '#D0D5DD', + }, + }, + utility: { + blue: { + '50': '#EFF8FF', + '100': '#D1E9FF', + '200': '#B2DDFF', + '300': '#84CAFF', + '400': '#53B1FD', + '500': '#2E90FA', + '600': '#1570EF', + '700': '#175CD3', + dark: { + '50': '#EFF4FF', + '100': '#D1E0FF', + '200': '#B2CCFF', + '300': '#84ADFF', + '400': '#528BFF', + '500': '#2970FF', + '600': '#155EEF', + '700': '#004EEB', + }, + light: { + '50': '#F0F9FF', + '100': '#E0F2FE', + '200': '#B9E6FE', + '300': '#7CD4FD', + '400': '#36BFFA', + '500': '#0BA5EC', + '600': '#0086C9', + '700': '#026AA2', + }, + }, + brand: { + '50': '#F9F5FF', + '100': '#F4EBFF', + '200': '#E9D7FE', + '300': '#D6BBFB', + '400': '#B692F6', + '500': '#9E77ED', + '600': '#7F56D9', + '700': '#6941C6', + '800': '#53389E', + '900': '#42307D', + '100_alt': '#F4EBFF', + '200_alt': '#E9D7FE', + '300_alt': '#D6BBFB', + '400_alt': '#B692F6', + '500_alt': '#9E77ED', + '50_alt': '#F9F5FF', + '600_alt': '#7F56D9', + '700_alt': '#6941C6', + '800_alt': '#53389E', + '900_alt': '#42307D', + }, + error: { + '50': '#FEF3F2', + '100': '#FEE4E2', + '200': '#FECDCA', + '300': '#FDA29B', + '400': '#F97066', + '500': '#F04438', + '600': '#D92D20', + '700': '#B42318', + }, + fuchsia: { + '50': '#FDF4FF', + '100': '#FBE8FF', + '200': '#F6D0FE', + '300': '#EEAAFD', + '400': '#E478FA', + '500': '#D444F1', + '600': '#BA24D5', + '700': '#9F1AB1', + }, + gray: { + '50': '#F9FAFB', + '100': '#F2F4F7', + '200': '#EAECF0', + '300': '#D0D5DD', + '400': '#98A2B3', + '500': '#667085', + '600': '#475467', + '700': '#344054', + '800': '#182230', + '900': '#101828', + blue: { + '50': '#F8F9FC', + '100': '#EAECF5', + '200': '#D5D9EB', + '300': '#B3B8DB', + '400': '#717BBC', + '500': '#4E5BA6', + '600': '#3E4784', + '700': '#363F72', + }, + }, + indigo: { + '50': '#EEF4FF', + '100': '#E0EAFF', + '200': '#C7D7FE', + '300': '#A4BCFD', + '400': '#8098F9', + '500': '#6172F3', + '600': '#444CE7', + '700': '#3538CD', + }, + orange: { + '50': '#FEF6EE', + '100': '#FDEAD7', + '200': '#F9DBAF', + '300': '#F7B27A', + '400': '#F38744', + '500': '#EF6820', + '600': '#E04F16', + '700': '#B93815', + dark: { + '50': '#FFF4ED', + '100': '#FFE6D5', + '200': '#FFD6AE', + '300': '#FF9C66', + '400': '#FF692E', + '500': '#FF4405', + '600': '#E62E05', + '700': '#BC1B06', + }, + }, + pink: { + '50': '#FDF2FA', + '100': '#FCE7F6', + '200': '#FCCEEE', + '300': '#FAA7E0', + '400': '#F670C7', + '500': '#EE46BC', + '600': '#DD2590', + '700': '#C11574', + }, + purple: { + '50': '#F4F3FF', + '100': '#EBE9FE', + '200': '#D9D6FE', + '300': '#BDB4FE', + '400': '#9B8AFB', + '500': '#7A5AF8', + '600': '#6938EF', + '700': '#5925DC', + }, + success: { + '50': '#ECFDF3', + '100': '#DCFAE6', + '200': '#ABEFC6', + '300': '#75E0A7', + '400': '#47CD89', + '500': '#17B26A', + '600': '#079455', + '700': '#067647', + }, + warning: { + '50': '#FFFAEB', + '100': '#FEF0C7', + '200': '#FEDF89', + '300': '#FEC84B', + '400': '#FDB022', + '500': '#F79009', + '600': '#DC6803', + '700': '#B54708', + }, + }, + wysiwyg: { + editor: { + icon: { + fg: '#98A2B3', + fg_active: '#667085', + }, + }, + }, + }, + primitives: { + Base: { + black: '#000000', + transparent: '#FFFFFF00', + white: '#FFFFFF', + }, + Blue: { + '25': '#F5FAFF', + '50': '#EFF8FF', + '100': '#D1E9FF', + '200': '#B2DDFF', + '300': '#84CAFF', + '400': '#53B1FD', + '500': '#2E90FA', + '600': '#1570EF', + '700': '#175CD3', + '800': '#1849A9', + '900': '#194185', + '950': '#102A56', + }, + BlueDark: { + '25': '#F5F8FF', + '50': '#EFF4FF', + '100': '#D1E0FF', + '200': '#B2CCFF', + '300': '#84ADFF', + '400': '#528BFF', + '500': '#2970FF', + '600': '#155EEF', + '700': '#004EEB', + '800': '#0040C1', + '900': '#00359E', + '950': '#002266', + }, + BlueLight: { + '25': '#F5FBFF', + '50': '#F0F9FF', + '100': '#E0F2FE', + '200': '#B9E6FE', + '300': '#7CD4FD', + '400': '#36BFFA', + '500': '#0BA5EC', + '600': '#0086C9', + '700': '#026AA2', + '800': '#065986', + '900': '#0B4A6F', + '950': '#062C41', + }, + Brand: { + '25': '#FCFAFF', + '50': '#F9F5FF', + '100': '#F4EBFF', + '200': '#E9D7FE', + '300': '#D6BBFB', + '400': '#B692F6', + '500': '#9E77ED', + '600': '#7F56D9', + '700': '#6941C6', + '800': '#53389E', + '900': '#42307D', + '950': '#2C1C5F', + }, + Cyan: { + '25': '#F5FEFF', + '50': '#ECFDFF', + '100': '#CFF9FE', + '200': '#A5F0FC', + '300': '#67E3F9', + '400': '#22CCEE', + '500': '#06AED4', + '600': '#088AB2', + '700': '#0E7090', + '800': '#155B75', + '900': '#164C63', + '950': '#0D2D3A', + }, + Error: { + '25': '#FFFBFA', + '50': '#FEF3F2', + '100': '#FEE4E2', + '200': '#FECDCA', + '300': '#FDA29B', + '400': '#F97066', + '500': '#F04438', + '600': '#D92D20', + '700': '#B42318', + '800': '#912018', + '900': '#7A271A', + '950': '#55160C', + }, + Fuchsia: { + '25': '#FEFAFF', + '50': '#FDF4FF', + '100': '#FBE8FF', + '200': '#F6D0FE', + '300': '#EEAAFD', + '400': '#E478FA', + '500': '#D444F1', + '600': '#BA24D5', + '700': '#9F1AB1', + '800': '#821890', + '900': '#6F1877', + '950': '#47104C', + }, + 'Gray (dark mode alpha)': { + '25': '#FFFFFFFA', + '50': '#FFFFFFF5', + '100': '#FFFFFFF0', + '200': '#FFFFFFEB', + '300': '#FFFFFFCC', + '400': '#FFFFFF8F', + '500': '#FFFFFF80', + '600': '#FFFFFF59', + '700': '#FFFFFF29', + '800': '#FFFFFF14', + '900': '#FFFFFF0A', + '950': '#FFFFFF00', + }, + 'Gray (dark mode)': { + '25': '#FAFAFA', + '50': '#F5F5F6', + '100': '#F0F1F1', + '200': '#ECECED', + '300': '#CECFD2', + '400': '#94969C', + '500': '#85888E', + '600': '#61646C', + '700': '#333741', + '800': '#1F242F', + '900': '#161B26', + '950': '#0C111D', + }, + 'Gray (light mode)': { + '25': '#FCFCFD', + '50': '#F9FAFB', + '100': '#F2F4F7', + '200': '#EAECF0', + '300': '#D0D5DD', + '400': '#98A2B3', + '500': '#667085', + '600': '#475467', + '700': '#344054', + '800': '#182230', + '900': '#101828', + '950': '#0C111D', + }, + 'Gray blue': { + '25': '#FCFCFD', + '50': '#F8F9FC', + '100': '#EAECF5', + '200': '#D5D9EB', + '300': '#B3B8DB', + '400': '#717BBC', + '500': '#4E5BA6', + '600': '#3E4784', + '700': '#363F72', + '800': '#293056', + '900': '#101323', + '950': '#0D0F1C', + }, + 'Gray cool': { + '25': '#FCFCFD', + '50': '#F9F9FB', + '100': '#EFF1F5', + '200': '#DCDFEA', + '300': '#B9C0D4', + '400': '#7D89B0', + '500': '#5D6B98', + '600': '#4A5578', + '700': '#404968', + '800': '#30374F', + '900': '#111322', + '950': '#0E101B', + }, + 'Gray iron': { + '25': '#FCFCFC', + '50': '#FAFAFA', + '100': '#F4F4F5', + '200': '#E4E4E7', + '300': '#D1D1D6', + '400': '#A0A0AB', + '500': '#70707B', + '600': '#51525C', + '700': '#3F3F46', + '800': '#26272B', + '900': '#1A1A1E', + '950': '#131316', + }, + 'Gray modern': { + '25': '#FCFCFD', + '50': '#F8FAFC', + '100': '#EEF2F6', + '200': '#E3E8EF', + '300': '#CDD5DF', + '400': '#9AA4B2', + '500': '#697586', + '600': '#4B5565', + '700': '#364152', + '800': '#202939', + '900': '#121926', + '950': '#0D121C', + }, + 'Gray neutral': { + '25': '#FCFCFD', + '50': '#F9FAFB', + '100': '#F3F4F6', + '200': '#E5E7EB', + '300': '#D2D6DB', + '400': '#9DA4AE', + '500': '#6C737F', + '600': '#4D5761', + '700': '#384250', + '800': '#1F2A37', + '900': '#111927', + '950': '#0D121C', + }, + 'Gray true': { + '25': '#FCFCFC', + '50': '#FAFAFA', + '100': '#F5F5F5', + '200': '#E5E5E5', + '300': '#D6D6D6', + '400': '#A3A3A3', + '500': '#737373', + '600': '#525252', + '700': '#424242', + '800': '#292929', + '900': '#141414', + '950': '#0F0F0F', + }, + 'Gray warm': { + '25': '#FDFDFC', + '50': '#FAFAF9', + '100': '#F5F5F4', + '200': '#E7E5E4', + '300': '#D7D3D0', + '400': '#A9A29D', + '500': '#79716B', + '600': '#57534E', + '700': '#44403C', + '800': '#292524', + '900': '#1C1917', + '950': '#171412', + }, + Green: { + '25': '#F6FEF9', + '50': '#EDFCF2', + '100': '#D3F8DF', + '200': '#AAF0C4', + '300': '#73E2A3', + '400': '#3CCB7F', + '500': '#16B364', + '600': '#099250', + '700': '#087443', + '800': '#095C37', + '900': '#084C2E', + '950': '#052E1C', + }, + 'Green light': { + '25': '#FAFEF5', + '50': '#F3FEE7', + '100': '#E3FBCC', + '200': '#D0F8AB', + '300': '#A6EF67', + '400': '#85E13A', + '500': '#66C61C', + '600': '#4CA30D', + '700': '#3B7C0F', + '800': '#326212', + '900': '#2B5314', + '950': '#15290A', + }, + Indigo: { + '25': '#F5F8FF', + '50': '#EEF4FF', + '100': '#E0EAFF', + '200': '#C7D7FE', + '300': '#A4BCFD', + '400': '#8098F9', + '500': '#6172F3', + '600': '#444CE7', + '700': '#3538CD', + '800': '#2D31A6', + '900': '#2D3282', + '950': '#1F235B', + }, + Moss: { + '25': '#FAFDF7', + '50': '#F5FBEE', + '100': '#E6F4D7', + '200': '#CEEAB0', + '300': '#ACDC79', + '400': '#86CB3C', + '500': '#669F2A', + '600': '#4F7A21', + '700': '#3F621A', + '800': '#335015', + '900': '#2B4212', + '950': '#1A280B', + }, + Orange: { + '25': '#FEFAF5', + '50': '#FEF6EE', + '100': '#FDEAD7', + '200': '#F9DBAF', + '300': '#F7B27A', + '400': '#F38744', + '500': '#EF6820', + '600': '#E04F16', + '700': '#B93815', + '800': '#932F19', + '900': '#772917', + '950': '#511C10', + }, + 'Orange dark': { + '25': '#FFF9F5', + '50': '#FFF4ED', + '100': '#FFE6D5', + '200': '#FFD6AE', + '300': '#FF9C66', + '400': '#FF692E', + '500': '#FF4405', + '600': '#E62E05', + '700': '#BC1B06', + '800': '#97180C', + '900': '#771A0D', + '950': '#57130A', + }, + Pink: { + '25': '#FEF6FB', + '50': '#FDF2FA', + '100': '#FCE7F6', + '200': '#FCCEEE', + '300': '#FAA7E0', + '400': '#F670C7', + '500': '#EE46BC', + '600': '#DD2590', + '700': '#C11574', + '800': '#9E165F', + '900': '#851651', + '950': '#4E0D30', + }, + Purple: { + '25': '#FAFAFF', + '50': '#F4F3FF', + '100': '#EBE9FE', + '200': '#D9D6FE', + '300': '#BDB4FE', + '400': '#9B8AFB', + '500': '#7A5AF8', + '600': '#6938EF', + '700': '#5925DC', + '800': '#4A1FB8', + '900': '#3E1C96', + '950': '#27115F', + }, + Rose: { + '25': '#FFF5F6', + '50': '#FFF1F3', + '100': '#FFE4E8', + '200': '#FECDD6', + '300': '#FEA3B4', + '400': '#FD6F8E', + '500': '#F63D68', + '600': '#E31B54', + '700': '#C01048', + '800': '#A11043', + '900': '#89123E', + '950': '#510B24', + }, + Success: { + '25': '#F6FEF9', + '50': '#ECFDF3', + '100': '#DCFAE6', + '200': '#ABEFC6', + '300': '#75E0A7', + '400': '#47CD89', + '500': '#17B26A', + '600': '#079455', + '700': '#067647', + '800': '#085D3A', + '900': '#074D31', + '950': '#053321', + }, + Teal: { + '25': '#F6FEFC', + '50': '#F0FDF9', + '100': '#CCFBEF', + '200': '#99F6E0', + '300': '#5FE9D0', + '400': '#2ED3B7', + '500': '#15B79E', + '600': '#0E9384', + '700': '#107569', + '800': '#125D56', + '900': '#134E48', + '950': '#0A2926', + }, + Violet: { + '25': '#FBFAFF', + '50': '#F5F3FF', + '100': '#ECE9FE', + '200': '#DDD6FE', + '300': '#C3B5FD', + '400': '#A48AFB', + '500': '#875BF7', + '600': '#7839EE', + '700': '#6927DA', + '800': '#5720B7', + '900': '#491C96', + '950': '#2E125E', + }, + Warning: { + '25': '#FFFCF5', + '50': '#FFFAEB', + '100': '#FEF0C7', + '200': '#FEDF89', + '300': '#FEC84B', + '400': '#FDB022', + '500': '#F79009', + '600': '#DC6803', + '700': '#B54708', + '800': '#93370D', + '900': '#7A2E0E', + '950': '#4E1D09', + }, + Yellow: { + '25': '#FEFDF0', + '50': '#FEFBE8', + '100': '#FEF7C3', + '200': '#FEEE95', + '300': '#FDE272', + '400': '#FAC515', + '500': '#EAAA08', + '600': '#CA8504', + '700': '#A15C07', + '800': '#854A0E', + '900': '#713B12', + '950': '#542C0D', + }, + }, +} diff --git a/src/constants/theme.ts b/src/constants/theme.ts index bab99e8b..43d7c2bf 100644 --- a/src/constants/theme.ts +++ b/src/constants/theme.ts @@ -1,5 +1,7 @@ import type { Theme } from '@react-navigation/native' +import { themeColors } from './colors' + export const palette = { black: '#000000', white: '#ffffff', @@ -336,11 +338,6 @@ export const _appTheme = { fontSizes, lineHeights, fontWeights, - colors: { - ...palette, - ...colors, - ...ProjectColors, - }, size, shadows, } @@ -348,37 +345,35 @@ export const _appTheme = { export const theme = { light: { ..._appTheme, - colors: { - ..._appTheme.colors, - background: _appTheme.colors.white, - border: _appTheme.colors.white, - card: _appTheme.colors.white, - text: _appTheme.colors.dark, - notification: _appTheme.colors.secondaryLight, - inputBorder: _appTheme.colors.gray['700'], - }, + colors: themeColors.lightMode, }, dark: { ..._appTheme, - colors: { - ..._appTheme.colors, - background: _appTheme.colors.dark, - border: _appTheme.colors.dark, - card: _appTheme.colors.dark, - text: _appTheme.colors.white, - notification: _appTheme.colors.secondaryLight, - inputBorder: _appTheme.colors.gray['200'], - }, + colors: themeColors.darkMode, }, } export const lightNavigationTheme: Theme = { - colors: theme.light.colors, + colors: { + background: themeColors.lightMode.bg.primary, + border: themeColors.lightMode.border.primary, + card: themeColors.lightMode.button.primary.bg, + text: themeColors.lightMode.alpha.black[70], + notification: themeColors.lightMode.avatar.bg, + primary: themeColors.lightMode.utility.purple[500], + }, dark: false, } export const darkNavigationTheme: Theme = { - colors: theme.dark.colors, + colors: { + background: themeColors.darkMode.bg.primary, + border: themeColors.darkMode.border.primary, + card: themeColors.darkMode.button.primary.bg, + text: themeColors.darkMode.alpha.black[70], + notification: themeColors.darkMode.avatar.bg, + primary: themeColors.darkMode.utility.purple[500], + }, dark: true, } diff --git a/src/hooks/navigation/useNavigationTheme.ts b/src/hooks/navigation/useNavigationTheme.ts index a2eb1c41..016dccb1 100644 --- a/src/hooks/navigation/useNavigationTheme.ts +++ b/src/hooks/navigation/useNavigationTheme.ts @@ -11,17 +11,18 @@ export const useNavigationTheme = () => { const tabBarTheme = useMemo( () => ({ - tabBarActiveTintColor: colors.primary, - tabBarInactiveTintColor: colors.gray[500], + tabBarActiveTintColor: colors.button.primary.bg, + tabBarInactiveTintColor: colors.button.primary.fg, tabBarStyle: { - backgroundColor: colorScheme === 'dark' ? colors.gray[900] : colors.light, + backgroundColor: + colorScheme === 'dark' ? colors.button.primary.bg : colors.button.primary.fg, paddingTop: 4, }, tabBarIconStyle: { marginTop: 0, }, }), - [colors.primary, colors.gray, colors.light, colorScheme] + [colors.button.primary.bg, colors.button.primary.fg, colorScheme] ) const navigationTheme = colorScheme === 'dark' ? darkNavigationTheme : lightNavigationTheme diff --git a/src/navigation/tabNavigator/config.ts b/src/navigation/tabNavigator/config.ts index 5903b051..3b862756 100644 --- a/src/navigation/tabNavigator/config.ts +++ b/src/navigation/tabNavigator/config.ts @@ -50,8 +50,8 @@ export const bottomSideTabs: Tabs = [] export const bottomTabs: Tabs = [...upperSideTabs] export const TabColors: Record = { - tabIconDark: 'gray.700', - tabIconLight: 'gray.200', + tabIconDark: 'text.brand.tertiary', + tabIconLight: 'text.success.primary', } as const export const TabColorsStrings = { diff --git a/src/screens/ColorsScreen.tsx b/src/screens/ColorsScreen.tsx index 75a4ad4d..101d3e76 100644 --- a/src/screens/ColorsScreen.tsx +++ b/src/screens/ColorsScreen.tsx @@ -2,14 +2,18 @@ import { Text, Center, ScrollView } from '~components' import { useScreenOptions, useTranslation } from '~hooks' const colorsVariants: NestedKeys[] = [ - 'primary', - 'secondary', - 'tertiary', - 'danger', - 'success', - 'warning', - 'info', - 'light', + 'utility.success.500', + 'utility.warning.500', + 'utility.orange.500', + 'utility.error.500', + 'utility.pink.500', + 'utility.fuchsia.500', + 'utility.brand.500', + 'utility.purple.500', + 'utility.indigo.500', + 'utility.blue.500', + 'utility.blue.dark.500', + 'utility.gray.500', ] export const ColorsScreen = (): JSX.Element => { @@ -30,7 +34,7 @@ export const ColorsScreen = (): JSX.Element => { mb={4} width="full" > - {colorVariant} + {colorVariant} ))} diff --git a/src/screens/ComponentsScreen.tsx b/src/screens/ComponentsScreen.tsx index 0debc739..3b50cd1c 100644 --- a/src/screens/ComponentsScreen.tsx +++ b/src/screens/ComponentsScreen.tsx @@ -69,8 +69,8 @@ export const ComponentsScreen = (): JSX.Element => { } - rightIcon={} + leftIcon={} + rightIcon={} title={t('components_screen.button_variants.with_icons')} /> diff --git a/src/screens/DataFromBeScreen_EXAMPLE.tsx b/src/screens/DataFromBeScreen_EXAMPLE.tsx index 89938ba4..1b697620 100644 --- a/src/screens/DataFromBeScreen_EXAMPLE.tsx +++ b/src/screens/DataFromBeScreen_EXAMPLE.tsx @@ -16,7 +16,7 @@ export const DataFromBeScreen_EXAMPLE = () => { const renderItem: ListRenderItem = useCallback(({ item: { title, id } }) => { return ( - + {'title:' + title} {'id: ' + id} diff --git a/src/screens/DetailsScreen.tsx b/src/screens/DetailsScreen.tsx index 474ffaf5..749113b1 100644 --- a/src/screens/DetailsScreen.tsx +++ b/src/screens/DetailsScreen.tsx @@ -18,9 +18,9 @@ export const DetailsScreen = (): JSX.Element => { const bottomSheet = bottomSheetComponentRenderFunction( - {t('details_screen.awesome')} + {t('details_screen.awesome')} {items.map((item, index) => ( - + {item} ))} @@ -32,7 +32,7 @@ export const DetailsScreen = (): JSX.Element => {
{t('details_screen.title')} - + {t('details_screen.screen_params', { params: JSON.stringify(localParams) })} {bottomSheet} diff --git a/src/screens/SignInScreen.tsx b/src/screens/SignInScreen.tsx index aead3936..b6f01014 100644 --- a/src/screens/SignInScreen.tsx +++ b/src/screens/SignInScreen.tsx @@ -110,7 +110,7 @@ export const SignInScreen = (): JSX.Element => { {/* TODO: Remove this after implementing signing in with backend */} Correct credentials - + Email: test@example.com{'\n'}Password: 123456 diff --git a/src/types/theme.d.ts b/src/types/theme.d.ts index 63672233..5e2d20de 100644 --- a/src/types/theme.d.ts +++ b/src/types/theme.d.ts @@ -1,4 +1,5 @@ import { theme } from '~constants/theme' +import { themeColors } from '~constants/colors' declare global { // THEME @@ -12,8 +13,9 @@ declare global { type Fonts = keyof AppTheme['fonts'] // COLORS - type Colors = AppTheme['colors'] - type ColorNames = NestedKeys + type Colors = typeof themeColors.lightMode | typeof themeColors.darkMode + + export type ColorNames = NestedKeys type Sizes = AppTheme['sizes'] type SizeKeys = keyof Sizes diff --git a/src/utils/getColorValue.ts b/src/utils/getColorValue.ts index 814b6d66..93f0c8a0 100644 --- a/src/utils/getColorValue.ts +++ b/src/utils/getColorValue.ts @@ -10,10 +10,19 @@ export const getColorValue = ({ color, colors }: GetColorValueProps): string => if (!color || typeof color === 'object') return 'transparent' - const [main, number] = (color as string).split('.') as unknown as [string, string] + const keys = color.split('.') - // @ts-expect-error: native base color literal - const colorToReturn = number ? colors[main][number] : colors[main] + const colorToReturn = getPropertyByKeys(colors, keys) return colorToReturn || color } + +interface NestedObject { + [key: string]: NestedObject | number | string | boolean +} + +function getPropertyByKeys(obj: T, keys: string[]): string { + // eslint-disable-next-line @typescript-eslint/ban-ts-comment + // @ts-expect-error, hopefully the following will return color as string + return keys.reduce((acc, key) => acc && acc[key], obj) +}