:root { /*-- NEUTRAL -----------------------------------------------*/ /* neutral/cool/… */ --ciaColourNeutralCool0: rgba(255,255,255,1.00); --ciaColourNeutralCool50: rgba(247,249,251,1.00); --ciaColourNeutralCool100: rgba(235,238,241,1.00); --ciaColourNeutralCool200: rgba(218,224,230,1.00); --ciaColourNeutralCool300: rgba(196,206,215,1.00); --ciaColourNeutralCool400: rgba(166,181,195,1.00); --ciaColourNeutralCool500: rgba(131,144,156,1.00); --ciaColourNeutralCool600: rgba(106,116,126,1.00); --ciaColourNeutralCool700: rgba(80,88,96,1.00); --ciaColourNeutralCool800: rgba(55,61,67,1.00); --ciaColourNeutralCool900: rgba(33,37,40,1.00); --ciaColourNeutralCool950: rgba(24,27,30,1.00); --ciaColourNeutralCool1000: rgba(0,8,16,1.00); /* neutral/warm/… */ --ciaColourNeutralWarm0: rgba(255,255,255,1.00); --ciaColourNeutralWarm50: rgba(244,244,244,1.00); --ciaColourNeutralWarm100: rgba(228,228,228,1.00); --ciaColourNeutralWarm200: rgba(217,217,217,1.00); --ciaColourNeutralWarm300: rgba(187,187,187,1.00); --ciaColourNeutralWarm400: rgba(158,158,158,1.00); --ciaColourNeutralWarm500: rgba(130,130,130,1.00); --ciaColourNeutralWarm600: rgba(105,105,105,1.00); --ciaColourNeutralWarm700: rgba(82,82,82,1.00); --ciaColourNeutralWarm800: rgba(59,59,59,1.00); --ciaColourNeutralWarm900: rgba(38,38,38,1.00); --ciaColourNeutralWarm950: rgba(22,22,22,1.00); --ciaColourNeutralWarm1000: rgba(0,0,0,1.00); /*-- UTILITY -----------------------------------------------*/ /* utility/ai/… */ --ciaColourUtilityAi100: rgba(248,245,255,1.00); --ciaColourUtilityAi200: rgba(234,226,255,1.00); --ciaColourUtilityAi300: rgba(209,189,255,1.00); --ciaColourUtilityAi400: rgba(171,123,255,1.00); --ciaColourUtilityAi500: rgba(151,71,255,1.00); --ciaColourUtilityAi600: rgba(132,52,237,1.00); --ciaColourUtilityAi700: rgba(109,26,201,1.00); --ciaColourUtilityAi800: rgba(84,10,157,1.00); --ciaColourUtilityAi900: rgba(59,0,113,1.00); /* utility/blue/… */ --ciaColourUtilityBlue100: rgba(246,250,255,1.00); --ciaColourUtilityBlue200: rgba(228,239,255,1.00); --ciaColourUtilityBlue300: rgba(172,210,255,1.00); --ciaColourUtilityBlue400: rgba(100,183,255,1.00); --ciaColourUtilityBlue500: rgba(0,154,234,1.00); --ciaColourUtilityBlue600: rgba(4,113,175,1.00); --ciaColourUtilityBlue700: rgba(10,94,144,1.00); --ciaColourUtilityBlue800: rgba(7,68,105,1.00); --ciaColourUtilityBlue900: rgba(4,43,69,1.00); /* utility/green/… */ --ciaColourUtilityGreen100: rgba(241,252,245,1.00); --ciaColourUtilityGreen200: rgba(221,249,231,1.00); --ciaColourUtilityGreen300: rgba(147,231,183,1.00); --ciaColourUtilityGreen400: rgba(100,206,150,1.00); --ciaColourUtilityGreen500: rgba(44,166,109,1.00); --ciaColourUtilityGreen600: rgba(25,126,79,1.00); --ciaColourUtilityGreen700: rgba(19,102,64,1.00); --ciaColourUtilityGreen800: rgba(10,74,45,1.00); --ciaColourUtilityGreen900: rgba(3,47,27,1.00); /* utility/indigo/… */ --ciaColourUtilityIndigo100: rgba(245,246,253,1.00); --ciaColourUtilityIndigo200: rgba(225,229,249,1.00); --ciaColourUtilityIndigo300: rgba(188,197,243,1.00); --ciaColourUtilityIndigo400: rgba(149,165,236,1.00); --ciaColourUtilityIndigo500: rgba(108,134,229,1.00); --ciaColourUtilityIndigo600: rgba(54,95,206,1.00); --ciaColourUtilityIndigo700: rgba(49,82,171,1.00); --ciaColourUtilityIndigo800: rgba(34,58,127,1.00); --ciaColourUtilityIndigo900: rgba(19,37,86,1.00); /* utility/orange/… */ --ciaColourUtilityOrange100: rgba(255,248,245,1.00); --ciaColourUtilityOrange200: rgba(255,232,221,1.00); --ciaColourUtilityOrange300: rgba(255,177,139,1.00); --ciaColourUtilityOrange400: rgba(240,127,0,1.00); --ciaColourUtilityOrange500: rgba(202,106,0,1.00); --ciaColourUtilityOrange600: rgba(163,86,7,1.00); --ciaColourUtilityOrange700: rgba(130,67,6,1.00); --ciaColourUtilityOrange800: rgba(97,49,5,1.00); --ciaColourUtilityOrange900: rgba(66,31,3,1.00); /* utility/purple/… */ --ciaColourUtilityPurple100: rgba(250,248,252,1.00); --ciaColourUtilityPurple200: rgba(238,232,247,1.00); --ciaColourUtilityPurple300: rgba(213,194,234,1.00); --ciaColourUtilityPurple400: rgba(190,156,222,1.00); --ciaColourUtilityPurple500: rgba(167,118,209,1.00); --ciaColourUtilityPurple600: rgba(140,75,188,1.00); --ciaColourUtilityPurple700: rgba(115,64,153,1.00); --ciaColourUtilityPurple800: rgba(85,45,114,1.00); --ciaColourUtilityPurple900: rgba(56,27,77,1.00); /* utility/teal/… */ --ciaColourUtilityTeal100: rgba(241,252,252,1.00); --ciaColourUtilityTeal200: rgba(209,248,248,1.00); --ciaColourUtilityTeal300: rgba(148,237,237,1.00); --ciaColourUtilityTeal400: rgba(95,216,216,1.00); --ciaColourUtilityTeal500: rgba(25,159,159,1.00); --ciaColourUtilityTeal600: rgba(12,122,122,1.00); --ciaColourUtilityTeal700: rgba(12,99,99,1.00); --ciaColourUtilityTeal800: rgba(6,72,72,1.00); --ciaColourUtilityTeal900: rgba(3,46,46,1.00); /* utility/red/… */ --ciaColourUtilityRed100: rgba(253,241,242,1.00); --ciaColourUtilityRed200: rgba(250,218,221,1.00); --ciaColourUtilityRed300: rgba(244,167,174,1.00); --ciaColourUtilityRed400: rgba(240,107,123,1.00); --ciaColourUtilityRed500: rgba(236,53,86,1.00); --ciaColourUtilityRed600: rgba(190,38,65,1.00); --ciaColourUtilityRed700: rgba(156,31,54,1.00); --ciaColourUtilityRed800: rgba(119,20,38,1.00); --ciaColourUtilityRed900: rgba(84,10,24,1.00); /* utility/yellow/… */ --ciaColourUtilityYellow100: rgba(255,249,236,1.00); --ciaColourUtilityYellow200: rgba(254,239,199,1.00); --ciaColourUtilityYellow300: rgba(254,217,125,1.00); --ciaColourUtilityYellow400: rgba(254,190,16,1.00); --ciaColourUtilityYellow500: rgba(188,139,9,1.00); --ciaColourUtilityYellow600: rgba(140,103,0,1.00); --ciaColourUtilityYellow700: rgba(127,93,5,1.00); --ciaColourUtilityYellow800: rgba(89,65,3,1.00); --ciaColourUtilityYellow900: rgba(54,37,1,1.00); /* TODO: To implement new theme system and generate primary/secondary colours */ /*-- BRAND -------------------------------------------------*/ --ciaColourPrimaryBase: var(--ciaColourThemePrimaryAction); --ciaColourSecondaryBase: var(--ciaColourThemeMain1); --ciaColourHighlightBase: var(--ciaColourThemeHighlight1); /* brand/primary/… */ --ciaColourBrandPrimary50: color-mix(in oklch, var(--ciaColourPrimaryBase) 5%, white); --ciaColourBrandPrimary100: color-mix(in oklch, var(--ciaColourPrimaryBase) 10%, white); --ciaColourBrandPrimary200: color-mix(in oklch, var(--ciaColourPrimaryBase) 20%, white); --ciaColourBrandPrimary300: color-mix(in oklch, var(--ciaColourPrimaryBase) 30%, white); --ciaColourBrandPrimary400: color-mix(in oklch, var(--ciaColourPrimaryBase) 40%, white); --ciaColourBrandPrimary500: var(--ciaColourPrimaryBase); --ciaColourBrandPrimary600: color-mix(in oklch, var(--ciaColourPrimaryBase) 90%, black); --ciaColourBrandPrimary700: color-mix(in oklch, var(--ciaColourPrimaryBase) 80%, black); --ciaColourBrandPrimary800: color-mix(in oklch, var(--ciaColourPrimaryBase) 70%, black); --ciaColourBrandPrimary900: color-mix(in oklch, var(--ciaColourPrimaryBase) 60%, black); /* brand/secondary/… */ --ciaColourBrandSecondary50: color-mix(in oklch, var(--ciaColourSecondaryBase) 5%, white); --ciaColourBrandSecondary100: var(--ciaColourThemeMain5); --ciaColourBrandSecondary200: var(--ciaColourThemeMain4); --ciaColourBrandSecondary300: var(--ciaColourThemeMain3); --ciaColourBrandSecondary400: var(--ciaColourThemeMain2); --ciaColourBrandSecondary500: var(--ciaColourSecondaryBase); --ciaColourBrandSecondary600: var(--ciaColourThemeDark3); --ciaColourBrandSecondary700: var(--ciaColourThemeDark2); --ciaColourBrandSecondary800: var(--ciaColourThemeDark1); --ciaColourBrandSecondary900: color-mix(in oklch, var(--ciaColourSecondaryBase) 60%, black); &:has(body.useModernColorScheme){ /* Modern colour scheme uses a fixed brand secondary colour. Only the global header/footer, actions and highlight colour follow the theme colours. */ --ciaColourSecondaryBase: var(--ciaColourNeutralWarm500); --ciaColourBrandSecondary50: color-mix(in oklch, var(--ciaColourSecondaryBase) 5%, white); --ciaColourBrandSecondary100: color-mix(in oklch, var(--ciaColourSecondaryBase) 10%, white); --ciaColourBrandSecondary200: color-mix(in oklch, var(--ciaColourSecondaryBase) 20%, white); --ciaColourBrandSecondary300: color-mix(in oklch, var(--ciaColourSecondaryBase) 30%, white); --ciaColourBrandSecondary400: color-mix(in oklch, var(--ciaColourSecondaryBase) 40%, white); --ciaColourBrandSecondary500: var(--ciaColourSecondaryBase); --ciaColourBrandSecondary600: color-mix(in oklch, var(--ciaColourSecondaryBase) 90%, black); --ciaColourBrandSecondary700: color-mix(in oklch, var(--ciaColourSecondaryBase) 80%, black); --ciaColourBrandSecondary800: color-mix(in oklch, var(--ciaColourSecondaryBase) 70%, black); --ciaColourBrandSecondary900: color-mix(in oklch, var(--ciaColourSecondaryBase) 60%, black); --ciaColourHighlightBase: var(--ciaColourBrandPrimary500); } } /* TODO: Remove these one by one and replace with new Tier 2 tokens via C# utilities */ /*-- LEGACY ------------------------------------------------*/ :root{ /* The 8 colours generated from the theme main colour are not symetric. I.e --ciaColourThemeMain1 is darker than the main color*/ --ciaColourMainDarkest: var(--ciaColourThemeDark1); --ciaColourMainDarker: var(--ciaColourThemeDark2); --ciaColourMainDark-50: var(--ciaColourThemeDark3); --ciaColourMainDark: var(--ciaColourThemeMain1); --ciaColourMain: var(--ciaColourThemeMainColor); --ciaColourMainLight: var(--ciaColourThemeMain2); --ciaColourMainLight-50: var(--ciaColourThemeMain3); --ciaColourMainLighter: var(--ciaColourThemeMain4); --ciaColourMainLightest: var(--ciaColourThemeMain5); --ciaColourWhite : #ffffff; --ciaColourBlack : #000000; --ciaColourGreenLight : #e2ead1; --ciaColourGreen : #74bd00; --ciaColourGreenDark : #00661A; --ciaColourDarkGreenLight : #96C09E; --ciaColourYellowLight : #ffe398; --ciaColourYellow : #ffc853; --ciaColourBlueLight : #c6dae8; --ciaColourBlue : #325ea1; --ciaColourBlueDark : #000060; --ciaColourDarkBlueLight : #C3C3DA; --ciaColourGrayLight : #c7c7c7; --ciaColourGray : #4b4b4b; --ciaColourPurpleLight : #d7bdd7; --ciaColourPurple : #660066; --ciaColourTealLight : #C9D9DD; --ciaColourTeal : #1E5E6D; --ciaColourOrangeLight : #fce2ce; --ciaColourOrange : #F2661F; --ciaColourRedLight: #eccdca; --ciaColourRed : #E53327; --ciaColourBrown : #8a6d3b; /* opacity tokens */ --ciaOpacityDisabled: .32; } :root{ /* size palette */ --ciaSize-xxsmall: 8px; --ciaSize-xsmall: 10px; --ciaSize-small: 12px; --ciaSize-medium: 14px; /* This is only used once in CPM: https://git.code.one/projects/CPM/repos/c2-entbudgeting/browse/src/T1.EntBudgeting.Web/Content/Styles/BudgetTabProcessingOverlay.css#62,88 */ --ciaSize-default: 16px; --ciaSize-large: 32px; --ciaSize-xlarge: 64px; --ciaSize-xxlarge: 128px; /* Only used for --ciaHeightHeader */ --ciaHeight-small: 40px; --ciaHeight-default: 50px; } :root{ /* family */ --ciaFontFamilyBody: Osans, Arial, Verdana, sans-serif; --ciaFontFamilyHeading: Osans, Arial, Verdana, sans-serif; /* Size Use the browser root element font unit (for most browsers 1rem is 16px). This should allow us to better support zooming. Note: According to the design document the default body font size should be 14 px. The current default font size is 12px . Changing default font size will likely have much larger impact on any fixed height/width containers (i.e. many containers have 16px height and 250px label width) */ --ciaFontBaseUnit_legacy: 0.85rem; /* 13.7px - FontSize 300 (default body) is 12px*/ --ciaFontBaseUnit_design: 1rem; /* 16px - FontSize 300 (default body) is 14px*/ --ciaFontBaseUnit: var(--ciaFontBaseUnit_design); &:has(> body.fontLegacy) { --ciaFontBaseUnit: var(--ciaFontBaseUnit_legacy); } --ciaFontSize50: calc(var(--ciaFontBaseUnit) * 0.5); /* design 8px - legacy 7px */ --ciaFontSize100: calc(var(--ciaFontBaseUnit) * 0.625); /* design 10px - legacy 8.75px */ --ciaFontSize200: calc(var(--ciaFontBaseUnit) * 0.75); /* design 12px - legacy 10.5px*/ --ciaFontSize300: calc(var(--ciaFontBaseUnit) * 0.875); /* design 14px - legacy 12px */ --ciaFontSize400: calc(var(--ciaFontBaseUnit) * 1); /* design 16px - legacy 13.7px */ --ciaFontSize500: calc(var(--ciaFontBaseUnit) * 1.125); /* design 18px - legacy 15.75px */ --ciaFontSize600: calc(var(--ciaFontBaseUnit) * 1.25); /* design 20px - legacy 17.12px */ --ciaFontSize700: calc(var(--ciaFontBaseUnit) * 1.5); /* design 24px - legacy 22.5px */ --ciaFontSize800: calc(var(--ciaFontBaseUnit) * 1.75); /* design 28px - legacy 24px */ --ciaFontSize900: calc(var(--ciaFontBaseUnit) * 2); /* design 32px - legacy 27.4px */ --ciaFontSize1000: calc(var(--ciaFontBaseUnit) * 2.5); /* design 40px - legacy 24.25px */ /* weight */ --ciaFontWeight200: 200; --ciaFontWeight400: 400; --ciaFontWeight500: 500; --ciaFontWeight600: 600; --ciaFontWeight700: 700; /* line-height ratio */ --ciaLineHeight120: 1.2; --ciaLineHeight150: 1.5; /* letter-spacing (px, with em equivalents for reference) */ --ciaLetterSpacingDefault: 0; --ciaLetterSpacingMinus1: -1px; /* ≈ -0.083em @12px, -0.05em @20px, -0.025em @40px */ --ciaLetterSpacingHalf: 0.5px; /* ≈ +0.036em @14px, +0.031em @16px */ } :root { /* Animation Variables */ --ciaAnimationDuration: 300ms; --ciaAnimationTimingFunction: ease-in-out; --ciaAnimationIterationCount: 1; --ciaAnimationFillMode: forwards; --ciaAnimationDirection: normal; /* Slide Variables */ --ciaAnimationSlideDistanceX: 0px; --ciaAnimationSlideDistanceY: 0px; } /*-- BASE --------------------------------------------------*/ body { background-color: var(--ciaColourBackgroundDefault); /* Default background colour. All other elements should be `transparent` by default */ color: var(--ciaColourContentDefault); /* Default text colour */ } /*-- VARIABLES ---------------------------------------------*/ :root { /*-- BACKGROUND --------------------------------------------*/ /* background/default/… */ --ciaColourBackgroundDefault: var(--ciaColourNeutralCool0); --ciaColourBackgroundDefaultHover: var(--ciaColourNeutralCool100); --ciaColourBackgroundDefaultFocus: var(--ciaColourNeutralCool100); --ciaColourBackgroundDefaultActive: var(--ciaColourNeutralCool200); --ciaColourBackgroundDefaultSecondary: var(--ciaColourNeutralCool200); --ciaColourBackgroundDefaultSecondaryHover: var(--ciaColourNeutralCool300); --ciaColourBackgroundDefaultSecondaryFocus: var(--ciaColourNeutralCool300); --ciaColourBackgroundDefaultSecondaryActive: var(--ciaColourNeutralCool400); --ciaColourBackgroundDefaultSubtle: var(--ciaColourNeutralCool50); --ciaColourBackgroundDefaultSubtleHover: var(--ciaColourNeutralCool100); --ciaColourBackgroundDefaultSubtleActive: var(--ciaColourNeutralCool100); --ciaColourBackgroundDefaultInverse: var(--ciaColourNeutralCool900); --ciaColourBackgroundDefaultInverseHover: var(--ciaColourNeutralCool800); --ciaColourBackgroundDefaultDisabled: var(--ciaColourNeutralCool100); /* background/brand-primary/… */ --ciaColourBackgroundBrandPrimary: var(--ciaColourBrandPrimary100); --ciaColourBackgroundBrandPrimaryHover: var(--ciaColourBrandPrimary200); --ciaColourBackgroundBrandPrimaryFocus: var(--ciaColourBrandPrimary200); --ciaColourBackgroundBrandPrimaryActive: var(--ciaColourBrandPrimary300); --ciaColourBackgroundBrandPrimarySubtle: var(--ciaColourBrandPrimary50); --ciaColourBackgroundBrandPrimaryInverse: var(--ciaColourBrandPrimary500); --ciaColourBackgroundBrandPrimaryInverseHover: var(--ciaColourBrandPrimary600); --ciaColourBackgroundBrandPrimaryInverseFocus: var(--ciaColourBrandPrimary600); --ciaColourBackgroundBrandPrimaryInverseActive: var(--ciaColourBrandPrimary700); /* background/brand-secondary/… */ --ciaColourBackgroundBrandSecondary: var(--ciaColourBrandSecondary100); --ciaColourBackgroundBrandSecondaryHover: var(--ciaColourBrandSecondary200); --ciaColourBackgroundBrandSecondaryFocus: var(--ciaColourBrandSecondary200); --ciaColourBackgroundBrandSecondaryActive: var(--ciaColourBrandSecondary300); --ciaColourBackgroundBrandSecondarySubtle: var(--ciaColourBrandSecondary50); --ciaColourBackgroundBrandSecondaryInverse: var(--ciaColourBrandSecondary500); --ciaColourBackgroundBrandSecondaryInverseHover: var(--ciaColourBrandSecondary600); --ciaColourBackgroundBrandSecondaryInverseFocus: var(--ciaColourBrandSecondary600); --ciaColourBackgroundBrandSecondaryInverseActive: var(--ciaColourBrandSecondary700); /* background/error/… */ --ciaColourBackgroundError: var(--ciaColourUtilityRed100); --ciaColourBackgroundErrorSecondary: var(--ciaColourUtilityRed200); --ciaColourBackgroundErrorInverse: var(--ciaColourUtilityRed600); /* background/warning/… */ --ciaColourBackgroundWarning: var(--ciaColourUtilityOrange100); --ciaColourBackgroundWarningSecondary: var(--ciaColourUtilityOrange200); --ciaColourBackgroundWarningInverse: var(--ciaColourUtilityOrange600); /* background/success/… */ --ciaColourBackgroundSuccess: var(--ciaColourUtilityGreen100); --ciaColourBackgroundSuccessSecondary: var(--ciaColourUtilityGreen200); --ciaColourBackgroundSuccessInverse: var(--ciaColourUtilityGreen600); /* background/info/… */ --ciaColourBackgroundInfo: var(--ciaColourUtilityBlue100); --ciaColourBackgroundInfoSecondary: var(--ciaColourUtilityBlue200); --ciaColourBackgroundInfoInverse: var(--ciaColourUtilityBlue600); /* background/ai/… */ --ciaColourBackgroundAi: var(--ciaColourUtilityAi200); --ciaColourBackgroundAiSubtle: var(--ciaColourUtilityAi100); --ciaColourBackgroundAiInverse: var(--ciaColourUtilityAi600); --ciaColourBackgroundAiInverseHover: var(--ciaColourUtilityAi700); --ciaColourBackgroundAiInverseFocus: var(--ciaColourUtilityAi700); --ciaColourBackgroundAiInverseActive: var(--ciaColourUtilityAi900); /*-- CONTENT -----------------------------------------------*/ /* content/default/… */ --ciaColourContentDefault: var(--ciaColourNeutralCool900); --ciaColourContentDefaultHover: var(--ciaColourNeutralCool950); --ciaColourContentDefaultFocus: var(--ciaColourNeutralCool950); --ciaColourContentDefaultActive: var(--ciaColourNeutralCool950); --ciaColourContentDefaultSecondary: var(--ciaColourNeutralCool700); --ciaColourContentDefaultSubtle: var(--ciaColourNeutralCool600); --ciaColourContentDefaultInverse: var(--ciaColourNeutralCool0); --ciaColourContentDefaultInverseHover: var(--ciaColourNeutralCool100); --ciaColourContentDefaultInverseFocus: var(--ciaColourNeutralCool100); --ciaColourContentDefaultDisabled: var(--ciaColourNeutralCool400); /* content/brand-primary/… */ --ciaColourContentBrandPrimary: var(--ciaColourBrandPrimary600); --ciaColourContentBrandPrimaryHover: var(--ciaColourBrandPrimary700); --ciaColourContentBrandPrimaryFocus: var(--ciaColourBrandPrimary700); --ciaColourContentBrandPrimaryActive: var(--ciaColourBrandPrimary800); --ciaColourContentBrandPrimaryInverse: var(--ciaColourBrandPrimary100); /* content/brand-secondary/… */ --ciaColourContentBrandSecondary: var(--ciaColourBrandSecondary600); --ciaColourContentBrandSecondaryHover: var(--ciaColourBrandSecondary700); --ciaColourContentBrandSecondaryFocus: var(--ciaColourBrandSecondary700); --ciaColourContentBrandSecondaryActive: var(--ciaColourBrandSecondary800); --ciaColourContentBrandSecondaryInverse: var(--ciaColourBrandSecondary100); /* content/error/… */ --ciaColourContentError: var(--ciaColourUtilityRed600); --ciaColourContentErrorInverse: var(--ciaColourUtilityRed200); /* content/warning/… */ --ciaColourContentWarning: var(--ciaColourUtilityOrange600); --ciaColourContentWarningInverse: var(--ciaColourUtilityOrange200); /* content/success/… */ --ciaColourContentSuccess: var(--ciaColourUtilityGreen600); --ciaColourContentSuccessInverse: var(--ciaColourUtilityGreen200); /* content/info/… */ --ciaColourContentInfo: var(--ciaColourUtilityBlue600); --ciaColourContentInfoInverse: var(--ciaColourUtilityBlue200); /* content/ai/… */ --ciaColourContentAi: var(--ciaColourUtilityAi600); --ciaColourContentAiHover: var(--ciaColourUtilityAi700); --ciaColourContentAiFocus: var(--ciaColourUtilityAi700); --ciaColourContentAiActive: var(--ciaColourUtilityAi900); --ciaColourContentAiInverse: var(--ciaColourUtilityAi200); /*-- BORDER ------------------------------------------------*/ /* border/default/… */ --ciaColourBorderDefault: var(--ciaColourNeutralCool300); --ciaColourBorderDefaultHover: var(--ciaColourNeutralCool400); --ciaColourBorderDefaultFocus: var(--ciaColourNeutralCool400); --ciaColourBorderDefaultActive: var(--ciaColourNeutralCool950); --ciaColourBorderDefaultSubtle: var(--ciaColourNeutralCool200); --ciaColourBorderDefaultSubtleHover: var(--ciaColourNeutralCool300); --ciaColourBorderDefaultDisabled: var(--ciaColourNeutralCool100); /* border/brand-primary/… */ --ciaColourBorderBrandPrimary: var(--ciaColourBrandPrimary600); --ciaColourBorderBrandPrimaryHover: var(--ciaColourBrandPrimary700); --ciaColourBorderBrandPrimaryFocus: var(--ciaColourBrandPrimary700); --ciaColourBorderBrandPrimaryActive: var(--ciaColourBrandPrimary800); /* border/brand-secondary/… */ --ciaColourBorderBrandSecondary: var(--ciaColourBrandSecondary600); --ciaColourBorderBrandSecondaryHover: var(--ciaColourBrandSecondary700); --ciaColourBorderBrandSecondaryFocus: var(--ciaColourBrandSecondary700); --ciaColourBorderBrandSecondaryActive: var(--ciaColourBrandSecondary800); /* border/error/… */ --ciaColourBorderError: var(--ciaColourUtilityRed600); --ciaColourBorderErrorInverse: var(--ciaColourUtilityRed200); /* border/warning/… */ --ciaColourBorderWarning: var(--ciaColourUtilityOrange600); --ciaColourBorderWarningInverse: var(--ciaColourUtilityOrange200); /* border/success/… */ --ciaColourBorderSuccess: var(--ciaColourUtilityGreen600); --ciaColourBorderSuccessInverse: var(--ciaColourUtilityGreen200); /* border/info/… */ --ciaColourBorderInfo: var(--ciaColourUtilityBlue600); --ciaColourBorderInfoInverse: var(--ciaColourUtilityBlue200); /* border/ai/… */ --ciaColourBorderAi: var(--ciaColourUtilityAi600); --ciaColourBorderAiHover: var(--ciaColourUtilityAi700); --ciaColourBorderAiFocus: var(--ciaColourUtilityAi700); --ciaColourBorderAiActive: var(--ciaColourUtilityAi800); --ciaColourBorderAiInverse: var(--ciaColourUtilityAi200); } /*-- BACKGROUND --------------------------------------------*/ /* color/background/default/… */ .ciaColourBackgroundDefault { background-color: var(--ciaStateDefaultBackground, var(--ciaColourBackgroundDefault)); --ciaStateHoverBackground: var(--ciaColourBackgroundDefaultHover); --ciaStateFocusBackground: var(--ciaColourBackgroundDefaultFocus); --ciaStateActiveBackground: var(--ciaColourBackgroundDefaultActive); --ciaStateDisabledBackground: var(--ciaColourBackgroundDefaultDisabled); } .ciaColourBackgroundDefaultSecondary { background-color: var(--ciaStateDefaultBackground, var(--ciaColourBackgroundDefaultSecondary)); } .ciaColourBackgroundDefaultSubtle { background-color: var(--ciaStateDefaultBackground, var(--ciaColourBackgroundDefaultSubtle)); --ciaStateHoverBackground: var(--ciaColourBackgroundDefaultSubtleHover); --ciaStateActiveBackground: var(--ciaColourBackgroundDefaultSubtleActive); } .ciaColourBackgroundDefaultInverse { background-color: var(--ciaStateDefaultBackground, var(--ciaColourBackgroundDefaultInverse)); --ciaStateHoverBackground: var(--ciaColourBackgroundDefaultInverseHover); } /* color/background/brand-primary/… */ .ciaColourBackgroundBrandPrimary { background-color: var(--ciaStateDefaultBackground, var(--ciaColourBackgroundBrandPrimary)); --ciaStateHoverBackground: var(--ciaColourBackgroundBrandPrimaryHover); --ciaStateFocusBackground: var(--ciaColourBackgroundBrandPrimaryFocus); --ciaStateActiveBackground: var(--ciaColourBackgroundBrandPrimaryActive); } .ciaColourBackgroundBrandPrimarySubtle { background-color: var(--ciaStateDefaultBackground, var(--ciaColourBackgroundBrandPrimarySubtle)); --ciaStateHoverBackground: var(--ciaColourBackgroundBrandPrimaryHover); --ciaStateFocusBackground: var(--ciaColourBackgroundBrandPrimaryFocus); --ciaStateActiveBackground: var(--ciaColourBackgroundBrandPrimaryActive); } .ciaColourBackgroundBrandPrimaryInverse { background-color: var(--ciaStateDefaultBackground, var(--ciaColourBackgroundBrandPrimaryInverse)); --ciaStateHoverBackground: var(--ciaColourBackgroundBrandPrimaryInverseHover); --ciaStateFocusBackground: var(--ciaColourBackgroundBrandPrimaryInverseFocus); --ciaStateActiveBackground: var(--ciaColourBackgroundBrandPrimaryInverseActive); } /* color/background/brand-secondary/… */ .ciaColourBackgroundBrandSecondary { background-color: var(--ciaStateDefaultBackground, var(--ciaColourBackgroundBrandSecondary)); --ciaStateHoverBackground: var(--ciaColourBackgroundBrandSecondaryHover); --ciaStateFocusBackground: var(--ciaColourBackgroundBrandSecondaryFocus); --ciaStateActiveBackground: var(--ciaColourBackgroundBrandSecondaryActive); } .ciaColourBackgroundBrandSecondarySubtle { background-color: var(--ciaStateDefaultBackground, var(--ciaColourBackgroundBrandSecondarySubtle)); --ciaStateHoverBackground: var(--ciaColourBackgroundBrandSecondaryHover); --ciaStateFocusBackground: var(--ciaColourBackgroundBrandSecondaryFocus); --ciaStateActiveBackground: var(--ciaColourBackgroundBrandSecondaryActive); } .ciaColourBackgroundBrandSecondaryInverse { background-color: var(--ciaStateDefaultBackground, var(--ciaColourBackgroundBrandSecondaryInverse)); --ciaStateHoverBackground: var(--ciaColourBackgroundBrandSecondaryInverseHover); --ciaStateFocusBackground: var(--ciaColourBackgroundBrandSecondaryInverseFocus); --ciaStateActiveBackground: var(--ciaColourBackgroundBrandSecondaryInverseActive); } /* color/background/error/… */ .ciaColourBackgroundError { background-color: var(--ciaStateDefaultBackground, var(--ciaColourBackgroundError)); } .ciaColourBackgroundErrorSecondary { background-color: var(--ciaStateDefaultBackground, var(--ciaColourBackgroundErrorSecondary)); } .ciaColourBackgroundErrorInverse { background-color: var(--ciaStateDefaultBackground, var(--ciaColourBackgroundErrorInverse)); } /* color/background/warning/… */ .ciaColourBackgroundWarning { background-color: var(--ciaStateDefaultBackground, var(--ciaColourBackgroundWarning)); } .ciaColourBackgroundWarningSecondary { background-color: var(--ciaStateDefaultBackground, var(--ciaColourBackgroundWarningSecondary)); } .ciaColourBackgroundWarningInverse { background-color: var(--ciaStateDefaultBackground, var(--ciaColourBackgroundWarningInverse)); } /* color/background/success/… */ .ciaColourBackgroundSuccess { background-color: var(--ciaStateDefaultBackground, var(--ciaColourBackgroundSuccess)); } .ciaColourBackgroundSuccessSecondary { background-color: var(--ciaStateDefaultBackground, var(--ciaColourBackgroundSuccessSecondary)); } .ciaColourBackgroundSuccessInverse { background-color: var(--ciaStateDefaultBackground, var(--ciaColourBackgroundSuccessInverse)); } /* color/background/info/… */ .ciaColourBackgroundInfo { background-color: var(--ciaStateDefaultBackground, var(--ciaColourBackgroundInfo)); } .ciaColourBackgroundInfoSecondary { background-color: var(--ciaStateDefaultBackground, var(--ciaColourBackgroundInfoSecondary)); } .ciaColourBackgroundInfoInverse { background-color: var(--ciaStateDefaultBackground, var(--ciaColourBackgroundInfoInverse)); } /* color/background/ai/… */ .ciaColourBackgroundAi { background-color: var(--ciaStateDefaultBackground, var(--ciaColourBackgroundAi)); } .ciaColourBackgroundAiSubtle { background-color: var(--ciaStateDefaultBackground, var(--ciaColourBackgroundAiSubtle)); } .ciaColourBackgroundAiInverse { background-color: var(--ciaStateDefaultBackground, var(--ciaColourBackgroundAiInverse)); --ciaStateHoverBackground: var(--ciaColourBackgroundAiInverseHover); --ciaStateFocusBackground: var(--ciaColourBackgroundAiInverseFocus); --ciaStateActiveBackground: var(--ciaColourBackgroundAiInverseActive); } /*-- CONTENT -----------------------------------------------*/ /* color/content/default/… */ .ciaColourContentDefault { color: var(--ciaStateDefaultContent, var(--ciaColourContentDefault)); --ciaStateHoverContent: var(--ciaColourContentDefaultHover); --ciaStateFocusContent: var(--ciaColourContentDefaultFocus); --ciaStateActiveContent: var(--ciaColourContentDefaultActive); --ciaStateDisabledContent: var(--ciaColourContentDefaultDisabled); } .ciaColourContentDefaultSecondary { color: var(--ciaStateDefaultContent, var(--ciaColourContentDefaultSecondary)); } .ciaColourContentDefaultSubtle { color: var(--ciaStateDefaultContent, var(--ciaColourContentDefaultSubtle)); } .ciaColourContentDefaultDisabled { color: var(--ciaStateDefaultContent, var(--ciaColourContentDefaultDisabled)); } .ciaColourContentDefaultInverse { color: var(--ciaStateDefaultContent, var(--ciaColourContentDefaultInverse)); --ciaStateHoverContent: var(--ciaColourContentDefaultInverseHover); --ciaStateFocusContent: var(--ciaColourContentDefaultInverseFocus); } /* color/content/brand-primary/… */ .ciaColourContentBrandPrimary { color: var(--ciaStateDefaultContent, var(--ciaColourContentBrandPrimary)); --ciaStateHoverContent: var(--ciaColourContentBrandPrimaryHover); --ciaStateFocusContent: var(--ciaColourContentBrandPrimaryFocus); --ciaStateActiveContent: var(--ciaColourContentBrandPrimaryActive); } .ciaColourContentBrandPrimaryInverse { color: var(--ciaStateDefaultContent, var(--ciaColourContentBrandPrimaryInverse)); } /* color/content/brand-secondary/… */ .ciaColourContentBrandSecondary { color: var(--ciaStateDefaultContent, var(--ciaColourContentBrandSecondary)); --ciaStateHoverContent: var(--ciaColourContentBrandSecondaryHover); --ciaStateFocusContent: var(--ciaColourContentBrandSecondaryFocus); --ciaStateActiveContent: var(--ciaColourContentBrandSecondaryActive); } .ciaColourContentBrandSecondaryInverse { color: var(--ciaStateDefaultContent, var(--ciaColourContentBrandSecondaryInverse)); } /* color/content/error/… */ .ciaColourContentError { color: var(--ciaStateDefaultContent, var(--ciaColourContentError)); } .ciaColourContentErrorInverse { color: var(--ciaStateDefaultContent, var(--ciaColourContentErrorInverse)); } /* color/content/warning/… */ .ciaColourContentWarning { color: var(--ciaStateDefaultContent, var(--ciaColourContentWarning)); } .ciaColourContentWarningInverse { color: var(--ciaStateDefaultContent, var(--ciaColourContentWarningInverse)); } /* color/content/success/… */ .ciaColourContentSuccess { color: var(--ciaStateDefaultContent, var(--ciaColourContentSuccess)); } .ciaColourContentSuccessInverse { color: var(--ciaStateDefaultContent, var(--ciaColourContentSuccessInverse)); } /* color/content/info/… */ .ciaColourContentInfo { color: var(--ciaStateDefaultContent, var(--ciaColourContentInfo)); } .ciaColourContentInfoInverse { color: var(--ciaStateDefaultContent, var(--ciaColourContentInfoInverse)); } /* color/content/ai/… */ .ciaColourContentAi { color: var(--ciaStateDefaultContent, var(--ciaColourContentAi)); --ciaStateHoverContent: var(--ciaColourContentAiHover); --ciaStateFocusContent: var(--ciaColourContentAiFocus); --ciaStateActiveContent: var(--ciaColourContentAiActive); } .ciaColourContentAiInverse { color: var(--ciaStateDefaultContent, var(--ciaColourContentAiInverse)); } /*-- BORDER ------------------------------------------------*/ /* color/border/default/… */ .ciaColourBorderDefault { border-color: var(--ciaStateDefaultBorder, var(--ciaColourBorderDefault)); --ciaStateHoverBorder: var(--ciaColourBorderDefaultHover); --ciaStateFocusBorder: var(--ciaColourBorderDefaultFocus); --ciaStateActiveBorder: var(--ciaColourBorderDefaultActive); --ciaStateDisabledBorder: var(--ciaColourBorderDefaultDisabled); } .ciaColourBorderDefaultSubtle { border-color: var(--ciaStateDefaultBorder, var(--ciaColourBorderDefaultSubtle)); --ciaStateHoverBorder: var(--ciaColourBorderDefaultSubtleHover); } /* color/border/brand-primary/… */ .ciaColourBorderBrandPrimary { border-color: var(--ciaStateDefaultBorder, var(--ciaColourBorderBrandPrimary)); --ciaStateHoverBorder: var(--ciaColourBorderBrandPrimaryHover); --ciaStateFocusBorder: var(--ciaColourBorderBrandPrimaryFocus); --ciaStateActiveBorder: var(--ciaColourBorderBrandPrimaryActive); } /* color/border/brand-secondary/… */ .ciaColourBorderBrandSecondary { border-color: var(--ciaStateDefaultBorder, var(--ciaColourBorderBrandSecondary)); --ciaStateHoverBorder: var(--ciaColourBorderBrandSecondaryHover); --ciaStateFocusBorder: var(--ciaColourBorderBrandSecondaryFocus); --ciaStateActiveBorder: var(--ciaColourBorderBrandSecondaryActive); } /* color/border/error/… */ .ciaColourBorderError { border-color: var(--ciaStateDefaultBorder, var(--ciaColourBorderError)); } .ciaColourBorderErrorInverse { border-color: var(--ciaStateDefaultBorder, var(--ciaColourBorderErrorInverse)); } /* color/border/warning/… */ .ciaColourBorderWarning { border-color: var(--ciaStateDefaultBorder, var(--ciaColourBorderWarning)); } .ciaColourBorderWarningInverse { border-color: var(--ciaStateDefaultBorder, var(--ciaColourBorderWarningInverse)); } /* color/border/success/… */ .ciaColourBorderSuccess { border-color: var(--ciaStateDefaultBorder, var(--ciaColourBorderSuccess)); } .ciaColourBorderSuccessInverse { border-color: var(--ciaStateDefaultBorder, var(--ciaColourBorderSuccessInverse)); } /* color/border/info/… */ .ciaColourBorderInfo { border-color: var(--ciaStateDefaultBorder, var(--ciaColourBorderInfo)); } .ciaColourBorderInfoInverse { border-color: var(--ciaStateDefaultBorder, var(--ciaColourBorderInfoInverse)); } /* color/border/ai/… */ .ciaColourBorderAi { border-color: var(--ciaStateDefaultBorder, var(--ciaColourBorderAi)); --ciaStateHoverBorder: var(--ciaColourBorderAiHover); --ciaStateFocusBorder: var(--ciaColourBorderAiFocus); --ciaStateActiveBorder: var(--ciaColourBorderAiActive); } .ciaColourBorderAiInverse { border-color: var(--ciaStateDefaultBorder, var(--ciaColourBorderAiInverse)); } /*-- SHADOW ------------------------------------------------*/ /* color/shadow/default/… */ .ciaColourShadowDefaultSubtle { --shadowColour: var(--ciaStateDefaultShadow, var(--ciaColourShadowDefaultSubtle)); } /* TODO: Remove these one by one and replace with new Tier 2 tokens via C# utilities */ /*-- LEGACY ------------------------------------------------*/ :root{ /* Abstract colors css variables from theme-defined naming to design/semantic naming */ --ciaColourHighlight: rgb(var(--ciaColourThemeHighlight3_RGB)); --ciaColourHighlightHover: rgb(var(--ciaColourThemeHighlight3_RGB), 0.4); --ciaColourPrimary: var(--ciaColourThemePrimaryAction); --ciaColourPrimaryHover: var(--ciaColourThemePrimaryActionBorderHover); /*-- AI COLOUR TOKENS -----------------------------------*/ --ciaColourBackgroundAIMarker: #ECE3FF; --ciaColourBackgroundAIAnnotation: #EBE7FB; --ciaColourContentAIAnnotation: var(--ciaColourAIDefault); /*-- AI COLOUR TOKENS - Semantic -----------------------*/ --ciaColourAIFaint: var(--ciaColourUtilityPurple100); --ciaColourAIBackground: var(--ciaColourUtilityPurple200); --ciaColourAISubtle: var(--ciaColourUtilityPurple300); --ciaColourAIMuted: var(--ciaColourUtilityPurple400); --ciaColourAIBase: var(--ciaColourUtilityPurple500); /* base AI colour - should only be used for branding*/ --ciaColourAIDefault: var(--ciaColourUtilityPurple600); --ciaColourAIAccent: var(--ciaColourUtilityPurple700); --ciaColourAIStrong: var(--ciaColourUtilityPurple800); --ciaColourAIOpaque: var(--ciaColourUtilityPurple900); /*-- COLOUR TOKENS ----------------------------------------------------*/ --ciaColourContentBody: var(--ciaColourBlack); --ciaColourSelection: var(--ciaColourThemeMain4); /*-- COLOUR TEXT AND BACKGROUND TOKENS ----------------------------------------------------*/ /*-- Workplace Header & Footer ---------------------------------------------------*/ --ciaColourBackgroundBanner: var(--ciaColourMainLightest) ; --ciaColourBackgroundSignaturePad: rgba(235, 237, 238, 0.9); --ciaColourHandlerResize: var(--ciaColourPrimary); --ciaColourBackgroundHighlight: var(--ciaColourHighlight) ; --ciaColourBackgroundHighlightHover: var(--ciaColourHighlightHover) ; /*-- Selection ---------------------------------------------------------------------*/ --ciaColourBackgroundSelection: var(--ciaColourSelection); --ciaColourContentSelection: var(--ciaColourContentPrimary); /*-- Tabs --------------------------------------------------------------------*/ --ciaColourBackgroundTabsHandles : var(--ciaColourMainLightest); --ciaColourBackgroundTabHandleSelected : var(--ciaColourWhite); /*-- Dropdown --------------------------------------------------------------------*/ --ciaColourBackgroundHeaderDropdown: var(--ciaColourMainDarker); /* dropdowns displayed from global header */ --ciaColourContentHeaderDropdown: var(--ciaColourGray); --ciaColourContentHeaderButton: var(--ciaColourThemeGlobalHeaderText); /*-- Forms Footer ----------------------------------------------------------------*/ --ciaColourBackgroundFormsFooter: rgba(0,0,0,0.05); /*-- COLOUR TEXT TOKENS ----------------------------------------------------------*/ --ciaColourContentFooter: var(--ciaColourThemeGlobalFooterFg); /*-- COLOUR BORDER TOKENS --------------------------------------------------------*/ /*-- standard HTML elements colours ----------------------------------------------*/ --ciaColourBorderTableCell: #e6e6e6; --ciaColourBorderHighlight: var(--ciaColourThemeHighlight1); --ciaColourBorderPrimary: var(--ciaColourThemePrimaryActionBorder); --ciaColourBorderSubtle: var(--ciaColourNeutralCool200); --ciaColourContentSecondary: var(--ciaColourNeutralCool600); --ciaColourBackgroundSecondary: var(--ciaColourNeutralCool200); /*-- COLOUR STATUS TOKENS --------------------------------------------------------*/ --ciaColourContentSuccess: var(--ciaColourUtilityGreen600); --ciaColourBackgroundSuccess: var(--ciaColourUtilityGreen100); --ciaColourBorderSuccess: var(--ciaColourUtilityGreen600); --ciaColourContentInfo: var(--ciaColourUtilityBlue600); --ciaColourBackgroundInfo: var(--ciaColourUtilityBlue100); --ciaColourBorderInfo: var(--ciaColourUtilityBlue600); --ciaColourContentWarning: var(--ciaColourUtilityOrange600); --ciaColourBackgroundWarning: var(--ciaColourUtilityOrange100); --ciaColourBorderWarning: var(--ciaColourUtilityOrange600); --ciaColourContentFail: var(--ciaColourUtilityRed600); --ciaColourBackgroundFail: var(--ciaColourUtilityRed100); --ciaColourBorderFail: var(--ciaColourUtilityRed600); /*-- COLOUR TOKENS --------------------------------------------------------*/ --ciaColourContentSubtle: var(--ciaColourNeutralCool400); --ciaColourBackgroundSubtle: var(--ciaColourNeutralCool50); --ciaColourContentInverse: var(--ciaColourWhite); --ciaColourContentDefault: var(--ciaColourNeutralCool800); --ciaColourBackgroundDefault: var(--ciaColourWhite); --ciaColourBackgroundDefaultHover: var(--ciaColourNeutralCool100); } .roleLabel{ --ciaColourContentHeaderDropdown:var(--ciaColourBlack); } /***** icon-related design tokens and components ********/ :root{ --ciaIconSortAsc: url('https://cdn.t1cloud.com/cianywhere/content/base/icons/svg/core/sort-asc.svg?v=12.0.108.0'); --ciaIconSortDesc: url('https://cdn.t1cloud.com/cianywhere/content/base/icons/svg/core/sort-desc.svg?v=12.0.108.0'); --ciaIconSortUnselected: url('https://cdn.t1cloud.com/cianywhere/content/base/icons/svg/core/sort-unselected.svg?v=12.0.108.0'); --ciaIconAi: url('https://cdn.t1cloud.com/cianywhere/content/base/icons/svg/core/ai-icon.svg?v=12.0.108.0'); --ciaIconDropdownMore: "\E226"; --ciaIconBorder-radius: 3px; } /**** AI Icons ****/ .dropdownPanelListItem .aiChip { --ciaIconAi: url('https://cdn.t1cloud.com/cianywhere/content/base/icons/svg/core/ai-label.svg?v=12.0.108.0'); } .ciaButtonContainerColourVariantAiPrimary .aiChip{ --ciaIconAi: url('https://cdn.t1cloud.com/cianywhere/content/base/icons/svg/core/ai-sparkle-inverse.svg?v=12.0.108.0'); } .ciaButtonContainerColourVariantAiSecondary .aiChip { --ciaIconAi: url('https://cdn.t1cloud.com/cianywhere/content/base/icons/svg/core/ai-sparkle.svg?v=12.0.108.0'); } .aiDetailsPanel .aiIcon, .plusPromo .aiIcon { --ciaIconAi: url('https://cdn.t1cloud.com/cianywhere/content/base/icons/svg/core/ai-icon.svg?v=12.0.108.0'); } .aiValue .aiIcon{ --ciaIconAi: url('https://cdn.t1cloud.com/cianywhere/content/base/icons/svg/core/ai-sparkle.svg?v=12.0.108.0'); } .plusBanner{ --ciaIconAi: url('https://cdn.t1cloud.com/cianywhere/content/base/icons/svg/core/ai-icon-large.svg?v=12.0.108.0'); } .aiStaticValue{ .aiIcon { --ciaIconAi: url('https://cdn.t1cloud.com/cianywhere/content/base/icons/svg/core/ai-sparkle.svg?v=12.0.108.0'); } } /**** Layout definitions ****/ .defaultLayout{ --ciaIconBorder-radius: 3px; } .modernLayout{ --ciaIconBorder-radius: 50%; } /*** Dropdown exceptions ***/ .downFill, .thumbnailSection .tagSection{ --ciaIconDropdownMore: "\E045"; } .viewSelectorControl{ --ciaIconDropdownMore: "\E532"; } .buttonGroup .downFill { --ciaIconDropdownMore: "\E226"; } .selectionSummary.shoppingCartMode .summaryCounter{ --ciaIconDropdownMore: "\E016"; } :root{ --ciaHeightHeader: var(--ciaHeight-default); /*Inline sections*/ --ciaHeightMinInlineSectionHeight: 300px; /* Attachment sizes */ --ciaWidthFileUploadPopupContainer: 89vw; --ciaWidthMaxFileUploadPopupContainer: 980px; /* Attachment popup inner container sizes */ --ciaWidthFileUploadPopupInnerContainer: 93vw; --ciaWidthMaxFileUploadPopupInnerContainer: 1000px; /* Summary panels */ --ciaHeightSummaryPanelSmall: 240px; --ciaHeightSummaryPanelMedium: 480px; --ciaHeightSummaryPanelLarge: 720px; /* Resize handle */ --ciaResizeHandleWidth: 3px; /**** AI ****/ --ciaIconAiSize: 16px; --ciaIconAiMargin: 4px; } /**** AI Icons ****/ .aiStaticValue, .ciaButtonContainerColourVariantAiPrimary, .ciaButtonContainerColourVariantAiSecondary { --ciaIconAiSize: 12px; } .aiValue{ --ciaIconAiSize: 8px; } .hasPicker .aiValue{ /* there is no need for right-margin as the AI icon is followed by other elements */ --ciaIconAiMargin: 0px; } /* TODO: Clean up button style declarations. Ideally should be using utility classes */ /* === Utility Classes -> States === */ /* Layer ensures component styles (declared outside any layer) always win over the reset-descendant rules here, regardless of specificity — so a nested .ciaStateClickable's own hover/focus tokens aren't clobbered by the reset. */ @layer ciaState { /*-- CLICKABLE ---------------------------------------------*/ :is(.ciaStateClickable, .ciaStateClickableGroup, .ciaStateClickableGroup *, :is(button, a.buttonStyle), :is(.stackedStyle .textBoxControl, .stackedContainer > .controlContainer)) { cursor: pointer; /* Render clickable child elements seperately, unless in a group */ &:not( .ciaStateSelected, .ciaStateSelectedGroup, .ciaStateSelectedGroup *:not( .ciaStateClickable, :is(button, a.buttonStyle), :is(.stackedStyle .textBoxControl, .stackedContainer > .controlContainer) ), .ciaStateDisabled, .ciaStateDisabled *, :disabled, [aria-disabled=true], .ciaStateReadOnly, :is(.readonly, .readonly *) ) { &:is(:hover, .ciaStateClickableGroup:hover *) { --ciaStateDefaultBackground: var(--ciaStateHoverBackground); --ciaStateDefaultContent: var(--ciaStateHoverContent); --ciaStateDefaultBorder: var(--ciaStateHoverBorder); --ciaStateDefaultOutline: var(--ciaStateHoverOutline); } &:is(:focus-visible, .ciaStateClickableGroup:focus-visible *, .ciaStateClickableGroup:focus-within *, .ciaStateFocusWithin:focus-within) { --ciaStateDefaultBackground: var(--ciaStateFocusBackground); --ciaStateDefaultContent: var(--ciaStateFocusContent); --ciaStateDefaultBorder: var(--ciaStateFocusBorder); --ciaStateDefaultOutline: var(--ciaStateFocusOutline); } &:is(:active, .ciaStateClickableGroup:active *) { --ciaStateDefaultBackground: var(--ciaStateActiveBackground, var(--ciaStateFocusBackground, var(--ciaStateHoverBackground))); --ciaStateDefaultContent: var(--ciaStateActiveContent, var(--ciaStateFocusContent, var(--ciaStateHoverContent))); --ciaStateDefaultBorder: var(--ciaStateActiveBorder, var(--ciaStateFocusBorder, var(--ciaStateHoverBorder))); --ciaStateDefaultOutline: var(--ciaStateActiveOutline, var(--ciaStateFocusOutline, var(--ciaStateHoverOutline))); } } /* Reset clickable child elements' states */ :not( .ciaStateDisabled, .ciaStateDisabled *, :disabled, [aria-disabled=true], .ciaStateReadOnly, :is(.readonly, .readonly *) ) { --ciaStateDefaultBackground: initial; --ciaStateDefaultContent: initial; --ciaStateDefaultBorder: initial; --ciaStateDefaultOutline: initial; --ciaStateHoverBackground: initial; --ciaStateHoverContent: initial; --ciaStateHoverBorder: initial; --ciaStateHoverOutline: initial; --ciaStateFocusBackground: initial; --ciaStateFocusContent: initial; --ciaStateFocusBorder: initial; --ciaStateFocusOutline: initial; --ciaStateActiveBackground: initial; --ciaStateActiveContent: initial; --ciaStateActiveBorder: initial; --ciaStateActiveOutline: initial; } /* Preserve outline colour on focus while selected */ &:is(.ciaStateSelected, .ciaStateSelectedGroup) { &:is(:focus-visible, .ciaStateClickableGroup:focus-visible *, .ciaStateClickableGroup:focus-within *, .ciaStateFocusWithin:focus-within) { --ciaStateDefaultOutline: var(--ciaStateSelectedFocusOutline, var(--ciaStateFocusOutline)); } } } /*-- DISABLED ----------------------------------------------*/ .ciaStateDisabled, .ciaStateDisabled *, :disabled, [aria-disabled=true], /* If a form is in edit mode, show read only fields as disabled */ .editMode :is(.stackedStyle .textBoxControl, .stackedContainer > .controlContainer):is(.readonly, .readonly *) { cursor: default; --ciaStateDefaultBackground: var(--ciaStateDisabledBackground); --ciaStateDefaultContent: var(--ciaStateDisabledContent); --ciaStateDefaultBorder: var(--ciaStateDisabledBorder); --ciaStateDefaultOutline: var(--ciaStateDisabledOutline); } /*-- READ ONLY ---------------------------------------------*/ .ciaStateReadOnly, :is(.stackedStyle .textBoxControl, .stackedContainer > .controlContainer):is(.readonly, .readonly *) { --ciaStateDefaultBackground: var(--ciaStateReadOnlyBackground); --ciaStateDefaultContent: var(--ciaStateReadOnlyContent); --ciaStateDefaultBorder: var(--ciaStateReadOnlyBorder); --ciaStateDefaultOutline: var(--ciaStateReadOnlyOutline); } /*-- SELECTED ----------------------------------------------*/ :is(.ciaStateSelected, .ciaStateSelectedGroup, .ciaStateSelectedGroup *):not( .ciaStateDisabled, .ciaStateDisabled *, :disabled, [aria-disabled=true], .ciaStateReadOnly, :is(.stackedStyle .textBoxControl, .stackedContainer > .controlContainer):is(.readonly, .readonly *) ) { .ciaStateClickable, .ciaStateClickableGroup, :is(button, a.buttonStyle), :is(.stackedStyle .textBoxControl, .stackedContainer > .controlContainer) { --ciaStateDefaultBackground: initial; --ciaStateDefaultContent: initial; --ciaStateDefaultBorder: initial; --ciaStateDefaultOutline: initial; } --ciaStateDefaultBackground: var(--ciaStateSelectedBackground); --ciaStateDefaultContent: var(--ciaStateSelectedContent); --ciaStateDefaultBorder: var(--ciaStateSelectedBorder); --ciaStateDefaultOutline: var(--ciaStateSelectedOutline); } } /* Typography categories*/ :root{ /* Display */ --ciaFontSizeDisplayLarge: var(--ciaFontSize1000); --ciaFontSizeDisplayDefault: var(--ciaFontSize900); --ciaFontSizeDisplaySmall: var(--ciaFontSize700); --ciaFontWeightDisplayDefault: var(--ciaFontWeight600); --ciaFontWeightDisplayStrong: var(--ciaFontWeight700); --ciaLineHeightDisplay: var(--ciaLineHeight120); --ciaLetterSpacingDisplay: var(--ciaLetterSpacingMinus1); /* Heading */ --ciaFontSizeHeadingLarge: var(--ciaFontSize600); --ciaFontSizeHeadingDefault: var(--ciaFontSize400); --ciaFontSizeHeadingSmall: var(--ciaFontSize300); --ciaFontSizeHeadingXSmall: var(--ciaFontSize200); --ciaFontWeightHeadingDefault: var(--ciaFontWeight600); --ciaFontWeightHeadingStrong: var(--ciaFontWeight700); --ciaLineHeightHeading: var(--ciaLineHeight120); --ciaLetterSpacingHeading: var(--ciaLetterSpacingDefault); --ciaTextTransformHeading: none; /* Body (default) */ --ciaFontSizeBodyLarge: var(--ciaFontSize400); --ciaFontSizeBodyDefault: var(--ciaFontSize300); --ciaFontSizeBodySmall: var(--ciaFontSize200); --ciaFontSizeBodyXSmall: var(--ciaFontSize100); --ciaFontWeightBodyDefault: var(--ciaFontWeight400); --ciaFontWeightBodyStrong: var(--ciaFontWeight600); --ciaLineHeightBody: var(--ciaLineHeight150); --ciaLetterSpacingBody: var(--ciaLetterSpacingDefault); --ciaTextTransformBody: none; /* Label */ --ciaFontSizeLabelDefault: var(--ciaFontSize300); --ciaFontSizeLabelSmall: var(--ciaFontSize200); --ciaFontWeightLabelDefault: var(--ciaFontWeight400); --ciaFontWeightLabelStrong: var(--ciaFontWeight600); --ciaLineHeightLabel: var(--ciaLineHeight150); --ciaLetterSpacingLabel: var(--ciaLetterSpacingDefault); --ciaTextTransformLabel: none; /* Meta */ --ciaFontSizeMetaDefault: var(--ciaFontSize300); --ciaFontSizeMetaSmall: var(--ciaFontSize200); --ciaFontWeightMetaDefault: var(--ciaFontWeight500); --ciaFontWeightMetaStrong: var(--ciaFontWeight500); --ciaLineHeightMeta: var(--ciaLineHeight120); --ciaLetterSpacingMeta: var(--ciaLetterSpacingDefault); --ciaTextTransformMeta: uppercase; } /* * Phone typography tokens * define only values different from desktop */ .phone{ /* Display - same as desktop */ /* Heading */ --ciaFontSizeHeadingDefault: var(--ciaFontSize500); --ciaFontSizeHeadingSmall: var(--ciaFontSize400); --ciaFontSizeHeadingXSmall: var(--ciaFontSize300); /* Body (default) */ --ciaFontSizeBodyLarge: var(--ciaFontSize500); --ciaFontSizeBodyDefault: var(--ciaFontSize200); /* Note: according to the design document this should be -medium but currently default font size on phone is 12px equivalent of -small primitive. Changing default font size will likely have much larger impact on any fixed height/width containers (i.e. many containers have 16px height and 250px label width) */ --ciaFontSizeBodySmall: var(--ciaFontSize300); /* Label */ --ciaFontSizeLabelDefault: var(--ciaFontSize400); --ciaFontSizeLabelSmall: var(--ciaFontSize300); /* Meta */ --ciaFontSizeMetaDefault: var(--ciaFontSize400); --ciaFontSizeMetaSmall: var(--ciaFontSize300); } :root{ --ciaFontSizeLink: var(--ciaFontSize300); --ciaFontSizeDropDownItem: var(--ciaFontSize300); --ciaFontSizeHeading: var(--ciaFontSize300); /* global header tokens */ --ciaFontSizeFunctionSearch: var(--ciaFontSize300); --ciaFontSizePageTitle: var(--ciaFontSize300); /* main panel (main editable panel) heading tokens */ --ciaFontSizeMainPanelHeading: var(--ciaFontSize400); --ciaFontSizeMainPanelHeadingGlyph: var(--ciaFontSize700); /* 16px text is the equivalent of 24px for glyph*/ /* normal panel (i.e. categories) heading tokens */ --ciaFontSizePanelHeading: var(--ciaFontSizeHeading); --ciaFontTransformPanelHeading: none; --ciaFontWeightPanelHeading: var(--ciaFontWeight700); --ciaFontWeightStatus: var(--ciaFontWeight700); } /* ideally we will have as little exceptions as possible */ /* within the filters panel, headings are to be uppercase */ .filterContent{ --ciaFontTransformPanelHeading: uppercase; } .statusField { font-weight: var(--ciaFontWeightStatus); } /* TODO: Clean this up. We shouldn't style default elements directly. Instead, apply component tokens to the relevant UI elements. - Exclude embedded CiaMaps (MapBuilder) buttons (eg. class prefix of mb-) from global button styling */ button:not([class*="mb-"]), a.buttonStyle { border-width: 1px; border-style: solid; border-radius: 3px; line-height: 16px; padding: 6px; cursor: pointer; display: inline-flex; gap: 4px; flex-direction: row; align-items: center; justify-content: center; &.alignLeft{/* i.e. sometimes dropdown items are rendered as buttons */ justify-content: flex-start; } &.alignRight{/* i.e. suggestionPaneButton */ justify-content: flex-end; } text-align: center; > * { vertical-align: middle; } /*-- BUTTON STYLE ------------------------------------------*/ &:is(a.buttonStyle):hover { text-decoration:none; } /*-- DISABLED STATE ----------------------------------------*/ &:is(.ciaStateDisabled, :disabled) { /* Semi-transparency for AI icons */ > .aiBadgeControl { opacity: 0.5; } } /*-- VIEW SELECTOR BUTTON ----------------------------------*/ /* Active arrow on .selectViewBtn (shown when JS toggles ciaStateSelected on) */ &.selectViewBtn.ciaStateSelected:after { content: ""; border: 4px solid transparent; border-left: 8px solid; border-left-color: inherit; position: absolute; right: -12px; align-self: center; } /*-- AI BUTTONS --------------------------------------------*/ /* hide the AI icon by default for AI action buttons */ &:is(.ciaButtonContainerColourVariantAiPrimary, .ciaButtonContainerColourVariantAiSecondary) { &:not(.showAIIcon){ >.aiBadgeControl >.aiIcon { display: none; } } } /*-- POPUP BUTTONS -----------------------------------------*/ &:is(.popupClose, .popupMaximise) { position:absolute; right:5px; top:5px; padding: 2px; &:is(.popupMaximise) { right:40px; } } /*-- SUGGESTION PANE BUTTON --------------------------------*/ &.suggestionPaneButton { border: none; width: 100%; overflow: hidden; padding: 12px; cursor: pointer; line-height: 16px; box-sizing: border-box; } /* TODO: Consolidate and standardise `.flatButton`, `.favouriteButton`, and other random button class types here where necessary */ } .cardNavigator{ display: flex; flex-direction: row; align-items: center; box-sizing: border-box; width: var(--navigator-width); justify-content: center; position: var(--navigator-position, relative); top: var(--navigator-top, unset); bottom: var(--navigator-bottom, unset); right: var(--navigator-right, unset); z-index: 1; .selectorIndicator{ display: none; border-right-width: 3px; border-right-style: solid; border-right-color: inherit; height: 100%; align-items: center; justify-content: flex-end; flex-grow: 1; .arrowLeft { border-top: solid 6px transparent; border-bottom: solid 6px transparent; border-right-style: solid; border-right-width: 5px; border-right-color: inherit; height: 0; width: 0; } } :is(.ciaStateSelected, .ciaStateSelectedGroup) & { .navigatorIndicator{ display: var(--cn-nav-indicator-display, none); } .selectorIndicator{ display: var(--cn-sel-indicator-display, flex); } } .phone & { /* on phone, never show the selector, only the navigator indicator regardless of the state */ --cn-nav-indicator-display: block; --cn-sel-indicator-display: none; } } /*== Tier 3 Utility Classes -> Components ==================*/ /*-- ACCORDION ---------------------------------------------*/ /* accordion/item/color/… */ .ciaAccordionItemColourContent { color: var(--ciaStateDefaultContent, var(--ciaColourContentDefaultSecondary)); --ciaStateHoverContent: var(--ciaColourContentDefaultHover); --ciaStateSelectedContent: var(--ciaColourContentDefaultActive); .phone & { color: var(--ciaStateDefaultContent, var(--ciaColourContentDefaultInverse)); } } .ciaAccordionItemColourBorder { border-color: var(--ciaColourBorderDefaultSubtle); } /* accordion/item/variant/primary — brand primary hover + selected content. */ .ciaAccordionItemColourVariantPrimary { &.ciaAccordionItemColourContent, & .ciaAccordionItemColourContent { --ciaStateHoverContent: var(--ciaColourContentBrandPrimaryHover); --ciaStateSelectedContent: var(--ciaColourContentBrandPrimary); } } /* accordion/trigger/color/… */ .ciaAccordionTriggerColourContent { color: var(--ciaStateDefaultContent, var(--ciaColourContentDefault)); --ciaStateHoverContent: var(--ciaColourContentDefaultHover); } .ciaAccordionTriggerColourContentIndicator { color: var(--ciaStateDefaultContent, var(--ciaColourContentDefaultSecondary)); --ciaStateHoverContent: var(--ciaColourContentDefaultHover); } /*-- ALERT -------------------------------------------------*/ /* alert/container/color/… */ .ciaAlertContainerColourBackground { background-color: var(--ciaColourBackgroundDefault); } .ciaAlertContainerColourBorder { border-color: var(--ciaColourBorderDefault); } /*-- BUTTON ------------------------------------------------*/ /* TODO: Clean up the selectors here. We should be applying components tokens to the relevant UI elements instead. */ /* - Exclude other component parts that are using the