/* ========================================================================= POS Register — tokens.css The single source of truth for the Register theme. Everything else (base.css, components.css, layout.css, scoped .razor.css) reads these. Values are copied verbatim from the pre-refactor CSS, so adopting these tokens is a visual no-op. A future theme = override these variables under :root[data-theme="x"] (see the commented example at the bottom). Naming: --pos-* | Do NOT hardcode colors/sizes outside this file. The RMS Admin loads this file too, so that it follows the same colour scheme: Kensium.RMS.AdminTheme links it in and maps its own tokens onto these in admin-scheme-bridge.css. The "Admin site" tokens are for it. ========================================================================= */ :root { /* ---- Typography ---------------------------------------------------- */ --pos-font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; /* ---- Surfaces / chrome -------------------------------------------- */ --pos-canvas: #223444; /* main content + sidebar background */ --pos-chrome: #1B2937; /* header, bottom-actions, dark buttons */ --pos-chrome-2: #334E66; /* scan / secondary button backgrounds */ --pos-chrome-2-hover: rgba(51, 78, 102, 0.5); --pos-chrome-2-70: rgba(51, 78, 102, 0.7); --pos-surface: #ffffff; /* cards, sales list, inputs */ --pos-surface-muted: #f8f9fa; /* table row hover */ --pos-surface-header: #e6e6e6; /* table header row */ --pos-surface-accent: #436689; /* totals section */ --pos-row-discount: #e8f4fd; /* discounted item row */ --pos-row-selected: #dde6ee; /* selected item row */ /* ---- Text ---------------------------------------------------------- */ /* Two families for text on a coloured background, which a light colour scheme pulls apart: -on-chrome sits on the chrome and canvas (dark in the standard scheme, white in Daylight); -on-dark sits on a saturated fill (brand, danger, the summary band) and stays white in every scheme. */ --pos-text: #0d0d0d; /* primary text on light */ --pos-text-on-dark: #ffffff; /* text on brand / danger / accent fills */ --pos-text-on-chrome: #ffffff; /* text on chrome / canvas */ --pos-text-muted: #6c757d; /* placeholders, search icon */ --pos-text-muted-on-chrome: #e0e0e0; /* time / labels on chrome */ --pos-text-subtle: #7f8c8d; /* empty-cart text */ --pos-text-cancel: #616161; /* cancel button label */ /* ---- Borders ------------------------------------------------------- */ --pos-border: #bdc3c7; /* table container, scrollbar thumb */ --pos-border-light: #e1e5e9; /* search box */ --pos-border-input: #d2d2d2; /* text inputs */ --pos-border-muted: #ccc; /* customer-action button */ --pos-border-check: #929292; /* checkbox */ /* ---- Brand / primary (green) -------------------------------------- */ --pos-primary: #4D9078; /* == rgba(77,144,120,1) */ --pos-primary-hover: rgba(77, 144, 120, 0.75); --pos-primary-disabled: rgba(77, 144, 120, 0.5); --pos-primary-soft: rgba(77, 144, 120, 0.1); --pos-primary-border: #47856f; /* ---- State: success / danger / validation ------------------------- */ --pos-success: #27ae60; --pos-success-alt: #2ecc71; --pos-valid: #26b050; --pos-danger: #e74c3c; --pos-danger-border: #BF5A64; --pos-danger-strong: #c0392b; --pos-danger-soft: rgba(248, 68, 86, 0.08); --pos-invalid: #e50000; /* ---- Accent: amber ------------------------------------------------- */ --pos-amber: #DF9F20; --pos-amber-dark: #B87D18; /* warning accent/border — the amber counterpart to --pos-danger-strong */ --pos-amber-soft: rgba(223, 159, 32, 0.08); --pos-amber-soft-hover: rgba(223, 159, 32, 0.05); /* ---- Accent: blue / links / focus --------------------------------- */ --pos-blue: #7699bc; --pos-blue-icon: #3498db; --pos-blue-soft: rgba(34, 51, 68, 0.2); --pos-selected: #1976d2; /* grid focus outline, MudGrid selection */ --pos-selected-hover: #1565c0; --pos-link: #006bb7; --pos-focus-ring: #258cfb; --pos-focus-outline: var(--pos-selected); /* keyboard focus outline (2px) */ /* ---- Overlays / misc ---------------------------------------------- */ --pos-overlay-light: rgba(255, 255, 255, 0.1); --pos-overlay-light-2: rgba(255, 255, 255, 0.2); --pos-fill-muted: rgba(242, 242, 242, 0.6); --pos-scroll-track: #ecf0f1; --pos-scroll-thumb-hover: #95a5a6; /* ---- Spacing scale ------------------------------------------------- */ /* Applied to padding / margin / gap across all files. Values that were within 1px of a step were snapped to it (3,5→4 7→8 13→12 15,17→16 22→20 25→24); genuinely off-scale sizes (18, 26, 28, 30, 34, 36, 42, 44, 46, 50, 55, 56, 80, 100) and 1px hairlines stay literal on purpose — snapping those would have moved layouts, not just tidied them. */ --pos-space-1: 2px; --pos-space-2: 4px; --pos-space-3: 6px; --pos-space-4: 8px; --pos-space-5: 10px; --pos-space-6: 12px; --pos-space-7: 14px; --pos-space-8: 16px; --pos-space-9: 20px; --pos-space-10: 24px; --pos-space-11: 32px; --pos-space-12: 40px; --pos-space-13: 48px; /* ---- Radius -------------------------------------------------------- */ --pos-radius-sm: 3px; --pos-radius: 4px; /* default */ --pos-radius-md: 6px; --pos-radius-lg: 8px; --pos-radius-xl: 12px; /* ---- Font size ----------------------------------------------------- */ --pos-font-2xs: 9px; --pos-font-xs: 10px; --pos-font-sm: 11px; --pos-font-base: 12px; /* workhorse */ --pos-font-md: 13px; --pos-font-lg: 14px; --pos-font-xl: 16px; --pos-font-2xl: 18px; --pos-font-3xl: 20px; /* ---- Touch --------------------------------------------------------- */ /* Minimum hit area for a control on a touch screen (WCAG 2.5.5 / Apple HIG). Applied only under @media (pointer: coarse) — see README "Responsive"; defined at :root so layout math can reserve the space. */ --pos-touch-target: 44px; /* ---- Font weight --------------------------------------------------- */ --pos-weight-normal: 400; --pos-weight-medium: 500; --pos-weight-semibold: 600; --pos-weight-bold: 700; --pos-weight-extrabold: 800; /* ---- Shadow -------------------------------------------------------- */ --pos-shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.1); --pos-shadow-md: 0 4px 12px rgba(0, 0, 0, 0.3); /* ---- z-index ------------------------------------------------------- */ --pos-z-raised: 2; --pos-z-sticky: 10; --pos-z-overlay: 1000; /* ---- Transition ---------------------------------------------------- */ --pos-transition: all 0.2s ease; --pos-transition-color: color 0.2s ease; --pos-transition-bg: background-color 0.2s ease; --pos-transition-slow: all 0.3s ease; /* ---- Completeness -------------------------------------------------- */ /* One-off values found while migrating app.css / ProcessSales that were not in the initial catalog. Exact values, kept so the common files carry no raw literals. Candidates for consolidation later. */ --pos-text-black: #000; /* distinct from --pos-text (#0d0d0d) */ --pos-btn-label-light: #f4f5f7; /* button label on dark chrome */ --pos-btn-label-soft: #efefef; /* sidebar-secondary label */ --pos-fill-light: #f2f2f2; /* light border/fill */ --pos-border-cancel: #ADADAD; /* cancel button border */ --pos-chrome-alt-hover: rgba(46, 71, 92, 0.5); /* sidebar-secondary hover */ --pos-danger-2: #dc2626; /* refund-mode red */ /* ---- Extended semantic palette ------------------------------------- */ /* Added for the register-family page/dialog rollout. The many one-off greens/greys/blues/reds those files used are consolidated onto these semantic families (nearest-match), not minted as one-off tokens. */ /* Neutral ramp (greys) */ --pos-neutral-50: #f9fafb; --pos-neutral-100: #f3f4f6; --pos-neutral-200: #e5e7eb; --pos-neutral-300: #d1d5db; --pos-neutral-400: #9ca3af; --pos-neutral-500: #6b7280; --pos-neutral-600: #4b5563; --pos-neutral-700: #374151; --pos-neutral-800: #1f2937; --pos-neutral-900: #101921; /* Green (brand) tints/shades */ --pos-primary-light: #5f9b85; --pos-primary-dark: #3d6757; --pos-primary-bg: #e6f7f3; /* pale green surface */ /* Success (bright green) */ --pos-success-strong: #15803d; --pos-success-bg: #f0fdf4; /* Blue / info */ --pos-info: #2196f3; --pos-blue-light: #8eadcf; --pos-blue-bg: #e6f3ff; /* Red / danger */ --pos-danger-light: #d06673; --pos-danger-bg: #fef2f2; /* Amber */ --pos-amber-strong: #fbbf24; --pos-amber-bg: #fff3e0; /* Chrome (darker end) */ --pos-chrome-dark: #101921; /* Black scrims (shadows / borders / hovers) */ --pos-scrim-03: rgba(0, 0, 0, 0.03); --pos-scrim-05: rgba(0, 0, 0, 0.05); --pos-scrim-10: rgba(0, 0, 0, 0.1); --pos-scrim-15: rgba(0, 0, 0, 0.15); --pos-scrim-20: rgba(0, 0, 0, 0.2); --pos-scrim-25: rgba(0, 0, 0, 0.25); /* Shadows (elevation) */ --pos-shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.15); /* Chrome / white translucents (modal backdrop, high-opacity labels) */ --pos-chrome-overlay: rgba(27, 41, 55, 0.85); /* modal backdrop */ --pos-overlay-light-50: rgba(255, 255, 255, 0.5); --pos-overlay-light-72: rgba(255, 255, 255, 0.72); /* Inline SVG icons (see "Inline SVG icon colours" in components.css). The icons draw in currentColor; these pick the colour per button family. */ --pos-icon-success: #4D9078; /* green function keys */ --pos-icon-warning: #DF9F20; /* amber function keys, Help */ --pos-icon-danger: #F84456; /* red function keys, Logout */ --pos-icon-info: #7699BC; /* blue function keys, Save/Recall Quote */ --pos-icon-on-light: #101921; /* customer action buttons */ --pos-icon-outline: #212421; /* thin outline on a few key icons */ /* Coloured text (amounts, chips, warnings) on a light surface. Kept apart from the fills they default to (a hover background, a refund banner), because a dark scheme needs the text lighter but the fill still dark. */ --pos-primary-text: var(--pos-primary-dark); --pos-danger-text: var(--pos-danger-strong); --pos-success-text: var(--pos-success-strong); /* Function keys (the bottom action grid), per colour family. Colours only: key size, corners and border width are fixed in components.css and identical in every scheme. The defaults follow the scheme's brand and state colours; a scheme overrides them for a different fill style. */ --pos-key-green-bg: var(--pos-primary-soft); --pos-key-green-border: var(--pos-primary-border); --pos-key-green-text: var(--pos-text-on-chrome); --pos-key-green-icon: var(--pos-icon-success); --pos-key-amber-bg: var(--pos-amber-soft); --pos-key-amber-border: var(--pos-amber); --pos-key-amber-text: var(--pos-text-on-chrome); --pos-key-amber-icon: var(--pos-icon-warning); --pos-key-red-bg: var(--pos-danger-soft); --pos-key-red-border: var(--pos-danger-border); --pos-key-red-text: var(--pos-text-on-chrome); --pos-key-red-icon: var(--pos-icon-danger); --pos-key-blue-bg: var(--pos-blue-soft); --pos-key-blue-border: var(--pos-blue); --pos-key-blue-text: var(--pos-text-on-chrome); --pos-key-blue-icon: var(--pos-icon-info); /* MudBlazor icon buttons, select arrows and disabled controls. These are Mud's own defaults, bridged in app.css so a dark scheme can lift them. */ --pos-action-icon: rgba(0, 0, 0, 0.54); --pos-action-disabled: rgba(0, 0, 0, 0.26); --pos-action-disabled-bg: rgba(0, 0, 0, 0.12); /* Logos. The packaged Kensium logo on the chrome comes in a white and a dark version; these pick the one that shows (a scheme with a light chrome swaps them). A configured company logo sits on its own card, in the chrome colour: the RMS Admin shows the same logo on its dark sidebar, so it is drawn for dark (white lettering, say). A scheme with a light chrome keeps the standard chrome colour for it, as the Admin does. A logo the RMS Branding screen found drawn for light, or one saved before it looked, takes the light card. */ --pos-logo-white-display: inline; --pos-logo-dark-display: none; --pos-logo-card-bg: var(--pos-chrome); --pos-logo-card-light-bg: #ffffff; /* a logo drawn for light (black lettering) */ /* Edge drawn around every dialog. Invisible by default: on a light surface the drop shadow already separates a dialog from the screen behind it. A dark scheme sets it, as a shadow is lost on dark. */ --pos-dialog-outline: transparent; /* ---- Admin site ---------------------------------------------------- */ /* Used only by the RMS Admin. Its page sits behind white cards and forms, which the Register's work area (--pos-canvas, dark in most schemes) cannot stand in for; and a dark scheme needs its table stripes light. */ --pos-page-bg: #EFEFEF; --pos-row-stripe: rgba(0, 0, 0, 0.05); /* ---- RGB triples --------------------------------------------------- */ /* Bare "r, g, b" components for the brand/state colors, for consumers that need to compose their own alpha: rgba(var(--pos-primary-rgb), .3). CSS cannot derive these from the hex above, so they are duplicated — if you change the hex, change the triple on the same line. Consumed by the MudBlazor palette bridge in app.css (Mud builds its ripple and overlay colors from --mud-palette-*-rgb). */ --pos-primary-rgb: 77, 144, 120; /* --pos-primary #4D9078 */ --pos-canvas-rgb: 34, 52, 68; /* --pos-canvas #223444 */ --pos-selected-rgb: 25, 118, 210; /* --pos-selected #1976d2 */ --pos-success-rgb: 39, 174, 96; /* --pos-success #27ae60 */ --pos-danger-rgb: 231, 76, 60; /* --pos-danger #e74c3c */ --pos-amber-rgb: 223, 159, 32; /* --pos-amber #DF9F20 */ --pos-info-rgb: 33, 150, 243; /* --pos-info #2196f3 */ } /* ---- Touch type scale --------------------------------------------------- A finger-driven screen is read from further away and the 12px workhorse is too small to tap accurately, so the whole scale steps up 2px when the PRIMARY pointer is coarse. Keyed on the pointer, never on width — a desktop window narrowed to tablet size keeps the desktop scale, and a mouse-driven 1366px terminal is unaffected. */ @media (pointer: coarse) { :root { --pos-font-2xs: 11px; --pos-font-xs: 12px; --pos-font-sm: 13px; --pos-font-base: 14px; --pos-font-md: 15px; --pos-font-lg: 16px; --pos-font-xl: 18px; --pos-font-2xl: 20px; --pos-font-3xl: 22px; } } /* ========================================================================= Color schemes The organization picks one on the RMS Branding screen (ColorScheme in Kensium.POS.Abstractions). ColorSchemeService sets its lower-cased name as data-theme on ; the standard scheme is the :root block above and sets no attribute. A scheme lists only the tokens it changes, and changes colours only: sizes, spacing and button shapes are the same in every scheme. Every scheme keeps the function-key colour families (green, amber, blue, red) so clerks who know the keys do not have to relearn them. When you change a hex that has an -rgb triple, change the triple too. The Custom scheme has no block here: its colours are the organization's own, uploaded on the RMS Branding screen, and are injected at run time as a :root[data-theme="custom"] rule (see kensiumSetColorScheme in index.html). The server builds that rule from the colour tokens in the :root block above (CustomColorSchemeSanitizer in Kensium.POS.Core reads this file), so a new colour token there can be set by a custom scheme straight away. Its -rgb triples are worked out by the server, so they need nothing extra. ========================================================================= */ /* ---- Daylight: light chrome and work area, for bright stores ----------- */ :root[data-theme="daylight"] { --pos-canvas: #E4E9EE; --pos-chrome: #FFFFFF; --pos-chrome-2: #EEF2F6; --pos-chrome-2-hover: rgba(22, 33, 44, 0.08); --pos-chrome-2-70: #FFFFFF; --pos-chrome-alt-hover: #F1F5F8; --pos-chrome-overlay: rgba(22, 33, 44, 0.45); --pos-surface-accent: #2F5D50; --pos-row-discount: #EAF5EF; --pos-row-selected: #D6E7F5; --pos-text: #16212C; --pos-text-black: #16212C; --pos-text-on-chrome: #16212C; --pos-text-muted: #5F6C78; --pos-text-muted-on-chrome: #5F6C78; --pos-btn-label-light: #16212C; --pos-btn-label-soft: #16212C; --pos-logo-white-display: none; --pos-logo-dark-display: inline; --pos-logo-card-bg: #1B2937; --pos-border: #C8D1DA; --pos-border-light: #DCE3E9; --pos-fill-muted: #F6F8FA; --pos-overlay-light: rgba(22, 33, 44, 0.05); --pos-overlay-light-2: rgba(22, 33, 44, 0.09); --pos-primary: #1E7A5A; --pos-primary-hover: rgba(30, 122, 90, 0.85); --pos-primary-disabled: rgba(30, 122, 90, 0.45); --pos-primary-soft: rgba(30, 122, 90, 0.08); --pos-primary-border: #1B6B50; --pos-primary-light: #3F9174; --pos-primary-dark: #155440; --pos-primary-bg: #E8F4EE; --pos-blue: #2F6EA8; --pos-blue-soft: rgba(47, 110, 168, 0.08); --pos-amber-soft: rgba(183, 121, 31, 0.08); --pos-danger-soft: rgba(200, 55, 45, 0.06); --pos-icon-success: #1E7A5A; --pos-icon-warning: #B7791F; --pos-icon-danger: #C8372D; --pos-icon-info: #2F6EA8; --pos-icon-on-light: #16212C; --pos-icon-outline: #16212C; /* Function keys: pale tinted tiles with a family-coloured outline. */ --pos-key-green-bg: #EEF7F2; --pos-key-green-border: #9FCDB6; --pos-key-amber-bg: #FDF6E7; --pos-key-amber-border: #E5C27A; --pos-key-red-bg: #FCEFEE; --pos-key-red-border: #E3A29C; --pos-key-blue-bg: #EDF3FA; --pos-key-blue-border: #A8C3E0; --pos-page-bg: #E4E9EE; --pos-primary-rgb: 30, 122, 90; --pos-canvas-rgb: 228, 233, 238; } /* ---- Graphite: charcoal throughout, for low-light venues --------------- */ :root[data-theme="graphite"] { --pos-canvas: #191C20; --pos-chrome: #0F1114; --pos-chrome-2: #262A30; --pos-chrome-2-hover: rgba(38, 42, 48, 0.6); --pos-chrome-2-70: #23272C; --pos-chrome-alt-hover: #2C3137; --pos-chrome-dark: #0A0C0E; --pos-chrome-overlay: rgba(10, 12, 14, 0.85); --pos-surface: #22262B; --pos-surface-muted: #2A2F35; --pos-surface-header: #2E333A; --pos-surface-accent: #2E3A46; --pos-row-discount: #1F3A2F; --pos-row-selected: #2A4766; --pos-text: #E9EDF1; --pos-text-black: #E9EDF1; --pos-text-on-chrome: #F4F6F8; --pos-text-muted: #9AA4AE; --pos-text-muted-on-chrome: #A7B0B9; --pos-text-subtle: #8C97A2; --pos-text-cancel: #C5CDD5; --pos-btn-label-light: #E9EDF1; --pos-btn-label-soft: #E9EDF1; --pos-border: #3A4048; --pos-border-light: #3A4048; --pos-border-input: #4A515A; --pos-border-muted: #4A515A; --pos-border-cancel: #4A515A; --pos-border-check: #6B7480; --pos-fill-muted: #2A2F35; --pos-fill-light: #2E333A; --pos-scroll-track: #22262B; --pos-scroll-thumb-hover: #6B7480; /* The neutral ramp runs the other way on a dark scheme: low steps are backgrounds, high steps are text. */ --pos-neutral-50: #1D2125; --pos-neutral-100: #22262B; --pos-neutral-200: #2E333A; --pos-neutral-300: #3A4048; --pos-neutral-400: #5D6670; --pos-neutral-500: #8A949E; --pos-neutral-600: #A7B0B9; --pos-neutral-700: #C5CDD5; --pos-neutral-800: #DDE2E7; --pos-neutral-900: #F0F3F6; --pos-primary: #23805A; --pos-primary-hover: rgba(35, 128, 90, 0.85); --pos-primary-disabled: rgba(35, 128, 90, 0.45); --pos-primary-soft: rgba(46, 154, 110, 0.14); --pos-primary-border: #2E9A6E; --pos-primary-light: #3FB68B; --pos-primary-dark: #1C6B4B; --pos-primary-bg: #1A3328; --pos-success-bg: #14301F; --pos-blue: #5B8FD1; --pos-blue-soft: rgba(91, 143, 209, 0.12); --pos-blue-bg: #172738; --pos-danger-bg: #3A1A1A; --pos-amber-bg: #3A2C12; /* Text colours lifted for the dark surfaces (WCAG AA, 4.5:1). */ --pos-primary-text: #5FD0A0; --pos-danger-text: #FF8A80; --pos-success-text: #6EDC96; --pos-link: #7FB2E8; --pos-invalid: #FF6B6B; --pos-focus-outline: #7FB2E8; --pos-icon-success: #3FB68B; --pos-icon-warning: #E0A526; --pos-icon-danger: #F0645A; --pos-icon-info: #7FA7DC; --pos-icon-on-light: #E9EDF1; --pos-icon-outline: #0F1114; --pos-action-icon: rgba(255, 255, 255, 0.7); --pos-action-disabled: rgba(255, 255, 255, 0.3); --pos-action-disabled-bg: rgba(255, 255, 255, 0.12); --pos-dialog-outline: #4A515A; /* Function keys: solid family-coloured keys. Amber takes a dark label; white on amber is too low in contrast. */ --pos-key-green-bg: #237A5B; --pos-key-green-border: #237A5B; --pos-key-green-text: #FFFFFF; --pos-key-green-icon: #FFFFFF; --pos-key-amber-bg: #D49A20; --pos-key-amber-border: #D49A20; --pos-key-amber-text: #1A1406; --pos-key-amber-icon: #1A1406; --pos-key-red-bg: #B5392F; --pos-key-red-border: #B5392F; --pos-key-red-text: #FFFFFF; --pos-key-red-icon: #FFFFFF; --pos-key-blue-bg: #2F5E99; --pos-key-blue-border: #2F5E99; --pos-key-blue-text: #FFFFFF; --pos-key-blue-icon: #FFFFFF; --pos-page-bg: #191C20; --pos-row-stripe: rgba(255, 255, 255, 0.04); --pos-primary-rgb: 35, 128, 90; --pos-canvas-rgb: 25, 28, 32; } /* ---- Harbor: deep navy chrome with a teal brand colour ----------------- */ :root[data-theme="harbor"] { --pos-canvas: #1C3557; --pos-chrome: #11253F; --pos-chrome-2: #24456E; --pos-chrome-2-hover: rgba(36, 69, 110, 0.5); --pos-chrome-2-70: rgba(36, 69, 110, 0.7); --pos-chrome-alt-hover: rgba(36, 69, 110, 0.5); --pos-chrome-dark: #0B1A2E; --pos-chrome-overlay: rgba(17, 37, 63, 0.85); --pos-surface-muted: #F6F8FB; --pos-surface-header: #E9EEF5; --pos-surface-accent: #0E6E62; --pos-row-discount: #E6F5F2; --pos-row-selected: #DAE5F4; --pos-text: #14202E; --pos-text-muted: #5C6B7D; --pos-text-muted-on-chrome: #B8C6DA; --pos-border: #CBD5E1; --pos-border-light: #DDE4EE; --pos-primary: #0E8577; --pos-primary-hover: rgba(14, 133, 119, 0.8); --pos-primary-disabled: rgba(14, 133, 119, 0.45); --pos-primary-soft: rgba(14, 133, 119, 0.14); --pos-primary-border: #2E9C8F; --pos-primary-light: #2E9C8F; --pos-primary-dark: #0A5E54; --pos-primary-bg: #E3F4F1; --pos-blue: #7EA6E0; --pos-blue-soft: rgba(126, 166, 224, 0.14); --pos-icon-success: #2FC1AE; --pos-icon-warning: #F0B444; --pos-icon-danger: #FF7A70; --pos-icon-info: #9BBDF0; --pos-icon-outline: #0B1A2E; /* Function keys: pastel keys with the family colour in the label. */ --pos-key-green-bg: #DDF2EE; --pos-key-green-border: #DDF2EE; --pos-key-green-text: #0B5E55; --pos-key-green-icon: #0E8577; --pos-key-amber-bg: #FBEFD6; --pos-key-amber-border: #FBEFD6; --pos-key-amber-text: #6E4A06; --pos-key-amber-icon: #B9790E; --pos-key-red-bg: #FBE3E1; --pos-key-red-border: #FBE3E1; --pos-key-red-text: #8E2A22; --pos-key-red-icon: #D0453B; --pos-key-blue-bg: #DFE9F7; --pos-key-blue-border: #DFE9F7; --pos-key-blue-text: #24497F; --pos-key-blue-icon: #3E6FB5; --pos-page-bg: #EEF2F7; --pos-primary-rgb: 14, 133, 119; --pos-canvas-rgb: 28, 53, 87; }