@lnpg/pkgn-sol 1.0.0-beta.0

package/src/scss/tokens/_colours.scss

@@ -0,0 +1,707 @@
+/**
+ * pkgn-sol Design Foundation: Colour Tokens
+ *
+ * Primitive (brand-locked) colour tokens for pkgn-sol.
+ *
+ * These values are the lowest-level palette primitives and ramps. They are
+ * intentionally immutable to enforce consistent branding across consuming
+ * applications. Override points, where permitted, belong in the semantic
+ * token layer (for example: primary/secondary/status colours).
+ *
+ * This file is intentionally data-only:
+ * - No selectors
+ * - No functions
+ * - No mixins
+ * - No side effects
+ *
+ * @module
+ * @group  tokens.colours
+ * @access public
+ * @since  0.1.0
+ * @author LNPG Development Team
+ */
+
+/* --------------------------------------------------------------------------
+ - Neutral
+ ------------------------------------------------------------------------- */
+
+/** @type color */
+$white: #fff;
+
+/** @type color */
+$base-grey: #adb5bd;
+
+/** @type color */
+$black: #000;
+
+/* --------------------------------------------------------------------------
+ - Base hues (canonical primitives)
+ ------------------------------------------------------------------------- */
+
+/** @type color */
+$base-blue: #4d80b4;
+
+/** @type color */
+$base-indigo: #162e46;
+
+/** @type color */
+$base-purple: #c15e89;
+
+/** @type color */
+$base-pink: #ec89b7;
+
+/** @type color */
+$base-red: #dd0a54;
+
+/** @type color */
+$base-orange: #da886b;
+
+/** @type color */
+$base-yellow: #ffcf8b;
+
+/** @type color */
+$base-green: #137647;
+
+/** @type color */
+$base-teal: #5ec095;
+
+/** @type color */
+$base-cyan: #6bbcda;
+
+/* --------------------------------------------------------------------------
+ - Grey ramp
+ ------------------------------------------------------------------------- */
+
+/** @type color */
+$grey-tint-90: #fbfcfc;
+
+/** @type color */
+$grey-tint-80: #f8f9fa;
+
+/** @type color */
+$grey-tint-70: #f3f4f6;
+
+/** @type color */
+$grey-tint-60: #e9ecef;
+
+/** @type color */
+$grey-tint-50: #e3e5e8;
+
+/** @type color */
+$grey-tint-40: #dee2e6;
+
+/** @type color */
+$grey-tint-30: #d6dadd;
+
+/** @type color */
+$grey-tint-20: #ced4da;
+
+/** @type color */
+$grey-tint-10: #c5cbd1;
+
+/** @type color */
+$grey-shade-10: #7f8890;
+
+/** @type color */
+$grey-shade-20: #6c757d;
+
+/** @type color */
+$grey-shade-30: #60686f;
+
+/** @type color */
+$grey-shade-40: #495057;
+
+/** @type color */
+$grey-shade-50: #3d4349;
+
+/** @type color */
+$grey-shade-60: #343a40;
+
+/** @type color */
+$grey-shade-70: #2a2e33;
+
+/** @type color */
+$grey-shade-80: #212529;
+
+/** @type color */
+$grey-shade-90: #181b1e;
+
+/* --------------------------------------------------------------------------
+ - Blue ramp
+ ------------------------------------------------------------------------- */
+
+/** @type color */
+$blue-tint-90: #edf2f8;
+
+/** @type color */
+$blue-tint-80: #dbe6f0;
+
+/** @type color */
+$blue-tint-70: #cad9e8;
+
+/** @type color */
+$blue-tint-60: #b8cce1;
+
+/** @type color */
+$blue-tint-50: #a6c0da;
+
+/** @type color */
+$blue-tint-40: #94b3d2;
+
+/** @type color */
+$blue-tint-30: #82a6ca;
+
+/** @type color */
+$blue-tint-20: #7199c3;
+
+/** @type color */
+$blue-tint-10: #5f8dbc;
+
+/** @type color */
+$blue-shade-10: #4573a2;
+
+/** @type color */
+$blue-shade-20: #3e6690;
+
+/** @type color */
+$blue-shade-30: #365a7e;
+
+/** @type color */
+$blue-shade-40: #2e4d6c;
+
+/** @type color */
+$blue-shade-50: #26405a;
+
+/** @type color */
+$blue-shade-60: #1f3348;
+
+/** @type color */
+$blue-shade-70: #172636;
+
+/** @type color */
+$blue-shade-80: #0f1a24;
+
+/** @type color */
+$blue-shade-90: #080d12;
+
+/* --------------------------------------------------------------------------
+ - Indigo ramp
+ ------------------------------------------------------------------------- */
+
+/** @type color */
+$indigo-tint-90: #e7eaec;
+
+/** @type color */
+$indigo-tint-80: #d0d5da;
+
+/** @type color */
+$indigo-tint-70: #b9c0c7;
+
+/** @type color */
+$indigo-tint-60: #a1abb5;
+
+/** @type color */
+$indigo-tint-50: #8a96a2;
+
+/** @type color */
+$indigo-tint-40: #738190;
+
+/** @type color */
+$indigo-tint-30: #5b6c7d;
+
+/** @type color */
+$indigo-tint-20: #44576b;
+
+/** @type color */
+$indigo-tint-10: #2d4258;
+
+/** @type color */
+$indigo-shade-10: #13293f;
+
+/** @type color */
+$indigo-shade-20: #112438;
+
+/** @type color */
+$indigo-shade-30: #0f2031;
+
+/** @type color */
+$indigo-shade-40: #0d1b2a;
+
+/** @type color */
+$indigo-shade-50: #0b1723;
+
+/** @type color */
+$indigo-shade-60: #08121c;
+
+/** @type color */
+$indigo-shade-70: #060d15;
+
+/** @type color */
+$indigo-shade-80: #04090d;
+
+/** @type color */
+$indigo-shade-90: #020406;
+
+/* --------------------------------------------------------------------------
+ - Purple ramp
+ ------------------------------------------------------------------------- */
+
+/** @type color */
+$purple-tint-90: #f8eef3;
+
+/** @type color */
+$purple-tint-80: #f2dee7;
+
+/** @type color */
+$purple-tint-70: #eccedb;
+
+/** @type color */
+$purple-tint-60: #e6becf;
+
+/** @type color */
+$purple-tint-50: #e0aec4;
+
+/** @type color */
+$purple-tint-40: #d99eb8;
+
+/** @type color */
+$purple-tint-30: #d38eac;
+
+/** @type color */
+$purple-tint-20: #cd7ea0;
+
+/** @type color */
+$purple-tint-10: #c76e94;
+
+/** @type color */
+$purple-shade-10: #ad547b;
+
+/** @type color */
+$purple-shade-20: #9a4b6d;
+
+/** @type color */
+$purple-shade-30: #87415f;
+
+/** @type color */
+$purple-shade-40: #733852;
+
+/** @type color */
+$purple-shade-50: #602f44;
+
+/** @type color */
+$purple-shade-60: #4d2536;
+
+/** @type color */
+$purple-shade-70: #391c29;
+
+/** @type color */
+$purple-shade-80: #26121b;
+
+/** @type color */
+$purple-shade-90: #13090d;
+
+/* --------------------------------------------------------------------------
+ - Pink ramp
+ ------------------------------------------------------------------------- */
+
+/** @type color */
+$pink-tint-90: #fdf3f7;
+
+/** @type color */
+$pink-tint-80: #fbe7f0;
+
+/** @type color */
+$pink-tint-70: #f9dbe9;
+
+/** @type color */
+$pink-tint-60: #f7cfe2;
+
+/** @type color */
+$pink-tint-50: #f5c4db;
+
+/** @type color */
+$pink-tint-40: #f3b8d3;
+
+/** @type color */
+$pink-tint-30: #f1accc;
+
+/** @type color */
+$pink-tint-20: #efa0c5;
+
+/** @type color */
+$pink-tint-10: #ed94be;
+
+/** @type color */
+$pink-shade-10: #d47ba4;
+
+/** @type color */
+$pink-shade-20: #bc6d92;
+
+/** @type color */
+$pink-shade-30: #a55f80;
+
+/** @type color */
+$pink-shade-40: #8d526d;
+
+/** @type color */
+$pink-shade-50: #76445b;
+
+/** @type color */
+$pink-shade-60: #5e3649;
+
+/** @type color */
+$pink-shade-70: #462936;
+
+/** @type color */
+$pink-shade-80: #2f1b24;
+
+/** @type color */
+$pink-shade-90: #170d12;
+
+/* --------------------------------------------------------------------------
+ - Red ramp
+ ------------------------------------------------------------------------- */
+
+/** @type color */
+$red-tint-90: #fbe6ed;
+
+/** @type color */
+$red-tint-80: #f8cedc;
+
+/** @type color */
+$red-tint-70: #f4b5cb;
+
+/** @type color */
+$red-tint-60: #f19dba;
+
+/** @type color */
+$red-tint-50: #ee84a9;
+
+/** @type color */
+$red-tint-40: #ea6c98;
+
+/** @type color */
+$red-tint-30: #e75387;
+
+/** @type color */
+$red-tint-20: #e33b76;
+
+/** @type color */
+$red-tint-10: #e02265;
+
+/** @type color */
+$red-shade-10: #c6094b;
+
+/** @type color */
+$red-shade-20: #b00843;
+
+/** @type color */
+$red-shade-30: #9a073a;
+
+/** @type color */
+$red-shade-40: #840632;
+
+/** @type color */
+$red-shade-50: #6e052a;
+
+/** @type color */
+$red-shade-60: #580421;
+
+/** @type color */
+$red-shade-70: #420319;
+
+/** @type color */
+$red-shade-80: #2c0110;
+
+/** @type color */
+$red-shade-90: #160008;
+
+/* --------------------------------------------------------------------------
+ - Orange ramp
+ ------------------------------------------------------------------------- */
+
+/** @type color */
+$orange-tint-90: #f8ece8;
+
+/** @type color */
+$orange-tint-80: #f3ded6;
+
+/** @type color */
+$orange-tint-70: #eed0c5;
+
+/** @type color */
+$orange-tint-60: #e9c2b3;
+
+/** @type color */
+$orange-tint-50: #e5b4a1;
+
+/** @type color */
+$orange-tint-40: #e0a68f;
+
+/** @type color */
+$orange-tint-30: #db987e;
+
+/** @type color */
+$orange-tint-20: #e09272;
+
+/** @type color */
+$orange-tint-10: #d68a6c;
+
+/** @type color */
+$orange-shade-10: #c37a60;
+
+/** @type color */
+$orange-shade-20: #ac6c56;
+
+/** @type color */
+$orange-shade-30: #955e4b;
+
+/** @type color */
+$orange-shade-40: #7e5040;
+
+/** @type color */
+$orange-shade-50: #684336;
+
+/** @type color */
+$orange-shade-60: #51352b;
+
+/** @type color */
+$orange-shade-70: #3a2720;
+
+/** @type color */
+$orange-shade-80: #231915;
+
+/** @type color */
+$orange-shade-90: #0d0c0b;
+
+/* --------------------------------------------------------------------------
+ - Yellow ramp
+ ------------------------------------------------------------------------- */
+
+/** @type color */
+$yellow-tint-90: #fffaf3;
+
+/** @type color */
+$yellow-tint-80: #fff5e7;
+
+/** @type color */
+$yellow-tint-70: #fff0dc;
+
+/** @type color */
+$yellow-tint-60: #ffebd0;
+
+/** @type color */
+$yellow-tint-50: #ffe7c5;
+
+/** @type color */
+$yellow-tint-40: #ffe2b9;
+
+/** @type color */
+$yellow-tint-30: #ffddad;
+
+/** @type color */
+$yellow-tint-20: #ffd8a2;
+
+/** @type color */
+$yellow-tint-10: #ffd396;
+
+/** @type color */
+$yellow-shade-10: #e5ba7d;
+
+/** @type color */
+$yellow-shade-20: #cca56f;
+
+/** @type color */
+$yellow-shade-30: #b29061;
+
+/** @type color */
+$yellow-shade-40: #997c53;
+
+/** @type color */
+$yellow-shade-50: #7f6745;
+
+/** @type color */
+$yellow-shade-60: #665237;
+
+/** @type color */
+$yellow-shade-70: #4c3e29;
+
+/** @type color */
+$yellow-shade-80: #32291b;
+
+/** @type color */
+$yellow-shade-90: #19140d;
+
+/* --------------------------------------------------------------------------
+ - Green ramp
+ ------------------------------------------------------------------------- */
+
+/** @type color */
+$green-tint-90: #e7f1ec;
+
+/** @type color */
+$green-tint-80: #cfe3da;
+
+/** @type color */
+$green-tint-70: #b8d5c7;
+
+/** @type color */
+$green-tint-60: #a0c8b5;
+
+/** @type color */
+$green-tint-50: #89baa3;
+
+/** @type color */
+$green-tint-40: #71ac90;
+
+/** @type color */
+$green-tint-30: #599f7e;
+
+/** @type color */
+$green-tint-20: #42916b;
+
+/** @type color */
+$green-tint-10: #2a8359;
+
+/** @type color */
+$green-shade-10: #116a3f;
+
+/** @type color */
+$green-shade-20: #0f5e38;
+
+/** @type color */
+$green-shade-30: #0d5231;
+
+/** @type color */
+$green-shade-40: #0b462a;
+
+/** @type color */
+$green-shade-50: #093b23;
+
+/** @type color */
+$green-shade-60: #072f1c;
+
+/** @type color */
+$green-shade-70: #052315;
+
+/** @type color */
+$green-shade-80: #03170e;
+
+/** @type color */
+$green-shade-90: #010b07;
+
+/* --------------------------------------------------------------------------
+ - Teal ramp
+ ------------------------------------------------------------------------- */
+
+/** @type color */
+$teal-tint-90: #eef8f4;
+
+/** @type color */
+$teal-tint-80: #def2e9;
+
+/** @type color */
+$teal-tint-70: #ceecdf;
+
+/** @type color */
+$teal-tint-60: #bee5d4;
+
+/** @type color */
+$teal-tint-50: #aedfca;
+
+/** @type color */
+$teal-tint-40: #9ed9bf;
+
+/** @type color */
+$teal-tint-30: #8ed2b4;
+
+/** @type color */
+$teal-tint-20: #7eccaa;
+
+/** @type color */
+$teal-tint-10: #6ec69f;
+
+/** @type color */
+$teal-shade-10: #54ac86;
+
+/** @type color */
+$teal-shade-20: #4b9977;
+
+/** @type color */
+$teal-shade-30: #418668;
+
+/** @type color */
+$teal-shade-40: #387359;
+
+/** @type color */
+$teal-shade-50: #2f604a;
+
+/** @type color */
+$teal-shade-60: #254c3b;
+
+/** @type color */
+$teal-shade-70: #1c392c;
+
+/** @type color */
+$teal-shade-80: #12261d;
+
+/** @type color */
+$teal-shade-90: #09130e;
+
+/* --------------------------------------------------------------------------
+ - Cyan ramp
+ ------------------------------------------------------------------------- */
+
+/** @type color */
+$cyan-tint-90: #f0f8fb;
+
+/** @type color */
+$cyan-tint-80: #e1f1f7;
+
+/** @type color */
+$cyan-tint-70: #d2eaf3;
+
+/** @type color */
+$cyan-tint-60: #c3e4f0;
+
+/** @type color */
+$cyan-tint-50: #b5ddec;
+
+/** @type color */
+$cyan-tint-40: #a6d6e8;
+
+/** @type color */
+$cyan-tint-30: #97d0e5;
+
+/** @type color */
+$cyan-tint-20: #88c9e1;
+
+/** @type color */
+$cyan-tint-10: #79c2dd;
+
+/** @type color */
+$cyan-shade-10: #60a9c4;
+
+/** @type color */
+$cyan-shade-20: #5596ae;
+
+/** @type color */
+$cyan-shade-30: #4a8398;
+
+/** @type color */
+$cyan-shade-40: #407082;
+
+/** @type color */
+$cyan-shade-50: #355e6d;
+
+/** @type color */
+$cyan-shade-60: #2a4b57;
+
+/** @type color */
+$cyan-shade-70: #203841;
+
+/** @type color */
+$cyan-shade-80: #15252b;
+
+/** @type color */
+$cyan-shade-90: #0a1215;