diff --git a/packages/design-system/generate/generate.ts b/packages/design-system/generate/generate.ts index 393e0a52d..6eee0413a 100644 --- a/packages/design-system/generate/generate.ts +++ b/packages/design-system/generate/generate.ts @@ -62,14 +62,22 @@ json.collections.forEach((collection) => { switch (variable.type) { case 'boolean': if (typeof variable.value === 'boolean') { - // Handle text transform UPPERCASE - if (/upper(\s+)?case|text transform/i.test(variable.name)) { + // Handle text transform + if (/text transform/i.test(variable.name)) { token = variable.name.replace( - /upper(\s+)?case|text transform/i, + /text transform/i, 'Text-Transform' ) value = variable.value ? 'uppercase' : 'unset' } + // Handle text decoration + else if (/text decoration/i.test(variable.name)) { + token = variable.name.replace( + /text decoration/i, + 'Text-Decoration' + ) + value = variable.value ? 'underline' : 'unset' + } } else { throw new Error( `Bad variable value input type. Expected 'boolean' got '${variable.type}'` diff --git a/packages/design-system/generate/variables.json b/packages/design-system/generate/variables.json index 452f7896f..4bebd23d1 100644 --- a/packages/design-system/generate/variables.json +++ b/packages/design-system/generate/variables.json @@ -150,7 +150,7 @@ "name": "Neutral/Opacity/White/5", "type": "color", "isAlias": false, - "value": "#FFFFFF00" + "value": "#FFFFFF0D" }, { "name": "Neutral/Opacity/White/0", @@ -1676,18 +1676,18 @@ "isAlias": false, "value": "#C7DDD5" }, - { - "name": "Signature/Hotel Norge/Emerald/80", - "type": "color", - "isAlias": false, - "value": "#3A655C" - }, { "name": "Signature/Hotel Norge/Off White/80", "type": "color", "isAlias": false, "value": "#838481" }, + { + "name": "Signature/Hotel Norge/Emerald/80", + "type": "color", + "isAlias": false, + "value": "#3A655C" + }, { "name": "Signature/Hotel Norge/Off White/90", "type": "color", @@ -1706,18 +1706,18 @@ "isAlias": false, "value": "#646563" }, - { - "name": "Signature/Hotel Norge/Emerald/100", - "type": "color", - "isAlias": false, - "value": "#004337" - }, { "name": "Signature/Hotel Norge/Dark blue/0", "type": "color", "isAlias": false, "value": "#B7C5C8" }, + { + "name": "Signature/Hotel Norge/Emerald/100", + "type": "color", + "isAlias": false, + "value": "#004337" + }, { "name": "Signature/Hotel Norge/Dark blue/30", "type": "color", @@ -2345,7 +2345,7 @@ "isAlias": true, "value": { "collection": "_Typographic primitives", - "name": "Font family/Title" + "name": "Font family/Scandic/Title" } }, { @@ -2390,9 +2390,15 @@ "isAlias": true, "value": { "collection": "_Typographic primitives", - "name": "Font family/Title" + "name": "Font family/Scandic/Title" } }, + { + "name": "Title/md/Letter spacing", + "type": "number", + "isAlias": false, + "value": 0.09000000357627869 + }, { "name": "Title/sm/Size", "type": "number", @@ -2402,12 +2408,6 @@ "name": "Text size/lg" } }, - { - "name": "Title/md/Letter spacing", - "type": "number", - "isAlias": false, - "value": 0.09000000357627869 - }, { "name": "Title/md/Font fallback", "type": "string", @@ -2429,7 +2429,7 @@ "isAlias": true, "value": { "collection": "_Typographic primitives", - "name": "Font family/Title" + "name": "Font family/Scandic/Title" } }, { @@ -2468,6 +2468,15 @@ "name": "Font weight/Regular bold" } }, + { + "name": "Title/sm/LowCase/Font family", + "type": "string", + "isAlias": true, + "value": { + "collection": "_Typographic primitives", + "name": "Font family/Scandic/Title" + } + }, { "name": "Title/xs/Size", "type": "number", @@ -2477,15 +2486,6 @@ "name": "Text size/sm" } }, - { - "name": "Title/sm/LowCase/Font family", - "type": "string", - "isAlias": true, - "value": { - "collection": "_Typographic primitives", - "name": "Font family/Title" - } - }, { "name": "Title/Decorative/lg/Size", "type": "number", @@ -2510,7 +2510,7 @@ "isAlias": true, "value": { "collection": "_Typographic primitives", - "name": "Font family/Decorative" + "name": "Font family/Scandic/Decorative" } }, { @@ -2555,7 +2555,7 @@ "isAlias": true, "value": { "collection": "_Typographic primitives", - "name": "Font family/Decorative" + "name": "Font family/Scandic/Decorative" } }, { @@ -2600,7 +2600,7 @@ "isAlias": true, "value": { "collection": "_Typographic primitives", - "name": "Font family/Body" + "name": "Font family/Scandic/Body" } }, { @@ -2639,7 +2639,7 @@ "isAlias": true, "value": { "collection": "_Typographic primitives", - "name": "Font family/Body" + "name": "Font family/Scandic/Body" } }, { @@ -2678,7 +2678,7 @@ "isAlias": true, "value": { "collection": "_Typographic primitives", - "name": "Font family/Title" + "name": "Font family/Scandic/Title" } }, { @@ -2732,7 +2732,7 @@ "isAlias": true, "value": { "collection": "_Typographic primitives", - "name": "Font family/Title" + "name": "Font family/Scandic/Title" } }, { @@ -2783,7 +2783,7 @@ "isAlias": true, "value": { "collection": "_Typographic primitives", - "name": "Font family/Title" + "name": "Font family/Scandic/Title" } }, { @@ -2837,7 +2837,7 @@ "isAlias": true, "value": { "collection": "_Typographic primitives", - "name": "Font family/Title" + "name": "Font family/Scandic/Title" } }, { @@ -2882,7 +2882,7 @@ "isAlias": true, "value": { "collection": "_Typographic primitives", - "name": "Font family/Body" + "name": "Font family/Scandic/Body" } }, { @@ -2897,6 +2897,12 @@ "isAlias": false, "value": 0.19200000166893005 }, + { + "name": "Link/md/Text decoration", + "type": "boolean", + "isAlias": false, + "value": true + }, { "name": "Link/sm/Size", "type": "number", @@ -2921,7 +2927,7 @@ "isAlias": true, "value": { "collection": "_Typographic primitives", - "name": "Font family/Body" + "name": "Font family/Scandic/Body" } }, { @@ -2936,6 +2942,12 @@ "isAlias": false, "value": 0.19599999487400055 }, + { + "name": "Link/sm/Text decoration", + "type": "boolean", + "isAlias": false, + "value": true + }, { "name": "Body/Lead text/Font weight", "type": "number", @@ -2951,7 +2963,7 @@ "isAlias": true, "value": { "collection": "_Typographic primitives", - "name": "Font family/Body" + "name": "Font family/Scandic/Body" } }, { @@ -2993,7 +3005,7 @@ "isAlias": true, "value": { "collection": "_Typographic primitives", - "name": "Font family/Body" + "name": "Font family/Scandic/Body" } }, { @@ -3002,12 +3014,6 @@ "isAlias": false, "value": "sans-serif" }, - { - "name": "Body/Paragraph/Letter spacing", - "type": "number", - "isAlias": false, - "value": 0.19200000166893005 - }, { "name": "Body/Supporting text/Size", "type": "number", @@ -3017,6 +3023,12 @@ "name": "Text size/4xs" } }, + { + "name": "Body/Paragraph/Letter spacing", + "type": "number", + "isAlias": false, + "value": 0.19200000166893005 + }, { "name": "Body/Supporting text/Font weight", "type": "number", @@ -3041,7 +3053,7 @@ "isAlias": true, "value": { "collection": "_Typographic primitives", - "name": "Font family/Body" + "name": "Font family/Scandic/Body" } }, { @@ -3095,7 +3107,7 @@ "isAlias": true, "value": { "collection": "_Typographic primitives", - "name": "Font family/Body" + "name": "Font family/Scandic/Body" } }, { @@ -3134,7 +3146,7 @@ "isAlias": true, "value": { "collection": "_Typographic primitives", - "name": "Font family/Body" + "name": "Font family/Scandic/Body" } }, { @@ -3158,6 +3170,12 @@ "name": "Text size/4xs" } }, + { + "name": "Body/Underline/md/Text decoration", + "type": "boolean", + "isAlias": false, + "value": true + }, { "name": "Body/Underline/sm/Font weight", "type": "number", @@ -3173,7 +3191,7 @@ "isAlias": true, "value": { "collection": "_Typographic primitives", - "name": "Font family/Body" + "name": "Font family/Scandic/Body" } }, { @@ -3187,6 +3205,12 @@ "type": "number", "isAlias": false, "value": 0.19599999487400055 + }, + { + "name": "Body/Underline/sm/Text decoration", + "type": "boolean", + "isAlias": false, + "value": true } ] }, @@ -3265,6 +3289,12 @@ "name": "Font family/Scandic Go/Title" } }, + { + "name": "Title/md/Letter spacing", + "type": "number", + "isAlias": false, + "value": 0.36000001430511475 + }, { "name": "Title/sm/Size", "type": "number", @@ -3274,12 +3304,6 @@ "name": "Text size/lg" } }, - { - "name": "Title/md/Letter spacing", - "type": "number", - "isAlias": false, - "value": 0.36000001430511475 - }, { "name": "Title/md/Font fallback", "type": "string", @@ -3340,15 +3364,6 @@ "name": "Font weight/Medium" } }, - { - "name": "Title/xs/Size", - "type": "number", - "isAlias": true, - "value": { - "collection": "Responsive", - "name": "Text size/sm" - } - }, { "name": "Title/sm/LowCase/Font family", "type": "string", @@ -3358,6 +3373,15 @@ "name": "Font family/Scandic Go/Title" } }, + { + "name": "Title/xs/Size", + "type": "number", + "isAlias": true, + "value": { + "collection": "Responsive", + "name": "Text size/sm" + } + }, { "name": "Title/Decorative/lg/Size", "type": "number", @@ -3655,7 +3679,7 @@ "isAlias": true, "value": { "collection": "_Typographic primitives", - "name": "Font family/Title" + "name": "Font family/Scandic/Title" } }, { @@ -3769,6 +3793,12 @@ "isAlias": false, "value": 0.1899999976158142 }, + { + "name": "Link/md/Text decoration", + "type": "boolean", + "isAlias": false, + "value": true + }, { "name": "Link/sm/Size", "type": "number", @@ -3808,6 +3838,12 @@ "isAlias": false, "value": 0.20000000298023224 }, + { + "name": "Link/sm/Text decoration", + "type": "boolean", + "isAlias": false, + "value": true + }, { "name": "Body/Lead text/Font weight", "type": "number", @@ -3874,12 +3910,6 @@ "isAlias": false, "value": "sans-serif" }, - { - "name": "Body/Paragraph/Letter spacing", - "type": "number", - "isAlias": false, - "value": 0.1899999976158142 - }, { "name": "Body/Supporting text/Size", "type": "number", @@ -3889,6 +3919,12 @@ "name": "Text size/4xs" } }, + { + "name": "Body/Paragraph/Letter spacing", + "type": "number", + "isAlias": false, + "value": 0.1899999976158142 + }, { "name": "Body/Supporting text/Font weight", "type": "number", @@ -4030,6 +4066,12 @@ "name": "Text size/4xs" } }, + { + "name": "Body/Underline/md/Text decoration", + "type": "boolean", + "isAlias": false, + "value": true + }, { "name": "Body/Underline/sm/Font weight", "type": "number", @@ -4059,6 +4101,12 @@ "type": "number", "isAlias": false, "value": 0.20000000298023224 + }, + { + "name": "Body/Underline/sm/Text decoration", + "type": "boolean", + "isAlias": false, + "value": true } ] }, @@ -4137,6 +4185,12 @@ "name": "Font family/Downtown Camper/Title" } }, + { + "name": "Title/md/Letter spacing", + "type": "number", + "isAlias": false, + "value": 0.09000000357627869 + }, { "name": "Title/sm/Size", "type": "number", @@ -4146,12 +4200,6 @@ "name": "Text size/lg" } }, - { - "name": "Title/md/Letter spacing", - "type": "number", - "isAlias": false, - "value": 0.09000000357627869 - }, { "name": "Title/md/Font fallback", "type": "string", @@ -4212,15 +4260,6 @@ "name": "Font weight/Regular" } }, - { - "name": "Title/xs/Size", - "type": "number", - "isAlias": true, - "value": { - "collection": "Responsive", - "name": "Text size/sm" - } - }, { "name": "Title/sm/LowCase/Font family", "type": "string", @@ -4230,6 +4269,15 @@ "name": "Font family/Downtown Camper/Title" } }, + { + "name": "Title/xs/Size", + "type": "number", + "isAlias": true, + "value": { + "collection": "Responsive", + "name": "Text size/sm" + } + }, { "name": "Title/Decorative/lg/Size", "type": "number", @@ -4641,6 +4689,12 @@ "isAlias": false, "value": 0.1899999976158142 }, + { + "name": "Link/md/Text decoration", + "type": "boolean", + "isAlias": false, + "value": true + }, { "name": "Link/sm/Size", "type": "number", @@ -4680,6 +4734,12 @@ "isAlias": false, "value": 0.20000000298023224 }, + { + "name": "Link/sm/Text decoration", + "type": "boolean", + "isAlias": false, + "value": true + }, { "name": "Body/Lead text/Font weight", "type": "number", @@ -4746,12 +4806,6 @@ "isAlias": false, "value": "sans-serif" }, - { - "name": "Body/Paragraph/Letter spacing", - "type": "number", - "isAlias": false, - "value": 0.1899999976158142 - }, { "name": "Body/Supporting text/Size", "type": "number", @@ -4761,6 +4815,12 @@ "name": "Text size/4xs" } }, + { + "name": "Body/Paragraph/Letter spacing", + "type": "number", + "isAlias": false, + "value": 0.1899999976158142 + }, { "name": "Body/Supporting text/Font weight", "type": "number", @@ -4902,6 +4962,12 @@ "name": "Text size/4xs" } }, + { + "name": "Body/Underline/md/Text decoration", + "type": "boolean", + "isAlias": false, + "value": true + }, { "name": "Body/Underline/sm/Font weight", "type": "number", @@ -4931,6 +4997,12 @@ "type": "number", "isAlias": false, "value": 0.20000000298023224 + }, + { + "name": "Body/Underline/sm/Text decoration", + "type": "boolean", + "isAlias": false, + "value": true } ] }, @@ -5009,6 +5081,12 @@ "name": "Font family/Haymarket/Title" } }, + { + "name": "Title/md/Letter spacing", + "type": "number", + "isAlias": false, + "value": 0.36000001430511475 + }, { "name": "Title/sm/Size", "type": "number", @@ -5018,12 +5096,6 @@ "name": "Text size/lg" } }, - { - "name": "Title/md/Letter spacing", - "type": "number", - "isAlias": false, - "value": 0.36000001430511475 - }, { "name": "Title/md/Font fallback", "type": "string", @@ -5084,15 +5156,6 @@ "name": "Font weight/Regular" } }, - { - "name": "Title/xs/Size", - "type": "number", - "isAlias": true, - "value": { - "collection": "Responsive", - "name": "Text size/sm" - } - }, { "name": "Title/sm/LowCase/Font family", "type": "string", @@ -5102,6 +5165,15 @@ "name": "Font family/Haymarket/Title" } }, + { + "name": "Title/xs/Size", + "type": "number", + "isAlias": true, + "value": { + "collection": "Responsive", + "name": "Text size/sm" + } + }, { "name": "Title/Decorative/lg/Size", "type": "number", @@ -5513,6 +5585,12 @@ "isAlias": false, "value": 0.1899999976158142 }, + { + "name": "Link/md/Text decoration", + "type": "boolean", + "isAlias": false, + "value": true + }, { "name": "Link/sm/Size", "type": "number", @@ -5552,6 +5630,12 @@ "isAlias": false, "value": 0.20000000298023224 }, + { + "name": "Link/sm/Text decoration", + "type": "boolean", + "isAlias": false, + "value": true + }, { "name": "Body/Lead text/Font weight", "type": "number", @@ -5618,12 +5702,6 @@ "isAlias": false, "value": "sans-serif" }, - { - "name": "Body/Paragraph/Letter spacing", - "type": "number", - "isAlias": false, - "value": 0.1899999976158142 - }, { "name": "Body/Supporting text/Size", "type": "number", @@ -5633,6 +5711,12 @@ "name": "Text size/4xs" } }, + { + "name": "Body/Paragraph/Letter spacing", + "type": "number", + "isAlias": false, + "value": 0.1899999976158142 + }, { "name": "Body/Supporting text/Font weight", "type": "number", @@ -5774,6 +5858,12 @@ "name": "Text size/4xs" } }, + { + "name": "Body/Underline/md/Text decoration", + "type": "boolean", + "isAlias": false, + "value": true + }, { "name": "Body/Underline/sm/Font weight", "type": "number", @@ -5803,6 +5893,12 @@ "type": "number", "isAlias": false, "value": 0.20000000298023224 + }, + { + "name": "Body/Underline/sm/Text decoration", + "type": "boolean", + "isAlias": false, + "value": true } ] }, @@ -5881,6 +5977,12 @@ "name": "Font family/Marski/Title" } }, + { + "name": "Title/md/Letter spacing", + "type": "number", + "isAlias": false, + "value": 0.09000000357627869 + }, { "name": "Title/sm/Size", "type": "number", @@ -5890,12 +5992,6 @@ "name": "Text size/lg" } }, - { - "name": "Title/md/Letter spacing", - "type": "number", - "isAlias": false, - "value": 0.09000000357627869 - }, { "name": "Title/md/Font fallback", "type": "string", @@ -5956,15 +6052,6 @@ "name": "Font weight/Medium" } }, - { - "name": "Title/xs/Size", - "type": "number", - "isAlias": true, - "value": { - "collection": "Responsive", - "name": "Text size/sm" - } - }, { "name": "Title/sm/LowCase/Font family", "type": "string", @@ -5974,6 +6061,15 @@ "name": "Font family/Marski/Title" } }, + { + "name": "Title/xs/Size", + "type": "number", + "isAlias": true, + "value": { + "collection": "Responsive", + "name": "Text size/sm" + } + }, { "name": "Title/Decorative/lg/Size", "type": "number", @@ -6385,6 +6481,12 @@ "isAlias": false, "value": 0.1899999976158142 }, + { + "name": "Link/md/Text decoration", + "type": "boolean", + "isAlias": false, + "value": true + }, { "name": "Link/sm/Size", "type": "number", @@ -6424,6 +6526,12 @@ "isAlias": false, "value": 0.20000000298023224 }, + { + "name": "Link/sm/Text decoration", + "type": "boolean", + "isAlias": false, + "value": true + }, { "name": "Body/Lead text/Font weight", "type": "number", @@ -6490,12 +6598,6 @@ "isAlias": false, "value": "sans-serif" }, - { - "name": "Body/Paragraph/Letter spacing", - "type": "number", - "isAlias": false, - "value": 0.1899999976158142 - }, { "name": "Body/Supporting text/Size", "type": "number", @@ -6505,6 +6607,12 @@ "name": "Text size/4xs" } }, + { + "name": "Body/Paragraph/Letter spacing", + "type": "number", + "isAlias": false, + "value": 0.1899999976158142 + }, { "name": "Body/Supporting text/Font weight", "type": "number", @@ -6646,6 +6754,12 @@ "name": "Text size/4xs" } }, + { + "name": "Body/Underline/md/Text decoration", + "type": "boolean", + "isAlias": false, + "value": true + }, { "name": "Body/Underline/sm/Font weight", "type": "number", @@ -6675,6 +6789,12 @@ "type": "number", "isAlias": false, "value": 0.20000000298023224 + }, + { + "name": "Body/Underline/sm/Text decoration", + "type": "boolean", + "isAlias": false, + "value": true } ] }, @@ -6753,6 +6873,12 @@ "name": "Font family/Hotel Norge/Title" } }, + { + "name": "Title/md/Letter spacing", + "type": "number", + "isAlias": false, + "value": 0.36000001430511475 + }, { "name": "Title/sm/Size", "type": "number", @@ -6762,12 +6888,6 @@ "name": "Text size/lg" } }, - { - "name": "Title/md/Letter spacing", - "type": "number", - "isAlias": false, - "value": 0.36000001430511475 - }, { "name": "Title/md/Font fallback", "type": "string", @@ -6828,15 +6948,6 @@ "name": "Font weight/Regular" } }, - { - "name": "Title/xs/Size", - "type": "number", - "isAlias": true, - "value": { - "collection": "Responsive", - "name": "Text size/sm" - } - }, { "name": "Title/sm/LowCase/Font family", "type": "string", @@ -6846,6 +6957,15 @@ "name": "Font family/Hotel Norge/Title" } }, + { + "name": "Title/xs/Size", + "type": "number", + "isAlias": true, + "value": { + "collection": "Responsive", + "name": "Text size/sm" + } + }, { "name": "Title/Decorative/lg/Size", "type": "number", @@ -7257,6 +7377,12 @@ "isAlias": false, "value": 0.1899999976158142 }, + { + "name": "Link/md/Text decoration", + "type": "boolean", + "isAlias": false, + "value": true + }, { "name": "Link/sm/Size", "type": "number", @@ -7296,6 +7422,12 @@ "isAlias": false, "value": 0.20000000298023224 }, + { + "name": "Link/sm/Text decoration", + "type": "boolean", + "isAlias": false, + "value": true + }, { "name": "Body/Lead text/Font weight", "type": "number", @@ -7362,12 +7494,6 @@ "isAlias": false, "value": "sans-serif" }, - { - "name": "Body/Paragraph/Letter spacing", - "type": "number", - "isAlias": false, - "value": 0.1899999976158142 - }, { "name": "Body/Supporting text/Size", "type": "number", @@ -7377,6 +7503,12 @@ "name": "Text size/4xs" } }, + { + "name": "Body/Paragraph/Letter spacing", + "type": "number", + "isAlias": false, + "value": 0.1899999976158142 + }, { "name": "Body/Supporting text/Font weight", "type": "number", @@ -7518,6 +7650,12 @@ "name": "Text size/4xs" } }, + { + "name": "Body/Underline/md/Text decoration", + "type": "boolean", + "isAlias": false, + "value": true + }, { "name": "Body/Underline/sm/Font weight", "type": "number", @@ -7547,6 +7685,12 @@ "type": "number", "isAlias": false, "value": 0.20000000298023224 + }, + { + "name": "Body/Underline/sm/Text decoration", + "type": "boolean", + "isAlias": false, + "value": true } ] }, @@ -7625,6 +7769,12 @@ "name": "Font family/Grand Hotel/Title" } }, + { + "name": "Title/md/Letter spacing", + "type": "number", + "isAlias": false, + "value": 0.18000000715255737 + }, { "name": "Title/sm/Size", "type": "number", @@ -7634,12 +7784,6 @@ "name": "Text size/lg" } }, - { - "name": "Title/md/Letter spacing", - "type": "number", - "isAlias": false, - "value": 0.18000000715255737 - }, { "name": "Title/md/Font fallback", "type": "string", @@ -7700,15 +7844,6 @@ "name": "Font weight/Regular" } }, - { - "name": "Title/xs/Size", - "type": "number", - "isAlias": true, - "value": { - "collection": "Responsive", - "name": "Text size/sm" - } - }, { "name": "Title/sm/LowCase/Font family", "type": "string", @@ -7718,6 +7853,15 @@ "name": "Font family/Grand Hotel/Title" } }, + { + "name": "Title/xs/Size", + "type": "number", + "isAlias": true, + "value": { + "collection": "Responsive", + "name": "Text size/sm" + } + }, { "name": "Title/Decorative/lg/Size", "type": "number", @@ -8129,6 +8273,12 @@ "isAlias": false, "value": 0.1899999976158142 }, + { + "name": "Link/md/Text decoration", + "type": "boolean", + "isAlias": false, + "value": true + }, { "name": "Link/sm/Size", "type": "number", @@ -8168,6 +8318,12 @@ "isAlias": false, "value": 0.20000000298023224 }, + { + "name": "Link/sm/Text decoration", + "type": "boolean", + "isAlias": false, + "value": true + }, { "name": "Body/Lead text/Font weight", "type": "number", @@ -8234,12 +8390,6 @@ "isAlias": false, "value": "sans-serif" }, - { - "name": "Body/Paragraph/Letter spacing", - "type": "number", - "isAlias": false, - "value": 0.1899999976158142 - }, { "name": "Body/Supporting text/Size", "type": "number", @@ -8249,6 +8399,12 @@ "name": "Text size/4xs" } }, + { + "name": "Body/Paragraph/Letter spacing", + "type": "number", + "isAlias": false, + "value": 0.1899999976158142 + }, { "name": "Body/Supporting text/Font weight", "type": "number", @@ -8390,6 +8546,12 @@ "name": "Text size/4xs" } }, + { + "name": "Body/Underline/md/Text decoration", + "type": "boolean", + "isAlias": false, + "value": true + }, { "name": "Body/Underline/sm/Font weight", "type": "number", @@ -8419,6 +8581,12 @@ "type": "number", "isAlias": false, "value": 0.20000000298023224 + }, + { + "name": "Body/Underline/sm/Text decoration", + "type": "boolean", + "isAlias": false, + "value": true } ] } @@ -8535,7 +8703,7 @@ "isAlias": true, "value": { "collection": "_Primitives", - "name": "Scandic/Grey/100" + "name": "Scandic/Grey/80" } }, { @@ -8565,6 +8733,51 @@ "name": "Scandic/Red/100" } }, + { + "name": "Text/Feedback/Information Accent", + "type": "color", + "isAlias": true, + "value": { + "collection": "_Primitives", + "name": "Scandic/Blue/70" + } + }, + { + "name": "Text/Feedback/Succes Accent", + "type": "color", + "isAlias": true, + "value": { + "collection": "_Primitives", + "name": "Scandic/Green/60" + } + }, + { + "name": "Text/Feedback/Warning Accent", + "type": "color", + "isAlias": true, + "value": { + "collection": "_Primitives", + "name": "Scandic/Yellow/60" + } + }, + { + "name": "Text/Feedback/Error Accent", + "type": "color", + "isAlias": true, + "value": { + "collection": "_Primitives", + "name": "Scandic/Red/70" + } + }, + { + "name": "Text/Feedback/Neutral Accent", + "type": "color", + "isAlias": true, + "value": { + "collection": "_Primitives", + "name": "Scandic/Grey/60" + } + }, { "name": "Text/Brand/OnAccent/Default", "type": "color", @@ -8724,7 +8937,7 @@ "isAlias": true, "value": { "collection": "_Primitives", - "name": "Scandic/Beige/00" + "name": "Scandic/Grey/00" } }, { @@ -8746,7 +8959,7 @@ } }, { - "name": "Surface/Secondary/Secondary", + "name": "Surface/Secondary/Default dark", "type": "color", "isAlias": true, "value": { @@ -9114,6 +9327,15 @@ "name": "Scandic/Peach/80" } }, + { + "name": "Icon/Interactive/Accent", + "type": "color", + "isAlias": true, + "value": { + "collection": "_Primitives", + "name": "Scandic/Red/Default" + } + }, { "name": "Icon/Interactive/Disabled", "type": "color", @@ -9204,6 +9426,15 @@ "name": "Neutral/Opacity/Black/20" } }, + { + "name": "Overlay/30", + "type": "color", + "isAlias": true, + "value": { + "collection": "_Primitives", + "name": "Neutral/Opacity/Black/30" + } + }, { "name": "Overlay/40", "type": "color", @@ -9247,7 +9478,7 @@ "value": "#F2ECE61A" }, { - "name": "Component/Button/Brand/Primary/Default", + "name": "Component/Button/Brand/Primary/Fill/Default", "type": "color", "isAlias": true, "value": { @@ -9256,16 +9487,16 @@ } }, { - "name": "Component/Button/Brand/Primary/Hover", + "name": "Component/Button/Brand/Primary/Fill/Hover", "type": "color", "isAlias": true, "value": { "collection": "_Primitives", - "name": "Neutral/Opacity/Black/10" + "name": "Neutral/Opacity/Black/20" } }, { - "name": "Component/Button/Brand/Primary/Disabled", + "name": "Component/Button/Brand/Primary/Fill/Disabled", "type": "color", "isAlias": true, "value": { @@ -9328,7 +9559,7 @@ } }, { - "name": "Component/Button/Brand/Secondary/Default", + "name": "Component/Button/Brand/Secondary/Fill/Default", "type": "color", "isAlias": true, "value": { @@ -9337,7 +9568,7 @@ } }, { - "name": "Component/Button/Brand/Secondary/Hover", + "name": "Component/Button/Brand/Secondary/Fill/Hover", "type": "color", "isAlias": true, "value": { @@ -9346,7 +9577,7 @@ } }, { - "name": "Component/Button/Brand/Secondary/Inverted", + "name": "Component/Button/Brand/Secondary/Fill/Inverted", "type": "color", "isAlias": true, "value": { @@ -9355,7 +9586,7 @@ } }, { - "name": "Component/Button/Brand/Secondary/Hover Inverted", + "name": "Component/Button/Brand/Secondary/Fill/Hover Inverted", "type": "color", "isAlias": true, "value": { @@ -9364,7 +9595,7 @@ } }, { - "name": "Component/Button/Brand/Secondary/Disabled", + "name": "Component/Button/Brand/Secondary/Fill/Disabled", "type": "color", "isAlias": true, "value": { @@ -9399,6 +9630,15 @@ "name": "Neutral/Opacity/White/100" } }, + { + "name": "Component/Button/Brand/Secondary/On fill/Hover inverted", + "type": "color", + "isAlias": true, + "value": { + "collection": "_Primitives", + "name": "Neutral/Opacity/White/70" + } + }, { "name": "Component/Button/Brand/Secondary/On fill/Disabled", "type": "color", @@ -9441,7 +9681,7 @@ "isAlias": true, "value": { "collection": "_Primitives", - "name": "Neutral/Opacity/White/90" + "name": "Neutral/Opacity/White/50" } }, { @@ -9454,7 +9694,7 @@ } }, { - "name": "Component/Button/Brand/Tertiary/Default", + "name": "Component/Button/Brand/Tertiary/Fill/Default", "type": "color", "isAlias": true, "value": { @@ -9463,7 +9703,7 @@ } }, { - "name": "Component/Button/Brand/Tertiary/Hover", + "name": "Component/Button/Brand/Tertiary/Fill/Hover", "type": "color", "isAlias": true, "value": { @@ -9472,7 +9712,7 @@ } }, { - "name": "Component/Button/Brand/Tertiary/Disabled", + "name": "Component/Button/Brand/Tertiary/Fill/Disabled", "type": "color", "isAlias": true, "value": { @@ -9535,7 +9775,7 @@ } }, { - "name": "Component/Button/Inverted/Default", + "name": "Component/Button/Inverted/Fill/Default", "type": "color", "isAlias": true, "value": { @@ -9544,7 +9784,7 @@ } }, { - "name": "Component/Button/Inverted/Faded", + "name": "Component/Button/Inverted/Fill/Faded", "type": "color", "isAlias": true, "value": { @@ -9553,16 +9793,16 @@ } }, { - "name": "Component/Button/Inverted/Hover", + "name": "Component/Button/Inverted/Fill/Hover", "type": "color", "isAlias": true, "value": { "collection": "_Primitives", - "name": "Neutral/Opacity/Black/5" + "name": "Neutral/Opacity/Black/10" } }, { - "name": "Component/Button/Inverted/Hover Inverted", + "name": "Component/Button/Inverted/Fill/Hover Inverted", "type": "color", "isAlias": true, "value": { @@ -9571,7 +9811,7 @@ } }, { - "name": "Component/Button/Inverted/Disabled", + "name": "Component/Button/Inverted/Fill/Disabled", "type": "color", "isAlias": true, "value": { @@ -9579,6 +9819,33 @@ "name": "Neutral/Opacity/Black/10" } }, + { + "name": "Component/Button/Inverted/Border/Default", + "type": "color", + "isAlias": true, + "value": { + "collection": "_Primitives", + "name": "Neutral/Opacity/White/0" + } + }, + { + "name": "Component/Button/Inverted/Border/Hover", + "type": "color", + "isAlias": true, + "value": { + "collection": "_Primitives", + "name": "Neutral/Opacity/White/0" + } + }, + { + "name": "Component/Button/Inverted/Border/Disable", + "type": "color", + "isAlias": true, + "value": { + "collection": "_Primitives", + "name": "Neutral/Opacity/White/0" + } + }, { "name": "Component/Button/Inverted/On fill/Default", "type": "color", @@ -9615,33 +9882,6 @@ "name": "Scandic/Grey/40" } }, - { - "name": "Component/Button/Inverted/Border/Default", - "type": "color", - "isAlias": true, - "value": { - "collection": "_Primitives", - "name": "Neutral/Opacity/White/0" - } - }, - { - "name": "Component/Button/Inverted/Border/Hover", - "type": "color", - "isAlias": true, - "value": { - "collection": "_Primitives", - "name": "Neutral/Opacity/White/0" - } - }, - { - "name": "Component/Button/Inverted/Border/Disable", - "type": "color", - "isAlias": true, - "value": { - "collection": "_Primitives", - "name": "Neutral/Opacity/White/0" - } - }, { "name": "Border/Interactive/Default", "type": "color", @@ -9760,7 +10000,7 @@ } }, { - "name": "Component/Button/Muted/Default", + "name": "Component/Button/Muted/Fill/Default", "type": "color", "isAlias": true, "value": { @@ -9769,7 +10009,7 @@ } }, { - "name": "Component/Button/Muted/Hover", + "name": "Component/Button/Muted/Fill/Hover", "type": "color", "isAlias": true, "value": { @@ -9778,7 +10018,7 @@ } }, { - "name": "Component/Button/Muted/Disabled", + "name": "Component/Button/Muted/Fill/Disabled", "type": "color", "isAlias": true, "value": { @@ -9787,7 +10027,7 @@ } }, { - "name": "Component/Button/Muted/Hover inverted", + "name": "Component/Button/Muted/Fill/Hover inverted", "type": "color", "isAlias": true, "value": { @@ -9796,7 +10036,7 @@ } }, { - "name": "Component/Button/Muted/Disabled inverted", + "name": "Component/Button/Muted/Fill/Disabled inverted", "type": "color", "isAlias": true, "value": { @@ -10007,6 +10247,51 @@ "name": "Scandic Go/Purple/100" } }, + { + "name": "Text/Feedback/Information Accent", + "type": "color", + "isAlias": true, + "value": { + "collection": "_Primitives", + "name": "Scandic/Blue/70" + } + }, + { + "name": "Text/Feedback/Succes Accent", + "type": "color", + "isAlias": true, + "value": { + "collection": "_Primitives", + "name": "Scandic/Green/60" + } + }, + { + "name": "Text/Feedback/Warning Accent", + "type": "color", + "isAlias": true, + "value": { + "collection": "_Primitives", + "name": "Scandic/Yellow/60" + } + }, + { + "name": "Text/Feedback/Error Accent", + "type": "color", + "isAlias": true, + "value": { + "collection": "_Primitives", + "name": "Scandic/Red/70" + } + }, + { + "name": "Text/Feedback/Neutral Accent", + "type": "color", + "isAlias": true, + "value": { + "collection": "_Primitives", + "name": "Neutral/50" + } + }, { "name": "Text/Brand/OnAccent/Default", "type": "color", @@ -10188,12 +10473,12 @@ } }, { - "name": "Surface/Secondary/Secondary", + "name": "Surface/Secondary/Default dark", "type": "color", "isAlias": true, "value": { "collection": "_Primitives", - "name": "Scandic Go/Beige/10" + "name": "Scandic Go/Beige/20" } }, { @@ -10556,6 +10841,15 @@ "name": "Scandic Go/Purple/80" } }, + { + "name": "Icon/Interactive/Accent", + "type": "color", + "isAlias": true, + "value": { + "collection": "_Primitives", + "name": "Scandic Go/Purple/80" + } + }, { "name": "Icon/Interactive/Disabled", "type": "color", @@ -10646,6 +10940,15 @@ "name": "Neutral/Opacity/Black/20" } }, + { + "name": "Overlay/30", + "type": "color", + "isAlias": true, + "value": { + "collection": "_Primitives", + "name": "Neutral/Opacity/Black/20" + } + }, { "name": "Overlay/40", "type": "color", @@ -10689,7 +10992,7 @@ "value": "#2D163A1A" }, { - "name": "Component/Button/Brand/Primary/Default", + "name": "Component/Button/Brand/Primary/Fill/Default", "type": "color", "isAlias": true, "value": { @@ -10698,7 +11001,7 @@ } }, { - "name": "Component/Button/Brand/Primary/Hover", + "name": "Component/Button/Brand/Primary/Fill/Hover", "type": "color", "isAlias": true, "value": { @@ -10707,7 +11010,7 @@ } }, { - "name": "Component/Button/Brand/Primary/Disabled", + "name": "Component/Button/Brand/Primary/Fill/Disabled", "type": "color", "isAlias": true, "value": { @@ -10730,7 +11033,7 @@ "isAlias": true, "value": { "collection": "_Primitives", - "name": "Neutral/Opacity/White/100" + "name": "Scandic Go/Purple/100" } }, { @@ -10770,7 +11073,7 @@ } }, { - "name": "Component/Button/Brand/Secondary/Default", + "name": "Component/Button/Brand/Secondary/Fill/Default", "type": "color", "isAlias": true, "value": { @@ -10779,7 +11082,7 @@ } }, { - "name": "Component/Button/Brand/Secondary/Hover", + "name": "Component/Button/Brand/Secondary/Fill/Hover", "type": "color", "isAlias": true, "value": { @@ -10788,7 +11091,7 @@ } }, { - "name": "Component/Button/Brand/Secondary/Inverted", + "name": "Component/Button/Brand/Secondary/Fill/Inverted", "type": "color", "isAlias": true, "value": { @@ -10797,7 +11100,7 @@ } }, { - "name": "Component/Button/Brand/Secondary/Hover Inverted", + "name": "Component/Button/Brand/Secondary/Fill/Hover Inverted", "type": "color", "isAlias": true, "value": { @@ -10806,7 +11109,7 @@ } }, { - "name": "Component/Button/Brand/Secondary/Disabled", + "name": "Component/Button/Brand/Secondary/Fill/Disabled", "type": "color", "isAlias": true, "value": { @@ -10841,6 +11144,15 @@ "name": "Neutral/Opacity/White/100" } }, + { + "name": "Component/Button/Brand/Secondary/On fill/Hover inverted", + "type": "color", + "isAlias": true, + "value": { + "collection": "_Primitives", + "name": "Neutral/Opacity/White/70" + } + }, { "name": "Component/Button/Brand/Secondary/On fill/Disabled", "type": "color", @@ -10883,7 +11195,7 @@ "isAlias": true, "value": { "collection": "_Primitives", - "name": "Neutral/Opacity/White/90" + "name": "Neutral/Opacity/White/50" } }, { @@ -10896,7 +11208,7 @@ } }, { - "name": "Component/Button/Brand/Tertiary/Default", + "name": "Component/Button/Brand/Tertiary/Fill/Default", "type": "color", "isAlias": true, "value": { @@ -10905,7 +11217,7 @@ } }, { - "name": "Component/Button/Brand/Tertiary/Hover", + "name": "Component/Button/Brand/Tertiary/Fill/Hover", "type": "color", "isAlias": true, "value": { @@ -10914,7 +11226,7 @@ } }, { - "name": "Component/Button/Brand/Tertiary/Disabled", + "name": "Component/Button/Brand/Tertiary/Fill/Disabled", "type": "color", "isAlias": true, "value": { @@ -10977,7 +11289,7 @@ } }, { - "name": "Component/Button/Inverted/Default", + "name": "Component/Button/Inverted/Fill/Default", "type": "color", "isAlias": true, "value": { @@ -10986,7 +11298,7 @@ } }, { - "name": "Component/Button/Inverted/Faded", + "name": "Component/Button/Inverted/Fill/Faded", "type": "color", "isAlias": true, "value": { @@ -10995,16 +11307,16 @@ } }, { - "name": "Component/Button/Inverted/Hover", + "name": "Component/Button/Inverted/Fill/Hover", "type": "color", "isAlias": true, "value": { "collection": "_Primitives", - "name": "Neutral/Opacity/Black/5" + "name": "Neutral/Opacity/Black/10" } }, { - "name": "Component/Button/Inverted/Hover Inverted", + "name": "Component/Button/Inverted/Fill/Hover Inverted", "type": "color", "isAlias": true, "value": { @@ -11013,7 +11325,7 @@ } }, { - "name": "Component/Button/Inverted/Disabled", + "name": "Component/Button/Inverted/Fill/Disabled", "type": "color", "isAlias": true, "value": { @@ -11021,6 +11333,33 @@ "name": "Neutral/Opacity/Black/10" } }, + { + "name": "Component/Button/Inverted/Border/Default", + "type": "color", + "isAlias": true, + "value": { + "collection": "_Primitives", + "name": "Neutral/Opacity/White/0" + } + }, + { + "name": "Component/Button/Inverted/Border/Hover", + "type": "color", + "isAlias": true, + "value": { + "collection": "_Primitives", + "name": "Neutral/Opacity/White/0" + } + }, + { + "name": "Component/Button/Inverted/Border/Disable", + "type": "color", + "isAlias": true, + "value": { + "collection": "_Primitives", + "name": "Neutral/Opacity/White/0" + } + }, { "name": "Component/Button/Inverted/On fill/Default", "type": "color", @@ -11057,33 +11396,6 @@ "name": "Neutral/40" } }, - { - "name": "Component/Button/Inverted/Border/Default", - "type": "color", - "isAlias": true, - "value": { - "collection": "_Primitives", - "name": "Neutral/Opacity/White/0" - } - }, - { - "name": "Component/Button/Inverted/Border/Hover", - "type": "color", - "isAlias": true, - "value": { - "collection": "_Primitives", - "name": "Neutral/Opacity/White/0" - } - }, - { - "name": "Component/Button/Inverted/Border/Disable", - "type": "color", - "isAlias": true, - "value": { - "collection": "_Primitives", - "name": "Neutral/Opacity/White/0" - } - }, { "name": "Border/Interactive/Default", "type": "color", @@ -11202,7 +11514,7 @@ } }, { - "name": "Component/Button/Muted/Default", + "name": "Component/Button/Muted/Fill/Default", "type": "color", "isAlias": true, "value": { @@ -11211,7 +11523,7 @@ } }, { - "name": "Component/Button/Muted/Hover", + "name": "Component/Button/Muted/Fill/Hover", "type": "color", "isAlias": true, "value": { @@ -11220,7 +11532,7 @@ } }, { - "name": "Component/Button/Muted/Disabled", + "name": "Component/Button/Muted/Fill/Disabled", "type": "color", "isAlias": true, "value": { @@ -11229,7 +11541,7 @@ } }, { - "name": "Component/Button/Muted/Hover inverted", + "name": "Component/Button/Muted/Fill/Hover inverted", "type": "color", "isAlias": true, "value": { @@ -11238,7 +11550,7 @@ } }, { - "name": "Component/Button/Muted/Disabled inverted", + "name": "Component/Button/Muted/Fill/Disabled inverted", "type": "color", "isAlias": true, "value": { @@ -11449,6 +11761,51 @@ "name": "Neutral/Opacity/White/100" } }, + { + "name": "Text/Feedback/Information Accent", + "type": "color", + "isAlias": true, + "value": { + "collection": "_Primitives", + "name": "Scandic/Blue/70" + } + }, + { + "name": "Text/Feedback/Succes Accent", + "type": "color", + "isAlias": true, + "value": { + "collection": "_Primitives", + "name": "Scandic/Green/60" + } + }, + { + "name": "Text/Feedback/Warning Accent", + "type": "color", + "isAlias": true, + "value": { + "collection": "_Primitives", + "name": "Scandic/Yellow/60" + } + }, + { + "name": "Text/Feedback/Error Accent", + "type": "color", + "isAlias": true, + "value": { + "collection": "_Primitives", + "name": "Scandic/Red/70" + } + }, + { + "name": "Text/Feedback/Neutral Accent", + "type": "color", + "isAlias": true, + "value": { + "collection": "_Primitives", + "name": "Neutral/50" + } + }, { "name": "Text/Brand/OnAccent/Default", "type": "color", @@ -11630,12 +11987,12 @@ } }, { - "name": "Surface/Secondary/Secondary", + "name": "Surface/Secondary/Default dark", "type": "color", "isAlias": true, "value": { "collection": "_Primitives", - "name": "Neutral/10" + "name": "Neutral/20" } }, { @@ -11977,6 +12334,15 @@ "name": "Signature/Downtown Camper/Russet/80" } }, + { + "name": "Icon/Interactive/Accent", + "type": "color", + "isAlias": true, + "value": { + "collection": "_Primitives", + "name": "Signature/Downtown Camper/Russet/80" + } + }, { "name": "Icon/Interactive/Disabled", "type": "color", @@ -12067,6 +12433,15 @@ "name": "Neutral/Opacity/Black/20" } }, + { + "name": "Overlay/30", + "type": "color", + "isAlias": true, + "value": { + "collection": "_Primitives", + "name": "Neutral/Opacity/Black/20" + } + }, { "name": "Overlay/40", "type": "color", @@ -12110,7 +12485,7 @@ "value": "#3C43361A" }, { - "name": "Component/Button/Brand/Primary/Default", + "name": "Component/Button/Brand/Primary/Fill/Default", "type": "color", "isAlias": true, "value": { @@ -12119,16 +12494,16 @@ } }, { - "name": "Component/Button/Brand/Primary/Hover", + "name": "Component/Button/Brand/Primary/Fill/Hover", "type": "color", "isAlias": true, "value": { "collection": "_Primitives", - "name": "Neutral/Opacity/White/10" + "name": "Neutral/Opacity/White/20" } }, { - "name": "Component/Button/Brand/Primary/Disabled", + "name": "Component/Button/Brand/Primary/Fill/Disabled", "type": "color", "isAlias": true, "value": { @@ -12191,7 +12566,7 @@ } }, { - "name": "Component/Button/Brand/Secondary/Default", + "name": "Component/Button/Brand/Secondary/Fill/Default", "type": "color", "isAlias": true, "value": { @@ -12200,7 +12575,7 @@ } }, { - "name": "Component/Button/Brand/Secondary/Hover", + "name": "Component/Button/Brand/Secondary/Fill/Hover", "type": "color", "isAlias": true, "value": { @@ -12209,7 +12584,7 @@ } }, { - "name": "Component/Button/Brand/Secondary/Inverted", + "name": "Component/Button/Brand/Secondary/Fill/Inverted", "type": "color", "isAlias": true, "value": { @@ -12218,7 +12593,7 @@ } }, { - "name": "Component/Button/Brand/Secondary/Hover Inverted", + "name": "Component/Button/Brand/Secondary/Fill/Hover Inverted", "type": "color", "isAlias": true, "value": { @@ -12227,7 +12602,7 @@ } }, { - "name": "Component/Button/Brand/Secondary/Disabled", + "name": "Component/Button/Brand/Secondary/Fill/Disabled", "type": "color", "isAlias": true, "value": { @@ -12262,6 +12637,15 @@ "name": "Neutral/Opacity/White/100" } }, + { + "name": "Component/Button/Brand/Secondary/On fill/Hover inverted", + "type": "color", + "isAlias": true, + "value": { + "collection": "_Primitives", + "name": "Neutral/Opacity/White/70" + } + }, { "name": "Component/Button/Brand/Secondary/On fill/Disabled", "type": "color", @@ -12304,7 +12688,7 @@ "isAlias": true, "value": { "collection": "_Primitives", - "name": "Neutral/Opacity/White/90" + "name": "Neutral/Opacity/White/50" } }, { @@ -12317,7 +12701,7 @@ } }, { - "name": "Component/Button/Brand/Tertiary/Default", + "name": "Component/Button/Brand/Tertiary/Fill/Default", "type": "color", "isAlias": true, "value": { @@ -12326,7 +12710,7 @@ } }, { - "name": "Component/Button/Brand/Tertiary/Hover", + "name": "Component/Button/Brand/Tertiary/Fill/Hover", "type": "color", "isAlias": true, "value": { @@ -12335,7 +12719,7 @@ } }, { - "name": "Component/Button/Brand/Tertiary/Disabled", + "name": "Component/Button/Brand/Tertiary/Fill/Disabled", "type": "color", "isAlias": true, "value": { @@ -12398,7 +12782,7 @@ } }, { - "name": "Component/Button/Inverted/Default", + "name": "Component/Button/Inverted/Fill/Default", "type": "color", "isAlias": true, "value": { @@ -12407,7 +12791,7 @@ } }, { - "name": "Component/Button/Inverted/Faded", + "name": "Component/Button/Inverted/Fill/Faded", "type": "color", "isAlias": true, "value": { @@ -12416,16 +12800,16 @@ } }, { - "name": "Component/Button/Inverted/Hover", + "name": "Component/Button/Inverted/Fill/Hover", "type": "color", "isAlias": true, "value": { "collection": "_Primitives", - "name": "Neutral/Opacity/Black/5" + "name": "Neutral/Opacity/Black/10" } }, { - "name": "Component/Button/Inverted/Hover Inverted", + "name": "Component/Button/Inverted/Fill/Hover Inverted", "type": "color", "isAlias": true, "value": { @@ -12434,7 +12818,7 @@ } }, { - "name": "Component/Button/Inverted/Disabled", + "name": "Component/Button/Inverted/Fill/Disabled", "type": "color", "isAlias": true, "value": { @@ -12442,6 +12826,33 @@ "name": "Neutral/Opacity/Black/10" } }, + { + "name": "Component/Button/Inverted/Border/Default", + "type": "color", + "isAlias": true, + "value": { + "collection": "_Primitives", + "name": "Neutral/Opacity/White/0" + } + }, + { + "name": "Component/Button/Inverted/Border/Hover", + "type": "color", + "isAlias": true, + "value": { + "collection": "_Primitives", + "name": "Neutral/Opacity/White/0" + } + }, + { + "name": "Component/Button/Inverted/Border/Disable", + "type": "color", + "isAlias": true, + "value": { + "collection": "_Primitives", + "name": "Neutral/Opacity/White/0" + } + }, { "name": "Component/Button/Inverted/On fill/Default", "type": "color", @@ -12478,33 +12889,6 @@ "name": "Neutral/40" } }, - { - "name": "Component/Button/Inverted/Border/Default", - "type": "color", - "isAlias": true, - "value": { - "collection": "_Primitives", - "name": "Neutral/Opacity/White/0" - } - }, - { - "name": "Component/Button/Inverted/Border/Hover", - "type": "color", - "isAlias": true, - "value": { - "collection": "_Primitives", - "name": "Neutral/Opacity/White/0" - } - }, - { - "name": "Component/Button/Inverted/Border/Disable", - "type": "color", - "isAlias": true, - "value": { - "collection": "_Primitives", - "name": "Neutral/Opacity/White/0" - } - }, { "name": "Border/Interactive/Default", "type": "color", @@ -12623,7 +13007,7 @@ } }, { - "name": "Component/Button/Muted/Default", + "name": "Component/Button/Muted/Fill/Default", "type": "color", "isAlias": true, "value": { @@ -12632,7 +13016,7 @@ } }, { - "name": "Component/Button/Muted/Hover", + "name": "Component/Button/Muted/Fill/Hover", "type": "color", "isAlias": true, "value": { @@ -12641,7 +13025,7 @@ } }, { - "name": "Component/Button/Muted/Disabled", + "name": "Component/Button/Muted/Fill/Disabled", "type": "color", "isAlias": true, "value": { @@ -12650,7 +13034,7 @@ } }, { - "name": "Component/Button/Muted/Hover inverted", + "name": "Component/Button/Muted/Fill/Hover inverted", "type": "color", "isAlias": true, "value": { @@ -12659,7 +13043,7 @@ } }, { - "name": "Component/Button/Muted/Disabled inverted", + "name": "Component/Button/Muted/Fill/Disabled inverted", "type": "color", "isAlias": true, "value": { @@ -12870,6 +13254,51 @@ "name": "Neutral/Opacity/White/100" } }, + { + "name": "Text/Feedback/Information Accent", + "type": "color", + "isAlias": true, + "value": { + "collection": "_Primitives", + "name": "Scandic/Blue/70" + } + }, + { + "name": "Text/Feedback/Succes Accent", + "type": "color", + "isAlias": true, + "value": { + "collection": "_Primitives", + "name": "Scandic/Green/60" + } + }, + { + "name": "Text/Feedback/Warning Accent", + "type": "color", + "isAlias": true, + "value": { + "collection": "_Primitives", + "name": "Scandic/Yellow/60" + } + }, + { + "name": "Text/Feedback/Error Accent", + "type": "color", + "isAlias": true, + "value": { + "collection": "_Primitives", + "name": "Scandic/Red/70" + } + }, + { + "name": "Text/Feedback/Neutral Accent", + "type": "color", + "isAlias": true, + "value": { + "collection": "_Primitives", + "name": "Neutral/50" + } + }, { "name": "Text/Brand/OnAccent/Default", "type": "color", @@ -13051,12 +13480,12 @@ } }, { - "name": "Surface/Secondary/Secondary", + "name": "Surface/Secondary/Default dark", "type": "color", "isAlias": true, "value": { "collection": "_Primitives", - "name": "Signature/Haymarket/Vista White/0" + "name": "Signature/Haymarket/Vista White/10" } }, { @@ -13398,6 +13827,15 @@ "name": "Signature/Haymarket/Antique Brass/60" } }, + { + "name": "Icon/Interactive/Accent", + "type": "color", + "isAlias": true, + "value": { + "collection": "_Primitives", + "name": "Signature/Haymarket/Antique Brass/60" + } + }, { "name": "Icon/Interactive/Disabled", "type": "color", @@ -13488,6 +13926,15 @@ "name": "Neutral/Opacity/Black/20" } }, + { + "name": "Overlay/30", + "type": "color", + "isAlias": true, + "value": { + "collection": "_Primitives", + "name": "Neutral/Opacity/Black/20" + } + }, { "name": "Overlay/40", "type": "color", @@ -13531,7 +13978,7 @@ "value": "#F0DDD81A" }, { - "name": "Component/Button/Brand/Primary/Default", + "name": "Component/Button/Brand/Primary/Fill/Default", "type": "color", "isAlias": true, "value": { @@ -13540,7 +13987,7 @@ } }, { - "name": "Component/Button/Brand/Primary/Hover", + "name": "Component/Button/Brand/Primary/Fill/Hover", "type": "color", "isAlias": true, "value": { @@ -13549,7 +13996,7 @@ } }, { - "name": "Component/Button/Brand/Primary/Disabled", + "name": "Component/Button/Brand/Primary/Fill/Disabled", "type": "color", "isAlias": true, "value": { @@ -13612,7 +14059,7 @@ } }, { - "name": "Component/Button/Brand/Secondary/Default", + "name": "Component/Button/Brand/Secondary/Fill/Default", "type": "color", "isAlias": true, "value": { @@ -13621,7 +14068,7 @@ } }, { - "name": "Component/Button/Brand/Secondary/Hover", + "name": "Component/Button/Brand/Secondary/Fill/Hover", "type": "color", "isAlias": true, "value": { @@ -13630,7 +14077,7 @@ } }, { - "name": "Component/Button/Brand/Secondary/Inverted", + "name": "Component/Button/Brand/Secondary/Fill/Inverted", "type": "color", "isAlias": true, "value": { @@ -13639,7 +14086,7 @@ } }, { - "name": "Component/Button/Brand/Secondary/Hover Inverted", + "name": "Component/Button/Brand/Secondary/Fill/Hover Inverted", "type": "color", "isAlias": true, "value": { @@ -13648,7 +14095,7 @@ } }, { - "name": "Component/Button/Brand/Secondary/Disabled", + "name": "Component/Button/Brand/Secondary/Fill/Disabled", "type": "color", "isAlias": true, "value": { @@ -13683,6 +14130,15 @@ "name": "Neutral/Opacity/White/100" } }, + { + "name": "Component/Button/Brand/Secondary/On fill/Hover inverted", + "type": "color", + "isAlias": true, + "value": { + "collection": "_Primitives", + "name": "Neutral/Opacity/White/70" + } + }, { "name": "Component/Button/Brand/Secondary/On fill/Disabled", "type": "color", @@ -13725,7 +14181,7 @@ "isAlias": true, "value": { "collection": "_Primitives", - "name": "Neutral/Opacity/White/90" + "name": "Neutral/Opacity/White/50" } }, { @@ -13738,7 +14194,7 @@ } }, { - "name": "Component/Button/Brand/Tertiary/Default", + "name": "Component/Button/Brand/Tertiary/Fill/Default", "type": "color", "isAlias": true, "value": { @@ -13747,7 +14203,7 @@ } }, { - "name": "Component/Button/Brand/Tertiary/Hover", + "name": "Component/Button/Brand/Tertiary/Fill/Hover", "type": "color", "isAlias": true, "value": { @@ -13756,7 +14212,7 @@ } }, { - "name": "Component/Button/Brand/Tertiary/Disabled", + "name": "Component/Button/Brand/Tertiary/Fill/Disabled", "type": "color", "isAlias": true, "value": { @@ -13819,7 +14275,7 @@ } }, { - "name": "Component/Button/Inverted/Default", + "name": "Component/Button/Inverted/Fill/Default", "type": "color", "isAlias": true, "value": { @@ -13828,7 +14284,7 @@ } }, { - "name": "Component/Button/Inverted/Faded", + "name": "Component/Button/Inverted/Fill/Faded", "type": "color", "isAlias": true, "value": { @@ -13837,16 +14293,16 @@ } }, { - "name": "Component/Button/Inverted/Hover", + "name": "Component/Button/Inverted/Fill/Hover", "type": "color", "isAlias": true, "value": { "collection": "_Primitives", - "name": "Neutral/Opacity/Black/5" + "name": "Neutral/Opacity/Black/10" } }, { - "name": "Component/Button/Inverted/Hover Inverted", + "name": "Component/Button/Inverted/Fill/Hover Inverted", "type": "color", "isAlias": true, "value": { @@ -13855,7 +14311,7 @@ } }, { - "name": "Component/Button/Inverted/Disabled", + "name": "Component/Button/Inverted/Fill/Disabled", "type": "color", "isAlias": true, "value": { @@ -13863,6 +14319,33 @@ "name": "Neutral/Opacity/Black/10" } }, + { + "name": "Component/Button/Inverted/Border/Default", + "type": "color", + "isAlias": true, + "value": { + "collection": "_Primitives", + "name": "Neutral/Opacity/White/0" + } + }, + { + "name": "Component/Button/Inverted/Border/Hover", + "type": "color", + "isAlias": true, + "value": { + "collection": "_Primitives", + "name": "Neutral/Opacity/White/0" + } + }, + { + "name": "Component/Button/Inverted/Border/Disable", + "type": "color", + "isAlias": true, + "value": { + "collection": "_Primitives", + "name": "Neutral/Opacity/White/0" + } + }, { "name": "Component/Button/Inverted/On fill/Default", "type": "color", @@ -13899,33 +14382,6 @@ "name": "Neutral/40" } }, - { - "name": "Component/Button/Inverted/Border/Default", - "type": "color", - "isAlias": true, - "value": { - "collection": "_Primitives", - "name": "Neutral/Opacity/White/0" - } - }, - { - "name": "Component/Button/Inverted/Border/Hover", - "type": "color", - "isAlias": true, - "value": { - "collection": "_Primitives", - "name": "Neutral/Opacity/White/0" - } - }, - { - "name": "Component/Button/Inverted/Border/Disable", - "type": "color", - "isAlias": true, - "value": { - "collection": "_Primitives", - "name": "Neutral/Opacity/White/0" - } - }, { "name": "Border/Interactive/Default", "type": "color", @@ -14044,7 +14500,7 @@ } }, { - "name": "Component/Button/Muted/Default", + "name": "Component/Button/Muted/Fill/Default", "type": "color", "isAlias": true, "value": { @@ -14053,7 +14509,7 @@ } }, { - "name": "Component/Button/Muted/Hover", + "name": "Component/Button/Muted/Fill/Hover", "type": "color", "isAlias": true, "value": { @@ -14062,7 +14518,7 @@ } }, { - "name": "Component/Button/Muted/Disabled", + "name": "Component/Button/Muted/Fill/Disabled", "type": "color", "isAlias": true, "value": { @@ -14071,7 +14527,7 @@ } }, { - "name": "Component/Button/Muted/Hover inverted", + "name": "Component/Button/Muted/Fill/Hover inverted", "type": "color", "isAlias": true, "value": { @@ -14080,7 +14536,7 @@ } }, { - "name": "Component/Button/Muted/Disabled inverted", + "name": "Component/Button/Muted/Fill/Disabled inverted", "type": "color", "isAlias": true, "value": { @@ -14291,6 +14747,51 @@ "name": "Neutral/Opacity/White/100" } }, + { + "name": "Text/Feedback/Information Accent", + "type": "color", + "isAlias": true, + "value": { + "collection": "_Primitives", + "name": "Scandic/Blue/70" + } + }, + { + "name": "Text/Feedback/Succes Accent", + "type": "color", + "isAlias": true, + "value": { + "collection": "_Primitives", + "name": "Scandic/Green/60" + } + }, + { + "name": "Text/Feedback/Warning Accent", + "type": "color", + "isAlias": true, + "value": { + "collection": "_Primitives", + "name": "Scandic/Yellow/60" + } + }, + { + "name": "Text/Feedback/Error Accent", + "type": "color", + "isAlias": true, + "value": { + "collection": "_Primitives", + "name": "Scandic/Red/70" + } + }, + { + "name": "Text/Feedback/Neutral Accent", + "type": "color", + "isAlias": true, + "value": { + "collection": "_Primitives", + "name": "Neutral/50" + } + }, { "name": "Text/Brand/OnAccent/Default", "type": "color", @@ -14472,12 +14973,12 @@ } }, { - "name": "Surface/Secondary/Secondary", + "name": "Surface/Secondary/Default dark", "type": "color", "isAlias": true, "value": { "collection": "_Primitives", - "name": "Signature/Marski/Elephant/10" + "name": "Signature/Marski/Elephant/20" } }, { @@ -14819,6 +15320,15 @@ "name": "Signature/Marski/Blue ribbon/70" } }, + { + "name": "Icon/Interactive/Accent", + "type": "color", + "isAlias": true, + "value": { + "collection": "_Primitives", + "name": "Signature/Marski/Blue ribbon/70" + } + }, { "name": "Icon/Interactive/Disabled", "type": "color", @@ -14909,6 +15419,15 @@ "name": "Neutral/Opacity/Black/20" } }, + { + "name": "Overlay/30", + "type": "color", + "isAlias": true, + "value": { + "collection": "_Primitives", + "name": "Neutral/Opacity/Black/20" + } + }, { "name": "Overlay/40", "type": "color", @@ -14952,7 +15471,7 @@ "value": "#3E11181A" }, { - "name": "Component/Button/Brand/Primary/Default", + "name": "Component/Button/Brand/Primary/Fill/Default", "type": "color", "isAlias": true, "value": { @@ -14961,7 +15480,7 @@ } }, { - "name": "Component/Button/Brand/Primary/Hover", + "name": "Component/Button/Brand/Primary/Fill/Hover", "type": "color", "isAlias": true, "value": { @@ -14970,7 +15489,7 @@ } }, { - "name": "Component/Button/Brand/Primary/Disabled", + "name": "Component/Button/Brand/Primary/Fill/Disabled", "type": "color", "isAlias": true, "value": { @@ -15033,7 +15552,7 @@ } }, { - "name": "Component/Button/Brand/Secondary/Default", + "name": "Component/Button/Brand/Secondary/Fill/Default", "type": "color", "isAlias": true, "value": { @@ -15042,7 +15561,7 @@ } }, { - "name": "Component/Button/Brand/Secondary/Hover", + "name": "Component/Button/Brand/Secondary/Fill/Hover", "type": "color", "isAlias": true, "value": { @@ -15051,7 +15570,7 @@ } }, { - "name": "Component/Button/Brand/Secondary/Inverted", + "name": "Component/Button/Brand/Secondary/Fill/Inverted", "type": "color", "isAlias": true, "value": { @@ -15060,7 +15579,7 @@ } }, { - "name": "Component/Button/Brand/Secondary/Hover Inverted", + "name": "Component/Button/Brand/Secondary/Fill/Hover Inverted", "type": "color", "isAlias": true, "value": { @@ -15069,7 +15588,7 @@ } }, { - "name": "Component/Button/Brand/Secondary/Disabled", + "name": "Component/Button/Brand/Secondary/Fill/Disabled", "type": "color", "isAlias": true, "value": { @@ -15104,6 +15623,15 @@ "name": "Neutral/Opacity/White/100" } }, + { + "name": "Component/Button/Brand/Secondary/On fill/Hover inverted", + "type": "color", + "isAlias": true, + "value": { + "collection": "_Primitives", + "name": "Neutral/Opacity/White/70" + } + }, { "name": "Component/Button/Brand/Secondary/On fill/Disabled", "type": "color", @@ -15146,7 +15674,7 @@ "isAlias": true, "value": { "collection": "_Primitives", - "name": "Neutral/Opacity/White/90" + "name": "Neutral/Opacity/White/50" } }, { @@ -15159,7 +15687,7 @@ } }, { - "name": "Component/Button/Brand/Tertiary/Default", + "name": "Component/Button/Brand/Tertiary/Fill/Default", "type": "color", "isAlias": true, "value": { @@ -15168,7 +15696,7 @@ } }, { - "name": "Component/Button/Brand/Tertiary/Hover", + "name": "Component/Button/Brand/Tertiary/Fill/Hover", "type": "color", "isAlias": true, "value": { @@ -15177,7 +15705,7 @@ } }, { - "name": "Component/Button/Brand/Tertiary/Disabled", + "name": "Component/Button/Brand/Tertiary/Fill/Disabled", "type": "color", "isAlias": true, "value": { @@ -15240,7 +15768,7 @@ } }, { - "name": "Component/Button/Inverted/Default", + "name": "Component/Button/Inverted/Fill/Default", "type": "color", "isAlias": true, "value": { @@ -15249,7 +15777,7 @@ } }, { - "name": "Component/Button/Inverted/Faded", + "name": "Component/Button/Inverted/Fill/Faded", "type": "color", "isAlias": true, "value": { @@ -15258,16 +15786,16 @@ } }, { - "name": "Component/Button/Inverted/Hover", + "name": "Component/Button/Inverted/Fill/Hover", "type": "color", "isAlias": true, "value": { "collection": "_Primitives", - "name": "Neutral/Opacity/Black/5" + "name": "Neutral/Opacity/Black/10" } }, { - "name": "Component/Button/Inverted/Hover Inverted", + "name": "Component/Button/Inverted/Fill/Hover Inverted", "type": "color", "isAlias": true, "value": { @@ -15276,7 +15804,7 @@ } }, { - "name": "Component/Button/Inverted/Disabled", + "name": "Component/Button/Inverted/Fill/Disabled", "type": "color", "isAlias": true, "value": { @@ -15284,6 +15812,33 @@ "name": "Neutral/Opacity/Black/10" } }, + { + "name": "Component/Button/Inverted/Border/Default", + "type": "color", + "isAlias": true, + "value": { + "collection": "_Primitives", + "name": "Neutral/Opacity/White/0" + } + }, + { + "name": "Component/Button/Inverted/Border/Hover", + "type": "color", + "isAlias": true, + "value": { + "collection": "_Primitives", + "name": "Neutral/Opacity/White/0" + } + }, + { + "name": "Component/Button/Inverted/Border/Disable", + "type": "color", + "isAlias": true, + "value": { + "collection": "_Primitives", + "name": "Neutral/Opacity/White/0" + } + }, { "name": "Component/Button/Inverted/On fill/Default", "type": "color", @@ -15320,33 +15875,6 @@ "name": "Neutral/40" } }, - { - "name": "Component/Button/Inverted/Border/Default", - "type": "color", - "isAlias": true, - "value": { - "collection": "_Primitives", - "name": "Neutral/Opacity/White/0" - } - }, - { - "name": "Component/Button/Inverted/Border/Hover", - "type": "color", - "isAlias": true, - "value": { - "collection": "_Primitives", - "name": "Neutral/Opacity/White/0" - } - }, - { - "name": "Component/Button/Inverted/Border/Disable", - "type": "color", - "isAlias": true, - "value": { - "collection": "_Primitives", - "name": "Neutral/Opacity/White/0" - } - }, { "name": "Border/Interactive/Default", "type": "color", @@ -15465,7 +15993,7 @@ } }, { - "name": "Component/Button/Muted/Default", + "name": "Component/Button/Muted/Fill/Default", "type": "color", "isAlias": true, "value": { @@ -15474,7 +16002,7 @@ } }, { - "name": "Component/Button/Muted/Hover", + "name": "Component/Button/Muted/Fill/Hover", "type": "color", "isAlias": true, "value": { @@ -15483,7 +16011,7 @@ } }, { - "name": "Component/Button/Muted/Disabled", + "name": "Component/Button/Muted/Fill/Disabled", "type": "color", "isAlias": true, "value": { @@ -15492,7 +16020,7 @@ } }, { - "name": "Component/Button/Muted/Hover inverted", + "name": "Component/Button/Muted/Fill/Hover inverted", "type": "color", "isAlias": true, "value": { @@ -15501,7 +16029,7 @@ } }, { - "name": "Component/Button/Muted/Disabled inverted", + "name": "Component/Button/Muted/Fill/Disabled inverted", "type": "color", "isAlias": true, "value": { @@ -15712,6 +16240,51 @@ "name": "Neutral/90" } }, + { + "name": "Text/Feedback/Information Accent", + "type": "color", + "isAlias": true, + "value": { + "collection": "_Primitives", + "name": "Scandic/Blue/70" + } + }, + { + "name": "Text/Feedback/Succes Accent", + "type": "color", + "isAlias": true, + "value": { + "collection": "_Primitives", + "name": "Scandic/Green/60" + } + }, + { + "name": "Text/Feedback/Warning Accent", + "type": "color", + "isAlias": true, + "value": { + "collection": "_Primitives", + "name": "Scandic/Yellow/60" + } + }, + { + "name": "Text/Feedback/Error Accent", + "type": "color", + "isAlias": true, + "value": { + "collection": "_Primitives", + "name": "Scandic/Red/70" + } + }, + { + "name": "Text/Feedback/Neutral Accent", + "type": "color", + "isAlias": true, + "value": { + "collection": "_Primitives", + "name": "Neutral/50" + } + }, { "name": "Text/Brand/OnAccent/Default", "type": "color", @@ -15893,12 +16466,12 @@ } }, { - "name": "Surface/Secondary/Secondary", + "name": "Surface/Secondary/Default dark", "type": "color", "isAlias": true, "value": { "collection": "_Primitives", - "name": "Signature/Hotel Norge/Off White/50" + "name": "Signature/Hotel Norge/Off White/60" } }, { @@ -16240,6 +16813,15 @@ "name": "Signature/Hotel Norge/Emerald/90" } }, + { + "name": "Icon/Interactive/Accent", + "type": "color", + "isAlias": true, + "value": { + "collection": "_Primitives", + "name": "Signature/Hotel Norge/Emerald/90" + } + }, { "name": "Icon/Interactive/Disabled", "type": "color", @@ -16330,6 +16912,15 @@ "name": "Neutral/Opacity/Black/20" } }, + { + "name": "Overlay/30", + "type": "color", + "isAlias": true, + "value": { + "collection": "_Primitives", + "name": "Neutral/Opacity/Black/20" + } + }, { "name": "Overlay/40", "type": "color", @@ -16373,7 +16964,7 @@ "value": "#3C43361A" }, { - "name": "Component/Button/Brand/Primary/Default", + "name": "Component/Button/Brand/Primary/Fill/Default", "type": "color", "isAlias": true, "value": { @@ -16382,7 +16973,7 @@ } }, { - "name": "Component/Button/Brand/Primary/Hover", + "name": "Component/Button/Brand/Primary/Fill/Hover", "type": "color", "isAlias": true, "value": { @@ -16391,7 +16982,7 @@ } }, { - "name": "Component/Button/Brand/Primary/Disabled", + "name": "Component/Button/Brand/Primary/Fill/Disabled", "type": "color", "isAlias": true, "value": { @@ -16454,7 +17045,7 @@ } }, { - "name": "Component/Button/Brand/Secondary/Default", + "name": "Component/Button/Brand/Secondary/Fill/Default", "type": "color", "isAlias": true, "value": { @@ -16463,7 +17054,7 @@ } }, { - "name": "Component/Button/Brand/Secondary/Hover", + "name": "Component/Button/Brand/Secondary/Fill/Hover", "type": "color", "isAlias": true, "value": { @@ -16472,7 +17063,7 @@ } }, { - "name": "Component/Button/Brand/Secondary/Inverted", + "name": "Component/Button/Brand/Secondary/Fill/Inverted", "type": "color", "isAlias": true, "value": { @@ -16481,7 +17072,7 @@ } }, { - "name": "Component/Button/Brand/Secondary/Hover Inverted", + "name": "Component/Button/Brand/Secondary/Fill/Hover Inverted", "type": "color", "isAlias": true, "value": { @@ -16490,7 +17081,7 @@ } }, { - "name": "Component/Button/Brand/Secondary/Disabled", + "name": "Component/Button/Brand/Secondary/Fill/Disabled", "type": "color", "isAlias": true, "value": { @@ -16525,6 +17116,15 @@ "name": "Neutral/Opacity/White/100" } }, + { + "name": "Component/Button/Brand/Secondary/On fill/Hover inverted", + "type": "color", + "isAlias": true, + "value": { + "collection": "_Primitives", + "name": "Neutral/Opacity/White/70" + } + }, { "name": "Component/Button/Brand/Secondary/On fill/Disabled", "type": "color", @@ -16567,7 +17167,7 @@ "isAlias": true, "value": { "collection": "_Primitives", - "name": "Neutral/Opacity/White/90" + "name": "Neutral/Opacity/White/50" } }, { @@ -16580,7 +17180,7 @@ } }, { - "name": "Component/Button/Brand/Tertiary/Default", + "name": "Component/Button/Brand/Tertiary/Fill/Default", "type": "color", "isAlias": true, "value": { @@ -16589,7 +17189,7 @@ } }, { - "name": "Component/Button/Brand/Tertiary/Hover", + "name": "Component/Button/Brand/Tertiary/Fill/Hover", "type": "color", "isAlias": true, "value": { @@ -16598,7 +17198,7 @@ } }, { - "name": "Component/Button/Brand/Tertiary/Disabled", + "name": "Component/Button/Brand/Tertiary/Fill/Disabled", "type": "color", "isAlias": true, "value": { @@ -16661,7 +17261,7 @@ } }, { - "name": "Component/Button/Inverted/Default", + "name": "Component/Button/Inverted/Fill/Default", "type": "color", "isAlias": true, "value": { @@ -16670,7 +17270,7 @@ } }, { - "name": "Component/Button/Inverted/Faded", + "name": "Component/Button/Inverted/Fill/Faded", "type": "color", "isAlias": true, "value": { @@ -16679,16 +17279,16 @@ } }, { - "name": "Component/Button/Inverted/Hover", + "name": "Component/Button/Inverted/Fill/Hover", "type": "color", "isAlias": true, "value": { "collection": "_Primitives", - "name": "Neutral/Opacity/Black/5" + "name": "Neutral/Opacity/Black/10" } }, { - "name": "Component/Button/Inverted/Hover Inverted", + "name": "Component/Button/Inverted/Fill/Hover Inverted", "type": "color", "isAlias": true, "value": { @@ -16697,7 +17297,7 @@ } }, { - "name": "Component/Button/Inverted/Disabled", + "name": "Component/Button/Inverted/Fill/Disabled", "type": "color", "isAlias": true, "value": { @@ -16705,6 +17305,33 @@ "name": "Neutral/Opacity/Black/10" } }, + { + "name": "Component/Button/Inverted/Border/Default", + "type": "color", + "isAlias": true, + "value": { + "collection": "_Primitives", + "name": "Neutral/Opacity/White/0" + } + }, + { + "name": "Component/Button/Inverted/Border/Hover", + "type": "color", + "isAlias": true, + "value": { + "collection": "_Primitives", + "name": "Neutral/Opacity/White/0" + } + }, + { + "name": "Component/Button/Inverted/Border/Disable", + "type": "color", + "isAlias": true, + "value": { + "collection": "_Primitives", + "name": "Neutral/Opacity/White/0" + } + }, { "name": "Component/Button/Inverted/On fill/Default", "type": "color", @@ -16741,33 +17368,6 @@ "name": "Neutral/40" } }, - { - "name": "Component/Button/Inverted/Border/Default", - "type": "color", - "isAlias": true, - "value": { - "collection": "_Primitives", - "name": "Neutral/Opacity/White/0" - } - }, - { - "name": "Component/Button/Inverted/Border/Hover", - "type": "color", - "isAlias": true, - "value": { - "collection": "_Primitives", - "name": "Neutral/Opacity/White/0" - } - }, - { - "name": "Component/Button/Inverted/Border/Disable", - "type": "color", - "isAlias": true, - "value": { - "collection": "_Primitives", - "name": "Neutral/Opacity/White/0" - } - }, { "name": "Border/Interactive/Default", "type": "color", @@ -16886,7 +17486,7 @@ } }, { - "name": "Component/Button/Muted/Default", + "name": "Component/Button/Muted/Fill/Default", "type": "color", "isAlias": true, "value": { @@ -16895,7 +17495,7 @@ } }, { - "name": "Component/Button/Muted/Hover", + "name": "Component/Button/Muted/Fill/Hover", "type": "color", "isAlias": true, "value": { @@ -16904,7 +17504,7 @@ } }, { - "name": "Component/Button/Muted/Disabled", + "name": "Component/Button/Muted/Fill/Disabled", "type": "color", "isAlias": true, "value": { @@ -16913,7 +17513,7 @@ } }, { - "name": "Component/Button/Muted/Hover inverted", + "name": "Component/Button/Muted/Fill/Hover inverted", "type": "color", "isAlias": true, "value": { @@ -16922,7 +17522,7 @@ } }, { - "name": "Component/Button/Muted/Disabled inverted", + "name": "Component/Button/Muted/Fill/Disabled inverted", "type": "color", "isAlias": true, "value": { @@ -17133,6 +17733,51 @@ "name": "Neutral/90" } }, + { + "name": "Text/Feedback/Information Accent", + "type": "color", + "isAlias": true, + "value": { + "collection": "_Primitives", + "name": "Scandic/Blue/70" + } + }, + { + "name": "Text/Feedback/Succes Accent", + "type": "color", + "isAlias": true, + "value": { + "collection": "_Primitives", + "name": "Scandic/Green/60" + } + }, + { + "name": "Text/Feedback/Warning Accent", + "type": "color", + "isAlias": true, + "value": { + "collection": "_Primitives", + "name": "Scandic/Yellow/60" + } + }, + { + "name": "Text/Feedback/Error Accent", + "type": "color", + "isAlias": true, + "value": { + "collection": "_Primitives", + "name": "Scandic/Red/70" + } + }, + { + "name": "Text/Feedback/Neutral Accent", + "type": "color", + "isAlias": true, + "value": { + "collection": "_Primitives", + "name": "Neutral/50" + } + }, { "name": "Text/Brand/OnAccent/Default", "type": "color", @@ -17314,12 +17959,12 @@ } }, { - "name": "Surface/Secondary/Secondary", + "name": "Surface/Secondary/Default dark", "type": "color", "isAlias": true, "value": { "collection": "_Primitives", - "name": "Signature/Grand Hotel/Cloudy/0" + "name": "Signature/Grand Hotel/Cloudy/10" } }, { @@ -17661,6 +18306,15 @@ "name": "Signature/Grand Hotel/Careys Pink/60" } }, + { + "name": "Icon/Interactive/Accent", + "type": "color", + "isAlias": true, + "value": { + "collection": "_Primitives", + "name": "Signature/Grand Hotel/Careys Pink/60" + } + }, { "name": "Icon/Interactive/Disabled", "type": "color", @@ -17751,6 +18405,15 @@ "name": "Neutral/Opacity/Black/20" } }, + { + "name": "Overlay/30", + "type": "color", + "isAlias": true, + "value": { + "collection": "_Primitives", + "name": "Neutral/Opacity/Black/20" + } + }, { "name": "Overlay/40", "type": "color", @@ -17794,7 +18457,7 @@ "value": "#5B6E7F1A" }, { - "name": "Component/Button/Brand/Primary/Default", + "name": "Component/Button/Brand/Primary/Fill/Default", "type": "color", "isAlias": true, "value": { @@ -17803,7 +18466,7 @@ } }, { - "name": "Component/Button/Brand/Primary/Hover", + "name": "Component/Button/Brand/Primary/Fill/Hover", "type": "color", "isAlias": true, "value": { @@ -17812,7 +18475,7 @@ } }, { - "name": "Component/Button/Brand/Primary/Disabled", + "name": "Component/Button/Brand/Primary/Fill/Disabled", "type": "color", "isAlias": true, "value": { @@ -17875,7 +18538,7 @@ } }, { - "name": "Component/Button/Brand/Secondary/Default", + "name": "Component/Button/Brand/Secondary/Fill/Default", "type": "color", "isAlias": true, "value": { @@ -17884,7 +18547,7 @@ } }, { - "name": "Component/Button/Brand/Secondary/Hover", + "name": "Component/Button/Brand/Secondary/Fill/Hover", "type": "color", "isAlias": true, "value": { @@ -17893,7 +18556,7 @@ } }, { - "name": "Component/Button/Brand/Secondary/Inverted", + "name": "Component/Button/Brand/Secondary/Fill/Inverted", "type": "color", "isAlias": true, "value": { @@ -17902,7 +18565,7 @@ } }, { - "name": "Component/Button/Brand/Secondary/Hover Inverted", + "name": "Component/Button/Brand/Secondary/Fill/Hover Inverted", "type": "color", "isAlias": true, "value": { @@ -17911,7 +18574,7 @@ } }, { - "name": "Component/Button/Brand/Secondary/Disabled", + "name": "Component/Button/Brand/Secondary/Fill/Disabled", "type": "color", "isAlias": true, "value": { @@ -17946,6 +18609,15 @@ "name": "Neutral/Opacity/White/100" } }, + { + "name": "Component/Button/Brand/Secondary/On fill/Hover inverted", + "type": "color", + "isAlias": true, + "value": { + "collection": "_Primitives", + "name": "Neutral/Opacity/White/70" + } + }, { "name": "Component/Button/Brand/Secondary/On fill/Disabled", "type": "color", @@ -17988,7 +18660,7 @@ "isAlias": true, "value": { "collection": "_Primitives", - "name": "Neutral/Opacity/White/90" + "name": "Neutral/Opacity/White/50" } }, { @@ -18001,7 +18673,7 @@ } }, { - "name": "Component/Button/Brand/Tertiary/Default", + "name": "Component/Button/Brand/Tertiary/Fill/Default", "type": "color", "isAlias": true, "value": { @@ -18010,7 +18682,7 @@ } }, { - "name": "Component/Button/Brand/Tertiary/Hover", + "name": "Component/Button/Brand/Tertiary/Fill/Hover", "type": "color", "isAlias": true, "value": { @@ -18019,7 +18691,7 @@ } }, { - "name": "Component/Button/Brand/Tertiary/Disabled", + "name": "Component/Button/Brand/Tertiary/Fill/Disabled", "type": "color", "isAlias": true, "value": { @@ -18082,7 +18754,7 @@ } }, { - "name": "Component/Button/Inverted/Default", + "name": "Component/Button/Inverted/Fill/Default", "type": "color", "isAlias": true, "value": { @@ -18091,7 +18763,7 @@ } }, { - "name": "Component/Button/Inverted/Faded", + "name": "Component/Button/Inverted/Fill/Faded", "type": "color", "isAlias": true, "value": { @@ -18100,16 +18772,16 @@ } }, { - "name": "Component/Button/Inverted/Hover", + "name": "Component/Button/Inverted/Fill/Hover", "type": "color", "isAlias": true, "value": { "collection": "_Primitives", - "name": "Neutral/Opacity/Black/5" + "name": "Neutral/Opacity/Black/10" } }, { - "name": "Component/Button/Inverted/Hover Inverted", + "name": "Component/Button/Inverted/Fill/Hover Inverted", "type": "color", "isAlias": true, "value": { @@ -18118,7 +18790,7 @@ } }, { - "name": "Component/Button/Inverted/Disabled", + "name": "Component/Button/Inverted/Fill/Disabled", "type": "color", "isAlias": true, "value": { @@ -18126,6 +18798,33 @@ "name": "Neutral/Opacity/Black/10" } }, + { + "name": "Component/Button/Inverted/Border/Default", + "type": "color", + "isAlias": true, + "value": { + "collection": "_Primitives", + "name": "Neutral/Opacity/White/0" + } + }, + { + "name": "Component/Button/Inverted/Border/Hover", + "type": "color", + "isAlias": true, + "value": { + "collection": "_Primitives", + "name": "Neutral/Opacity/White/10" + } + }, + { + "name": "Component/Button/Inverted/Border/Disable", + "type": "color", + "isAlias": true, + "value": { + "collection": "_Primitives", + "name": "Neutral/Opacity/White/10" + } + }, { "name": "Component/Button/Inverted/On fill/Default", "type": "color", @@ -18162,33 +18861,6 @@ "name": "Neutral/40" } }, - { - "name": "Component/Button/Inverted/Border/Default", - "type": "color", - "isAlias": true, - "value": { - "collection": "_Primitives", - "name": "Neutral/Opacity/White/0" - } - }, - { - "name": "Component/Button/Inverted/Border/Hover", - "type": "color", - "isAlias": true, - "value": { - "collection": "_Primitives", - "name": "Neutral/Opacity/White/10" - } - }, - { - "name": "Component/Button/Inverted/Border/Disable", - "type": "color", - "isAlias": true, - "value": { - "collection": "_Primitives", - "name": "Neutral/Opacity/White/10" - } - }, { "name": "Border/Interactive/Default", "type": "color", @@ -18307,7 +18979,7 @@ } }, { - "name": "Component/Button/Muted/Default", + "name": "Component/Button/Muted/Fill/Default", "type": "color", "isAlias": true, "value": { @@ -18316,7 +18988,7 @@ } }, { - "name": "Component/Button/Muted/Hover", + "name": "Component/Button/Muted/Fill/Hover", "type": "color", "isAlias": true, "value": { @@ -18325,7 +18997,7 @@ } }, { - "name": "Component/Button/Muted/Disabled", + "name": "Component/Button/Muted/Fill/Disabled", "type": "color", "isAlias": true, "value": { @@ -18334,7 +19006,7 @@ } }, { - "name": "Component/Button/Muted/Hover inverted", + "name": "Component/Button/Muted/Fill/Hover inverted", "type": "color", "isAlias": true, "value": { @@ -18343,7 +19015,7 @@ } }, { - "name": "Component/Button/Muted/Disabled inverted", + "name": "Component/Button/Muted/Fill/Disabled inverted", "type": "color", "isAlias": true, "value": { @@ -18424,6 +19096,24 @@ { "name": "Value", "variables": [ + { + "name": "Font family/Scandic/Title", + "type": "string", + "isAlias": false, + "value": "Brandon Text" + }, + { + "name": "Font family/Scandic/Body", + "type": "string", + "isAlias": false, + "value": "Fira sans" + }, + { + "name": "Font family/Scandic/Decorative", + "type": "string", + "isAlias": false, + "value": "Biro Script Plus" + }, { "name": "Font family/Downtown Camper/Title", "type": "string", @@ -18443,22 +19133,94 @@ "value": "Gotham" }, { - "name": "Font family/Title", + "name": "Font family/Haymarket/Title", "type": "string", "isAlias": false, - "value": "Brandon Text" + "value": "Prumo text" }, { - "name": "Font family/Body", + "name": "Font family/Haymarket/Body", "type": "string", "isAlias": false, "value": "Fira sans" }, { - "name": "Font family/Decorative", + "name": "Font family/Haymarket/Decorative", "type": "string", "isAlias": false, - "value": "Biro Script Plus" + "value": "Prumo text" + }, + { + "name": "Font family/Marski/Title", + "type": "string", + "isAlias": false, + "value": "Helvetica Neue" + }, + { + "name": "Font family/Marski/Body", + "type": "string", + "isAlias": false, + "value": "Fira sans" + }, + { + "name": "Font family/Marski/Decorative", + "type": "string", + "isAlias": false, + "value": "Helvetica Neue" + }, + { + "name": "Font family/Hotel Norge/Title", + "type": "string", + "isAlias": false, + "value": "Domaine Sans Text" + }, + { + "name": "Font family/Hotel Norge/Body", + "type": "string", + "isAlias": false, + "value": "Fira sans" + }, + { + "name": "Font family/Hotel Norge/Decorative", + "type": "string", + "isAlias": false, + "value": "Domaine Sans Text" + }, + { + "name": "Font family/Grand Hotel/Title", + "type": "string", + "isAlias": false, + "value": "Canela Deck" + }, + { + "name": "Font family/Grand Hotel/Body", + "type": "string", + "isAlias": false, + "value": "Fira sans" + }, + { + "name": "Font family/Grand Hotel/Decorative", + "type": "string", + "isAlias": false, + "value": "Canela Deck" + }, + { + "name": "Font family/Scandic Go/Title", + "type": "string", + "isAlias": false, + "value": "Neue Haas Grotesk Display Pro" + }, + { + "name": "Font family/Scandic Go/Body", + "type": "string", + "isAlias": false, + "value": "Fira sans" + }, + { + "name": "Font family/Scandic Go/Decorative", + "type": "string", + "isAlias": false, + "value": "ITC Garamond Std" }, { "name": "Font weight/Regular", @@ -18591,96 +19353,6 @@ "type": "number", "isAlias": false, "value": 100 - }, - { - "name": "Font family/Haymarket/Title", - "type": "string", - "isAlias": false, - "value": "Prumo text" - }, - { - "name": "Font family/Haymarket/Body", - "type": "string", - "isAlias": false, - "value": "Fira sans" - }, - { - "name": "Font family/Haymarket/Decorative", - "type": "string", - "isAlias": false, - "value": "Prumo text" - }, - { - "name": "Font family/Marski/Title", - "type": "string", - "isAlias": false, - "value": "Helvetica Neue" - }, - { - "name": "Font family/Marski/Body", - "type": "string", - "isAlias": false, - "value": "Fira sans" - }, - { - "name": "Font family/Marski/Decorative", - "type": "string", - "isAlias": false, - "value": "Helvetica Neue" - }, - { - "name": "Font family/Hotel Norge/Title", - "type": "string", - "isAlias": false, - "value": "Domaine Sans Text" - }, - { - "name": "Font family/Hotel Norge/Body", - "type": "string", - "isAlias": false, - "value": "Fira sans" - }, - { - "name": "Font family/Hotel Norge/Decorative", - "type": "string", - "isAlias": false, - "value": "Domaine Sans Text" - }, - { - "name": "Font family/Grand Hotel/Title", - "type": "string", - "isAlias": false, - "value": "Canela Deck" - }, - { - "name": "Font family/Grand Hotel/Body", - "type": "string", - "isAlias": false, - "value": "Fira sans" - }, - { - "name": "Font family/Grand Hotel/Decorative", - "type": "string", - "isAlias": false, - "value": "Canela Deck" - }, - { - "name": "Font family/Scandic Go/Title", - "type": "string", - "isAlias": false, - "value": "Neue Haas Grotesk Display Pro" - }, - { - "name": "Font family/Scandic Go/Body", - "type": "string", - "isAlias": false, - "value": "Fira sans" - }, - { - "name": "Font family/Scandic Go/Decorative", - "type": "string", - "isAlias": false, - "value": "ITC Garamond Std" } ] } @@ -19164,7 +19836,7 @@ "lineHeightUnit": "PERCENT", "letterSpacing": 0.19599999487400055, "letterSpacingUnit": "PIXELS", - "textCase": "ORIGINAL", + "textCase": "UPPER", "textDecoration": "NONE" } }, diff --git a/packages/design-system/lib/components/Button/button.module.css b/packages/design-system/lib/components/Button/button.module.css index e9fa1cff2..cdd1ef50e 100644 --- a/packages/design-system/lib/components/Button/button.module.css +++ b/packages/design-system/lib/components/Button/button.module.css @@ -21,55 +21,55 @@ } .variant-primary { - background-color: var(--Component-Button-Brand-Primary-Default); + background-color: var(--Component-Button-Brand-Primary-Fill-Default); border-color: var(--Component-Button-Brand-Primary-Border-Default); color: var(--Component-Button-Brand-Primary-On-fill-Default); } .variant-primary:hover { - background-color: var(--Component-Button-Brand-Primary-Hover); + background-color: var(--Component-Button-Brand-Primary-Fill-Hover); border-color: var(--Component-Button-Brand-Primary-Border-Hover); color: var(--Component-Button-Brand-Primary-On-fill-Hover); } .variant-primary:disabled { - background-color: var(--Component-Button-Brand-Primary-Disabled); + background-color: var(--Component-Button-Brand-Primary-Fill-Disabled); border-color: var(--Component-Button-Brand-Primary-Border-Disabled); color: var(--Component-Button-Brand-Primary-On-fill-Disabled); } .variant-secondary { - background-color: var(--Component-Button-Brand-Secondary-Default); + background-color: var(--Component-Button-Brand-Secondary-Fill-Default); border-color: var(--Component-Button-Brand-Secondary-Border-Default); color: var(--Component-Button-Brand-Secondary-On-fill-Default); } .variant-secondary:hover { - background-color: var(--Component-Button-Brand-Secondary-Hover); + background-color: var(--Component-Button-Brand-Secondary-Fill-Hover); border-color: var(--Component-Button-Brand-Secondary-Border-Hover); color: var(--Component-Button-Brand-Secondary-On-fill-Hover); } .variant-secondary:disabled { - background-color: var(--Component-Button-Brand-Secondary-Disabled); + background-color: var(--Component-Button-Brand-Secondary-Fill-Disabled); border-color: var(--Component-Button-Brand-Secondary-Border-Disabled); color: var(--Component-Button-Brand-Secondary-On-fill-Disabled); } .variant-tertiary { - background-color: var(--Component-Button-Brand-Tertiary-Default); + background-color: var(--Component-Button-Brand-Tertiary-Fill-Default); border-color: var(--Component-Button-Brand-Tertiary-Border-Default); color: var(--Component-Button-Brand-Tertiary-On-fill-Default); } .variant-tertiary:hover { - background-color: var(--Component-Button-Brand-Tertiary-Hover); + background-color: var(--Component-Button-Brand-Tertiary-Fill-Hover); border-color: var(--Component-Button-Brand-Tertiary-Border-Hover); color: var(--Component-Button-Brand-Tertiary-On-fill-Hover); } .variant-tertiary:disabled { - background-color: var(--Component-Button-Brand-Tertiary-Disabled); + background-color: var(--Component-Button-Brand-Tertiary-Fill-Disabled); border-color: var(--Component-Button-Brand-Tertiary-Border-Disabled); color: var(--Component-Button-Brand-Tertiary-On-fill-Disabled); } diff --git a/packages/design-system/lib/components/ChipButton/chip-button.module.css b/packages/design-system/lib/components/ChipButton/chip-button.module.css index b5eff3b6c..fe4ab6477 100644 --- a/packages/design-system/lib/components/ChipButton/chip-button.module.css +++ b/packages/design-system/lib/components/ChipButton/chip-button.module.css @@ -1,5 +1,5 @@ .chip { - background-color: var(--Component-Button-Inverted-Default); + background-color: var(--Component-Button-Inverted-Fill-Default); border-color: var(--Component-Button-Inverted-Border-Default); border-style: solid; border-width: 1px; diff --git a/packages/design-system/lib/components/ChipLink/chip-link.module.css b/packages/design-system/lib/components/ChipLink/chip-link.module.css index 0a3c54fb9..24fbca78f 100644 --- a/packages/design-system/lib/components/ChipLink/chip-link.module.css +++ b/packages/design-system/lib/components/ChipLink/chip-link.module.css @@ -1,5 +1,5 @@ .chip { - background-color: var(--Component-Button-Inverted-Default); + background-color: var(--Component-Button-Inverted-Fill-Default); border-color: var(--Component-Button-Inverted-Border-Default); border-style: solid; border-width: 1px; diff --git a/packages/design-system/lib/styles/base.css b/packages/design-system/lib/styles/base.css index 9ecb03649..afc0b3236 100644 --- a/packages/design-system/lib/styles/base.css +++ b/packages/design-system/lib/styles/base.css @@ -17,9 +17,6 @@ --Corner-radius-rounded: 250px; --Corner-radius-sm: 4px; --Corner-radius-xl: 16px; - --Font-family-Body: 'Fira sans'; - --Font-family-Decorative: 'Biro Script Plus'; - --Font-family-Title: 'Brandon Text'; --Font-weight-Black: 900; --Font-weight-Bold: 700; --Font-weight-Extra-Bold: 800; @@ -70,7 +67,7 @@ --Neutral-Opacity-White-30: #ffffff4d; --Neutral-Opacity-White-40: #ffffff66; --Neutral-Opacity-White-50: #ffffff80; - --Neutral-Opacity-White-5: #ffffff00; + --Neutral-Opacity-White-5: #ffffff0d; --Neutral-Opacity-White-60: #ffffff99; --Neutral-Opacity-White-70: #ffffffb3; --Neutral-Opacity-White-80: #ffffffcc; diff --git a/packages/design-system/lib/styles/base.js b/packages/design-system/lib/styles/base.js index 970da10a7..0deb13a42 100644 --- a/packages/design-system/lib/styles/base.js +++ b/packages/design-system/lib/styles/base.js @@ -23,7 +23,7 @@ export const theme = { 'Neutral/Opacity/White/30': '#FFFFFF4D', 'Neutral/Opacity/White/20': '#FFFFFF33', 'Neutral/Opacity/White/10': '#FFFFFF1A', - 'Neutral/Opacity/White/5': '#FFFFFF00', + 'Neutral/Opacity/White/5': '#FFFFFF0D', 'Neutral/Opacity/White/0': '#FFFFFF00', 'Neutral/Opacity/Black/100': '#1F1C1B', 'Neutral/Opacity/Black/90': '#1F1C1BE6', @@ -52,9 +52,6 @@ export const theme = { 'Text size/4xl': 36, 'Text size/5xl': 56, 'Text size/md': 24, - 'Font family/Title': 'Brandon Text', - 'Font family/Body': 'Fira sans', - 'Font family/Decorative': 'Biro Script Plus', 'Font weight/Regular': 400, 'Font weight/Regular bold': 450, 'Font weight/Medium': 500, diff --git a/packages/design-system/lib/styles/downtown-camper.css b/packages/design-system/lib/styles/downtown-camper.css index fe18bab1f..6e97edf20 100644 --- a/packages/design-system/lib/styles/downtown-camper.css +++ b/packages/design-system/lib/styles/downtown-camper.css @@ -9,12 +9,15 @@ --Body-Supporting-text-Letter-spacing: 0.2px; --Body-Underline-md-Font-fallback: sans-serif; --Body-Underline-md-Letter-spacing: 0.19px; + --Body-Underline-md-Text-Decoration: underline; --Body-Underline-sm-Font-fallback: sans-serif; --Body-Underline-sm-Letter-spacing: 0.2px; - --Component-Button-Brand-Primary-Hover: #915836; - --Component-Button-Brand-Secondary-Border-Hover-inverted: #f4ebe7; - --Component-Button-Brand-Tertiary-Hover: #4d5448; - --Component-Button-Inverted-Hover: #f2f2f2; + --Body-Underline-sm-Text-Decoration: underline; + --Component-Button-Brand-Primary-Fill-Hover: #9e694a; + --Component-Button-Brand-Secondary-Border-Hover-inverted: #c59f8a; + --Component-Button-Brand-Secondary-On-fill-Hover-inverted: #ddc5b7; + --Component-Button-Brand-Tertiary-Fill-Hover: #4d5448; + --Component-Button-Inverted-Fill-Hover: #e6e5e5; --Component-Button-Inverted-On-fill-Hover: #915836; --Component-Button-Muted-Border-Hover: #ffffff30; --Font-family-Downtown-Camper-Body: 'Fira sans'; @@ -24,8 +27,10 @@ --Label-Letter-spacing: 0.17px; --Link-md-Font-fallback: sans-serif; --Link-md-Letter-spacing: 0.19px; + --Link-md-Text-Decoration: underline; --Link-sm-Font-fallback: sans-serif; --Link-sm-Letter-spacing: 0.2px; + --Link-sm-Text-Decoration: underline; --Signature-Downtown-Camper-Lunar-green-0: #f3f4f1; --Signature-Downtown-Camper-Lunar-green-100: #191d16; --Signature-Downtown-Camper-Lunar-green-10: #e4e7e0; @@ -151,10 +156,12 @@ --Neutral-Opacity-White-0 ); --Component-Button-Brand-Primary-Border-Hover: var(--Neutral-Opacity-White-0); - --Component-Button-Brand-Primary-Default: var( + --Component-Button-Brand-Primary-Fill-Default: var( --Signature-Downtown-Camper-Russet-80 ); - --Component-Button-Brand-Primary-Disabled: var(--Neutral-Opacity-Black-10); + --Component-Button-Brand-Primary-Fill-Disabled: var( + --Neutral-Opacity-Black-10 + ); --Component-Button-Brand-Primary-On-fill-Default: var( --Neutral-Opacity-White-100 ); @@ -174,13 +181,19 @@ --Component-Button-Brand-Secondary-Border-Inverted: var( --Neutral-Opacity-White-100 ); - --Component-Button-Brand-Secondary-Default: var(--Neutral-Opacity-White-0); - --Component-Button-Brand-Secondary-Disabled: var(--Neutral-Opacity-Black-10); - --Component-Button-Brand-Secondary-Hover-Inverted: var( + --Component-Button-Brand-Secondary-Fill-Default: var( + --Neutral-Opacity-White-0 + ); + --Component-Button-Brand-Secondary-Fill-Disabled: var( + --Neutral-Opacity-Black-10 + ); + --Component-Button-Brand-Secondary-Fill-Hover-Inverted: var( --Signature-Downtown-Camper-Lunar-green-80 ); - --Component-Button-Brand-Secondary-Hover: var(--Neutral-Opacity-White-0); - --Component-Button-Brand-Secondary-Inverted: var(--Neutral-Opacity-White-100); + --Component-Button-Brand-Secondary-Fill-Hover: var(--Neutral-Opacity-White-0); + --Component-Button-Brand-Secondary-Fill-Inverted: var( + --Neutral-Opacity-White-100 + ); --Component-Button-Brand-Secondary-On-fill-Default: var( --Signature-Downtown-Camper-Russet-80 ); @@ -200,10 +213,12 @@ --Component-Button-Brand-Tertiary-Border-Hover: var( --Neutral-Opacity-White-0 ); - --Component-Button-Brand-Tertiary-Default: var( + --Component-Button-Brand-Tertiary-Fill-Default: var( --Signature-Downtown-Camper-Lunar-green-80 ); - --Component-Button-Brand-Tertiary-Disabled: var(--Neutral-Opacity-Black-10); + --Component-Button-Brand-Tertiary-Fill-Disabled: var( + --Neutral-Opacity-Black-10 + ); --Component-Button-Brand-Tertiary-On-fill-Default: var( --Neutral-Opacity-White-100 ); @@ -214,10 +229,10 @@ --Component-Button-Inverted-Border-Default: var(--Neutral-Opacity-White-0); --Component-Button-Inverted-Border-Disable: var(--Neutral-Opacity-White-0); --Component-Button-Inverted-Border-Hover: var(--Neutral-Opacity-White-0); - --Component-Button-Inverted-Default: var(--Neutral-Opacity-White-100); - --Component-Button-Inverted-Disabled: var(--Neutral-Opacity-Black-10); - --Component-Button-Inverted-Faded: var(--Neutral-Opacity-White-90); - --Component-Button-Inverted-Hover-Inverted: var( + --Component-Button-Inverted-Fill-Default: var(--Neutral-Opacity-White-100); + --Component-Button-Inverted-Fill-Disabled: var(--Neutral-Opacity-Black-10); + --Component-Button-Inverted-Fill-Faded: var(--Neutral-Opacity-White-90); + --Component-Button-Inverted-Fill-Hover-Inverted: var( --Signature-Downtown-Camper-Lunar-green-80 ); --Component-Button-Inverted-On-fill-Default: var( @@ -229,11 +244,11 @@ ); --Component-Button-Muted-Border-Default: var(--Neutral-Opacity-White-10); --Component-Button-Muted-Border-Disable: var(--Neutral-Opacity-White-10); - --Component-Button-Muted-Default: var(--Neutral-Opacity-White-0); - --Component-Button-Muted-Disabled-inverted: var(--Neutral-20); - --Component-Button-Muted-Disabled: var(--Neutral-Opacity-White-10); - --Component-Button-Muted-Hover-inverted: var(--Neutral-Opacity-Black-5); - --Component-Button-Muted-Hover: var(--Neutral-Opacity-White-5); + --Component-Button-Muted-Fill-Default: var(--Neutral-Opacity-White-0); + --Component-Button-Muted-Fill-Disabled-inverted: var(--Neutral-20); + --Component-Button-Muted-Fill-Disabled: var(--Neutral-Opacity-White-10); + --Component-Button-Muted-Fill-Hover-inverted: var(--Neutral-Opacity-Black-5); + --Component-Button-Muted-Fill-Hover: var(--Neutral-Opacity-White-5); --Component-Button-Muted-On-fill-Default: var(--Neutral-90); --Component-Button-Muted-On-fill-Disabled: var(--Neutral-40); --Component-Button-Muted-On-fill-Hover-Inverted: var( @@ -248,6 +263,7 @@ --Icon-Feedback-Success: var(--Scandic-Green-60); --Icon-Feedback-Warning: var(--Scandic-Yellow-60); --Icon-Intense: var(--Neutral-90); + --Icon-Interactive-Accent: var(--Signature-Downtown-Camper-Russet-80); --Icon-Interactive-Default: var(--Neutral-90); --Icon-Interactive-Disabled: var(--Neutral-30); --Icon-Interactive-Placeholder: var(--Neutral-50); @@ -265,6 +281,7 @@ --Link-sm-Size: var(--Impl-Text-size-4xs); --Overlay-10: var(--Neutral-Opacity-Black-10); --Overlay-20: var(--Neutral-Opacity-Black-20); + --Overlay-30: var(--Neutral-Opacity-Black-20); --Overlay-40: var(--Neutral-Opacity-Black-40); --Overlay-60: var(--Neutral-Opacity-Black-60); --Overlay-80: var(--Neutral-Opacity-Black-80); @@ -294,8 +311,8 @@ --Surface-Primary-Disabled: var(--Neutral-15); --Surface-Primary-Hover-Accent: var(--Neutral-15); --Surface-Primary-OnSurface-Default: var(--Neutral-5); + --Surface-Secondary-Default-dark: var(--Neutral-20); --Surface-Secondary-Default: var(--Neutral-10); - --Surface-Secondary-Secondary: var(--Neutral-10); --Surface-UI-Fill-Active: var(--Neutral-80); --Surface-UI-Fill-Default: var(--Neutral-Opacity-White-100); --Surface-UI-Fill-Disabled: var(--Neutral-15); @@ -318,6 +335,11 @@ --Text-Brand-OnPrimary-3-Default: var(--Neutral-Opacity-White-100); --Text-Brand-OnPrimary-3-Heading: var(--Neutral-Opacity-White-100); --Text-Default: var(--Neutral-90); + --Text-Feedback-Error-Accent: var(--Scandic-Red-70); + --Text-Feedback-Information-Accent: var(--Scandic-Blue-70); + --Text-Feedback-Neutral-Accent: var(--Neutral-50); + --Text-Feedback-Succes-Accent: var(--Scandic-Green-60); + --Text-Feedback-Warning-Accent: var(--Scandic-Yellow-60); --Text-Heading: var(--Neutral-90); --Text-Interactive-Default: var(--Neutral-90); --Text-Interactive-Disabled: var(--Neutral-40); diff --git a/packages/design-system/lib/styles/downtown-camper.js b/packages/design-system/lib/styles/downtown-camper.js index 7ba1b1072..3366a2944 100644 --- a/packages/design-system/lib/styles/downtown-camper.js +++ b/packages/design-system/lib/styles/downtown-camper.js @@ -69,8 +69,10 @@ export const theme = { 'Tag/Text-Transform': 'unset', 'Link/md/Font fallback': 'sans-serif', 'Link/md/Letter spacing': 0.19, + 'Link/md/Text-Decoration': 'underline', 'Link/sm/Font fallback': 'sans-serif', 'Link/sm/Letter spacing': 0.2, + 'Link/sm/Text-Decoration': 'underline', 'Body/Lead text/Font fallback': 'sans-serif', 'Body/Paragraph/Font fallback': 'sans-serif', 'Body/Paragraph/Letter spacing': 0.19, @@ -81,8 +83,10 @@ export const theme = { 'Label/Letter spacing': 0.17, 'Body/Underline/md/Font fallback': 'sans-serif', 'Body/Underline/md/Letter spacing': 0.19, + 'Body/Underline/md/Text-Decoration': 'underline', 'Body/Underline/sm/Font fallback': 'sans-serif', 'Body/Underline/sm/Letter spacing': 0.2, + 'Body/Underline/sm/Text-Decoration': 'underline', 'Surface/Brand/Primary 1/OnSurface/Default': '#FFFFFF', 'Surface/Brand/Primary 1/OnSurface/Accent': '#FFFFFF', 'Surface/Brand/Primary 1/OnSurface/Accent Secondary': '#FFFFFF', @@ -152,6 +156,11 @@ export const theme = { 'Text/Interactive/Error': '#AD0015', 'Text/Interactive/Placeholder': '#747474', 'Text/Brand/OnAccent/Heading': '#FFFFFF', + 'Text/Feedback/Information Accent': '#284EA0', + 'Text/Feedback/Succes Accent': '#348337', + 'Text/Feedback/Warning Accent': '#D17308', + 'Text/Feedback/Error Accent': '#AD0015', + 'Text/Feedback/Neutral Accent': '#747474', 'Text/Brand/OnAccent/Default': '#FFFFFF', 'Text/Brand/OnAccent/Accent': '#FFFFFF', 'Text/Brand/OnPrimary 1/Heading': '#FFFFFF', @@ -172,7 +181,7 @@ export const theme = { 'Surface/Primary/OnSurface/Default': '#F5F5F5', 'Surface/Primary/Disabled': '#E9E9E9', 'Surface/Secondary/Default': '#F0F0F0', - 'Surface/Secondary/Secondary': '#F0F0F0', + 'Surface/Secondary/Default dark': '#D9D9D9', 'Surface/Secondary/Hover': '#e4e4e4', 'Surface/Brand/Accent/Default': '#D3952D', 'Surface/Brand/Primary 1/Default': '#834722', @@ -206,6 +215,7 @@ export const theme = { 'Icon/Accent': '#717F63', 'Icon/Interactive/Default': '#1F1F1F', 'Icon/Interactive/Secondary': '#834722', + 'Icon/Interactive/Accent': '#834722', 'Icon/Interactive/Disabled': '#BFBFBF', 'Icon/Interactive/Placeholder': '#747474', 'Icon/Feedback/Information': '#284EA0', @@ -216,54 +226,56 @@ export const theme = { 'Icon/Inverted': '#FFFFFF', 'Overlay/10': '#1F1C1B1A', 'Overlay/20': '#1F1C1B33', + 'Overlay/30': '#1F1C1B33', 'Overlay/40': '#1F1C1B66', 'Overlay/60': '#1F1C1B99', 'Overlay/80': '#1F1C1BCC', 'Overlay/90': '#1F1C1BE6', - 'Component/Button/Brand/Primary/Default': '#834722', - 'Component/Button/Brand/Primary/Hover': '#915836', - 'Component/Button/Brand/Primary/Disabled': '#1F1C1B1A', + 'Component/Button/Brand/Primary/Fill/Default': '#834722', + 'Component/Button/Brand/Primary/Fill/Hover': '#9e694a', + 'Component/Button/Brand/Primary/Fill/Disabled': '#1F1C1B1A', 'Component/Button/Brand/Primary/On fill/Default': '#FFFFFF', 'Component/Button/Brand/Primary/On fill/Hover': '#FFFFFF', 'Component/Button/Brand/Primary/On fill/Disabled': '#8C8C8C', 'Component/Button/Brand/Primary/Border/Default': '#FFFFFF00', 'Component/Button/Brand/Primary/Border/Hover': '#FFFFFF00', 'Component/Button/Brand/Primary/Border/Disabled': '#FFFFFF00', - 'Component/Button/Brand/Secondary/Default': '#FFFFFF00', - 'Component/Button/Brand/Secondary/Hover': '#FFFFFF00', - 'Component/Button/Brand/Secondary/Inverted': '#FFFFFF', - 'Component/Button/Brand/Secondary/Hover Inverted': '#3C4336', - 'Component/Button/Brand/Secondary/Disabled': '#1F1C1B1A', + 'Component/Button/Brand/Secondary/Fill/Default': '#FFFFFF00', + 'Component/Button/Brand/Secondary/Fill/Hover': '#FFFFFF00', + 'Component/Button/Brand/Secondary/Fill/Inverted': '#FFFFFF', + 'Component/Button/Brand/Secondary/Fill/Hover Inverted': '#3C4336', + 'Component/Button/Brand/Secondary/Fill/Disabled': '#1F1C1B1A', 'Component/Button/Brand/Secondary/On fill/Default': '#834722', 'Component/Button/Brand/Secondary/On fill/Hover': '#9B5622', 'Component/Button/Brand/Secondary/On fill/Inverted': '#FFFFFF', + 'Component/Button/Brand/Secondary/On fill/Hover inverted': '#ddc5b7', 'Component/Button/Brand/Secondary/On fill/Disabled': '#8C8C8C', 'Component/Button/Brand/Secondary/Border/Default': '#834722', 'Component/Button/Brand/Secondary/Border/Hover': '#9B5622', 'Component/Button/Brand/Secondary/Border/Inverted': '#FFFFFF', - 'Component/Button/Brand/Secondary/Border/Hover inverted': '#f4ebe7', + 'Component/Button/Brand/Secondary/Border/Hover inverted': '#c59f8a', 'Component/Button/Brand/Secondary/Border/Disabled': '#1F1C1B1A', - 'Component/Button/Brand/Tertiary/Default': '#3C4336', - 'Component/Button/Brand/Tertiary/Hover': '#4d5448', - 'Component/Button/Brand/Tertiary/Disabled': '#1F1C1B1A', + 'Component/Button/Brand/Tertiary/Fill/Default': '#3C4336', + 'Component/Button/Brand/Tertiary/Fill/Hover': '#4d5448', + 'Component/Button/Brand/Tertiary/Fill/Disabled': '#1F1C1B1A', 'Component/Button/Brand/Tertiary/On fill/Default': '#FFFFFF', 'Component/Button/Brand/Tertiary/On fill/Hover': '#FFFFFF', 'Component/Button/Brand/Tertiary/On fill/Disabled': '#8C8C8C', 'Component/Button/Brand/Tertiary/Border/Default': '#FFFFFF00', 'Component/Button/Brand/Tertiary/Border/Hover': '#FFFFFF00', 'Component/Button/Brand/Tertiary/Border/Disabled': '#FFFFFF00', - 'Component/Button/Inverted/Default': '#FFFFFF', - 'Component/Button/Inverted/Faded': '#FFFFFFE6', - 'Component/Button/Inverted/Hover': '#f2f2f2', - 'Component/Button/Inverted/Hover Inverted': '#3C4336', - 'Component/Button/Inverted/Disabled': '#1F1C1B1A', + 'Component/Button/Inverted/Fill/Default': '#FFFFFF', + 'Component/Button/Inverted/Fill/Faded': '#FFFFFFE6', + 'Component/Button/Inverted/Fill/Hover': '#e6e5e5', + 'Component/Button/Inverted/Fill/Hover Inverted': '#3C4336', + 'Component/Button/Inverted/Fill/Disabled': '#1F1C1B1A', + 'Component/Button/Inverted/Border/Default': '#FFFFFF00', + 'Component/Button/Inverted/Border/Hover': '#FFFFFF00', + 'Component/Button/Inverted/Border/Disable': '#FFFFFF00', 'Component/Button/Inverted/On fill/Default': '#834722', 'Component/Button/Inverted/On fill/Hover': '#915836', 'Component/Button/Inverted/On fill/Hover inverted': '#FFFFFF', 'Component/Button/Inverted/On fill/Disabled': '#8C8C8C', - 'Component/Button/Inverted/Border/Default': '#FFFFFF00', - 'Component/Button/Inverted/Border/Hover': '#FFFFFF00', - 'Component/Button/Inverted/Border/Disable': '#FFFFFF00', 'Border/Interactive/Default': '#BFBFBF', 'Border/Divider/Default': '#D9D9D9', 'Border/Divider/Subtle': '#E9E9E9', @@ -277,11 +289,11 @@ export const theme = { 'Border/Interactive/Disabled': '#BFBFBF', 'Border/Interactive/Error': '#AD0015', 'Border/Interactive/KeyboardFocus': '#5B8FD4', - 'Component/Button/Muted/Default': '#FFFFFF00', - 'Component/Button/Muted/Hover': '#FFFFFF00', - 'Component/Button/Muted/Disabled': '#FFFFFF1A', - 'Component/Button/Muted/Hover inverted': '#1F1C1B0D', - 'Component/Button/Muted/Disabled inverted': '#D9D9D9', + 'Component/Button/Muted/Fill/Default': '#FFFFFF00', + 'Component/Button/Muted/Fill/Hover': '#FFFFFF0D', + 'Component/Button/Muted/Fill/Disabled': '#FFFFFF1A', + 'Component/Button/Muted/Fill/Hover inverted': '#1F1C1B0D', + 'Component/Button/Muted/Fill/Disabled inverted': '#D9D9D9', 'Component/Button/Muted/On fill/Default': '#1F1F1F', 'Component/Button/Muted/On fill/Inverted': '#FFFFFF', 'Component/Button/Muted/On fill/Hover Inverted': '#9B5622', diff --git a/packages/design-system/lib/styles/grand-hotel.css b/packages/design-system/lib/styles/grand-hotel.css index aa6276f5d..a5834638e 100644 --- a/packages/design-system/lib/styles/grand-hotel.css +++ b/packages/design-system/lib/styles/grand-hotel.css @@ -9,16 +9,19 @@ --Body-Supporting-text-Letter-spacing: 0.2px; --Body-Underline-md-Font-fallback: sans-serif; --Body-Underline-md-Letter-spacing: 0.19px; + --Body-Underline-md-Text-Decoration: underline; --Body-Underline-sm-Font-fallback: sans-serif; --Body-Underline-sm-Letter-spacing: 0.2px; - --Component-Button-Brand-Primary-Hover: #34373d; - --Component-Button-Brand-Secondary-Border-Hover-inverted: #e6e6e7; - --Component-Button-Brand-Tertiary-Hover: #b8cad0; + --Body-Underline-sm-Text-Decoration: underline; + --Component-Button-Brand-Primary-Fill-Hover: #34373d; + --Component-Button-Brand-Secondary-Border-Hover-inverted: #878a8d; + --Component-Button-Brand-Secondary-On-fill-Hover-inverted: #b6b7b9; + --Component-Button-Brand-Tertiary-Fill-Hover: #b8cad0; --Component-Button-Brand-Tertiary-On-fill-Hover: #34373d; - --Component-Button-Inverted-Hover: #f2f2f2; + --Component-Button-Inverted-Fill-Hover: #e6e5e5; --Component-Button-Inverted-On-fill-Hover: #34373d; --Component-Button-Muted-Border-Hover: #ffffff30; - --Component-Button-Muted-Hover-inverted: #f2f2f2; + --Component-Button-Muted-Fill-Hover-inverted: #f2f2f2; --Font-family-Grand-Hotel-Body: 'Fira sans'; --Font-family-Grand-Hotel-Decorative: 'Canela Deck'; --Font-family-Grand-Hotel-Title: 'Canela Deck'; @@ -26,8 +29,10 @@ --Label-Letter-spacing: 0.17px; --Link-md-Font-fallback: sans-serif; --Link-md-Letter-spacing: 0.19px; + --Link-md-Text-Decoration: underline; --Link-sm-Font-fallback: sans-serif; --Link-sm-Letter-spacing: 0.2px; + --Link-sm-Text-Decoration: underline; --Signature-Grand-Hotel-Blue-Bayoux-100: #21252b; --Signature-Grand-Hotel-Blue-Bayoux-50: #5b6e7f; --Signature-Grand-Hotel-Blue-Bayoux-80: #3d444d; @@ -132,10 +137,12 @@ --Neutral-Opacity-White-0 ); --Component-Button-Brand-Primary-Border-Hover: var(--Neutral-Opacity-White-0); - --Component-Button-Brand-Primary-Default: var( + --Component-Button-Brand-Primary-Fill-Default: var( --Signature-Grand-Hotel-Blue-Bayoux-100 ); - --Component-Button-Brand-Primary-Disabled: var(--Neutral-Opacity-Black-10); + --Component-Button-Brand-Primary-Fill-Disabled: var( + --Neutral-Opacity-Black-10 + ); --Component-Button-Brand-Primary-On-fill-Default: var( --Neutral-Opacity-White-100 ); @@ -155,13 +162,19 @@ --Component-Button-Brand-Secondary-Border-Inverted: var( --Neutral-Opacity-White-100 ); - --Component-Button-Brand-Secondary-Default: var(--Neutral-Opacity-White-0); - --Component-Button-Brand-Secondary-Disabled: var(--Neutral-Opacity-Black-10); - --Component-Button-Brand-Secondary-Hover-Inverted: var( + --Component-Button-Brand-Secondary-Fill-Default: var( + --Neutral-Opacity-White-0 + ); + --Component-Button-Brand-Secondary-Fill-Disabled: var( + --Neutral-Opacity-Black-10 + ); + --Component-Button-Brand-Secondary-Fill-Hover-Inverted: var( --Signature-Grand-Hotel-Submarine-30 ); - --Component-Button-Brand-Secondary-Hover: var(--Neutral-Opacity-White-0); - --Component-Button-Brand-Secondary-Inverted: var(--Neutral-Opacity-White-100); + --Component-Button-Brand-Secondary-Fill-Hover: var(--Neutral-Opacity-White-0); + --Component-Button-Brand-Secondary-Fill-Inverted: var( + --Neutral-Opacity-White-100 + ); --Component-Button-Brand-Secondary-On-fill-Default: var( --Signature-Grand-Hotel-Blue-Bayoux-100 ); @@ -181,10 +194,12 @@ --Component-Button-Brand-Tertiary-Border-Hover: var( --Neutral-Opacity-White-0 ); - --Component-Button-Brand-Tertiary-Default: var( + --Component-Button-Brand-Tertiary-Fill-Default: var( --Signature-Grand-Hotel-Submarine-30 ); - --Component-Button-Brand-Tertiary-Disabled: var(--Neutral-Opacity-Black-10); + --Component-Button-Brand-Tertiary-Fill-Disabled: var( + --Neutral-Opacity-Black-10 + ); --Component-Button-Brand-Tertiary-On-fill-Default: var( --Signature-Grand-Hotel-Blue-Bayoux-100 ); @@ -192,10 +207,10 @@ --Component-Button-Inverted-Border-Default: var(--Neutral-Opacity-White-0); --Component-Button-Inverted-Border-Disable: var(--Neutral-Opacity-White-10); --Component-Button-Inverted-Border-Hover: var(--Neutral-Opacity-White-10); - --Component-Button-Inverted-Default: var(--Neutral-Opacity-White-100); - --Component-Button-Inverted-Disabled: var(--Neutral-Opacity-Black-10); - --Component-Button-Inverted-Faded: var(--Neutral-Opacity-White-90); - --Component-Button-Inverted-Hover-Inverted: var( + --Component-Button-Inverted-Fill-Default: var(--Neutral-Opacity-White-100); + --Component-Button-Inverted-Fill-Disabled: var(--Neutral-Opacity-Black-10); + --Component-Button-Inverted-Fill-Faded: var(--Neutral-Opacity-White-90); + --Component-Button-Inverted-Fill-Hover-Inverted: var( --Signature-Grand-Hotel-Submarine-30 ); --Component-Button-Inverted-On-fill-Default: var( @@ -207,10 +222,10 @@ ); --Component-Button-Muted-Border-Default: var(--Neutral-Opacity-White-10); --Component-Button-Muted-Border-Disable: var(--Neutral-Opacity-White-10); - --Component-Button-Muted-Default: var(--Neutral-Opacity-White-100); - --Component-Button-Muted-Disabled-inverted: var(--Neutral-20); - --Component-Button-Muted-Disabled: var(--Neutral-Opacity-White-100); - --Component-Button-Muted-Hover: var(--Neutral-Opacity-White-100); + --Component-Button-Muted-Fill-Default: var(--Neutral-Opacity-White-100); + --Component-Button-Muted-Fill-Disabled-inverted: var(--Neutral-20); + --Component-Button-Muted-Fill-Disabled: var(--Neutral-Opacity-White-100); + --Component-Button-Muted-Fill-Hover: var(--Neutral-Opacity-White-100); --Component-Button-Muted-On-fill-Default: var(--Neutral-90); --Component-Button-Muted-On-fill-Disabled: var(--Neutral-40); --Component-Button-Muted-On-fill-Hover-Inverted: var( @@ -225,6 +240,7 @@ --Icon-Feedback-Success: var(--Scandic-Green-60); --Icon-Feedback-Warning: var(--Scandic-Yellow-60); --Icon-Intense: var(--Neutral-90); + --Icon-Interactive-Accent: var(--Signature-Grand-Hotel-Careys-Pink-60); --Icon-Interactive-Default: var(--Signature-Grand-Hotel-Blue-Bayoux-100); --Icon-Interactive-Disabled: var(--Neutral-30); --Icon-Interactive-Placeholder: var(--Neutral-50); @@ -242,6 +258,7 @@ --Link-sm-Size: var(--Impl-Text-size-4xs); --Overlay-10: var(--Neutral-Opacity-Black-10); --Overlay-20: var(--Neutral-Opacity-Black-20); + --Overlay-30: var(--Neutral-Opacity-Black-20); --Overlay-40: var(--Neutral-Opacity-Black-40); --Overlay-60: var(--Neutral-Opacity-Black-60); --Overlay-80: var(--Neutral-Opacity-Black-80); @@ -275,8 +292,8 @@ --Surface-Primary-Disabled: var(--Neutral-15); --Surface-Primary-Hover-Accent: var(--Neutral-15); --Surface-Primary-OnSurface-Default: var(--Signature-Grand-Hotel-Cloudy-0); + --Surface-Secondary-Default-dark: var(--Signature-Grand-Hotel-Cloudy-10); --Surface-Secondary-Default: var(--Signature-Grand-Hotel-Cloudy-0); - --Surface-Secondary-Secondary: var(--Signature-Grand-Hotel-Cloudy-0); --Surface-UI-Fill-Active-Hover: var(--Neutral-Opacity-White-100); --Surface-UI-Fill-Active: var(--Neutral-80); --Surface-UI-Fill-Default: var(--Neutral-Opacity-White-100); @@ -300,6 +317,11 @@ --Text-Brand-OnPrimary-3-Default: var(--Neutral-Opacity-White-100); --Text-Brand-OnPrimary-3-Heading: var(--Neutral-Opacity-White-100); --Text-Default: var(--Neutral-90); + --Text-Feedback-Error-Accent: var(--Scandic-Red-70); + --Text-Feedback-Information-Accent: var(--Scandic-Blue-70); + --Text-Feedback-Neutral-Accent: var(--Neutral-50); + --Text-Feedback-Succes-Accent: var(--Scandic-Green-60); + --Text-Feedback-Warning-Accent: var(--Scandic-Yellow-60); --Text-Heading: var(--Neutral-90); --Text-Interactive-Default: var(--Signature-Grand-Hotel-Blue-Bayoux-100); --Text-Interactive-Disabled: var(--Neutral-40); diff --git a/packages/design-system/lib/styles/grand-hotel.js b/packages/design-system/lib/styles/grand-hotel.js index 6c6e19f0f..95a783ae8 100644 --- a/packages/design-system/lib/styles/grand-hotel.js +++ b/packages/design-system/lib/styles/grand-hotel.js @@ -49,8 +49,10 @@ export const theme = { 'Tag/Text-Transform': 'uppercase', 'Link/md/Font fallback': 'sans-serif', 'Link/md/Letter spacing': 0.19, + 'Link/md/Text-Decoration': 'underline', 'Link/sm/Font fallback': 'sans-serif', 'Link/sm/Letter spacing': 0.2, + 'Link/sm/Text-Decoration': 'underline', 'Body/Lead text/Font fallback': 'sans-serif', 'Body/Paragraph/Font fallback': 'sans-serif', 'Body/Paragraph/Letter spacing': 0.19, @@ -61,8 +63,10 @@ export const theme = { 'Label/Letter spacing': 0.17, 'Body/Underline/md/Font fallback': 'sans-serif', 'Body/Underline/md/Letter spacing': 0.19, + 'Body/Underline/md/Text-Decoration': 'underline', 'Body/Underline/sm/Font fallback': 'sans-serif', 'Body/Underline/sm/Letter spacing': 0.2, + 'Body/Underline/sm/Text-Decoration': 'underline', 'Surface/Brand/Primary 1/OnSurface/Default': '#FFFFFF', 'Surface/Brand/Primary 1/OnSurface/Accent': '#FFFFFF', 'Surface/Brand/Primary 1/OnSurface/Accent Secondary': '#FFFFFF', @@ -132,6 +136,11 @@ export const theme = { 'Text/Interactive/Error': '#AD0015', 'Text/Interactive/Placeholder': '#747474', 'Text/Brand/OnAccent/Heading': '#1F1F1F', + 'Text/Feedback/Information Accent': '#284EA0', + 'Text/Feedback/Succes Accent': '#348337', + 'Text/Feedback/Warning Accent': '#D17308', + 'Text/Feedback/Error Accent': '#AD0015', + 'Text/Feedback/Neutral Accent': '#747474', 'Text/Brand/OnAccent/Default': '#1F1F1F', 'Text/Brand/OnAccent/Accent': '#1F1F1F', 'Text/Brand/OnPrimary 1/Heading': '#1F1F1F', @@ -152,7 +161,7 @@ export const theme = { 'Surface/Primary/OnSurface/Default': '#F7F6F5', 'Surface/Primary/Disabled': '#E9E9E9', 'Surface/Secondary/Default': '#F7F6F5', - 'Surface/Secondary/Secondary': '#F7F6F5', + 'Surface/Secondary/Default dark': '#EBEAE9', 'Surface/Secondary/Hover': '#ebeae9', 'Surface/Brand/Accent/Default': '#B2ADA7', 'Surface/Brand/Primary 1/Default': '#DBA7B1', @@ -186,6 +195,7 @@ export const theme = { 'Icon/Accent': '#DBA7B1', 'Icon/Interactive/Default': '#21252B', 'Icon/Interactive/Secondary': '#AA546B', + 'Icon/Interactive/Accent': '#AA546B', 'Icon/Interactive/Disabled': '#BFBFBF', 'Icon/Interactive/Placeholder': '#747474', 'Icon/Feedback/Information': '#284EA0', @@ -196,54 +206,56 @@ export const theme = { 'Icon/Inverted': '#FFFFFF', 'Overlay/10': '#1F1C1B1A', 'Overlay/20': '#1F1C1B33', + 'Overlay/30': '#1F1C1B33', 'Overlay/40': '#1F1C1B66', 'Overlay/60': '#1F1C1B99', 'Overlay/80': '#1F1C1BCC', 'Overlay/90': '#1F1C1BE6', - 'Component/Button/Brand/Primary/Default': '#21252B', - 'Component/Button/Brand/Primary/Hover': '#34373d', - 'Component/Button/Brand/Primary/Disabled': '#1F1C1B1A', + 'Component/Button/Brand/Primary/Fill/Default': '#21252B', + 'Component/Button/Brand/Primary/Fill/Hover': '#34373d', + 'Component/Button/Brand/Primary/Fill/Disabled': '#1F1C1B1A', 'Component/Button/Brand/Primary/On fill/Default': '#FFFFFF', 'Component/Button/Brand/Primary/On fill/Hover': '#FFFFFF', 'Component/Button/Brand/Primary/On fill/Disabled': '#8C8C8C', 'Component/Button/Brand/Primary/Border/Default': '#FFFFFF00', 'Component/Button/Brand/Primary/Border/Hover': '#FFFFFF00', 'Component/Button/Brand/Primary/Border/Disabled': '#FFFFFF00', - 'Component/Button/Brand/Secondary/Default': '#FFFFFF00', - 'Component/Button/Brand/Secondary/Hover': '#FFFFFF00', - 'Component/Button/Brand/Secondary/Inverted': '#FFFFFF', - 'Component/Button/Brand/Secondary/Hover Inverted': '#B0C4CB', - 'Component/Button/Brand/Secondary/Disabled': '#1F1C1B1A', + 'Component/Button/Brand/Secondary/Fill/Default': '#FFFFFF00', + 'Component/Button/Brand/Secondary/Fill/Hover': '#FFFFFF00', + 'Component/Button/Brand/Secondary/Fill/Inverted': '#FFFFFF', + 'Component/Button/Brand/Secondary/Fill/Hover Inverted': '#B0C4CB', + 'Component/Button/Brand/Secondary/Fill/Disabled': '#1F1C1B1A', 'Component/Button/Brand/Secondary/On fill/Default': '#21252B', 'Component/Button/Brand/Secondary/On fill/Hover': '#3D444D', 'Component/Button/Brand/Secondary/On fill/Inverted': '#FFFFFF', + 'Component/Button/Brand/Secondary/On fill/Hover inverted': '#b6b7b9', 'Component/Button/Brand/Secondary/On fill/Disabled': '#8C8C8C', 'Component/Button/Brand/Secondary/Border/Default': '#21252B', 'Component/Button/Brand/Secondary/Border/Hover': '#3D444D', 'Component/Button/Brand/Secondary/Border/Inverted': '#FFFFFF', - 'Component/Button/Brand/Secondary/Border/Hover inverted': '#e6e6e7', + 'Component/Button/Brand/Secondary/Border/Hover inverted': '#878a8d', 'Component/Button/Brand/Secondary/Border/Disabled': '#1F1C1B1A', - 'Component/Button/Brand/Tertiary/Default': '#B0C4CB', - 'Component/Button/Brand/Tertiary/Hover': '#b8cad0', - 'Component/Button/Brand/Tertiary/Disabled': '#1F1C1B1A', + 'Component/Button/Brand/Tertiary/Fill/Default': '#B0C4CB', + 'Component/Button/Brand/Tertiary/Fill/Hover': '#b8cad0', + 'Component/Button/Brand/Tertiary/Fill/Disabled': '#1F1C1B1A', 'Component/Button/Brand/Tertiary/On fill/Default': '#21252B', 'Component/Button/Brand/Tertiary/On fill/Hover': '#34373d', 'Component/Button/Brand/Tertiary/On fill/Disabled': '#8C8C8C', 'Component/Button/Brand/Tertiary/Border/Default': '#FFFFFF00', 'Component/Button/Brand/Tertiary/Border/Hover': '#FFFFFF00', 'Component/Button/Brand/Tertiary/Border/Disabled': '#FFFFFF00', - 'Component/Button/Inverted/Default': '#FFFFFF', - 'Component/Button/Inverted/Faded': '#FFFFFFE6', - 'Component/Button/Inverted/Hover': '#f2f2f2', - 'Component/Button/Inverted/Hover Inverted': '#B0C4CB', - 'Component/Button/Inverted/Disabled': '#1F1C1B1A', + 'Component/Button/Inverted/Fill/Default': '#FFFFFF', + 'Component/Button/Inverted/Fill/Faded': '#FFFFFFE6', + 'Component/Button/Inverted/Fill/Hover': '#e6e5e5', + 'Component/Button/Inverted/Fill/Hover Inverted': '#B0C4CB', + 'Component/Button/Inverted/Fill/Disabled': '#1F1C1B1A', + 'Component/Button/Inverted/Border/Default': '#FFFFFF00', + 'Component/Button/Inverted/Border/Hover': '#FFFFFF1A', + 'Component/Button/Inverted/Border/Disable': '#FFFFFF1A', 'Component/Button/Inverted/On fill/Default': '#21252B', 'Component/Button/Inverted/On fill/Hover': '#34373d', 'Component/Button/Inverted/On fill/Hover inverted': '#FFFFFF', 'Component/Button/Inverted/On fill/Disabled': '#8C8C8C', - 'Component/Button/Inverted/Border/Default': '#FFFFFF00', - 'Component/Button/Inverted/Border/Hover': '#FFFFFF1A', - 'Component/Button/Inverted/Border/Disable': '#FFFFFF1A', 'Border/Interactive/Default': '#BFBFBF', 'Border/Divider/Default': '#D9D9D9', 'Border/Divider/Subtle': '#E9E9E9', @@ -257,11 +269,11 @@ export const theme = { 'Border/Interactive/Disabled': '#BFBFBF', 'Border/Interactive/Error': '#AD0015', 'Border/Interactive/KeyboardFocus': '#5B8FD4', - 'Component/Button/Muted/Default': '#FFFFFF', - 'Component/Button/Muted/Hover': '#FFFFFF', - 'Component/Button/Muted/Disabled': '#FFFFFF', - 'Component/Button/Muted/Hover inverted': '#f2f2f2', - 'Component/Button/Muted/Disabled inverted': '#D9D9D9', + 'Component/Button/Muted/Fill/Default': '#FFFFFF', + 'Component/Button/Muted/Fill/Hover': '#FFFFFF', + 'Component/Button/Muted/Fill/Disabled': '#FFFFFF', + 'Component/Button/Muted/Fill/Hover inverted': '#f2f2f2', + 'Component/Button/Muted/Fill/Disabled inverted': '#D9D9D9', 'Component/Button/Muted/On fill/Default': '#1F1F1F', 'Component/Button/Muted/On fill/Inverted': '#FFFFFF', 'Component/Button/Muted/On fill/Hover Inverted': '#3D444D', diff --git a/packages/design-system/lib/styles/haymarket.css b/packages/design-system/lib/styles/haymarket.css index 8cda1b2ad..44823f1e3 100644 --- a/packages/design-system/lib/styles/haymarket.css +++ b/packages/design-system/lib/styles/haymarket.css @@ -9,12 +9,15 @@ --Body-Supporting-text-Letter-spacing: 0.2px; --Body-Underline-md-Font-fallback: sans-serif; --Body-Underline-md-Letter-spacing: 0.19px; + --Body-Underline-md-Text-Decoration: underline; --Body-Underline-sm-Font-fallback: sans-serif; --Body-Underline-sm-Letter-spacing: 0.2px; - --Component-Button-Brand-Primary-Hover: #323232; - --Component-Button-Brand-Secondary-Border-Hover-inverted: #e6e6e6; - --Component-Button-Brand-Tertiary-Hover: #87664e; - --Component-Button-Inverted-Hover: #f2f2f2; + --Body-Underline-sm-Text-Decoration: underline; + --Component-Button-Brand-Primary-Fill-Hover: #323232; + --Component-Button-Brand-Secondary-Border-Hover-inverted: #868686; + --Component-Button-Brand-Secondary-On-fill-Hover-inverted: #b5b5b5; + --Component-Button-Brand-Tertiary-Fill-Hover: #87664e; + --Component-Button-Inverted-Fill-Hover: #e6e5e5; --Component-Button-Inverted-On-fill-Hover: #323232; --Component-Button-Muted-Border-Hover: #ffffff30; --Font-family-Haymarket-Body: 'Fira sans'; @@ -24,8 +27,10 @@ --Label-Letter-spacing: 0.17px; --Link-md-Font-fallback: sans-serif; --Link-md-Letter-spacing: 0.19px; + --Link-md-Text-Decoration: underline; --Link-sm-Font-fallback: sans-serif; --Link-sm-Letter-spacing: 0.2px; + --Link-sm-Text-Decoration: underline; --Signature-Haymarket-Antique-Brass-0: #f9f5f1; --Signature-Haymarket-Antique-Brass-100: #37271c; --Signature-Haymarket-Antique-Brass-10: #ede3d8; @@ -151,8 +156,10 @@ --Neutral-Opacity-White-0 ); --Component-Button-Brand-Primary-Border-Hover: var(--Neutral-Opacity-White-0); - --Component-Button-Brand-Primary-Default: var(--Neutral-90); - --Component-Button-Brand-Primary-Disabled: var(--Neutral-Opacity-Black-10); + --Component-Button-Brand-Primary-Fill-Default: var(--Neutral-90); + --Component-Button-Brand-Primary-Fill-Disabled: var( + --Neutral-Opacity-Black-10 + ); --Component-Button-Brand-Primary-On-fill-Default: var( --Neutral-Opacity-White-100 ); @@ -168,13 +175,19 @@ --Component-Button-Brand-Secondary-Border-Inverted: var( --Neutral-Opacity-White-100 ); - --Component-Button-Brand-Secondary-Default: var(--Neutral-Opacity-White-0); - --Component-Button-Brand-Secondary-Disabled: var(--Neutral-Opacity-Black-10); - --Component-Button-Brand-Secondary-Hover-Inverted: var( + --Component-Button-Brand-Secondary-Fill-Default: var( + --Neutral-Opacity-White-0 + ); + --Component-Button-Brand-Secondary-Fill-Disabled: var( + --Neutral-Opacity-Black-10 + ); + --Component-Button-Brand-Secondary-Fill-Hover-Inverted: var( --Signature-Haymarket-Antique-Brass-50 ); - --Component-Button-Brand-Secondary-Hover: var(--Neutral-Opacity-White-0); - --Component-Button-Brand-Secondary-Inverted: var(--Neutral-Opacity-White-100); + --Component-Button-Brand-Secondary-Fill-Hover: var(--Neutral-Opacity-White-0); + --Component-Button-Brand-Secondary-Fill-Inverted: var( + --Neutral-Opacity-White-100 + ); --Component-Button-Brand-Secondary-On-fill-Default: var(--Neutral-90); --Component-Button-Brand-Secondary-On-fill-Disabled: var(--Neutral-40); --Component-Button-Brand-Secondary-On-fill-Hover: var(--Neutral-70); @@ -190,10 +203,12 @@ --Component-Button-Brand-Tertiary-Border-Hover: var( --Neutral-Opacity-White-0 ); - --Component-Button-Brand-Tertiary-Default: var( + --Component-Button-Brand-Tertiary-Fill-Default: var( --Signature-Haymarket-Antique-Brass-50 ); - --Component-Button-Brand-Tertiary-Disabled: var(--Neutral-Opacity-Black-10); + --Component-Button-Brand-Tertiary-Fill-Disabled: var( + --Neutral-Opacity-Black-10 + ); --Component-Button-Brand-Tertiary-On-fill-Default: var( --Neutral-Opacity-White-100 ); @@ -204,10 +219,10 @@ --Component-Button-Inverted-Border-Default: var(--Neutral-Opacity-White-0); --Component-Button-Inverted-Border-Disable: var(--Neutral-Opacity-White-0); --Component-Button-Inverted-Border-Hover: var(--Neutral-Opacity-White-0); - --Component-Button-Inverted-Default: var(--Neutral-Opacity-White-100); - --Component-Button-Inverted-Disabled: var(--Neutral-Opacity-Black-10); - --Component-Button-Inverted-Faded: var(--Neutral-Opacity-White-90); - --Component-Button-Inverted-Hover-Inverted: var( + --Component-Button-Inverted-Fill-Default: var(--Neutral-Opacity-White-100); + --Component-Button-Inverted-Fill-Disabled: var(--Neutral-Opacity-Black-10); + --Component-Button-Inverted-Fill-Faded: var(--Neutral-Opacity-White-90); + --Component-Button-Inverted-Fill-Hover-Inverted: var( --Signature-Haymarket-Antique-Brass-50 ); --Component-Button-Inverted-On-fill-Default: var(--Neutral-90); @@ -217,11 +232,11 @@ ); --Component-Button-Muted-Border-Default: var(--Neutral-Opacity-White-10); --Component-Button-Muted-Border-Disable: var(--Neutral-Opacity-White-10); - --Component-Button-Muted-Default: var(--Neutral-Opacity-White-0); - --Component-Button-Muted-Disabled-inverted: var(--Neutral-20); - --Component-Button-Muted-Disabled: var(--Neutral-Opacity-White-10); - --Component-Button-Muted-Hover-inverted: var(--Neutral-Opacity-Black-5); - --Component-Button-Muted-Hover: var(--Neutral-Opacity-White-5); + --Component-Button-Muted-Fill-Default: var(--Neutral-Opacity-White-0); + --Component-Button-Muted-Fill-Disabled-inverted: var(--Neutral-20); + --Component-Button-Muted-Fill-Disabled: var(--Neutral-Opacity-White-10); + --Component-Button-Muted-Fill-Hover-inverted: var(--Neutral-Opacity-Black-5); + --Component-Button-Muted-Fill-Hover: var(--Neutral-Opacity-White-5); --Component-Button-Muted-On-fill-Default: var(--Neutral-90); --Component-Button-Muted-On-fill-Disabled: var(--Neutral-40); --Component-Button-Muted-On-fill-Hover-Inverted: var(--Neutral-70); @@ -234,6 +249,7 @@ --Icon-Feedback-Success: var(--Scandic-Green-60); --Icon-Feedback-Warning: var(--Scandic-Yellow-60); --Icon-Intense: var(--Neutral-90); + --Icon-Interactive-Accent: var(--Signature-Haymarket-Antique-Brass-60); --Icon-Interactive-Default: var(--Neutral-90); --Icon-Interactive-Disabled: var(--Neutral-30); --Icon-Interactive-Placeholder: var(--Neutral-50); @@ -251,6 +267,7 @@ --Link-sm-Size: var(--Impl-Text-size-4xs); --Overlay-10: var(--Neutral-Opacity-Black-10); --Overlay-20: var(--Neutral-Opacity-Black-20); + --Overlay-30: var(--Neutral-Opacity-Black-20); --Overlay-40: var(--Neutral-Opacity-Black-40); --Overlay-60: var(--Neutral-Opacity-Black-60); --Overlay-80: var(--Neutral-Opacity-Black-80); @@ -280,8 +297,8 @@ --Surface-Primary-Disabled: var(--Neutral-15); --Surface-Primary-Hover-Accent: var(--Neutral-15); --Surface-Primary-OnSurface-Default: var(--Signature-Haymarket-Vista-White-0); + --Surface-Secondary-Default-dark: var(--Signature-Haymarket-Vista-White-10); --Surface-Secondary-Default: var(--Signature-Haymarket-Vista-White-0); - --Surface-Secondary-Secondary: var(--Signature-Haymarket-Vista-White-0); --Surface-UI-Fill-Active: var(--Neutral-80); --Surface-UI-Fill-Default: var(--Neutral-Opacity-White-100); --Surface-UI-Fill-Disabled: var(--Neutral-15); @@ -304,6 +321,11 @@ --Text-Brand-OnPrimary-3-Default: var(--Neutral-90); --Text-Brand-OnPrimary-3-Heading: var(--Neutral-90); --Text-Default: var(--Neutral-90); + --Text-Feedback-Error-Accent: var(--Scandic-Red-70); + --Text-Feedback-Information-Accent: var(--Scandic-Blue-70); + --Text-Feedback-Neutral-Accent: var(--Neutral-50); + --Text-Feedback-Succes-Accent: var(--Scandic-Green-60); + --Text-Feedback-Warning-Accent: var(--Scandic-Yellow-60); --Text-Heading: var(--Neutral-90); --Text-Interactive-Default: var(--Neutral-90); --Text-Interactive-Disabled: var(--Neutral-40); diff --git a/packages/design-system/lib/styles/haymarket.js b/packages/design-system/lib/styles/haymarket.js index b4187394e..733cc69ab 100644 --- a/packages/design-system/lib/styles/haymarket.js +++ b/packages/design-system/lib/styles/haymarket.js @@ -69,8 +69,10 @@ export const theme = { 'Tag/Text-Transform': 'uppercase', 'Link/md/Font fallback': 'sans-serif', 'Link/md/Letter spacing': 0.19, + 'Link/md/Text-Decoration': 'underline', 'Link/sm/Font fallback': 'sans-serif', 'Link/sm/Letter spacing': 0.2, + 'Link/sm/Text-Decoration': 'underline', 'Body/Lead text/Font fallback': 'sans-serif', 'Body/Paragraph/Font fallback': 'sans-serif', 'Body/Paragraph/Letter spacing': 0.19, @@ -81,8 +83,10 @@ export const theme = { 'Label/Letter spacing': 0.17, 'Body/Underline/md/Font fallback': 'sans-serif', 'Body/Underline/md/Letter spacing': 0.19, + 'Body/Underline/md/Text-Decoration': 'underline', 'Body/Underline/sm/Font fallback': 'sans-serif', 'Body/Underline/sm/Letter spacing': 0.2, + 'Body/Underline/sm/Text-Decoration': 'underline', 'Surface/Brand/Primary 1/OnSurface/Default': '#FFFFFF', 'Surface/Brand/Primary 1/OnSurface/Accent': '#FFFFFF', 'Surface/Brand/Primary 1/OnSurface/Accent Secondary': '#FFFFFF', @@ -152,6 +156,11 @@ export const theme = { 'Text/Interactive/Error': '#AD0015', 'Text/Interactive/Placeholder': '#747474', 'Text/Brand/OnAccent/Heading': '#FFFFFF', + 'Text/Feedback/Information Accent': '#284EA0', + 'Text/Feedback/Succes Accent': '#348337', + 'Text/Feedback/Warning Accent': '#D17308', + 'Text/Feedback/Error Accent': '#AD0015', + 'Text/Feedback/Neutral Accent': '#747474', 'Text/Brand/OnAccent/Default': '#FFFFFF', 'Text/Brand/OnAccent/Accent': '#FFFFFF', 'Text/Brand/OnPrimary 1/Heading': '#FFFFFF', @@ -172,7 +181,7 @@ export const theme = { 'Surface/Primary/OnSurface/Default': '#FBF7F6', 'Surface/Primary/Disabled': '#E9E9E9', 'Surface/Secondary/Default': '#FBF7F6', - 'Surface/Secondary/Secondary': '#FBF7F6', + 'Surface/Secondary/Default dark': '#F6ECEA', 'Surface/Secondary/Hover': '#efebea', 'Surface/Brand/Accent/Default': '#946F54', 'Surface/Brand/Primary 1/Default': '#4A6C78', @@ -206,6 +215,7 @@ export const theme = { 'Icon/Accent': '#C08273', 'Icon/Interactive/Default': '#1F1F1F', 'Icon/Interactive/Secondary': '#805E45', + 'Icon/Interactive/Accent': '#805E45', 'Icon/Interactive/Disabled': '#BFBFBF', 'Icon/Interactive/Placeholder': '#747474', 'Icon/Feedback/Information': '#284EA0', @@ -216,54 +226,56 @@ export const theme = { 'Icon/Inverted': '#FFFFFF', 'Overlay/10': '#1F1C1B1A', 'Overlay/20': '#1F1C1B33', + 'Overlay/30': '#1F1C1B33', 'Overlay/40': '#1F1C1B66', 'Overlay/60': '#1F1C1B99', 'Overlay/80': '#1F1C1BCC', 'Overlay/90': '#1F1C1BE6', - 'Component/Button/Brand/Primary/Default': '#1F1F1F', - 'Component/Button/Brand/Primary/Hover': '#323232', - 'Component/Button/Brand/Primary/Disabled': '#1F1C1B1A', + 'Component/Button/Brand/Primary/Fill/Default': '#1F1F1F', + 'Component/Button/Brand/Primary/Fill/Hover': '#323232', + 'Component/Button/Brand/Primary/Fill/Disabled': '#1F1C1B1A', 'Component/Button/Brand/Primary/On fill/Default': '#FFFFFF', 'Component/Button/Brand/Primary/On fill/Hover': '#FFFFFF', 'Component/Button/Brand/Primary/On fill/Disabled': '#8C8C8C', 'Component/Button/Brand/Primary/Border/Default': '#FFFFFF00', 'Component/Button/Brand/Primary/Border/Hover': '#FFFFFF00', 'Component/Button/Brand/Primary/Border/Disabled': '#FFFFFF00', - 'Component/Button/Brand/Secondary/Default': '#FFFFFF00', - 'Component/Button/Brand/Secondary/Hover': '#FFFFFF00', - 'Component/Button/Brand/Secondary/Inverted': '#FFFFFF', - 'Component/Button/Brand/Secondary/Hover Inverted': '#946F54', - 'Component/Button/Brand/Secondary/Disabled': '#1F1C1B1A', + 'Component/Button/Brand/Secondary/Fill/Default': '#FFFFFF00', + 'Component/Button/Brand/Secondary/Fill/Hover': '#FFFFFF00', + 'Component/Button/Brand/Secondary/Fill/Inverted': '#FFFFFF', + 'Component/Button/Brand/Secondary/Fill/Hover Inverted': '#946F54', + 'Component/Button/Brand/Secondary/Fill/Disabled': '#1F1C1B1A', 'Component/Button/Brand/Secondary/On fill/Default': '#1F1F1F', 'Component/Button/Brand/Secondary/On fill/Hover': '#454545', 'Component/Button/Brand/Secondary/On fill/Inverted': '#FFFFFF', + 'Component/Button/Brand/Secondary/On fill/Hover inverted': '#b5b5b5', 'Component/Button/Brand/Secondary/On fill/Disabled': '#8C8C8C', 'Component/Button/Brand/Secondary/Border/Default': '#1F1F1F', 'Component/Button/Brand/Secondary/Border/Hover': '#454545', 'Component/Button/Brand/Secondary/Border/Inverted': '#FFFFFF', - 'Component/Button/Brand/Secondary/Border/Hover inverted': '#e6e6e6', + 'Component/Button/Brand/Secondary/Border/Hover inverted': '#868686', 'Component/Button/Brand/Secondary/Border/Disabled': '#1F1C1B1A', - 'Component/Button/Brand/Tertiary/Default': '#946F54', - 'Component/Button/Brand/Tertiary/Hover': '#87664e', - 'Component/Button/Brand/Tertiary/Disabled': '#1F1C1B1A', + 'Component/Button/Brand/Tertiary/Fill/Default': '#946F54', + 'Component/Button/Brand/Tertiary/Fill/Hover': '#87664e', + 'Component/Button/Brand/Tertiary/Fill/Disabled': '#1F1C1B1A', 'Component/Button/Brand/Tertiary/On fill/Default': '#FFFFFF', 'Component/Button/Brand/Tertiary/On fill/Hover': '#FFFFFF', 'Component/Button/Brand/Tertiary/On fill/Disabled': '#8C8C8C', 'Component/Button/Brand/Tertiary/Border/Default': '#FFFFFF00', 'Component/Button/Brand/Tertiary/Border/Hover': '#FFFFFF00', 'Component/Button/Brand/Tertiary/Border/Disabled': '#FFFFFF00', - 'Component/Button/Inverted/Default': '#FFFFFF', - 'Component/Button/Inverted/Faded': '#FFFFFFE6', - 'Component/Button/Inverted/Hover': '#f2f2f2', - 'Component/Button/Inverted/Hover Inverted': '#946F54', - 'Component/Button/Inverted/Disabled': '#1F1C1B1A', + 'Component/Button/Inverted/Fill/Default': '#FFFFFF', + 'Component/Button/Inverted/Fill/Faded': '#FFFFFFE6', + 'Component/Button/Inverted/Fill/Hover': '#e6e5e5', + 'Component/Button/Inverted/Fill/Hover Inverted': '#946F54', + 'Component/Button/Inverted/Fill/Disabled': '#1F1C1B1A', + 'Component/Button/Inverted/Border/Default': '#FFFFFF00', + 'Component/Button/Inverted/Border/Hover': '#FFFFFF00', + 'Component/Button/Inverted/Border/Disable': '#FFFFFF00', 'Component/Button/Inverted/On fill/Default': '#1F1F1F', 'Component/Button/Inverted/On fill/Hover': '#323232', 'Component/Button/Inverted/On fill/Hover inverted': '#FFFFFF', 'Component/Button/Inverted/On fill/Disabled': '#8C8C8C', - 'Component/Button/Inverted/Border/Default': '#FFFFFF00', - 'Component/Button/Inverted/Border/Hover': '#FFFFFF00', - 'Component/Button/Inverted/Border/Disable': '#FFFFFF00', 'Border/Interactive/Default': '#BFBFBF', 'Border/Divider/Default': '#D9D9D9', 'Border/Divider/Subtle': '#E9E9E9', @@ -277,11 +289,11 @@ export const theme = { 'Border/Interactive/Disabled': '#BFBFBF', 'Border/Interactive/Error': '#AD0015', 'Border/Interactive/KeyboardFocus': '#5B8FD4', - 'Component/Button/Muted/Default': '#FFFFFF00', - 'Component/Button/Muted/Hover': '#FFFFFF00', - 'Component/Button/Muted/Disabled': '#FFFFFF1A', - 'Component/Button/Muted/Hover inverted': '#1F1C1B0D', - 'Component/Button/Muted/Disabled inverted': '#D9D9D9', + 'Component/Button/Muted/Fill/Default': '#FFFFFF00', + 'Component/Button/Muted/Fill/Hover': '#FFFFFF0D', + 'Component/Button/Muted/Fill/Disabled': '#FFFFFF1A', + 'Component/Button/Muted/Fill/Hover inverted': '#1F1C1B0D', + 'Component/Button/Muted/Fill/Disabled inverted': '#D9D9D9', 'Component/Button/Muted/On fill/Default': '#1F1F1F', 'Component/Button/Muted/On fill/Inverted': '#FFFFFF', 'Component/Button/Muted/On fill/Hover Inverted': '#454545', diff --git a/packages/design-system/lib/styles/hotel-norge.css b/packages/design-system/lib/styles/hotel-norge.css index 6b7c20985..458016da3 100644 --- a/packages/design-system/lib/styles/hotel-norge.css +++ b/packages/design-system/lib/styles/hotel-norge.css @@ -9,12 +9,15 @@ --Body-Supporting-text-Letter-spacing: 0.2px; --Body-Underline-md-Font-fallback: sans-serif; --Body-Underline-md-Letter-spacing: 0.19px; + --Body-Underline-md-Text-Decoration: underline; --Body-Underline-sm-Font-fallback: sans-serif; --Body-Underline-sm-Letter-spacing: 0.2px; - --Component-Button-Brand-Primary-Hover: #2c3146; - --Component-Button-Brand-Secondary-Border-Hover-inverted: #e5e6e9; - --Component-Button-Brand-Tertiary-Hover: #215448; - --Component-Button-Inverted-Hover: #f2f2f2; + --Body-Underline-sm-Text-Decoration: underline; + --Component-Button-Brand-Primary-Fill-Hover: #2c3146; + --Component-Button-Brand-Secondary-Border-Hover-inverted: #838593; + --Component-Button-Brand-Secondary-On-fill-Hover-inverted: #b3b4bd; + --Component-Button-Brand-Tertiary-Fill-Hover: #215448; + --Component-Button-Inverted-Fill-Hover: #e6e5e5; --Component-Button-Inverted-On-fill-Hover: #2c3146; --Component-Button-Muted-Border-Hover: #ffffff30; --Font-family-Hotel-Norge-Body: 'Fira sans'; @@ -24,8 +27,10 @@ --Label-Letter-spacing: 0.17px; --Link-md-Font-fallback: sans-serif; --Link-md-Letter-spacing: 0.19px; + --Link-md-Text-Decoration: underline; --Link-sm-Font-fallback: sans-serif; --Link-sm-Letter-spacing: 0.2px; + --Link-sm-Text-Decoration: underline; --Signature-Hotel-Norge-Dark-blue-0: #b7c5c8; --Signature-Hotel-Norge-Dark-blue-100: #2f3445; --Signature-Hotel-Norge-Dark-blue-30: #858f97; @@ -138,10 +143,12 @@ --Neutral-Opacity-White-0 ); --Component-Button-Brand-Primary-Border-Hover: var(--Neutral-Opacity-White-0); - --Component-Button-Brand-Primary-Default: var( + --Component-Button-Brand-Primary-Fill-Default: var( --Signature-Hotel-Norge-Dark-blue-90 ); - --Component-Button-Brand-Primary-Disabled: var(--Neutral-Opacity-Black-10); + --Component-Button-Brand-Primary-Fill-Disabled: var( + --Neutral-Opacity-Black-10 + ); --Component-Button-Brand-Primary-On-fill-Default: var( --Neutral-Opacity-White-100 ); @@ -161,13 +168,19 @@ --Component-Button-Brand-Secondary-Border-Inverted: var( --Neutral-Opacity-White-100 ); - --Component-Button-Brand-Secondary-Default: var(--Neutral-Opacity-White-0); - --Component-Button-Brand-Secondary-Disabled: var(--Neutral-Opacity-Black-10); - --Component-Button-Brand-Secondary-Hover-Inverted: var( + --Component-Button-Brand-Secondary-Fill-Default: var( + --Neutral-Opacity-White-0 + ); + --Component-Button-Brand-Secondary-Fill-Disabled: var( + --Neutral-Opacity-Black-10 + ); + --Component-Button-Brand-Secondary-Fill-Hover-Inverted: var( --Signature-Hotel-Norge-Emerald-100 ); - --Component-Button-Brand-Secondary-Hover: var(--Neutral-Opacity-White-0); - --Component-Button-Brand-Secondary-Inverted: var(--Neutral-Opacity-White-100); + --Component-Button-Brand-Secondary-Fill-Hover: var(--Neutral-Opacity-White-0); + --Component-Button-Brand-Secondary-Fill-Inverted: var( + --Neutral-Opacity-White-100 + ); --Component-Button-Brand-Secondary-On-fill-Default: var( --Signature-Hotel-Norge-Dark-blue-90 ); @@ -187,10 +200,12 @@ --Component-Button-Brand-Tertiary-Border-Hover: var( --Neutral-Opacity-White-0 ); - --Component-Button-Brand-Tertiary-Default: var( + --Component-Button-Brand-Tertiary-Fill-Default: var( --Signature-Hotel-Norge-Emerald-100 ); - --Component-Button-Brand-Tertiary-Disabled: var(--Neutral-Opacity-Black-10); + --Component-Button-Brand-Tertiary-Fill-Disabled: var( + --Neutral-Opacity-Black-10 + ); --Component-Button-Brand-Tertiary-On-fill-Default: var( --Neutral-Opacity-White-100 ); @@ -201,10 +216,10 @@ --Component-Button-Inverted-Border-Default: var(--Neutral-Opacity-White-0); --Component-Button-Inverted-Border-Disable: var(--Neutral-Opacity-White-0); --Component-Button-Inverted-Border-Hover: var(--Neutral-Opacity-White-0); - --Component-Button-Inverted-Default: var(--Neutral-Opacity-White-100); - --Component-Button-Inverted-Disabled: var(--Neutral-Opacity-Black-10); - --Component-Button-Inverted-Faded: var(--Neutral-Opacity-White-90); - --Component-Button-Inverted-Hover-Inverted: var( + --Component-Button-Inverted-Fill-Default: var(--Neutral-Opacity-White-100); + --Component-Button-Inverted-Fill-Disabled: var(--Neutral-Opacity-Black-10); + --Component-Button-Inverted-Fill-Faded: var(--Neutral-Opacity-White-90); + --Component-Button-Inverted-Fill-Hover-Inverted: var( --Signature-Hotel-Norge-Emerald-100 ); --Component-Button-Inverted-On-fill-Default: var( @@ -216,11 +231,11 @@ ); --Component-Button-Muted-Border-Default: var(--Neutral-Opacity-White-10); --Component-Button-Muted-Border-Disable: var(--Neutral-Opacity-White-10); - --Component-Button-Muted-Default: var(--Neutral-Opacity-White-0); - --Component-Button-Muted-Disabled-inverted: var(--Neutral-20); - --Component-Button-Muted-Disabled: var(--Neutral-Opacity-White-100); - --Component-Button-Muted-Hover-inverted: var(--Neutral-Opacity-Black-5); - --Component-Button-Muted-Hover: var(--Neutral-Opacity-White-100); + --Component-Button-Muted-Fill-Default: var(--Neutral-Opacity-White-0); + --Component-Button-Muted-Fill-Disabled-inverted: var(--Neutral-20); + --Component-Button-Muted-Fill-Disabled: var(--Neutral-Opacity-White-100); + --Component-Button-Muted-Fill-Hover-inverted: var(--Neutral-Opacity-Black-5); + --Component-Button-Muted-Fill-Hover: var(--Neutral-Opacity-White-100); --Component-Button-Muted-On-fill-Default: var(--Neutral-90); --Component-Button-Muted-On-fill-Disabled: var(--Neutral-40); --Component-Button-Muted-On-fill-Hover-Inverted: var( @@ -235,6 +250,7 @@ --Icon-Feedback-Success: var(--Scandic-Green-60); --Icon-Feedback-Warning: var(--Scandic-Yellow-60); --Icon-Intense: var(--Neutral-90); + --Icon-Interactive-Accent: var(--Signature-Hotel-Norge-Emerald-90); --Icon-Interactive-Default: var(--Signature-Hotel-Norge-Dark-blue-90); --Icon-Interactive-Disabled: var(--Neutral-30); --Icon-Interactive-Placeholder: var(--Neutral-50); @@ -252,6 +268,7 @@ --Link-sm-Size: var(--Impl-Text-size-4xs); --Overlay-10: var(--Neutral-Opacity-Black-10); --Overlay-20: var(--Neutral-Opacity-Black-20); + --Overlay-30: var(--Neutral-Opacity-Black-20); --Overlay-40: var(--Neutral-Opacity-Black-40); --Overlay-60: var(--Neutral-Opacity-Black-60); --Overlay-80: var(--Neutral-Opacity-Black-80); @@ -281,8 +298,8 @@ --Surface-Primary-OnSurface-Default: var( --Signature-Hotel-Norge-Off-White-30 ); + --Surface-Secondary-Default-dark: var(--Signature-Hotel-Norge-Off-White-60); --Surface-Secondary-Default: var(--Signature-Hotel-Norge-Off-White-50); - --Surface-Secondary-Secondary: var(--Signature-Hotel-Norge-Off-White-50); --Surface-UI-Fill-Active-Hover: var(--Neutral-Opacity-White-100); --Surface-UI-Fill-Active: var(--Neutral-80); --Surface-UI-Fill-Default: var(--Neutral-Opacity-White-100); @@ -306,6 +323,11 @@ --Text-Brand-OnPrimary-3-Default: var(--Neutral-Opacity-White-100); --Text-Brand-OnPrimary-3-Heading: var(--Neutral-Opacity-White-100); --Text-Default: var(--Neutral-90); + --Text-Feedback-Error-Accent: var(--Scandic-Red-70); + --Text-Feedback-Information-Accent: var(--Scandic-Blue-70); + --Text-Feedback-Neutral-Accent: var(--Neutral-50); + --Text-Feedback-Succes-Accent: var(--Scandic-Green-60); + --Text-Feedback-Warning-Accent: var(--Scandic-Yellow-60); --Text-Heading: var(--Neutral-90); --Text-Interactive-Default: var(--Signature-Hotel-Norge-Dark-blue-90); --Text-Interactive-Disabled: var(--Neutral-40); diff --git a/packages/design-system/lib/styles/hotel-norge.js b/packages/design-system/lib/styles/hotel-norge.js index 0777791b2..04b880aab 100644 --- a/packages/design-system/lib/styles/hotel-norge.js +++ b/packages/design-system/lib/styles/hotel-norge.js @@ -9,13 +9,13 @@ export const theme = { 'Signature/Hotel Norge/Off White/60': '#D9DAD6', 'Signature/Hotel Norge/Off White/70': '#AAAAA7', 'Signature/Hotel Norge/Emerald/0': '#C7DDD5', - 'Signature/Hotel Norge/Emerald/80': '#3A655C', 'Signature/Hotel Norge/Off White/80': '#838481', + 'Signature/Hotel Norge/Emerald/80': '#3A655C', 'Signature/Hotel Norge/Off White/90': '#6F716F', 'Signature/Hotel Norge/Emerald/90': '#26544A', 'Signature/Hotel Norge/Off White/100': '#646563', - 'Signature/Hotel Norge/Emerald/100': '#004337', 'Signature/Hotel Norge/Dark blue/0': '#B7C5C8', + 'Signature/Hotel Norge/Emerald/100': '#004337', 'Signature/Hotel Norge/Dark blue/30': '#858F97', 'Signature/Hotel Norge/Dark blue/80': '#404655', 'Signature/Hotel Norge/Dark blue/90': '#181E34', @@ -54,8 +54,10 @@ export const theme = { 'Tag/Text-Transform': 'uppercase', 'Link/md/Font fallback': 'sans-serif', 'Link/md/Letter spacing': 0.19, + 'Link/md/Text-Decoration': 'underline', 'Link/sm/Font fallback': 'sans-serif', 'Link/sm/Letter spacing': 0.2, + 'Link/sm/Text-Decoration': 'underline', 'Body/Lead text/Font fallback': 'sans-serif', 'Body/Paragraph/Font fallback': 'sans-serif', 'Body/Paragraph/Letter spacing': 0.19, @@ -66,8 +68,10 @@ export const theme = { 'Label/Letter spacing': 0.17, 'Body/Underline/md/Font fallback': 'sans-serif', 'Body/Underline/md/Letter spacing': 0.19, + 'Body/Underline/md/Text-Decoration': 'underline', 'Body/Underline/sm/Font fallback': 'sans-serif', 'Body/Underline/sm/Letter spacing': 0.2, + 'Body/Underline/sm/Text-Decoration': 'underline', 'Surface/Brand/Primary 1/OnSurface/Default': '#FFFFFF', 'Surface/Brand/Primary 1/OnSurface/Accent': '#FFFFFF', 'Surface/Brand/Primary 1/OnSurface/Accent Secondary': '#FFFFFF', @@ -137,6 +141,11 @@ export const theme = { 'Text/Interactive/Error': '#AD0015', 'Text/Interactive/Placeholder': '#747474', 'Text/Brand/OnAccent/Heading': '#1F1F1F', + 'Text/Feedback/Information Accent': '#284EA0', + 'Text/Feedback/Succes Accent': '#348337', + 'Text/Feedback/Warning Accent': '#D17308', + 'Text/Feedback/Error Accent': '#AD0015', + 'Text/Feedback/Neutral Accent': '#747474', 'Text/Brand/OnAccent/Default': '#1F1F1F', 'Text/Brand/OnAccent/Accent': '#004337', 'Text/Brand/OnPrimary 1/Heading': '#FFFFFF', @@ -157,7 +166,7 @@ export const theme = { 'Surface/Primary/OnSurface/Default': '#F4F5F2', 'Surface/Primary/Disabled': '#E9E9E9', 'Surface/Secondary/Default': '#EFF0EB', - 'Surface/Secondary/Secondary': '#EFF0EB', + 'Surface/Secondary/Default dark': '#D9DAD6', 'Surface/Secondary/Hover': '#e3e4df', 'Surface/Brand/Accent/Default': '#C7DDD5', 'Surface/Brand/Primary 1/Default': '#181E34', @@ -191,6 +200,7 @@ export const theme = { 'Icon/Accent': '#EC615B', 'Icon/Interactive/Default': '#181E34', 'Icon/Interactive/Secondary': '#26544A', + 'Icon/Interactive/Accent': '#26544A', 'Icon/Interactive/Disabled': '#BFBFBF', 'Icon/Interactive/Placeholder': '#747474', 'Icon/Feedback/Information': '#284EA0', @@ -201,54 +211,56 @@ export const theme = { 'Icon/Inverted': '#FFFFFF', 'Overlay/10': '#1F1C1B1A', 'Overlay/20': '#1F1C1B33', + 'Overlay/30': '#1F1C1B33', 'Overlay/40': '#1F1C1B66', 'Overlay/60': '#1F1C1B99', 'Overlay/80': '#1F1C1BCC', 'Overlay/90': '#1F1C1BE6', - 'Component/Button/Brand/Primary/Default': '#181E34', - 'Component/Button/Brand/Primary/Hover': '#2c3146', - 'Component/Button/Brand/Primary/Disabled': '#1F1C1B1A', + 'Component/Button/Brand/Primary/Fill/Default': '#181E34', + 'Component/Button/Brand/Primary/Fill/Hover': '#2c3146', + 'Component/Button/Brand/Primary/Fill/Disabled': '#1F1C1B1A', 'Component/Button/Brand/Primary/On fill/Default': '#FFFFFF', 'Component/Button/Brand/Primary/On fill/Hover': '#FFFFFF', 'Component/Button/Brand/Primary/On fill/Disabled': '#8C8C8C', 'Component/Button/Brand/Primary/Border/Default': '#FFFFFF00', 'Component/Button/Brand/Primary/Border/Hover': '#FFFFFF00', 'Component/Button/Brand/Primary/Border/Disabled': '#FFFFFF00', - 'Component/Button/Brand/Secondary/Default': '#FFFFFF00', - 'Component/Button/Brand/Secondary/Hover': '#FFFFFF00', - 'Component/Button/Brand/Secondary/Inverted': '#FFFFFF', - 'Component/Button/Brand/Secondary/Hover Inverted': '#004337', - 'Component/Button/Brand/Secondary/Disabled': '#1F1C1B1A', + 'Component/Button/Brand/Secondary/Fill/Default': '#FFFFFF00', + 'Component/Button/Brand/Secondary/Fill/Hover': '#FFFFFF00', + 'Component/Button/Brand/Secondary/Fill/Inverted': '#FFFFFF', + 'Component/Button/Brand/Secondary/Fill/Hover Inverted': '#004337', + 'Component/Button/Brand/Secondary/Fill/Disabled': '#1F1C1B1A', 'Component/Button/Brand/Secondary/On fill/Default': '#181E34', 'Component/Button/Brand/Secondary/On fill/Hover': '#404655', 'Component/Button/Brand/Secondary/On fill/Inverted': '#FFFFFF', + 'Component/Button/Brand/Secondary/On fill/Hover inverted': '#b3b4bd', 'Component/Button/Brand/Secondary/On fill/Disabled': '#8C8C8C', 'Component/Button/Brand/Secondary/Border/Default': '#181E34', 'Component/Button/Brand/Secondary/Border/Hover': '#404655', 'Component/Button/Brand/Secondary/Border/Inverted': '#FFFFFF', - 'Component/Button/Brand/Secondary/Border/Hover inverted': '#e5e6e9', + 'Component/Button/Brand/Secondary/Border/Hover inverted': '#838593', 'Component/Button/Brand/Secondary/Border/Disabled': '#1F1C1B1A', - 'Component/Button/Brand/Tertiary/Default': '#004337', - 'Component/Button/Brand/Tertiary/Hover': '#215448', - 'Component/Button/Brand/Tertiary/Disabled': '#1F1C1B1A', + 'Component/Button/Brand/Tertiary/Fill/Default': '#004337', + 'Component/Button/Brand/Tertiary/Fill/Hover': '#215448', + 'Component/Button/Brand/Tertiary/Fill/Disabled': '#1F1C1B1A', 'Component/Button/Brand/Tertiary/On fill/Default': '#FFFFFF', 'Component/Button/Brand/Tertiary/On fill/Hover': '#FFFFFF', 'Component/Button/Brand/Tertiary/On fill/Disabled': '#8C8C8C', 'Component/Button/Brand/Tertiary/Border/Default': '#FFFFFF00', 'Component/Button/Brand/Tertiary/Border/Hover': '#FFFFFF00', 'Component/Button/Brand/Tertiary/Border/Disabled': '#FFFFFF00', - 'Component/Button/Inverted/Default': '#FFFFFF', - 'Component/Button/Inverted/Faded': '#FFFFFFE6', - 'Component/Button/Inverted/Hover': '#f2f2f2', - 'Component/Button/Inverted/Hover Inverted': '#004337', - 'Component/Button/Inverted/Disabled': '#1F1C1B1A', + 'Component/Button/Inverted/Fill/Default': '#FFFFFF', + 'Component/Button/Inverted/Fill/Faded': '#FFFFFFE6', + 'Component/Button/Inverted/Fill/Hover': '#e6e5e5', + 'Component/Button/Inverted/Fill/Hover Inverted': '#004337', + 'Component/Button/Inverted/Fill/Disabled': '#1F1C1B1A', + 'Component/Button/Inverted/Border/Default': '#FFFFFF00', + 'Component/Button/Inverted/Border/Hover': '#FFFFFF00', + 'Component/Button/Inverted/Border/Disable': '#FFFFFF00', 'Component/Button/Inverted/On fill/Default': '#181E34', 'Component/Button/Inverted/On fill/Hover': '#2c3146', 'Component/Button/Inverted/On fill/Hover inverted': '#FFFFFF', 'Component/Button/Inverted/On fill/Disabled': '#8C8C8C', - 'Component/Button/Inverted/Border/Default': '#FFFFFF00', - 'Component/Button/Inverted/Border/Hover': '#FFFFFF00', - 'Component/Button/Inverted/Border/Disable': '#FFFFFF00', 'Border/Interactive/Default': '#BFBFBF', 'Border/Divider/Default': '#D9D9D9', 'Border/Divider/Subtle': '#E9E9E9', @@ -262,11 +274,11 @@ export const theme = { 'Border/Interactive/Disabled': '#BFBFBF', 'Border/Interactive/Error': '#AD0015', 'Border/Interactive/KeyboardFocus': '#5B8FD4', - 'Component/Button/Muted/Default': '#FFFFFF00', - 'Component/Button/Muted/Hover': '#FFFFFF', - 'Component/Button/Muted/Disabled': '#FFFFFF', - 'Component/Button/Muted/Hover inverted': '#1F1C1B0D', - 'Component/Button/Muted/Disabled inverted': '#D9D9D9', + 'Component/Button/Muted/Fill/Default': '#FFFFFF00', + 'Component/Button/Muted/Fill/Hover': '#FFFFFF', + 'Component/Button/Muted/Fill/Disabled': '#FFFFFF', + 'Component/Button/Muted/Fill/Hover inverted': '#1F1C1B0D', + 'Component/Button/Muted/Fill/Disabled inverted': '#D9D9D9', 'Component/Button/Muted/On fill/Default': '#1F1F1F', 'Component/Button/Muted/On fill/Inverted': '#FFFFFF', 'Component/Button/Muted/On fill/Hover Inverted': '#404655', diff --git a/packages/design-system/lib/styles/marski.css b/packages/design-system/lib/styles/marski.css index 9944b0ded..9b54fec8c 100644 --- a/packages/design-system/lib/styles/marski.css +++ b/packages/design-system/lib/styles/marski.css @@ -9,12 +9,15 @@ --Body-Supporting-text-Letter-spacing: 0.2px; --Body-Underline-md-Font-fallback: sans-serif; --Body-Underline-md-Letter-spacing: 0.19px; + --Body-Underline-md-Text-Decoration: underline; --Body-Underline-sm-Font-fallback: sans-serif; --Body-Underline-sm-Letter-spacing: 0.2px; - --Component-Button-Brand-Primary-Hover: #283b48; - --Component-Button-Brand-Secondary-Border-Hover-inverted: #e5e7e9; - --Component-Button-Brand-Tertiary-Hover: #1a54e7; - --Component-Button-Inverted-Hover: #f2f2f2; + --Body-Underline-sm-Text-Decoration: underline; + --Component-Button-Brand-Primary-Fill-Hover: #283b48; + --Component-Button-Brand-Secondary-Border-Hover-inverted: #818c95; + --Component-Button-Brand-Secondary-On-fill-Hover-inverted: #b2b9be; + --Component-Button-Brand-Tertiary-Fill-Hover: #1a54e7; + --Component-Button-Inverted-Fill-Hover: #e6e5e5; --Component-Button-Inverted-On-fill-Hover: #283b48; --Component-Button-Muted-Border-Hover: #ffffff30; --Font-family-Marski-Body: 'Fira sans'; @@ -24,8 +27,10 @@ --Label-Letter-spacing: 0.17px; --Link-md-Font-fallback: sans-serif; --Link-md-Letter-spacing: 0.19px; + --Link-md-Text-Decoration: underline; --Link-sm-Font-fallback: sans-serif; --Link-sm-Letter-spacing: 0.2px; + --Link-sm-Text-Decoration: underline; --Signature-Marski-Aubergine-00: #f9f6f4; --Signature-Marski-Aubergine-100: #3e1118; --Signature-Marski-Aubergine-10: #ebe8e6; @@ -161,10 +166,12 @@ --Neutral-Opacity-White-0 ); --Component-Button-Brand-Primary-Border-Hover: var(--Neutral-Opacity-White-0); - --Component-Button-Brand-Primary-Default: var( + --Component-Button-Brand-Primary-Fill-Default: var( --Signature-Marski-Elephant-100 ); - --Component-Button-Brand-Primary-Disabled: var(--Neutral-Opacity-Black-10); + --Component-Button-Brand-Primary-Fill-Disabled: var( + --Neutral-Opacity-Black-10 + ); --Component-Button-Brand-Primary-On-fill-Default: var( --Neutral-Opacity-White-100 ); @@ -184,13 +191,19 @@ --Component-Button-Brand-Secondary-Border-Inverted: var( --Neutral-Opacity-White-100 ); - --Component-Button-Brand-Secondary-Default: var(--Neutral-Opacity-White-0); - --Component-Button-Brand-Secondary-Disabled: var(--Neutral-Opacity-Black-10); - --Component-Button-Brand-Secondary-Hover-Inverted: var( + --Component-Button-Brand-Secondary-Fill-Default: var( + --Neutral-Opacity-White-0 + ); + --Component-Button-Brand-Secondary-Fill-Disabled: var( + --Neutral-Opacity-Black-10 + ); + --Component-Button-Brand-Secondary-Fill-Hover-Inverted: var( --Signature-Marski-Elephant-100 ); - --Component-Button-Brand-Secondary-Hover: var(--Neutral-Opacity-White-0); - --Component-Button-Brand-Secondary-Inverted: var(--Neutral-Opacity-White-100); + --Component-Button-Brand-Secondary-Fill-Hover: var(--Neutral-Opacity-White-0); + --Component-Button-Brand-Secondary-Fill-Inverted: var( + --Neutral-Opacity-White-100 + ); --Component-Button-Brand-Secondary-On-fill-Default: var( --Signature-Marski-Elephant-100 ); @@ -210,10 +223,12 @@ --Component-Button-Brand-Tertiary-Border-Hover: var( --Neutral-Opacity-White-0 ); - --Component-Button-Brand-Tertiary-Default: var( + --Component-Button-Brand-Tertiary-Fill-Default: var( --Signature-Marski-Blue-ribbon-70 ); - --Component-Button-Brand-Tertiary-Disabled: var(--Neutral-Opacity-Black-10); + --Component-Button-Brand-Tertiary-Fill-Disabled: var( + --Neutral-Opacity-Black-10 + ); --Component-Button-Brand-Tertiary-On-fill-Default: var( --Neutral-Opacity-White-100 ); @@ -224,10 +239,10 @@ --Component-Button-Inverted-Border-Default: var(--Neutral-Opacity-White-0); --Component-Button-Inverted-Border-Disable: var(--Neutral-Opacity-White-0); --Component-Button-Inverted-Border-Hover: var(--Neutral-Opacity-White-0); - --Component-Button-Inverted-Default: var(--Neutral-Opacity-White-100); - --Component-Button-Inverted-Disabled: var(--Neutral-Opacity-Black-10); - --Component-Button-Inverted-Faded: var(--Neutral-Opacity-White-90); - --Component-Button-Inverted-Hover-Inverted: var( + --Component-Button-Inverted-Fill-Default: var(--Neutral-Opacity-White-100); + --Component-Button-Inverted-Fill-Disabled: var(--Neutral-Opacity-Black-10); + --Component-Button-Inverted-Fill-Faded: var(--Neutral-Opacity-White-90); + --Component-Button-Inverted-Fill-Hover-Inverted: var( --Signature-Marski-Elephant-100 ); --Component-Button-Inverted-On-fill-Default: var( @@ -239,11 +254,11 @@ ); --Component-Button-Muted-Border-Default: var(--Neutral-Opacity-White-10); --Component-Button-Muted-Border-Disable: var(--Neutral-Opacity-White-10); - --Component-Button-Muted-Default: var(--Neutral-Opacity-White-0); - --Component-Button-Muted-Disabled-inverted: var(--Neutral-20); - --Component-Button-Muted-Disabled: var(--Neutral-Opacity-White-100); - --Component-Button-Muted-Hover-inverted: var(--Neutral-Opacity-Black-5); - --Component-Button-Muted-Hover: var(--Neutral-Opacity-White-100); + --Component-Button-Muted-Fill-Default: var(--Neutral-Opacity-White-0); + --Component-Button-Muted-Fill-Disabled-inverted: var(--Neutral-20); + --Component-Button-Muted-Fill-Disabled: var(--Neutral-Opacity-White-100); + --Component-Button-Muted-Fill-Hover-inverted: var(--Neutral-Opacity-Black-5); + --Component-Button-Muted-Fill-Hover: var(--Neutral-Opacity-White-100); --Component-Button-Muted-On-fill-Default: var(--Neutral-90); --Component-Button-Muted-On-fill-Disabled: var(--Neutral-40); --Component-Button-Muted-On-fill-Hover-Inverted: var( @@ -258,6 +273,7 @@ --Icon-Feedback-Success: var(--Scandic-Green-60); --Icon-Feedback-Warning: var(--Scandic-Yellow-60); --Icon-Intense: var(--Neutral-90); + --Icon-Interactive-Accent: var(--Signature-Marski-Blue-ribbon-70); --Icon-Interactive-Default: var(--Signature-Marski-Elephant-90); --Icon-Interactive-Disabled: var(--Neutral-30); --Icon-Interactive-Placeholder: var(--Neutral-50); @@ -275,6 +291,7 @@ --Link-sm-Size: var(--Impl-Text-size-4xs); --Overlay-10: var(--Neutral-Opacity-Black-10); --Overlay-20: var(--Neutral-Opacity-Black-20); + --Overlay-30: var(--Neutral-Opacity-Black-20); --Overlay-40: var(--Neutral-Opacity-Black-40); --Overlay-60: var(--Neutral-Opacity-Black-60); --Overlay-80: var(--Neutral-Opacity-Black-80); @@ -302,8 +319,8 @@ --Surface-Primary-Disabled: var(--Neutral-15); --Surface-Primary-Hover-Accent: var(--Neutral-15); --Surface-Primary-OnSurface-Default: var(--Signature-Marski-Elephant-0); + --Surface-Secondary-Default-dark: var(--Signature-Marski-Elephant-20); --Surface-Secondary-Default: var(--Signature-Marski-Elephant-10); - --Surface-Secondary-Secondary: var(--Signature-Marski-Elephant-10); --Surface-UI-Fill-Active-Hover: var(--Neutral-Opacity-White-100); --Surface-UI-Fill-Active: var(--Neutral-80); --Surface-UI-Fill-Default: var(--Neutral-Opacity-White-100); @@ -327,6 +344,11 @@ --Text-Brand-OnPrimary-3-Default: var(--Neutral-Opacity-White-100); --Text-Brand-OnPrimary-3-Heading: var(--Neutral-Opacity-White-100); --Text-Default: var(--Neutral-90); + --Text-Feedback-Error-Accent: var(--Scandic-Red-70); + --Text-Feedback-Information-Accent: var(--Scandic-Blue-70); + --Text-Feedback-Neutral-Accent: var(--Neutral-50); + --Text-Feedback-Succes-Accent: var(--Scandic-Green-60); + --Text-Feedback-Warning-Accent: var(--Scandic-Yellow-60); --Text-Heading: var(--Neutral-90); --Text-Interactive-Default: var(--Signature-Marski-Elephant-100); --Text-Interactive-Disabled: var(--Neutral-40); diff --git a/packages/design-system/lib/styles/marski.js b/packages/design-system/lib/styles/marski.js index 669c691b6..8c14713dd 100644 --- a/packages/design-system/lib/styles/marski.js +++ b/packages/design-system/lib/styles/marski.js @@ -80,8 +80,10 @@ export const theme = { 'Tag/Text-Transform': 'unset', 'Link/md/Font fallback': 'sans-serif', 'Link/md/Letter spacing': 0.19, + 'Link/md/Text-Decoration': 'underline', 'Link/sm/Font fallback': 'sans-serif', 'Link/sm/Letter spacing': 0.2, + 'Link/sm/Text-Decoration': 'underline', 'Body/Lead text/Font fallback': 'sans-serif', 'Body/Paragraph/Font fallback': 'sans-serif', 'Body/Paragraph/Letter spacing': 0.19, @@ -92,8 +94,10 @@ export const theme = { 'Label/Letter spacing': 0.17, 'Body/Underline/md/Font fallback': 'sans-serif', 'Body/Underline/md/Letter spacing': 0.19, + 'Body/Underline/md/Text-Decoration': 'underline', 'Body/Underline/sm/Font fallback': 'sans-serif', 'Body/Underline/sm/Letter spacing': 0.2, + 'Body/Underline/sm/Text-Decoration': 'underline', 'Surface/Brand/Primary 1/OnSurface/Default': '#FFFFFF', 'Surface/Brand/Primary 1/OnSurface/Accent': '#FFFFFF', 'Surface/Brand/Primary 1/OnSurface/Accent Secondary': '#FFFFFF', @@ -163,6 +167,11 @@ export const theme = { 'Text/Interactive/Error': '#AD0015', 'Text/Interactive/Placeholder': '#747474', 'Text/Brand/OnAccent/Heading': '#FFFFFF', + 'Text/Feedback/Information Accent': '#284EA0', + 'Text/Feedback/Succes Accent': '#348337', + 'Text/Feedback/Warning Accent': '#D17308', + 'Text/Feedback/Error Accent': '#AD0015', + 'Text/Feedback/Neutral Accent': '#747474', 'Text/Brand/OnAccent/Default': '#FFFFFF', 'Text/Brand/OnAccent/Accent': '#FFFFFF', 'Text/Brand/OnPrimary 1/Heading': '#FFFFFF', @@ -183,7 +192,7 @@ export const theme = { 'Surface/Primary/OnSurface/Default': '#F6F6F7', 'Surface/Primary/Disabled': '#E9E9E9', 'Surface/Secondary/Default': '#ECEEEF', - 'Surface/Secondary/Secondary': '#ECEEEF', + 'Surface/Secondary/Default dark': '#E0E3E5', 'Surface/Secondary/Hover': '#e0e2e3', 'Surface/Brand/Accent/Default': '#575757', 'Surface/Brand/Primary 1/Default': '#122937', @@ -217,6 +226,7 @@ export const theme = { 'Icon/Accent': '#1043BD', 'Icon/Interactive/Default': '#1E3441', 'Icon/Interactive/Secondary': '#0D57F3', + 'Icon/Interactive/Accent': '#0D57F3', 'Icon/Interactive/Disabled': '#BFBFBF', 'Icon/Interactive/Placeholder': '#747474', 'Icon/Feedback/Information': '#284EA0', @@ -227,54 +237,56 @@ export const theme = { 'Icon/Inverted': '#FFFFFF', 'Overlay/10': '#1F1C1B1A', 'Overlay/20': '#1F1C1B33', + 'Overlay/30': '#1F1C1B33', 'Overlay/40': '#1F1C1B66', 'Overlay/60': '#1F1C1B99', 'Overlay/80': '#1F1C1BCC', 'Overlay/90': '#1F1C1BE6', - 'Component/Button/Brand/Primary/Default': '#122937', - 'Component/Button/Brand/Primary/Hover': '#283b48', - 'Component/Button/Brand/Primary/Disabled': '#1F1C1B1A', + 'Component/Button/Brand/Primary/Fill/Default': '#122937', + 'Component/Button/Brand/Primary/Fill/Hover': '#283b48', + 'Component/Button/Brand/Primary/Fill/Disabled': '#1F1C1B1A', 'Component/Button/Brand/Primary/On fill/Default': '#FFFFFF', 'Component/Button/Brand/Primary/On fill/Hover': '#FFFFFF', 'Component/Button/Brand/Primary/On fill/Disabled': '#8C8C8C', 'Component/Button/Brand/Primary/Border/Default': '#FFFFFF00', 'Component/Button/Brand/Primary/Border/Hover': '#FFFFFF00', 'Component/Button/Brand/Primary/Border/Disabled': '#FFFFFF00', - 'Component/Button/Brand/Secondary/Default': '#FFFFFF00', - 'Component/Button/Brand/Secondary/Hover': '#FFFFFF00', - 'Component/Button/Brand/Secondary/Inverted': '#FFFFFF', - 'Component/Button/Brand/Secondary/Hover Inverted': '#122937', - 'Component/Button/Brand/Secondary/Disabled': '#1F1C1B1A', + 'Component/Button/Brand/Secondary/Fill/Default': '#FFFFFF00', + 'Component/Button/Brand/Secondary/Fill/Hover': '#FFFFFF00', + 'Component/Button/Brand/Secondary/Fill/Inverted': '#FFFFFF', + 'Component/Button/Brand/Secondary/Fill/Hover Inverted': '#122937', + 'Component/Button/Brand/Secondary/Fill/Disabled': '#1F1C1B1A', 'Component/Button/Brand/Secondary/On fill/Default': '#122937', 'Component/Button/Brand/Secondary/On fill/Hover': '#2C414D', 'Component/Button/Brand/Secondary/On fill/Inverted': '#FFFFFF', + 'Component/Button/Brand/Secondary/On fill/Hover inverted': '#b2b9be', 'Component/Button/Brand/Secondary/On fill/Disabled': '#8C8C8C', 'Component/Button/Brand/Secondary/Border/Default': '#122937', 'Component/Button/Brand/Secondary/Border/Hover': '#2C414D', 'Component/Button/Brand/Secondary/Border/Inverted': '#FFFFFF', - 'Component/Button/Brand/Secondary/Border/Hover inverted': '#e5e7e9', + 'Component/Button/Brand/Secondary/Border/Hover inverted': '#818c95', 'Component/Button/Brand/Secondary/Border/Disabled': '#1F1C1B1A', - 'Component/Button/Brand/Tertiary/Default': '#0D57F3', - 'Component/Button/Brand/Tertiary/Hover': '#1a54e7', - 'Component/Button/Brand/Tertiary/Disabled': '#1F1C1B1A', + 'Component/Button/Brand/Tertiary/Fill/Default': '#0D57F3', + 'Component/Button/Brand/Tertiary/Fill/Hover': '#1a54e7', + 'Component/Button/Brand/Tertiary/Fill/Disabled': '#1F1C1B1A', 'Component/Button/Brand/Tertiary/On fill/Default': '#FFFFFF', 'Component/Button/Brand/Tertiary/On fill/Hover': '#FFFFFF', 'Component/Button/Brand/Tertiary/On fill/Disabled': '#8C8C8C', 'Component/Button/Brand/Tertiary/Border/Default': '#FFFFFF00', 'Component/Button/Brand/Tertiary/Border/Hover': '#FFFFFF00', 'Component/Button/Brand/Tertiary/Border/Disabled': '#FFFFFF00', - 'Component/Button/Inverted/Default': '#FFFFFF', - 'Component/Button/Inverted/Faded': '#FFFFFFE6', - 'Component/Button/Inverted/Hover': '#f2f2f2', - 'Component/Button/Inverted/Hover Inverted': '#122937', - 'Component/Button/Inverted/Disabled': '#1F1C1B1A', + 'Component/Button/Inverted/Fill/Default': '#FFFFFF', + 'Component/Button/Inverted/Fill/Faded': '#FFFFFFE6', + 'Component/Button/Inverted/Fill/Hover': '#e6e5e5', + 'Component/Button/Inverted/Fill/Hover Inverted': '#122937', + 'Component/Button/Inverted/Fill/Disabled': '#1F1C1B1A', + 'Component/Button/Inverted/Border/Default': '#FFFFFF00', + 'Component/Button/Inverted/Border/Hover': '#FFFFFF00', + 'Component/Button/Inverted/Border/Disable': '#FFFFFF00', 'Component/Button/Inverted/On fill/Default': '#122937', 'Component/Button/Inverted/On fill/Hover': '#283b48', 'Component/Button/Inverted/On fill/Hover inverted': '#FFFFFF', 'Component/Button/Inverted/On fill/Disabled': '#8C8C8C', - 'Component/Button/Inverted/Border/Default': '#FFFFFF00', - 'Component/Button/Inverted/Border/Hover': '#FFFFFF00', - 'Component/Button/Inverted/Border/Disable': '#FFFFFF00', 'Border/Interactive/Default': '#BFBFBF', 'Border/Divider/Default': '#D9D9D9', 'Border/Divider/Subtle': '#E9E9E9', @@ -288,11 +300,11 @@ export const theme = { 'Border/Interactive/Disabled': '#BFBFBF', 'Border/Interactive/Error': '#AD0015', 'Border/Interactive/KeyboardFocus': '#5B8FD4', - 'Component/Button/Muted/Default': '#FFFFFF00', - 'Component/Button/Muted/Hover': '#FFFFFF', - 'Component/Button/Muted/Disabled': '#FFFFFF', - 'Component/Button/Muted/Hover inverted': '#1F1C1B0D', - 'Component/Button/Muted/Disabled inverted': '#D9D9D9', + 'Component/Button/Muted/Fill/Default': '#FFFFFF00', + 'Component/Button/Muted/Fill/Hover': '#FFFFFF', + 'Component/Button/Muted/Fill/Disabled': '#FFFFFF', + 'Component/Button/Muted/Fill/Hover inverted': '#1F1C1B0D', + 'Component/Button/Muted/Fill/Disabled inverted': '#D9D9D9', 'Component/Button/Muted/On fill/Default': '#1F1F1F', 'Component/Button/Muted/On fill/Inverted': '#FFFFFF', 'Component/Button/Muted/On fill/Hover Inverted': '#2C414D', diff --git a/packages/design-system/lib/styles/scandic-go.css b/packages/design-system/lib/styles/scandic-go.css index 7eb60a75f..f027f4dd9 100644 --- a/packages/design-system/lib/styles/scandic-go.css +++ b/packages/design-system/lib/styles/scandic-go.css @@ -9,14 +9,18 @@ --Body-Supporting-text-Letter-spacing: 0.2px; --Body-Underline-md-Font-fallback: sans-serif; --Body-Underline-md-Letter-spacing: 0.19px; + --Body-Underline-md-Text-Decoration: underline; --Body-Underline-sm-Font-fallback: sans-serif; --Body-Underline-sm-Letter-spacing: 0.2px; - --Component-Button-Brand-Primary-Hover: #c7c2e5; - --Component-Button-Brand-Secondary-Border-Hover-inverted: #e8e5e9; - --Component-Button-Brand-Tertiary-Hover: #402a4b; - --Component-Button-Inverted-Hover: #f2f2f2; + --Body-Underline-sm-Text-Decoration: underline; + --Component-Button-Brand-Primary-Fill-Hover: #c7c2e5; + --Component-Button-Brand-Secondary-Border-Hover-inverted: #908197; + --Component-Button-Brand-Secondary-On-fill-Hover-inverted: #bbb2bf; + --Component-Button-Brand-Tertiary-Fill-Hover: #402a4b; + --Component-Button-Inverted-Fill-Hover: #e6e5e5; --Component-Button-Inverted-On-fill-Hover: #402a4b; - --Component-Button-Muted-Hover-inverted: #f2f2f2; + --Component-Button-Muted-Fill-Hover-inverted: #f2f2f2; + --Component-Button-Muted-Fill-Hover: #ffffff; --Font-family-Scandic-Go-Body: 'Fira sans'; --Font-family-Scandic-Go-Decorative: 'ITC Garamond Std'; --Font-family-Scandic-Go-Title: 'Neue Haas Grotesk Display Pro'; @@ -24,8 +28,10 @@ --Label-Letter-spacing: 0.17px; --Link-md-Font-fallback: sans-serif; --Link-md-Letter-spacing: 0.19px; + --Link-md-Text-Decoration: underline; --Link-sm-Font-fallback: sans-serif; --Link-sm-Letter-spacing: 0.2px; + --Link-sm-Text-Decoration: underline; --Scandic-Go-Beige-00: #fffefa; --Scandic-Go-Beige-0: #faf8f2; --Scandic-Go-Beige-100: #1f1e1d; @@ -157,15 +163,15 @@ --Neutral-Opacity-White-0 ); --Component-Button-Brand-Primary-Border-Hover: var(--Neutral-Opacity-White-0); - --Component-Button-Brand-Primary-Default: var(--Scandic-Go-Purple-10); - --Component-Button-Brand-Primary-Disabled: var(--Neutral-Opacity-Black-10); + --Component-Button-Brand-Primary-Fill-Default: var(--Scandic-Go-Purple-10); + --Component-Button-Brand-Primary-Fill-Disabled: var( + --Neutral-Opacity-Black-10 + ); --Component-Button-Brand-Primary-On-fill-Default: var( --Scandic-Go-Purple-100 ); --Component-Button-Brand-Primary-On-fill-Disabled: var(--Neutral-40); - --Component-Button-Brand-Primary-On-fill-Hover: var( - --Neutral-Opacity-White-100 - ); + --Component-Button-Brand-Primary-On-fill-Hover: var(--Scandic-Go-Purple-100); --Component-Button-Brand-Secondary-Border-Default: var( --Scandic-Go-Purple-100 ); @@ -176,13 +182,19 @@ --Component-Button-Brand-Secondary-Border-Inverted: var( --Neutral-Opacity-White-100 ); - --Component-Button-Brand-Secondary-Default: var(--Neutral-Opacity-White-0); - --Component-Button-Brand-Secondary-Disabled: var(--Neutral-Opacity-Black-10); - --Component-Button-Brand-Secondary-Hover-Inverted: var( + --Component-Button-Brand-Secondary-Fill-Default: var( + --Neutral-Opacity-White-0 + ); + --Component-Button-Brand-Secondary-Fill-Disabled: var( + --Neutral-Opacity-Black-10 + ); + --Component-Button-Brand-Secondary-Fill-Hover-Inverted: var( --Scandic-Go-Purple-100 ); - --Component-Button-Brand-Secondary-Hover: var(--Neutral-Opacity-White-0); - --Component-Button-Brand-Secondary-Inverted: var(--Neutral-Opacity-White-100); + --Component-Button-Brand-Secondary-Fill-Hover: var(--Neutral-Opacity-White-0); + --Component-Button-Brand-Secondary-Fill-Inverted: var( + --Neutral-Opacity-White-100 + ); --Component-Button-Brand-Secondary-On-fill-Default: var( --Scandic-Go-Purple-100 ); @@ -200,8 +212,10 @@ --Component-Button-Brand-Tertiary-Border-Hover: var( --Neutral-Opacity-White-0 ); - --Component-Button-Brand-Tertiary-Default: var(--Scandic-Go-Purple-100); - --Component-Button-Brand-Tertiary-Disabled: var(--Neutral-Opacity-Black-10); + --Component-Button-Brand-Tertiary-Fill-Default: var(--Scandic-Go-Purple-100); + --Component-Button-Brand-Tertiary-Fill-Disabled: var( + --Neutral-Opacity-Black-10 + ); --Component-Button-Brand-Tertiary-On-fill-Default: var( --Neutral-Opacity-White-100 ); @@ -212,10 +226,10 @@ --Component-Button-Inverted-Border-Default: var(--Neutral-Opacity-White-0); --Component-Button-Inverted-Border-Disable: var(--Neutral-Opacity-White-0); --Component-Button-Inverted-Border-Hover: var(--Neutral-Opacity-White-0); - --Component-Button-Inverted-Default: var(--Neutral-Opacity-White-100); - --Component-Button-Inverted-Disabled: var(--Neutral-Opacity-Black-10); - --Component-Button-Inverted-Faded: var(--Neutral-Opacity-White-90); - --Component-Button-Inverted-Hover-Inverted: var(--Scandic-Go-Purple-10); + --Component-Button-Inverted-Fill-Default: var(--Neutral-Opacity-White-100); + --Component-Button-Inverted-Fill-Disabled: var(--Neutral-Opacity-Black-10); + --Component-Button-Inverted-Fill-Faded: var(--Neutral-Opacity-White-90); + --Component-Button-Inverted-Fill-Hover-Inverted: var(--Scandic-Go-Purple-10); --Component-Button-Inverted-On-fill-Default: var(--Scandic-Go-Purple-100); --Component-Button-Inverted-On-fill-Disabled: var(--Neutral-40); --Component-Button-Inverted-On-fill-Hover-inverted: var( @@ -224,10 +238,9 @@ --Component-Button-Muted-Border-Default: var(--Neutral-Opacity-White-0); --Component-Button-Muted-Border-Disable: var(--Neutral-Opacity-White-0); --Component-Button-Muted-Border-Hover: var(--Neutral-Opacity-White-0); - --Component-Button-Muted-Default: var(--Neutral-Opacity-White-100); - --Component-Button-Muted-Disabled-inverted: var(--Neutral-20); - --Component-Button-Muted-Disabled: var(--Neutral-Opacity-White-10); - --Component-Button-Muted-Hover: var(--Neutral-Opacity-White-5); + --Component-Button-Muted-Fill-Default: var(--Neutral-Opacity-White-100); + --Component-Button-Muted-Fill-Disabled-inverted: var(--Neutral-20); + --Component-Button-Muted-Fill-Disabled: var(--Neutral-Opacity-White-10); --Component-Button-Muted-On-fill-Default: var(--Neutral-90); --Component-Button-Muted-On-fill-Disabled: var(--Neutral-40); --Component-Button-Muted-On-fill-Hover-Inverted: var(--Scandic-Go-Purple-80); @@ -240,6 +253,7 @@ --Icon-Feedback-Success: var(--Scandic-Green-60); --Icon-Feedback-Warning: var(--Scandic-Yellow-60); --Icon-Intense: var(--Neutral-90); + --Icon-Interactive-Accent: var(--Scandic-Go-Purple-80); --Icon-Interactive-Default: var(--Scandic-Go-Purple-100); --Icon-Interactive-Disabled: var(--Neutral-30); --Icon-Interactive-Placeholder: var(--Neutral-50); @@ -257,6 +271,7 @@ --Link-sm-Size: var(--Impl-Text-size-4xs); --Overlay-10: var(--Neutral-Opacity-Black-10); --Overlay-20: var(--Neutral-Opacity-Black-20); + --Overlay-30: var(--Neutral-Opacity-Black-20); --Overlay-40: var(--Neutral-Opacity-Black-40); --Overlay-60: var(--Neutral-Opacity-Black-60); --Overlay-80: var(--Neutral-Opacity-Black-80); @@ -293,8 +308,8 @@ --Surface-Primary-Disabled: var(--Neutral-15); --Surface-Primary-Hover-Accent: var(--Scandic-Go-Purple-10); --Surface-Primary-OnSurface-Default: var(--Scandic-Go-Beige-0); + --Surface-Secondary-Default-dark: var(--Scandic-Go-Beige-20); --Surface-Secondary-Default: var(--Scandic-Go-Beige-10); - --Surface-Secondary-Secondary: var(--Scandic-Go-Beige-10); --Surface-UI-Fill-Active: var(--Neutral-80); --Surface-UI-Fill-Default: var(--Neutral-Opacity-White-100); --Surface-UI-Fill-Disabled: var(--Neutral-15); @@ -317,6 +332,11 @@ --Text-Brand-OnPrimary-3-Default: var(--Neutral-Opacity-White-100); --Text-Brand-OnPrimary-3-Heading: var(--Neutral-Opacity-White-100); --Text-Default: var(--Neutral-90); + --Text-Feedback-Error-Accent: var(--Scandic-Red-70); + --Text-Feedback-Information-Accent: var(--Scandic-Blue-70); + --Text-Feedback-Neutral-Accent: var(--Neutral-50); + --Text-Feedback-Succes-Accent: var(--Scandic-Green-60); + --Text-Feedback-Warning-Accent: var(--Scandic-Yellow-60); --Text-Heading: var(--Scandic-Go-Purple-100); --Text-Interactive-Default: var(--Scandic-Go-Purple-100); --Text-Interactive-Disabled: var(--Neutral-40); @@ -348,7 +368,7 @@ --Title-lg-Size: var(--Impl-Text-size-4xl); --Title-md-Font-family: var(--Font-family-Scandic-Go-Title); --Title-md-Font-weight: var(--Font-weight-Medium); - --Title-md-LowCase-Font-family: var(--Font-family-Title); + --Title-md-LowCase-Font-family: var(--Font-family-Scandic-Title); --Title-md-LowCase-Font-weight: var(--Font-weight-Medium); --Title-md-LowCase-Size: var(--Impl-Text-size-2xl); --Title-md-Size: var(--Impl-Text-size-2xl); diff --git a/packages/design-system/lib/styles/scandic-go.js b/packages/design-system/lib/styles/scandic-go.js index 104e64ccc..cbe746a5a 100644 --- a/packages/design-system/lib/styles/scandic-go.js +++ b/packages/design-system/lib/styles/scandic-go.js @@ -84,8 +84,10 @@ export const theme = { 'Tag/Text-Transform': 'unset', 'Link/md/Font fallback': 'sans-serif', 'Link/md/Letter spacing': 0.19, + 'Link/md/Text-Decoration': 'underline', 'Link/sm/Font fallback': 'sans-serif', 'Link/sm/Letter spacing': 0.2, + 'Link/sm/Text-Decoration': 'underline', 'Body/Lead text/Font fallback': 'sans-serif', 'Body/Paragraph/Font fallback': 'sans-serif', 'Body/Paragraph/Letter spacing': 0.19, @@ -96,8 +98,10 @@ export const theme = { 'Label/Letter spacing': 0.17, 'Body/Underline/md/Font fallback': 'sans-serif', 'Body/Underline/md/Letter spacing': 0.19, + 'Body/Underline/md/Text-Decoration': 'underline', 'Body/Underline/sm/Font fallback': 'sans-serif', 'Body/Underline/sm/Letter spacing': 0.2, + 'Body/Underline/sm/Text-Decoration': 'underline', 'Utilities/Gradients/10': '#2D163A1A', 'Font family/Scandic Go/Title': 'Neue Haas Grotesk Display Pro', 'Font family/Scandic Go/Body': 'Fira sans', @@ -160,6 +164,11 @@ export const theme = { 'Text/Interactive/Error': '#AD0015', 'Text/Interactive/Placeholder': '#747474', 'Text/Brand/OnAccent/Heading': '#2D163A', + 'Text/Feedback/Information Accent': '#284EA0', + 'Text/Feedback/Succes Accent': '#348337', + 'Text/Feedback/Warning Accent': '#D17308', + 'Text/Feedback/Error Accent': '#AD0015', + 'Text/Feedback/Neutral Accent': '#747474', 'Text/Brand/OnAccent/Default': '#2D163A', 'Text/Brand/OnAccent/Accent': '#2D163A', 'Text/Brand/OnPrimary 1/Heading': '#2D163A', @@ -180,7 +189,7 @@ export const theme = { 'Surface/Primary/OnSurface/Default': '#FAF8F2', 'Surface/Primary/Disabled': '#E9E9E9', 'Surface/Secondary/Default': '#F0EDE4', - 'Surface/Secondary/Secondary': '#F0EDE4', + 'Surface/Secondary/Default dark': '#E0DCCE', 'Surface/Secondary/Hover': '#e4e1d9', 'Surface/Brand/Accent/Default': '#F5FF73', 'Surface/Brand/Primary 1/Default': '#DCD7FF', @@ -221,6 +230,7 @@ export const theme = { 'Icon/Accent': '#FA3737', 'Icon/Interactive/Default': '#2D163A', 'Icon/Interactive/Secondary': '#5E2A8C', + 'Icon/Interactive/Accent': '#5E2A8C', 'Icon/Interactive/Disabled': '#BFBFBF', 'Icon/Interactive/Placeholder': '#747474', 'Icon/Feedback/Information': '#284EA0', @@ -231,54 +241,56 @@ export const theme = { 'Icon/Inverted': '#FFFFFF', 'Overlay/10': '#1F1C1B1A', 'Overlay/20': '#1F1C1B33', + 'Overlay/30': '#1F1C1B33', 'Overlay/40': '#1F1C1B66', 'Overlay/60': '#1F1C1B99', 'Overlay/80': '#1F1C1BCC', 'Overlay/90': '#1F1C1BE6', - 'Component/Button/Brand/Primary/Default': '#DCD7FF', - 'Component/Button/Brand/Primary/Hover': '#c7c2e5', - 'Component/Button/Brand/Primary/Disabled': '#1F1C1B1A', + 'Component/Button/Brand/Primary/Fill/Default': '#DCD7FF', + 'Component/Button/Brand/Primary/Fill/Hover': '#c7c2e5', + 'Component/Button/Brand/Primary/Fill/Disabled': '#1F1C1B1A', 'Component/Button/Brand/Primary/On fill/Default': '#2D163A', - 'Component/Button/Brand/Primary/On fill/Hover': '#FFFFFF', + 'Component/Button/Brand/Primary/On fill/Hover': '#2D163A', 'Component/Button/Brand/Primary/On fill/Disabled': '#8C8C8C', 'Component/Button/Brand/Primary/Border/Default': '#FFFFFF00', 'Component/Button/Brand/Primary/Border/Hover': '#FFFFFF00', 'Component/Button/Brand/Primary/Border/Disabled': '#FFFFFF00', - 'Component/Button/Brand/Secondary/Default': '#FFFFFF00', - 'Component/Button/Brand/Secondary/Hover': '#FFFFFF00', - 'Component/Button/Brand/Secondary/Inverted': '#FFFFFF', - 'Component/Button/Brand/Secondary/Hover Inverted': '#2D163A', - 'Component/Button/Brand/Secondary/Disabled': '#1F1C1B1A', + 'Component/Button/Brand/Secondary/Fill/Default': '#FFFFFF00', + 'Component/Button/Brand/Secondary/Fill/Hover': '#FFFFFF00', + 'Component/Button/Brand/Secondary/Fill/Inverted': '#FFFFFF', + 'Component/Button/Brand/Secondary/Fill/Hover Inverted': '#2D163A', + 'Component/Button/Brand/Secondary/Fill/Disabled': '#1F1C1B1A', 'Component/Button/Brand/Secondary/On fill/Default': '#2D163A', 'Component/Button/Brand/Secondary/On fill/Hover': '#5E2A8C', 'Component/Button/Brand/Secondary/On fill/Inverted': '#FFFFFF', + 'Component/Button/Brand/Secondary/On fill/Hover inverted': '#bbb2bf', 'Component/Button/Brand/Secondary/On fill/Disabled': '#8C8C8C', 'Component/Button/Brand/Secondary/Border/Default': '#2D163A', 'Component/Button/Brand/Secondary/Border/Hover': '#5E2A8C', 'Component/Button/Brand/Secondary/Border/Inverted': '#FFFFFF', - 'Component/Button/Brand/Secondary/Border/Hover inverted': '#e8e5e9', + 'Component/Button/Brand/Secondary/Border/Hover inverted': '#908197', 'Component/Button/Brand/Secondary/Border/Disabled': '#1F1C1B1A', - 'Component/Button/Brand/Tertiary/Default': '#2D163A', - 'Component/Button/Brand/Tertiary/Hover': '#402a4b', - 'Component/Button/Brand/Tertiary/Disabled': '#1F1C1B1A', + 'Component/Button/Brand/Tertiary/Fill/Default': '#2D163A', + 'Component/Button/Brand/Tertiary/Fill/Hover': '#402a4b', + 'Component/Button/Brand/Tertiary/Fill/Disabled': '#1F1C1B1A', 'Component/Button/Brand/Tertiary/On fill/Default': '#FFFFFF', 'Component/Button/Brand/Tertiary/On fill/Hover': '#FFFFFF', 'Component/Button/Brand/Tertiary/On fill/Disabled': '#8C8C8C', 'Component/Button/Brand/Tertiary/Border/Default': '#FFFFFF00', 'Component/Button/Brand/Tertiary/Border/Hover': '#FFFFFF00', 'Component/Button/Brand/Tertiary/Border/Disabled': '#FFFFFF00', - 'Component/Button/Inverted/Default': '#FFFFFF', - 'Component/Button/Inverted/Faded': '#FFFFFFE6', - 'Component/Button/Inverted/Hover': '#f2f2f2', - 'Component/Button/Inverted/Hover Inverted': '#DCD7FF', - 'Component/Button/Inverted/Disabled': '#1F1C1B1A', + 'Component/Button/Inverted/Fill/Default': '#FFFFFF', + 'Component/Button/Inverted/Fill/Faded': '#FFFFFFE6', + 'Component/Button/Inverted/Fill/Hover': '#e6e5e5', + 'Component/Button/Inverted/Fill/Hover Inverted': '#DCD7FF', + 'Component/Button/Inverted/Fill/Disabled': '#1F1C1B1A', + 'Component/Button/Inverted/Border/Default': '#FFFFFF00', + 'Component/Button/Inverted/Border/Hover': '#FFFFFF00', + 'Component/Button/Inverted/Border/Disable': '#FFFFFF00', 'Component/Button/Inverted/On fill/Default': '#2D163A', 'Component/Button/Inverted/On fill/Hover': '#402a4b', 'Component/Button/Inverted/On fill/Hover inverted': '#FFFFFF', 'Component/Button/Inverted/On fill/Disabled': '#8C8C8C', - 'Component/Button/Inverted/Border/Default': '#FFFFFF00', - 'Component/Button/Inverted/Border/Hover': '#FFFFFF00', - 'Component/Button/Inverted/Border/Disable': '#FFFFFF00', 'Border/Interactive/Default': '#BFBFBF', 'Border/Divider/Default': '#D9D9D9', 'Border/Divider/Subtle': '#E9E9E9', @@ -292,11 +304,11 @@ export const theme = { 'Border/Interactive/Disabled': '#8C8C8C', 'Border/Interactive/Error': '#AD0015', 'Border/Interactive/KeyboardFocus': '#5B8FD4', - 'Component/Button/Muted/Default': '#FFFFFF', - 'Component/Button/Muted/Hover': '#FFFFFF00', - 'Component/Button/Muted/Disabled': '#FFFFFF1A', - 'Component/Button/Muted/Hover inverted': '#f2f2f2', - 'Component/Button/Muted/Disabled inverted': '#D9D9D9', + 'Component/Button/Muted/Fill/Default': '#FFFFFF', + 'Component/Button/Muted/Fill/Hover': '#ffffff', + 'Component/Button/Muted/Fill/Disabled': '#FFFFFF1A', + 'Component/Button/Muted/Fill/Hover inverted': '#f2f2f2', + 'Component/Button/Muted/Fill/Disabled inverted': '#D9D9D9', 'Component/Button/Muted/On fill/Default': '#1F1F1F', 'Component/Button/Muted/On fill/Inverted': '#FFFFFF', 'Component/Button/Muted/On fill/Hover Inverted': '#5E2A8C', diff --git a/packages/design-system/lib/styles/scandic.css b/packages/design-system/lib/styles/scandic.css index d2d5ed80f..64fc98e88 100644 --- a/packages/design-system/lib/styles/scandic.css +++ b/packages/design-system/lib/styles/scandic.css @@ -9,19 +9,27 @@ --Body-Supporting-text-Letter-spacing: 0.2px; --Body-Underline-md-Font-fallback: sans-serif; --Body-Underline-md-Letter-spacing: 0.19px; + --Body-Underline-md-Text-Decoration: underline; --Body-Underline-sm-Font-fallback: sans-serif; --Body-Underline-sm-Letter-spacing: 0.2px; - --Component-Button-Brand-Primary-Hover: #ba1721; - --Component-Button-Brand-Secondary-Border-Hover-inverted: #eee4e5; - --Component-Button-Brand-Tertiary-Hover: #601e2d; - --Component-Button-Inverted-Hover: #f2f2f2; + --Body-Underline-sm-Text-Decoration: underline; + --Component-Button-Brand-Primary-Fill-Hover: #a81e20; + --Component-Button-Brand-Secondary-Border-Hover-inverted: #a87e83; + --Component-Button-Brand-Secondary-On-fill-Hover-inverted: #cbb0b3; + --Component-Button-Brand-Tertiary-Fill-Hover: #601e2d; + --Component-Button-Inverted-Fill-Hover: #e6e5e5; --Component-Button-Inverted-On-fill-Hover: #601e2d; + --Font-family-Scandic-Body: 'Fira sans'; + --Font-family-Scandic-Decorative: 'Biro Script Plus'; + --Font-family-Scandic-Title: 'Brandon Text'; --Label-Font-fallback: sans-serif; --Label-Letter-spacing: 0.17px; --Link-md-Font-fallback: sans-serif; --Link-md-Letter-spacing: 0.19px; + --Link-md-Text-Decoration: underline; --Link-sm-Font-fallback: sans-serif; --Link-sm-Letter-spacing: 0.2px; + --Link-sm-Text-Decoration: underline; --Scandic-Beige-00: #faf6f2; --Scandic-Beige-100: #291710; --Scandic-Beige-10: #f2ece6; @@ -142,21 +150,21 @@ /* Aliases */ --Background-Primary: var(--Scandic-Beige-00); --Background-Secondary: var(--Neutral-Opacity-White-100); - --Body-Lead-text-Font-family: var(--Font-family-Body); + --Body-Lead-text-Font-family: var(--Font-family-Scandic-Body); --Body-Lead-text-Font-weight: var(--Font-weight-Regular); --Body-Lead-text-Size: var(--Impl-Text-size-xs); - --Body-Paragraph-Font-family: var(--Font-family-Body); + --Body-Paragraph-Font-family: var(--Font-family-Scandic-Body); --Body-Paragraph-Font-weight-2: var(--Font-weight-Medium); --Body-Paragraph-Font-weight: var(--Font-weight-Regular); --Body-Paragraph-Size: var(--Impl-Text-size-3xs); - --Body-Supporting-text-Font-family: var(--Font-family-Body); + --Body-Supporting-text-Font-family: var(--Font-family-Scandic-Body); --Body-Supporting-text-Font-weight-2: var(--Font-weight-Medium); --Body-Supporting-text-Font-weight: var(--Font-weight-Regular); --Body-Supporting-text-Size: var(--Impl-Text-size-4xs); - --Body-Underline-md-Font-family: var(--Font-family-Body); + --Body-Underline-md-Font-family: var(--Font-family-Scandic-Body); --Body-Underline-md-Font-weight: var(--Font-weight-Regular); --Body-Underline-md-Size: var(--Impl-Text-size-3xs); - --Body-Underline-sm-Font-family: var(--Font-family-Body); + --Body-Underline-sm-Font-family: var(--Font-family-Scandic-Body); --Body-Underline-sm-Font-weight: var(--Font-weight-Regular); --Body-Underline-sm-Size: var(--Impl-Text-size-4xs); --Border-Default: var(--Scandic-Beige-20); @@ -182,8 +190,10 @@ --Neutral-Opacity-White-0 ); --Component-Button-Brand-Primary-Border-Hover: var(--Neutral-Opacity-White-0); - --Component-Button-Brand-Primary-Default: var(--Scandic-Red-Default); - --Component-Button-Brand-Primary-Disabled: var(--Neutral-Opacity-Black-10); + --Component-Button-Brand-Primary-Fill-Default: var(--Scandic-Red-Default); + --Component-Button-Brand-Primary-Fill-Disabled: var( + --Neutral-Opacity-Black-10 + ); --Component-Button-Brand-Primary-On-fill-Default: var( --Neutral-Opacity-White-100 ); @@ -199,11 +209,19 @@ --Component-Button-Brand-Secondary-Border-Inverted: var( --Neutral-Opacity-White-100 ); - --Component-Button-Brand-Secondary-Default: var(--Neutral-Opacity-White-0); - --Component-Button-Brand-Secondary-Disabled: var(--Neutral-Opacity-Black-10); - --Component-Button-Brand-Secondary-Hover-Inverted: var(--Scandic-Red-100); - --Component-Button-Brand-Secondary-Hover: var(--Neutral-Opacity-White-0); - --Component-Button-Brand-Secondary-Inverted: var(--Neutral-Opacity-White-100); + --Component-Button-Brand-Secondary-Fill-Default: var( + --Neutral-Opacity-White-0 + ); + --Component-Button-Brand-Secondary-Fill-Disabled: var( + --Neutral-Opacity-Black-10 + ); + --Component-Button-Brand-Secondary-Fill-Hover-Inverted: var( + --Scandic-Red-100 + ); + --Component-Button-Brand-Secondary-Fill-Hover: var(--Neutral-Opacity-White-0); + --Component-Button-Brand-Secondary-Fill-Inverted: var( + --Neutral-Opacity-White-100 + ); --Component-Button-Brand-Secondary-On-fill-Default: var(--Scandic-Red-100); --Component-Button-Brand-Secondary-On-fill-Disabled: var(--Scandic-Grey-40); --Component-Button-Brand-Secondary-On-fill-Hover: var(--Scandic-Peach-80); @@ -219,8 +237,10 @@ --Component-Button-Brand-Tertiary-Border-Hover: var( --Neutral-Opacity-White-0 ); - --Component-Button-Brand-Tertiary-Default: var(--Scandic-Red-100); - --Component-Button-Brand-Tertiary-Disabled: var(--Neutral-Opacity-Black-10); + --Component-Button-Brand-Tertiary-Fill-Default: var(--Scandic-Red-100); + --Component-Button-Brand-Tertiary-Fill-Disabled: var( + --Neutral-Opacity-Black-10 + ); --Component-Button-Brand-Tertiary-On-fill-Default: var( --Neutral-Opacity-White-100 ); @@ -231,10 +251,10 @@ --Component-Button-Inverted-Border-Default: var(--Neutral-Opacity-White-0); --Component-Button-Inverted-Border-Disable: var(--Neutral-Opacity-White-0); --Component-Button-Inverted-Border-Hover: var(--Neutral-Opacity-White-0); - --Component-Button-Inverted-Default: var(--Neutral-Opacity-White-100); - --Component-Button-Inverted-Disabled: var(--Neutral-Opacity-Black-10); - --Component-Button-Inverted-Faded: var(--Neutral-Opacity-White-90); - --Component-Button-Inverted-Hover-Inverted: var(--Scandic-Red-100); + --Component-Button-Inverted-Fill-Default: var(--Neutral-Opacity-White-100); + --Component-Button-Inverted-Fill-Disabled: var(--Neutral-Opacity-Black-10); + --Component-Button-Inverted-Fill-Faded: var(--Neutral-Opacity-White-90); + --Component-Button-Inverted-Fill-Hover-Inverted: var(--Scandic-Red-100); --Component-Button-Inverted-On-fill-Default: var(--Scandic-Red-100); --Component-Button-Inverted-On-fill-Disabled: var(--Scandic-Grey-40); --Component-Button-Inverted-On-fill-Hover-inverted: var( @@ -243,11 +263,13 @@ --Component-Button-Muted-Border-Default: var(--Neutral-Opacity-White-0); --Component-Button-Muted-Border-Disable: var(--Neutral-Opacity-White-0); --Component-Button-Muted-Border-Hover: var(--Neutral-Opacity-White-0); - --Component-Button-Muted-Default: var(--Neutral-Opacity-White-0); - --Component-Button-Muted-Disabled-inverted: var(--Neutral-Opacity-Black-10); - --Component-Button-Muted-Disabled: var(--Neutral-Opacity-White-10); - --Component-Button-Muted-Hover-inverted: var(--Neutral-Opacity-Black-5); - --Component-Button-Muted-Hover: var(--Neutral-Opacity-White-5); + --Component-Button-Muted-Fill-Default: var(--Neutral-Opacity-White-0); + --Component-Button-Muted-Fill-Disabled-inverted: var( + --Neutral-Opacity-Black-10 + ); + --Component-Button-Muted-Fill-Disabled: var(--Neutral-Opacity-White-10); + --Component-Button-Muted-Fill-Hover-inverted: var(--Neutral-Opacity-Black-5); + --Component-Button-Muted-Fill-Hover: var(--Neutral-Opacity-White-5); --Component-Button-Muted-On-fill-Default: var(--Scandic-Grey-100); --Component-Button-Muted-On-fill-Disabled: var(--Scandic-Grey-40); --Component-Button-Muted-On-fill-Hover-Inverted: var(--Scandic-Red-90); @@ -260,23 +282,25 @@ --Icon-Feedback-Success: var(--Scandic-Green-60); --Icon-Feedback-Warning: var(--Scandic-Yellow-60); --Icon-Intense: var(--Scandic-Grey-100); + --Icon-Interactive-Accent: var(--Scandic-Red-Default); --Icon-Interactive-Default: var(--Scandic-Red-100); --Icon-Interactive-Disabled: var(--Scandic-Grey-40); --Icon-Interactive-Placeholder: var(--Scandic-Grey-60); --Icon-Interactive-Secondary: var(--Scandic-Peach-80); --Icon-Inverted: var(--Neutral-Opacity-White-100); - --Label-Font-family: var(--Font-family-Body); + --Label-Font-family: var(--Font-family-Scandic-Body); --Label-Font-weight-2: var(--Font-weight-Medium); --Label-Font-weight: var(--Font-weight-Regular); --Label-Size: var(--Impl-Text-size-5xs); - --Link-md-Font-family: var(--Font-family-Body); + --Link-md-Font-family: var(--Font-family-Scandic-Body); --Link-md-Font-weight: var(--Font-weight-Medium); --Link-md-Size: var(--Impl-Text-size-3xs); - --Link-sm-Font-family: var(--Font-family-Body); + --Link-sm-Font-family: var(--Font-family-Scandic-Body); --Link-sm-Font-weight: var(--Font-weight-Medium); --Link-sm-Size: var(--Impl-Text-size-4xs); --Overlay-10: var(--Neutral-Opacity-Black-10); --Overlay-20: var(--Neutral-Opacity-Black-20); + --Overlay-30: var(--Neutral-Opacity-Black-30); --Overlay-40: var(--Neutral-Opacity-Black-40); --Overlay-60: var(--Neutral-Opacity-Black-60); --Overlay-80: var(--Neutral-Opacity-Black-80); @@ -310,14 +334,14 @@ --Surface-Primary-Default: var(--Neutral-Opacity-White-100); --Surface-Primary-Disabled: var(--Scandic-Grey-10); --Surface-Primary-Hover-Accent: var(--Scandic-Peach-10); - --Surface-Primary-OnSurface-Default: var(--Scandic-Beige-00); + --Surface-Primary-OnSurface-Default: var(--Scandic-Grey-00); + --Surface-Secondary-Default-dark: var(--Scandic-Beige-20); --Surface-Secondary-Default: var(--Scandic-Beige-10); - --Surface-Secondary-Secondary: var(--Scandic-Beige-20); --Surface-UI-Fill-Active: var(--Scandic-Peach-100); --Surface-UI-Fill-Default: var(--Neutral-Opacity-White-100); --Surface-UI-Fill-Disabled: var(--Scandic-Grey-10); --Surface-UI-Fill-Intense: var(--Scandic-Grey-100); - --Tag-Font-family: var(--Font-family-Title); + --Tag-Font-family: var(--Font-family-Scandic-Title); --Tag-Font-weight: var(--Font-weight-Regular-bold); --Tag-Size: var(--Impl-Text-size-5xs); --Text-Accent-Primary: var(--Scandic-Red-Default); @@ -335,48 +359,53 @@ --Text-Brand-OnPrimary-3-Default: var(--Neutral-Opacity-White-100); --Text-Brand-OnPrimary-3-Heading: var(--Scandic-Peach-10); --Text-Default: var(--Scandic-Grey-100); + --Text-Feedback-Error-Accent: var(--Scandic-Red-70); + --Text-Feedback-Information-Accent: var(--Scandic-Blue-70); + --Text-Feedback-Neutral-Accent: var(--Scandic-Grey-60); + --Text-Feedback-Succes-Accent: var(--Scandic-Green-60); + --Text-Feedback-Warning-Accent: var(--Scandic-Yellow-60); --Text-Heading: var(--Scandic-Red-100); --Text-Interactive-Default: var(--Scandic-Peach-100); --Text-Interactive-Disabled: var(--Scandic-Grey-40); --Text-Interactive-Error: var(--Scandic-Red-70); - --Text-Interactive-Focus: var(--Scandic-Grey-100); + --Text-Interactive-Focus: var(--Scandic-Grey-80); --Text-Interactive-Hover-Secondary: var(--Scandic-Peach-100); --Text-Interactive-Placeholder: var(--Scandic-Grey-60); --Text-Interactive-Secondary: var(--Scandic-Peach-80); --Text-Inverted: var(--Neutral-Opacity-White-100); --Text-Secondary: var(--Scandic-Grey-80); --Text-Tertiary: var(--Scandic-Grey-60); - --Title-Decorative-lg-Font-family: var(--Font-family-Decorative); + --Title-Decorative-lg-Font-family: var(--Font-family-Scandic-Decorative); --Title-Decorative-lg-Font-weight: var(--Font-weight-Regular); --Title-Decorative-lg-Size: var(--Impl-Text-size-xl); - --Title-Decorative-md-Font-family: var(--Font-family-Decorative); + --Title-Decorative-md-Font-family: var(--Font-family-Scandic-Decorative); --Title-Decorative-md-Font-weight: var(--Font-weight-Regular); --Title-Decorative-md-Size: var(--Impl-Text-size-sm); - --Title-Overline-sm-Font-family: var(--Font-family-Title); + --Title-Overline-sm-Font-family: var(--Font-family-Scandic-Title); --Title-Overline-sm-Font-weight: var(--Font-weight-Regular-bold); --Title-Overline-sm-Size: var(--Impl-Text-size-4xs); - --Title-Subtitle-lg-Font-family: var(--Font-family-Body); + --Title-Subtitle-lg-Font-family: var(--Font-family-Scandic-Body); --Title-Subtitle-lg-Font-weight: var(--Font-weight-Medium); --Title-Subtitle-lg-Size: var(--Impl-Text-size-sm); - --Title-Subtitle-md-Font-family: var(--Font-family-Body); + --Title-Subtitle-md-Font-family: var(--Font-family-Scandic-Body); --Title-Subtitle-md-Font-weight: var(--Font-weight-Medium); --Title-Subtitle-md-Size: var(--Impl-Text-size-xs); - --Title-lg-Font-family: var(--Font-family-Title); + --Title-lg-Font-family: var(--Font-family-Scandic-Title); --Title-lg-Font-weight: var(--Font-weight-Black); --Title-lg-Size: var(--Impl-Text-size-4xl); - --Title-md-Font-family: var(--Font-family-Title); + --Title-md-Font-family: var(--Font-family-Scandic-Title); --Title-md-Font-weight: var(--Font-weight-Black); - --Title-md-LowCase-Font-family: var(--Font-family-Title); + --Title-md-LowCase-Font-family: var(--Font-family-Scandic-Title); --Title-md-LowCase-Font-weight: var(--Font-weight-Regular-bold); --Title-md-LowCase-Size: var(--Impl-Text-size-2xl); --Title-md-Size: var(--Impl-Text-size-2xl); - --Title-sm-Font-family: var(--Font-family-Title); + --Title-sm-Font-family: var(--Font-family-Scandic-Title); --Title-sm-Font-weight: var(--Font-weight-Black); - --Title-sm-LowCase-Font-family: var(--Font-family-Title); + --Title-sm-LowCase-Font-family: var(--Font-family-Scandic-Title); --Title-sm-LowCase-Font-weight: var(--Font-weight-Regular-bold); --Title-sm-LowCase-Size: var(--Impl-Text-size-lg); --Title-sm-Size: var(--Impl-Text-size-lg); - --Title-xs-Font-family: var(--Font-family-Title); + --Title-xs-Font-family: var(--Font-family-Scandic-Title); --Title-xs-Font-weight: var(--Font-weight-Black); --Title-xs-Size: var(--Impl-Text-size-sm); } diff --git a/packages/design-system/lib/styles/scandic.js b/packages/design-system/lib/styles/scandic.js index 843ec76df..7f53a8412 100644 --- a/packages/design-system/lib/styles/scandic.js +++ b/packages/design-system/lib/styles/scandic.js @@ -113,8 +113,10 @@ export const theme = { 'Tag/Text-Transform': 'uppercase', 'Link/md/Font fallback': 'sans-serif', 'Link/md/Letter spacing': 0.19, + 'Link/md/Text-Decoration': 'underline', 'Link/sm/Font fallback': 'sans-serif', 'Link/sm/Letter spacing': 0.2, + 'Link/sm/Text-Decoration': 'underline', 'Body/Lead text/Font fallback': 'sans-serif', 'Body/Paragraph/Font fallback': 'sans-serif', 'Body/Paragraph/Letter spacing': 0.19, @@ -125,9 +127,14 @@ export const theme = { 'Label/Letter spacing': 0.17, 'Body/Underline/md/Font fallback': 'sans-serif', 'Body/Underline/md/Letter spacing': 0.19, + 'Body/Underline/md/Text-Decoration': 'underline', 'Body/Underline/sm/Font fallback': 'sans-serif', 'Body/Underline/sm/Letter spacing': 0.2, + 'Body/Underline/sm/Text-Decoration': 'underline', 'Utilities/Gradients/10': '#F2ECE61A', + 'Font family/Scandic/Title': 'Brandon Text', + 'Font family/Scandic/Body': 'Fira sans', + 'Font family/Scandic/Decorative': 'Biro Script Plus', 'Title/lg/Font weight': 900, 'Title/lg/Font family': 'Brandon Text', 'Title/md/Font weight': 900, @@ -182,10 +189,15 @@ export const theme = { 'Text/Interactive/Secondary': '#8F4350', 'Text/Interactive/Hover Secondary': '#4D0F25', 'Text/Interactive/Disabled': '#A8A4A2', - 'Text/Interactive/Focus': '#26201E', + 'Text/Interactive/Focus': '#57514E', 'Text/Interactive/Error': '#AD0015', 'Text/Interactive/Placeholder': '#787472', 'Text/Brand/OnAccent/Heading': '#4D001B', + 'Text/Feedback/Information Accent': '#284EA0', + 'Text/Feedback/Succes Accent': '#348337', + 'Text/Feedback/Warning Accent': '#D17308', + 'Text/Feedback/Error Accent': '#AD0015', + 'Text/Feedback/Neutral Accent': '#787472', 'Text/Brand/OnAccent/Default': '#26201E', 'Text/Brand/OnAccent/Accent': '#8F4350', 'Text/Brand/OnPrimary 1/Heading': '#4D001B', @@ -203,10 +215,10 @@ export const theme = { 'Surface/Primary/Hover': '#f2f2f2', 'Surface/Primary/Hover Light': '#e6e5e5', 'Surface/Primary/Hover Accent': '#F7E1D5', - 'Surface/Primary/OnSurface/Default': '#FAF6F2', + 'Surface/Primary/OnSurface/Default': '#F9F6F4', 'Surface/Primary/Disabled': '#EBE8E6', 'Surface/Secondary/Default': '#F2ECE6', - 'Surface/Secondary/Secondary': '#E3D9D1', + 'Surface/Secondary/Default dark': '#E3D9D1', 'Surface/Secondary/Hover': '#dad4cf', 'Surface/Brand/Accent/Default': '#F0C1B6', 'Surface/Brand/Primary 1/Default': '#F7E1D5', @@ -247,6 +259,7 @@ export const theme = { 'Icon/Accent': '#B05B65', 'Icon/Interactive/Default': '#4D001B', 'Icon/Interactive/Secondary': '#8F4350', + 'Icon/Interactive/Accent': '#CD0921', 'Icon/Interactive/Disabled': '#A8A4A2', 'Icon/Interactive/Placeholder': '#787472', 'Icon/Feedback/Information': '#284EA0', @@ -257,54 +270,56 @@ export const theme = { 'Icon/Inverted': '#FFFFFF', 'Overlay/10': '#1F1C1B1A', 'Overlay/20': '#1F1C1B33', + 'Overlay/30': '#1F1C1B4D', 'Overlay/40': '#1F1C1B66', 'Overlay/60': '#1F1C1B99', 'Overlay/80': '#1F1C1BCC', 'Overlay/90': '#1F1C1BE6', - 'Component/Button/Brand/Primary/Default': '#CD0921', - 'Component/Button/Brand/Primary/Hover': '#ba1721', - 'Component/Button/Brand/Primary/Disabled': '#1F1C1B1A', + 'Component/Button/Brand/Primary/Fill/Default': '#CD0921', + 'Component/Button/Brand/Primary/Fill/Hover': '#a81e20', + 'Component/Button/Brand/Primary/Fill/Disabled': '#1F1C1B1A', 'Component/Button/Brand/Primary/On fill/Default': '#FFFFFF', 'Component/Button/Brand/Primary/On fill/Hover': '#FFFFFF', 'Component/Button/Brand/Primary/On fill/Disabled': '#A8A4A2', 'Component/Button/Brand/Primary/Border/Default': '#FFFFFF00', 'Component/Button/Brand/Primary/Border/Hover': '#FFFFFF00', 'Component/Button/Brand/Primary/Border/Disabled': '#FFFFFF00', - 'Component/Button/Brand/Secondary/Default': '#FFFFFF00', - 'Component/Button/Brand/Secondary/Hover': '#FFFFFF00', - 'Component/Button/Brand/Secondary/Inverted': '#FFFFFF', - 'Component/Button/Brand/Secondary/Hover Inverted': '#4D001B', - 'Component/Button/Brand/Secondary/Disabled': '#1F1C1B1A', + 'Component/Button/Brand/Secondary/Fill/Default': '#FFFFFF00', + 'Component/Button/Brand/Secondary/Fill/Hover': '#FFFFFF00', + 'Component/Button/Brand/Secondary/Fill/Inverted': '#FFFFFF', + 'Component/Button/Brand/Secondary/Fill/Hover Inverted': '#4D001B', + 'Component/Button/Brand/Secondary/Fill/Disabled': '#1F1C1B1A', 'Component/Button/Brand/Secondary/On fill/Default': '#4D001B', 'Component/Button/Brand/Secondary/On fill/Hover': '#8F4350', 'Component/Button/Brand/Secondary/On fill/Inverted': '#FFFFFF', + 'Component/Button/Brand/Secondary/On fill/Hover inverted': '#cbb0b3', 'Component/Button/Brand/Secondary/On fill/Disabled': '#A8A4A2', 'Component/Button/Brand/Secondary/Border/Default': '#4D001B', 'Component/Button/Brand/Secondary/Border/Hover': '#8F4350', 'Component/Button/Brand/Secondary/Border/Inverted': '#FFFFFF', - 'Component/Button/Brand/Secondary/Border/Hover inverted': '#eee4e5', + 'Component/Button/Brand/Secondary/Border/Hover inverted': '#a87e83', 'Component/Button/Brand/Secondary/Border/Disabled': '#1F1C1B1A', - 'Component/Button/Brand/Tertiary/Default': '#4D001B', - 'Component/Button/Brand/Tertiary/Hover': '#601e2d', - 'Component/Button/Brand/Tertiary/Disabled': '#1F1C1B1A', + 'Component/Button/Brand/Tertiary/Fill/Default': '#4D001B', + 'Component/Button/Brand/Tertiary/Fill/Hover': '#601e2d', + 'Component/Button/Brand/Tertiary/Fill/Disabled': '#1F1C1B1A', 'Component/Button/Brand/Tertiary/On fill/Default': '#FFFFFF', 'Component/Button/Brand/Tertiary/On fill/Hover': '#FFFFFF', 'Component/Button/Brand/Tertiary/On fill/Disabled': '#A8A4A2', 'Component/Button/Brand/Tertiary/Border/Default': '#FFFFFF00', 'Component/Button/Brand/Tertiary/Border/Hover': '#FFFFFF00', 'Component/Button/Brand/Tertiary/Border/Disabled': '#FFFFFF00', - 'Component/Button/Inverted/Default': '#FFFFFF', - 'Component/Button/Inverted/Faded': '#FFFFFFE6', - 'Component/Button/Inverted/Hover': '#f2f2f2', - 'Component/Button/Inverted/Hover Inverted': '#4D001B', - 'Component/Button/Inverted/Disabled': '#1F1C1B1A', + 'Component/Button/Inverted/Fill/Default': '#FFFFFF', + 'Component/Button/Inverted/Fill/Faded': '#FFFFFFE6', + 'Component/Button/Inverted/Fill/Hover': '#e6e5e5', + 'Component/Button/Inverted/Fill/Hover Inverted': '#4D001B', + 'Component/Button/Inverted/Fill/Disabled': '#1F1C1B1A', + 'Component/Button/Inverted/Border/Default': '#FFFFFF00', + 'Component/Button/Inverted/Border/Hover': '#FFFFFF00', + 'Component/Button/Inverted/Border/Disable': '#FFFFFF00', 'Component/Button/Inverted/On fill/Default': '#4D001B', 'Component/Button/Inverted/On fill/Hover': '#601e2d', 'Component/Button/Inverted/On fill/Hover inverted': '#FFFFFF', 'Component/Button/Inverted/On fill/Disabled': '#A8A4A2', - 'Component/Button/Inverted/Border/Default': '#FFFFFF00', - 'Component/Button/Inverted/Border/Hover': '#FFFFFF00', - 'Component/Button/Inverted/Border/Disable': '#FFFFFF00', 'Border/Interactive/Default': '#9C8A7E', 'Border/Divider/Default': '#E3D9D1', 'Border/Divider/Subtle': '#F2ECE6', @@ -318,11 +333,11 @@ export const theme = { 'Border/Interactive/Disabled': '#A8A4A2', 'Border/Interactive/Error': '#AD0015', 'Border/Interactive/KeyboardFocus': '#5B8FD4', - 'Component/Button/Muted/Default': '#FFFFFF00', - 'Component/Button/Muted/Hover': '#FFFFFF00', - 'Component/Button/Muted/Disabled': '#FFFFFF1A', - 'Component/Button/Muted/Hover inverted': '#1F1C1B0D', - 'Component/Button/Muted/Disabled inverted': '#1F1C1B1A', + 'Component/Button/Muted/Fill/Default': '#FFFFFF00', + 'Component/Button/Muted/Fill/Hover': '#FFFFFF0D', + 'Component/Button/Muted/Fill/Disabled': '#FFFFFF1A', + 'Component/Button/Muted/Fill/Hover inverted': '#1F1C1B0D', + 'Component/Button/Muted/Fill/Disabled inverted': '#1F1C1B1A', 'Component/Button/Muted/On fill/Default': '#26201E', 'Component/Button/Muted/On fill/Inverted': '#FFFFFF', 'Component/Button/Muted/On fill/Hover Inverted': '#6D000D', diff --git a/packages/design-system/lib/tokens/index.ts b/packages/design-system/lib/tokens/index.ts index 58d392bb1..29219f87b 100644 --- a/packages/design-system/lib/tokens/index.ts +++ b/packages/design-system/lib/tokens/index.ts @@ -23,7 +23,7 @@ export const base = { 'Neutral/Opacity/White/30': { resolved: '#FFFFFF4D' }, 'Neutral/Opacity/White/20': { resolved: '#FFFFFF33' }, 'Neutral/Opacity/White/10': { resolved: '#FFFFFF1A' }, - 'Neutral/Opacity/White/5': { resolved: '#FFFFFF00' }, + 'Neutral/Opacity/White/5': { resolved: '#FFFFFF0D' }, 'Neutral/Opacity/White/0': { resolved: '#FFFFFF00' }, 'Neutral/Opacity/Black/100': { resolved: '#1F1C1B' }, 'Neutral/Opacity/Black/90': { resolved: '#1F1C1BE6' }, @@ -52,9 +52,6 @@ export const base = { 'Text size/4xl': { resolved: 36, alias: 'Size/800-36' }, 'Text size/5xl': { resolved: 56, alias: 'Size/1300-56' }, 'Text size/md': { resolved: 24, alias: 'Size/500-24' }, - 'Font family/Title': { resolved: 'Brandon Text' }, - 'Font family/Body': { resolved: 'Fira sans' }, - 'Font family/Decorative': { resolved: 'Biro Script Plus' }, 'Font weight/Regular': { resolved: 400 }, 'Font weight/Regular bold': { resolved: 450 }, 'Font weight/Medium': { resolved: 500 }, @@ -228,8 +225,10 @@ export const scandic = { 'Tag/Text-Transform': { resolved: 'uppercase' }, 'Link/md/Font fallback': { resolved: 'sans-serif' }, 'Link/md/Letter spacing': { resolved: 0.19 }, + 'Link/md/Text-Decoration': { resolved: 'underline' }, 'Link/sm/Font fallback': { resolved: 'sans-serif' }, 'Link/sm/Letter spacing': { resolved: 0.2 }, + 'Link/sm/Text-Decoration': { resolved: 'underline' }, 'Body/Lead text/Font fallback': { resolved: 'sans-serif' }, 'Body/Paragraph/Font fallback': { resolved: 'sans-serif' }, 'Body/Paragraph/Letter spacing': { resolved: 0.19 }, @@ -240,37 +239,42 @@ export const scandic = { 'Label/Letter spacing': { resolved: 0.17 }, 'Body/Underline/md/Font fallback': { resolved: 'sans-serif' }, 'Body/Underline/md/Letter spacing': { resolved: 0.19 }, + 'Body/Underline/md/Text-Decoration': { resolved: 'underline' }, 'Body/Underline/sm/Font fallback': { resolved: 'sans-serif' }, 'Body/Underline/sm/Letter spacing': { resolved: 0.2 }, + 'Body/Underline/sm/Text-Decoration': { resolved: 'underline' }, 'Utilities/Gradients/10': { resolved: '#F2ECE61A' }, + 'Font family/Scandic/Title': { resolved: 'Brandon Text' }, + 'Font family/Scandic/Body': { resolved: 'Fira sans' }, + 'Font family/Scandic/Decorative': { resolved: 'Biro Script Plus' }, 'Title/lg/Size': { resolved: '', alias: 'Impl-Text size/4xl' }, 'Title/lg/Font weight': { resolved: 900, alias: 'Font weight/Black' }, 'Title/lg/Font family': { resolved: 'Brandon Text', - alias: 'Font family/Title', + alias: 'Font family/Scandic/Title', }, 'Title/md/Size': { resolved: '', alias: 'Impl-Text size/2xl' }, 'Title/md/Font weight': { resolved: 900, alias: 'Font weight/Black' }, 'Title/md/Font family': { resolved: 'Brandon Text', - alias: 'Font family/Title', + alias: 'Font family/Scandic/Title', }, 'Title/sm/Size': { resolved: '', alias: 'Impl-Text size/lg' }, 'Title/sm/Font weight': { resolved: 900, alias: 'Font weight/Black' }, 'Title/sm/Font family': { resolved: 'Brandon Text', - alias: 'Font family/Title', + alias: 'Font family/Scandic/Title', }, 'Title/sm/LowCase/Size': { resolved: '', alias: 'Impl-Text size/lg' }, 'Title/sm/LowCase/Font weight': { resolved: 450, alias: 'Font weight/Regular bold', }, - 'Title/xs/Size': { resolved: '', alias: 'Impl-Text size/sm' }, 'Title/sm/LowCase/Font family': { resolved: 'Brandon Text', - alias: 'Font family/Title', + alias: 'Font family/Scandic/Title', }, + 'Title/xs/Size': { resolved: '', alias: 'Impl-Text size/sm' }, 'Title/Decorative/lg/Size': { resolved: '', alias: 'Impl-Text size/xl' }, 'Title/Decorative/lg/Font weight': { resolved: 400, @@ -278,7 +282,7 @@ export const scandic = { }, 'Title/Decorative/lg/Font family': { resolved: 'Biro Script Plus', - alias: 'Font family/Decorative', + alias: 'Font family/Scandic/Decorative', }, 'Title/Decorative/md/Size': { resolved: '', alias: 'Impl-Text size/sm' }, 'Title/Decorative/md/Font weight': { @@ -287,7 +291,7 @@ export const scandic = { }, 'Title/Decorative/md/Font family': { resolved: 'Biro Script Plus', - alias: 'Font family/Decorative', + alias: 'Font family/Scandic/Decorative', }, 'Title/Subtitle/lg/Size': { resolved: '', alias: 'Impl-Text size/sm' }, 'Title/Subtitle/lg/Font weight': { @@ -296,7 +300,7 @@ export const scandic = { }, 'Title/Subtitle/lg/Font family': { resolved: 'Fira sans', - alias: 'Font family/Body', + alias: 'Font family/Scandic/Body', }, 'Title/Subtitle/md/Size': { resolved: '', alias: 'Impl-Text size/xs' }, 'Title/Subtitle/md/Font weight': { @@ -305,7 +309,7 @@ export const scandic = { }, 'Title/Subtitle/md/Font family': { resolved: 'Fira sans', - alias: 'Font family/Body', + alias: 'Font family/Scandic/Body', }, 'Title/Overline/sm/Size': { resolved: '', alias: 'Impl-Text size/4xs' }, 'Title/Overline/sm/Font weight': { @@ -314,12 +318,12 @@ export const scandic = { }, 'Title/Overline/sm/Font family': { resolved: 'Brandon Text', - alias: 'Font family/Title', + alias: 'Font family/Scandic/Title', }, 'Title/xs/Font weight': { resolved: 900, alias: 'Font weight/Black' }, 'Title/xs/Font family': { resolved: 'Brandon Text', - alias: 'Font family/Title', + alias: 'Font family/Scandic/Title', }, 'Title/md/LowCase/Size': { resolved: '', alias: 'Impl-Text size/2xl' }, 'Title/md/LowCase/Font weight': { @@ -328,22 +332,31 @@ export const scandic = { }, 'Title/md/LowCase/Font family': { resolved: 'Brandon Text', - alias: 'Font family/Title', + alias: 'Font family/Scandic/Title', }, 'Body/Lead text/Size': { resolved: '', alias: 'Impl-Text size/xs' }, 'Tag/Size': { resolved: '', alias: 'Impl-Text size/5xs' }, 'Tag/Font weight': { resolved: 450, alias: 'Font weight/Regular bold' }, - 'Tag/Font family': { resolved: 'Brandon Text', alias: 'Font family/Title' }, + 'Tag/Font family': { + resolved: 'Brandon Text', + alias: 'Font family/Scandic/Title', + }, 'Link/md/Size': { resolved: '', alias: 'Impl-Text size/3xs' }, 'Link/md/Font weight': { resolved: 500, alias: 'Font weight/Medium' }, - 'Link/md/Font family': { resolved: 'Fira sans', alias: 'Font family/Body' }, + 'Link/md/Font family': { + resolved: 'Fira sans', + alias: 'Font family/Scandic/Body', + }, 'Link/sm/Size': { resolved: '', alias: 'Impl-Text size/4xs' }, 'Link/sm/Font weight': { resolved: 500, alias: 'Font weight/Medium' }, - 'Link/sm/Font family': { resolved: 'Fira sans', alias: 'Font family/Body' }, + 'Link/sm/Font family': { + resolved: 'Fira sans', + alias: 'Font family/Scandic/Body', + }, 'Body/Lead text/Font weight': { resolved: 400, alias: 'Font weight/Regular' }, 'Body/Lead text/Font family': { resolved: 'Fira sans', - alias: 'Font family/Body', + alias: 'Font family/Scandic/Body', }, 'Body/Paragraph/Size': { resolved: '', alias: 'Impl-Text size/3xs' }, 'Body/Paragraph/Font weight': { resolved: 400, alias: 'Font weight/Regular' }, @@ -353,7 +366,7 @@ export const scandic = { }, 'Body/Paragraph/Font family': { resolved: 'Fira sans', - alias: 'Font family/Body', + alias: 'Font family/Scandic/Body', }, 'Body/Supporting text/Size': { resolved: '', alias: 'Impl-Text size/4xs' }, 'Body/Supporting text/Font weight': { @@ -366,12 +379,15 @@ export const scandic = { }, 'Body/Supporting text/Font family': { resolved: 'Fira sans', - alias: 'Font family/Body', + alias: 'Font family/Scandic/Body', }, 'Label/Size': { resolved: '', alias: 'Impl-Text size/5xs' }, 'Label/Font weight': { resolved: 400, alias: 'Font weight/Regular' }, 'Label/Font weight 2': { resolved: 500, alias: 'Font weight/Medium' }, - 'Label/Font family': { resolved: 'Fira sans', alias: 'Font family/Body' }, + 'Label/Font family': { + resolved: 'Fira sans', + alias: 'Font family/Scandic/Body', + }, 'Body/Underline/md/Size': { resolved: '', alias: 'Impl-Text size/3xs' }, 'Body/Underline/md/Font weight': { resolved: 400, @@ -379,7 +395,7 @@ export const scandic = { }, 'Body/Underline/md/Font family': { resolved: 'Fira sans', - alias: 'Font family/Body', + alias: 'Font family/Scandic/Body', }, 'Body/Underline/sm/Size': { resolved: '', alias: 'Impl-Text size/4xs' }, 'Body/Underline/sm/Font weight': { @@ -388,7 +404,7 @@ export const scandic = { }, 'Body/Underline/sm/Font family': { resolved: 'Fira sans', - alias: 'Font family/Body', + alias: 'Font family/Scandic/Body', }, 'Text/Heading': { resolved: '#4D001B', alias: 'Scandic/Red/100' }, 'Text/Default': { resolved: '#26201E', alias: 'Scandic/Grey/100' }, @@ -413,7 +429,7 @@ export const scandic = { resolved: '#A8A4A2', alias: 'Scandic/Grey/40', }, - 'Text/Interactive/Focus': { resolved: '#26201E', alias: 'Scandic/Grey/100' }, + 'Text/Interactive/Focus': { resolved: '#57514E', alias: 'Scandic/Grey/80' }, 'Text/Interactive/Error': { resolved: '#AD0015', alias: 'Scandic/Red/70' }, 'Text/Interactive/Placeholder': { resolved: '#787472', @@ -423,6 +439,26 @@ export const scandic = { resolved: '#4D001B', alias: 'Scandic/Red/100', }, + 'Text/Feedback/Information Accent': { + resolved: '#284EA0', + alias: 'Scandic/Blue/70', + }, + 'Text/Feedback/Succes Accent': { + resolved: '#348337', + alias: 'Scandic/Green/60', + }, + 'Text/Feedback/Warning Accent': { + resolved: '#D17308', + alias: 'Scandic/Yellow/60', + }, + 'Text/Feedback/Error Accent': { + resolved: '#AD0015', + alias: 'Scandic/Red/70', + }, + 'Text/Feedback/Neutral Accent': { + resolved: '#787472', + alias: 'Scandic/Grey/60', + }, 'Text/Brand/OnAccent/Default': { resolved: '#26201E', alias: 'Scandic/Grey/100', @@ -483,15 +519,15 @@ export const scandic = { alias: 'Scandic/Peach/10', }, 'Surface/Primary/OnSurface/Default': { - resolved: '#FAF6F2', - alias: 'Scandic/Beige/00', + resolved: '#F9F6F4', + alias: 'Scandic/Grey/00', }, 'Surface/Primary/Disabled': { resolved: '#EBE8E6', alias: 'Scandic/Grey/10' }, 'Surface/Secondary/Default': { resolved: '#F2ECE6', alias: 'Scandic/Beige/10', }, - 'Surface/Secondary/Secondary': { + 'Surface/Secondary/Default dark': { resolved: '#E3D9D1', alias: 'Scandic/Beige/20', }, @@ -598,6 +634,10 @@ export const scandic = { resolved: '#8F4350', alias: 'Scandic/Peach/80', }, + 'Icon/Interactive/Accent': { + resolved: '#CD0921', + alias: 'Scandic/Red/Default', + }, 'Icon/Interactive/Disabled': { resolved: '#A8A4A2', alias: 'Scandic/Grey/40', @@ -617,16 +657,17 @@ export const scandic = { 'Icon/Inverted': { resolved: '#FFFFFF', alias: 'Neutral/Opacity/White/100' }, 'Overlay/10': { resolved: '#1F1C1B1A', alias: 'Neutral/Opacity/Black/10' }, 'Overlay/20': { resolved: '#1F1C1B33', alias: 'Neutral/Opacity/Black/20' }, + 'Overlay/30': { resolved: '#1F1C1B4D', alias: 'Neutral/Opacity/Black/30' }, 'Overlay/40': { resolved: '#1F1C1B66', alias: 'Neutral/Opacity/Black/40' }, 'Overlay/60': { resolved: '#1F1C1B99', alias: 'Neutral/Opacity/Black/60' }, 'Overlay/80': { resolved: '#1F1C1BCC', alias: 'Neutral/Opacity/Black/80' }, 'Overlay/90': { resolved: '#1F1C1BE6', alias: 'Neutral/Opacity/Black/90' }, - 'Component/Button/Brand/Primary/Default': { + 'Component/Button/Brand/Primary/Fill/Default': { resolved: '#CD0921', alias: 'Scandic/Red/Default', }, - 'Component/Button/Brand/Primary/Hover': { resolved: '#ba1721' }, - 'Component/Button/Brand/Primary/Disabled': { + 'Component/Button/Brand/Primary/Fill/Hover': { resolved: '#a81e20' }, + 'Component/Button/Brand/Primary/Fill/Disabled': { resolved: '#1F1C1B1A', alias: 'Neutral/Opacity/Black/10', }, @@ -654,23 +695,23 @@ export const scandic = { resolved: '#FFFFFF00', alias: 'Neutral/Opacity/White/0', }, - 'Component/Button/Brand/Secondary/Default': { + 'Component/Button/Brand/Secondary/Fill/Default': { resolved: '#FFFFFF00', alias: 'Neutral/Opacity/White/0', }, - 'Component/Button/Brand/Secondary/Hover': { + 'Component/Button/Brand/Secondary/Fill/Hover': { resolved: '#FFFFFF00', alias: 'Neutral/Opacity/White/0', }, - 'Component/Button/Brand/Secondary/Inverted': { + 'Component/Button/Brand/Secondary/Fill/Inverted': { resolved: '#FFFFFF', alias: 'Neutral/Opacity/White/100', }, - 'Component/Button/Brand/Secondary/Hover Inverted': { + 'Component/Button/Brand/Secondary/Fill/Hover Inverted': { resolved: '#4D001B', alias: 'Scandic/Red/100', }, - 'Component/Button/Brand/Secondary/Disabled': { + 'Component/Button/Brand/Secondary/Fill/Disabled': { resolved: '#1F1C1B1A', alias: 'Neutral/Opacity/Black/10', }, @@ -686,6 +727,9 @@ export const scandic = { resolved: '#FFFFFF', alias: 'Neutral/Opacity/White/100', }, + 'Component/Button/Brand/Secondary/On fill/Hover inverted': { + resolved: '#cbb0b3', + }, 'Component/Button/Brand/Secondary/On fill/Disabled': { resolved: '#A8A4A2', alias: 'Scandic/Grey/40', @@ -703,18 +747,18 @@ export const scandic = { alias: 'Neutral/Opacity/White/100', }, 'Component/Button/Brand/Secondary/Border/Hover inverted': { - resolved: '#eee4e5', + resolved: '#a87e83', }, 'Component/Button/Brand/Secondary/Border/Disabled': { resolved: '#1F1C1B1A', alias: 'Neutral/Opacity/Black/10', }, - 'Component/Button/Brand/Tertiary/Default': { + 'Component/Button/Brand/Tertiary/Fill/Default': { resolved: '#4D001B', alias: 'Scandic/Red/100', }, - 'Component/Button/Brand/Tertiary/Hover': { resolved: '#601e2d' }, - 'Component/Button/Brand/Tertiary/Disabled': { + 'Component/Button/Brand/Tertiary/Fill/Hover': { resolved: '#601e2d' }, + 'Component/Button/Brand/Tertiary/Fill/Disabled': { resolved: '#1F1C1B1A', alias: 'Neutral/Opacity/Black/10', }, @@ -742,23 +786,35 @@ export const scandic = { resolved: '#FFFFFF00', alias: 'Neutral/Opacity/White/0', }, - 'Component/Button/Inverted/Default': { + 'Component/Button/Inverted/Fill/Default': { resolved: '#FFFFFF', alias: 'Neutral/Opacity/White/100', }, - 'Component/Button/Inverted/Faded': { + 'Component/Button/Inverted/Fill/Faded': { resolved: '#FFFFFFE6', alias: 'Neutral/Opacity/White/90', }, - 'Component/Button/Inverted/Hover': { resolved: '#f2f2f2' }, - 'Component/Button/Inverted/Hover Inverted': { + 'Component/Button/Inverted/Fill/Hover': { resolved: '#e6e5e5' }, + 'Component/Button/Inverted/Fill/Hover Inverted': { resolved: '#4D001B', alias: 'Scandic/Red/100', }, - 'Component/Button/Inverted/Disabled': { + 'Component/Button/Inverted/Fill/Disabled': { resolved: '#1F1C1B1A', alias: 'Neutral/Opacity/Black/10', }, + 'Component/Button/Inverted/Border/Default': { + resolved: '#FFFFFF00', + alias: 'Neutral/Opacity/White/0', + }, + 'Component/Button/Inverted/Border/Hover': { + resolved: '#FFFFFF00', + alias: 'Neutral/Opacity/White/0', + }, + 'Component/Button/Inverted/Border/Disable': { + resolved: '#FFFFFF00', + alias: 'Neutral/Opacity/White/0', + }, 'Component/Button/Inverted/On fill/Default': { resolved: '#4D001B', alias: 'Scandic/Red/100', @@ -772,18 +828,6 @@ export const scandic = { resolved: '#A8A4A2', alias: 'Scandic/Grey/40', }, - 'Component/Button/Inverted/Border/Default': { - resolved: '#FFFFFF00', - alias: 'Neutral/Opacity/White/0', - }, - 'Component/Button/Inverted/Border/Hover': { - resolved: '#FFFFFF00', - alias: 'Neutral/Opacity/White/0', - }, - 'Component/Button/Inverted/Border/Disable': { - resolved: '#FFFFFF00', - alias: 'Neutral/Opacity/White/0', - }, 'Border/Interactive/Default': { resolved: '#9C8A7E', alias: 'Scandic/Beige/50', @@ -824,23 +868,23 @@ export const scandic = { resolved: '#5B8FD4', alias: 'Scandic/Blue/50', }, - 'Component/Button/Muted/Default': { + 'Component/Button/Muted/Fill/Default': { resolved: '#FFFFFF00', alias: 'Neutral/Opacity/White/0', }, - 'Component/Button/Muted/Hover': { - resolved: '#FFFFFF00', + 'Component/Button/Muted/Fill/Hover': { + resolved: '#FFFFFF0D', alias: 'Neutral/Opacity/White/5', }, - 'Component/Button/Muted/Disabled': { + 'Component/Button/Muted/Fill/Disabled': { resolved: '#FFFFFF1A', alias: 'Neutral/Opacity/White/10', }, - 'Component/Button/Muted/Hover inverted': { + 'Component/Button/Muted/Fill/Hover inverted': { resolved: '#1F1C1B0D', alias: 'Neutral/Opacity/Black/5', }, - 'Component/Button/Muted/Disabled inverted': { + 'Component/Button/Muted/Fill/Disabled inverted': { resolved: '#1F1C1B1A', alias: 'Neutral/Opacity/Black/10', }, @@ -958,8 +1002,10 @@ export const scandicGo = { 'Tag/Text-Transform': { resolved: 'unset' }, 'Link/md/Font fallback': { resolved: 'sans-serif' }, 'Link/md/Letter spacing': { resolved: 0.19 }, + 'Link/md/Text-Decoration': { resolved: 'underline' }, 'Link/sm/Font fallback': { resolved: 'sans-serif' }, 'Link/sm/Letter spacing': { resolved: 0.2 }, + 'Link/sm/Text-Decoration': { resolved: 'underline' }, 'Body/Lead text/Font fallback': { resolved: 'sans-serif' }, 'Body/Paragraph/Font fallback': { resolved: 'sans-serif' }, 'Body/Paragraph/Letter spacing': { resolved: 0.19 }, @@ -970,8 +1016,10 @@ export const scandicGo = { 'Label/Letter spacing': { resolved: 0.17 }, 'Body/Underline/md/Font fallback': { resolved: 'sans-serif' }, 'Body/Underline/md/Letter spacing': { resolved: 0.19 }, + 'Body/Underline/md/Text-Decoration': { resolved: 'underline' }, 'Body/Underline/sm/Font fallback': { resolved: 'sans-serif' }, 'Body/Underline/sm/Letter spacing': { resolved: 0.2 }, + 'Body/Underline/sm/Text-Decoration': { resolved: 'underline' }, 'Utilities/Gradients/10': { resolved: '#2D163A1A' }, 'Font family/Scandic Go/Title': { resolved: 'Neue Haas Grotesk Display Pro' }, 'Font family/Scandic Go/Body': { resolved: 'Fira sans' }, @@ -999,11 +1047,11 @@ export const scandicGo = { resolved: 500, alias: 'Font weight/Medium', }, - 'Title/xs/Size': { resolved: '', alias: 'Impl-Text size/sm' }, 'Title/sm/LowCase/Font family': { resolved: 'Neue Haas Grotesk Display Pro', alias: 'Font family/Scandic Go/Title', }, + 'Title/xs/Size': { resolved: '', alias: 'Impl-Text size/sm' }, 'Title/Decorative/lg/Size': { resolved: '', alias: 'Impl-Text size/xl' }, 'Title/Decorative/lg/Font weight': { resolved: 500, @@ -1061,7 +1109,7 @@ export const scandicGo = { }, 'Title/md/LowCase/Font family': { resolved: 'Brandon Text', - alias: 'Font family/Title', + alias: 'Font family/Scandic/Title', }, 'Body/Lead text/Size': { resolved: '', alias: 'Impl-Text size/xs' }, 'Tag/Size': { resolved: '', alias: 'Impl-Text size/5xs' }, @@ -1168,6 +1216,23 @@ export const scandicGo = { resolved: '#2D163A', alias: 'Scandic Go/Purple/100', }, + 'Text/Feedback/Information Accent': { + resolved: '#284EA0', + alias: 'Scandic/Blue/70', + }, + 'Text/Feedback/Succes Accent': { + resolved: '#348337', + alias: 'Scandic/Green/60', + }, + 'Text/Feedback/Warning Accent': { + resolved: '#D17308', + alias: 'Scandic/Yellow/60', + }, + 'Text/Feedback/Error Accent': { + resolved: '#AD0015', + alias: 'Scandic/Red/70', + }, + 'Text/Feedback/Neutral Accent': { resolved: '#747474', alias: 'Neutral/50' }, 'Text/Brand/OnAccent/Default': { resolved: '#2D163A', alias: 'Scandic Go/Purple/100', @@ -1236,9 +1301,9 @@ export const scandicGo = { resolved: '#F0EDE4', alias: 'Scandic Go/Beige/10', }, - 'Surface/Secondary/Secondary': { - resolved: '#F0EDE4', - alias: 'Scandic Go/Beige/10', + 'Surface/Secondary/Default dark': { + resolved: '#E0DCCE', + alias: 'Scandic Go/Beige/20', }, 'Surface/Secondary/Hover': { resolved: '#e4e1d9' }, 'Surface/Brand/Accent/Default': { @@ -1349,6 +1414,10 @@ export const scandicGo = { resolved: '#5E2A8C', alias: 'Scandic Go/Purple/80', }, + 'Icon/Interactive/Accent': { + resolved: '#5E2A8C', + alias: 'Scandic Go/Purple/80', + }, 'Icon/Interactive/Disabled': { resolved: '#BFBFBF', alias: 'Neutral/30' }, 'Icon/Interactive/Placeholder': { resolved: '#747474', alias: 'Neutral/50' }, 'Icon/Feedback/Information': { @@ -1362,16 +1431,17 @@ export const scandicGo = { 'Icon/Inverted': { resolved: '#FFFFFF', alias: 'Neutral/Opacity/White/100' }, 'Overlay/10': { resolved: '#1F1C1B1A', alias: 'Neutral/Opacity/Black/10' }, 'Overlay/20': { resolved: '#1F1C1B33', alias: 'Neutral/Opacity/Black/20' }, + 'Overlay/30': { resolved: '#1F1C1B33', alias: 'Neutral/Opacity/Black/20' }, 'Overlay/40': { resolved: '#1F1C1B66', alias: 'Neutral/Opacity/Black/40' }, 'Overlay/60': { resolved: '#1F1C1B99', alias: 'Neutral/Opacity/Black/60' }, 'Overlay/80': { resolved: '#1F1C1BCC', alias: 'Neutral/Opacity/Black/80' }, 'Overlay/90': { resolved: '#1F1C1BE6', alias: 'Neutral/Opacity/Black/90' }, - 'Component/Button/Brand/Primary/Default': { + 'Component/Button/Brand/Primary/Fill/Default': { resolved: '#DCD7FF', alias: 'Scandic Go/Purple/10', }, - 'Component/Button/Brand/Primary/Hover': { resolved: '#c7c2e5' }, - 'Component/Button/Brand/Primary/Disabled': { + 'Component/Button/Brand/Primary/Fill/Hover': { resolved: '#c7c2e5' }, + 'Component/Button/Brand/Primary/Fill/Disabled': { resolved: '#1F1C1B1A', alias: 'Neutral/Opacity/Black/10', }, @@ -1380,8 +1450,8 @@ export const scandicGo = { alias: 'Scandic Go/Purple/100', }, 'Component/Button/Brand/Primary/On fill/Hover': { - resolved: '#FFFFFF', - alias: 'Neutral/Opacity/White/100', + resolved: '#2D163A', + alias: 'Scandic Go/Purple/100', }, 'Component/Button/Brand/Primary/On fill/Disabled': { resolved: '#8C8C8C', @@ -1399,23 +1469,23 @@ export const scandicGo = { resolved: '#FFFFFF00', alias: 'Neutral/Opacity/White/0', }, - 'Component/Button/Brand/Secondary/Default': { + 'Component/Button/Brand/Secondary/Fill/Default': { resolved: '#FFFFFF00', alias: 'Neutral/Opacity/White/0', }, - 'Component/Button/Brand/Secondary/Hover': { + 'Component/Button/Brand/Secondary/Fill/Hover': { resolved: '#FFFFFF00', alias: 'Neutral/Opacity/White/0', }, - 'Component/Button/Brand/Secondary/Inverted': { + 'Component/Button/Brand/Secondary/Fill/Inverted': { resolved: '#FFFFFF', alias: 'Neutral/Opacity/White/100', }, - 'Component/Button/Brand/Secondary/Hover Inverted': { + 'Component/Button/Brand/Secondary/Fill/Hover Inverted': { resolved: '#2D163A', alias: 'Scandic Go/Purple/100', }, - 'Component/Button/Brand/Secondary/Disabled': { + 'Component/Button/Brand/Secondary/Fill/Disabled': { resolved: '#1F1C1B1A', alias: 'Neutral/Opacity/Black/10', }, @@ -1431,6 +1501,9 @@ export const scandicGo = { resolved: '#FFFFFF', alias: 'Neutral/Opacity/White/100', }, + 'Component/Button/Brand/Secondary/On fill/Hover inverted': { + resolved: '#bbb2bf', + }, 'Component/Button/Brand/Secondary/On fill/Disabled': { resolved: '#8C8C8C', alias: 'Neutral/40', @@ -1448,18 +1521,18 @@ export const scandicGo = { alias: 'Neutral/Opacity/White/100', }, 'Component/Button/Brand/Secondary/Border/Hover inverted': { - resolved: '#e8e5e9', + resolved: '#908197', }, 'Component/Button/Brand/Secondary/Border/Disabled': { resolved: '#1F1C1B1A', alias: 'Neutral/Opacity/Black/10', }, - 'Component/Button/Brand/Tertiary/Default': { + 'Component/Button/Brand/Tertiary/Fill/Default': { resolved: '#2D163A', alias: 'Scandic Go/Purple/100', }, - 'Component/Button/Brand/Tertiary/Hover': { resolved: '#402a4b' }, - 'Component/Button/Brand/Tertiary/Disabled': { + 'Component/Button/Brand/Tertiary/Fill/Hover': { resolved: '#402a4b' }, + 'Component/Button/Brand/Tertiary/Fill/Disabled': { resolved: '#1F1C1B1A', alias: 'Neutral/Opacity/Black/10', }, @@ -1487,23 +1560,35 @@ export const scandicGo = { resolved: '#FFFFFF00', alias: 'Neutral/Opacity/White/0', }, - 'Component/Button/Inverted/Default': { + 'Component/Button/Inverted/Fill/Default': { resolved: '#FFFFFF', alias: 'Neutral/Opacity/White/100', }, - 'Component/Button/Inverted/Faded': { + 'Component/Button/Inverted/Fill/Faded': { resolved: '#FFFFFFE6', alias: 'Neutral/Opacity/White/90', }, - 'Component/Button/Inverted/Hover': { resolved: '#f2f2f2' }, - 'Component/Button/Inverted/Hover Inverted': { + 'Component/Button/Inverted/Fill/Hover': { resolved: '#e6e5e5' }, + 'Component/Button/Inverted/Fill/Hover Inverted': { resolved: '#DCD7FF', alias: 'Scandic Go/Purple/10', }, - 'Component/Button/Inverted/Disabled': { + 'Component/Button/Inverted/Fill/Disabled': { resolved: '#1F1C1B1A', alias: 'Neutral/Opacity/Black/10', }, + 'Component/Button/Inverted/Border/Default': { + resolved: '#FFFFFF00', + alias: 'Neutral/Opacity/White/0', + }, + 'Component/Button/Inverted/Border/Hover': { + resolved: '#FFFFFF00', + alias: 'Neutral/Opacity/White/0', + }, + 'Component/Button/Inverted/Border/Disable': { + resolved: '#FFFFFF00', + alias: 'Neutral/Opacity/White/0', + }, 'Component/Button/Inverted/On fill/Default': { resolved: '#2D163A', alias: 'Scandic Go/Purple/100', @@ -1517,18 +1602,6 @@ export const scandicGo = { resolved: '#8C8C8C', alias: 'Neutral/40', }, - 'Component/Button/Inverted/Border/Default': { - resolved: '#FFFFFF00', - alias: 'Neutral/Opacity/White/0', - }, - 'Component/Button/Inverted/Border/Hover': { - resolved: '#FFFFFF00', - alias: 'Neutral/Opacity/White/0', - }, - 'Component/Button/Inverted/Border/Disable': { - resolved: '#FFFFFF00', - alias: 'Neutral/Opacity/White/0', - }, 'Border/Interactive/Default': { resolved: '#BFBFBF', alias: 'Neutral/30' }, 'Border/Divider/Default': { resolved: '#D9D9D9', alias: 'Neutral/20' }, 'Border/Divider/Subtle': { resolved: '#E9E9E9', alias: 'Neutral/15' }, @@ -1557,20 +1630,17 @@ export const scandicGo = { resolved: '#5B8FD4', alias: 'Scandic/Blue/50', }, - 'Component/Button/Muted/Default': { + 'Component/Button/Muted/Fill/Default': { resolved: '#FFFFFF', alias: 'Neutral/Opacity/White/100', }, - 'Component/Button/Muted/Hover': { - resolved: '#FFFFFF00', - alias: 'Neutral/Opacity/White/5', - }, - 'Component/Button/Muted/Disabled': { + 'Component/Button/Muted/Fill/Hover': { resolved: '#ffffff' }, + 'Component/Button/Muted/Fill/Disabled': { resolved: '#FFFFFF1A', alias: 'Neutral/Opacity/White/10', }, - 'Component/Button/Muted/Hover inverted': { resolved: '#f2f2f2' }, - 'Component/Button/Muted/Disabled inverted': { + 'Component/Button/Muted/Fill/Hover inverted': { resolved: '#f2f2f2' }, + 'Component/Button/Muted/Fill/Disabled inverted': { resolved: '#D9D9D9', alias: 'Neutral/20', }, @@ -1673,8 +1743,10 @@ export const downtownCamper = { 'Tag/Text-Transform': { resolved: 'unset' }, 'Link/md/Font fallback': { resolved: 'sans-serif' }, 'Link/md/Letter spacing': { resolved: 0.19 }, + 'Link/md/Text-Decoration': { resolved: 'underline' }, 'Link/sm/Font fallback': { resolved: 'sans-serif' }, 'Link/sm/Letter spacing': { resolved: 0.2 }, + 'Link/sm/Text-Decoration': { resolved: 'underline' }, 'Body/Lead text/Font fallback': { resolved: 'sans-serif' }, 'Body/Paragraph/Font fallback': { resolved: 'sans-serif' }, 'Body/Paragraph/Letter spacing': { resolved: 0.19 }, @@ -1685,8 +1757,10 @@ export const downtownCamper = { 'Label/Letter spacing': { resolved: 0.17 }, 'Body/Underline/md/Font fallback': { resolved: 'sans-serif' }, 'Body/Underline/md/Letter spacing': { resolved: 0.19 }, + 'Body/Underline/md/Text-Decoration': { resolved: 'underline' }, 'Body/Underline/sm/Font fallback': { resolved: 'sans-serif' }, 'Body/Underline/sm/Letter spacing': { resolved: 0.2 }, + 'Body/Underline/sm/Text-Decoration': { resolved: 'underline' }, 'Surface/Brand/Primary 1/OnSurface/Default': { resolved: '#FFFFFF' }, 'Surface/Brand/Primary 1/OnSurface/Accent': { resolved: '#FFFFFF' }, 'Surface/Brand/Primary 1/OnSurface/Accent Secondary': { resolved: '#FFFFFF' }, @@ -1721,11 +1795,11 @@ export const downtownCamper = { resolved: 400, alias: 'Font weight/Regular', }, - 'Title/xs/Size': { resolved: '', alias: 'Impl-Text size/sm' }, 'Title/sm/LowCase/Font family': { resolved: 'Gotham', alias: 'Font family/Downtown Camper/Title', }, + 'Title/xs/Size': { resolved: '', alias: 'Impl-Text size/sm' }, 'Title/Decorative/lg/Size': { resolved: '', alias: 'Impl-Text size/xs' }, 'Title/Decorative/lg/Font weight': { resolved: 400, @@ -1884,6 +1958,23 @@ export const downtownCamper = { resolved: '#FFFFFF', alias: 'Neutral/Opacity/White/100', }, + 'Text/Feedback/Information Accent': { + resolved: '#284EA0', + alias: 'Scandic/Blue/70', + }, + 'Text/Feedback/Succes Accent': { + resolved: '#348337', + alias: 'Scandic/Green/60', + }, + 'Text/Feedback/Warning Accent': { + resolved: '#D17308', + alias: 'Scandic/Yellow/60', + }, + 'Text/Feedback/Error Accent': { + resolved: '#AD0015', + alias: 'Scandic/Red/70', + }, + 'Text/Feedback/Neutral Accent': { resolved: '#747474', alias: 'Neutral/50' }, 'Text/Brand/OnAccent/Default': { resolved: '#FFFFFF', alias: 'Neutral/Opacity/White/100', @@ -1946,7 +2037,10 @@ export const downtownCamper = { }, 'Surface/Primary/Disabled': { resolved: '#E9E9E9', alias: 'Neutral/15' }, 'Surface/Secondary/Default': { resolved: '#F0F0F0', alias: 'Neutral/10' }, - 'Surface/Secondary/Secondary': { resolved: '#F0F0F0', alias: 'Neutral/10' }, + 'Surface/Secondary/Default dark': { + resolved: '#D9D9D9', + alias: 'Neutral/20', + }, 'Surface/Secondary/Hover': { resolved: '#e4e4e4' }, 'Surface/Brand/Accent/Default': { resolved: '#D3952D', @@ -2034,6 +2128,10 @@ export const downtownCamper = { resolved: '#834722', alias: 'Signature/Downtown Camper/Russet/80', }, + 'Icon/Interactive/Accent': { + resolved: '#834722', + alias: 'Signature/Downtown Camper/Russet/80', + }, 'Icon/Interactive/Disabled': { resolved: '#BFBFBF', alias: 'Neutral/30' }, 'Icon/Interactive/Placeholder': { resolved: '#747474', alias: 'Neutral/50' }, 'Icon/Feedback/Information': { @@ -2047,16 +2145,17 @@ export const downtownCamper = { 'Icon/Inverted': { resolved: '#FFFFFF', alias: 'Neutral/Opacity/White/100' }, 'Overlay/10': { resolved: '#1F1C1B1A', alias: 'Neutral/Opacity/Black/10' }, 'Overlay/20': { resolved: '#1F1C1B33', alias: 'Neutral/Opacity/Black/20' }, + 'Overlay/30': { resolved: '#1F1C1B33', alias: 'Neutral/Opacity/Black/20' }, 'Overlay/40': { resolved: '#1F1C1B66', alias: 'Neutral/Opacity/Black/40' }, 'Overlay/60': { resolved: '#1F1C1B99', alias: 'Neutral/Opacity/Black/60' }, 'Overlay/80': { resolved: '#1F1C1BCC', alias: 'Neutral/Opacity/Black/80' }, 'Overlay/90': { resolved: '#1F1C1BE6', alias: 'Neutral/Opacity/Black/90' }, - 'Component/Button/Brand/Primary/Default': { + 'Component/Button/Brand/Primary/Fill/Default': { resolved: '#834722', alias: 'Signature/Downtown Camper/Russet/80', }, - 'Component/Button/Brand/Primary/Hover': { resolved: '#915836' }, - 'Component/Button/Brand/Primary/Disabled': { + 'Component/Button/Brand/Primary/Fill/Hover': { resolved: '#9e694a' }, + 'Component/Button/Brand/Primary/Fill/Disabled': { resolved: '#1F1C1B1A', alias: 'Neutral/Opacity/Black/10', }, @@ -2084,23 +2183,23 @@ export const downtownCamper = { resolved: '#FFFFFF00', alias: 'Neutral/Opacity/White/0', }, - 'Component/Button/Brand/Secondary/Default': { + 'Component/Button/Brand/Secondary/Fill/Default': { resolved: '#FFFFFF00', alias: 'Neutral/Opacity/White/0', }, - 'Component/Button/Brand/Secondary/Hover': { + 'Component/Button/Brand/Secondary/Fill/Hover': { resolved: '#FFFFFF00', alias: 'Neutral/Opacity/White/0', }, - 'Component/Button/Brand/Secondary/Inverted': { + 'Component/Button/Brand/Secondary/Fill/Inverted': { resolved: '#FFFFFF', alias: 'Neutral/Opacity/White/100', }, - 'Component/Button/Brand/Secondary/Hover Inverted': { + 'Component/Button/Brand/Secondary/Fill/Hover Inverted': { resolved: '#3C4336', alias: 'Signature/Downtown Camper/Lunar green/80', }, - 'Component/Button/Brand/Secondary/Disabled': { + 'Component/Button/Brand/Secondary/Fill/Disabled': { resolved: '#1F1C1B1A', alias: 'Neutral/Opacity/Black/10', }, @@ -2116,6 +2215,9 @@ export const downtownCamper = { resolved: '#FFFFFF', alias: 'Neutral/Opacity/White/100', }, + 'Component/Button/Brand/Secondary/On fill/Hover inverted': { + resolved: '#ddc5b7', + }, 'Component/Button/Brand/Secondary/On fill/Disabled': { resolved: '#8C8C8C', alias: 'Neutral/40', @@ -2133,18 +2235,18 @@ export const downtownCamper = { alias: 'Neutral/Opacity/White/100', }, 'Component/Button/Brand/Secondary/Border/Hover inverted': { - resolved: '#f4ebe7', + resolved: '#c59f8a', }, 'Component/Button/Brand/Secondary/Border/Disabled': { resolved: '#1F1C1B1A', alias: 'Neutral/Opacity/Black/10', }, - 'Component/Button/Brand/Tertiary/Default': { + 'Component/Button/Brand/Tertiary/Fill/Default': { resolved: '#3C4336', alias: 'Signature/Downtown Camper/Lunar green/80', }, - 'Component/Button/Brand/Tertiary/Hover': { resolved: '#4d5448' }, - 'Component/Button/Brand/Tertiary/Disabled': { + 'Component/Button/Brand/Tertiary/Fill/Hover': { resolved: '#4d5448' }, + 'Component/Button/Brand/Tertiary/Fill/Disabled': { resolved: '#1F1C1B1A', alias: 'Neutral/Opacity/Black/10', }, @@ -2172,23 +2274,35 @@ export const downtownCamper = { resolved: '#FFFFFF00', alias: 'Neutral/Opacity/White/0', }, - 'Component/Button/Inverted/Default': { + 'Component/Button/Inverted/Fill/Default': { resolved: '#FFFFFF', alias: 'Neutral/Opacity/White/100', }, - 'Component/Button/Inverted/Faded': { + 'Component/Button/Inverted/Fill/Faded': { resolved: '#FFFFFFE6', alias: 'Neutral/Opacity/White/90', }, - 'Component/Button/Inverted/Hover': { resolved: '#f2f2f2' }, - 'Component/Button/Inverted/Hover Inverted': { + 'Component/Button/Inverted/Fill/Hover': { resolved: '#e6e5e5' }, + 'Component/Button/Inverted/Fill/Hover Inverted': { resolved: '#3C4336', alias: 'Signature/Downtown Camper/Lunar green/80', }, - 'Component/Button/Inverted/Disabled': { + 'Component/Button/Inverted/Fill/Disabled': { resolved: '#1F1C1B1A', alias: 'Neutral/Opacity/Black/10', }, + 'Component/Button/Inverted/Border/Default': { + resolved: '#FFFFFF00', + alias: 'Neutral/Opacity/White/0', + }, + 'Component/Button/Inverted/Border/Hover': { + resolved: '#FFFFFF00', + alias: 'Neutral/Opacity/White/0', + }, + 'Component/Button/Inverted/Border/Disable': { + resolved: '#FFFFFF00', + alias: 'Neutral/Opacity/White/0', + }, 'Component/Button/Inverted/On fill/Default': { resolved: '#834722', alias: 'Signature/Downtown Camper/Russet/80', @@ -2202,18 +2316,6 @@ export const downtownCamper = { resolved: '#8C8C8C', alias: 'Neutral/40', }, - 'Component/Button/Inverted/Border/Default': { - resolved: '#FFFFFF00', - alias: 'Neutral/Opacity/White/0', - }, - 'Component/Button/Inverted/Border/Hover': { - resolved: '#FFFFFF00', - alias: 'Neutral/Opacity/White/0', - }, - 'Component/Button/Inverted/Border/Disable': { - resolved: '#FFFFFF00', - alias: 'Neutral/Opacity/White/0', - }, 'Border/Interactive/Default': { resolved: '#BFBFBF', alias: 'Neutral/30' }, 'Border/Divider/Default': { resolved: '#D9D9D9', alias: 'Neutral/20' }, 'Border/Divider/Subtle': { resolved: '#E9E9E9', alias: 'Neutral/15' }, @@ -2242,23 +2344,23 @@ export const downtownCamper = { resolved: '#5B8FD4', alias: 'Scandic/Blue/50', }, - 'Component/Button/Muted/Default': { + 'Component/Button/Muted/Fill/Default': { resolved: '#FFFFFF00', alias: 'Neutral/Opacity/White/0', }, - 'Component/Button/Muted/Hover': { - resolved: '#FFFFFF00', + 'Component/Button/Muted/Fill/Hover': { + resolved: '#FFFFFF0D', alias: 'Neutral/Opacity/White/5', }, - 'Component/Button/Muted/Disabled': { + 'Component/Button/Muted/Fill/Disabled': { resolved: '#FFFFFF1A', alias: 'Neutral/Opacity/White/10', }, - 'Component/Button/Muted/Hover inverted': { + 'Component/Button/Muted/Fill/Hover inverted': { resolved: '#1F1C1B0D', alias: 'Neutral/Opacity/Black/5', }, - 'Component/Button/Muted/Disabled inverted': { + 'Component/Button/Muted/Fill/Disabled inverted': { resolved: '#D9D9D9', alias: 'Neutral/20', }, @@ -2358,8 +2460,10 @@ export const haymarket = { 'Tag/Text-Transform': { resolved: 'uppercase' }, 'Link/md/Font fallback': { resolved: 'sans-serif' }, 'Link/md/Letter spacing': { resolved: 0.19 }, + 'Link/md/Text-Decoration': { resolved: 'underline' }, 'Link/sm/Font fallback': { resolved: 'sans-serif' }, 'Link/sm/Letter spacing': { resolved: 0.2 }, + 'Link/sm/Text-Decoration': { resolved: 'underline' }, 'Body/Lead text/Font fallback': { resolved: 'sans-serif' }, 'Body/Paragraph/Font fallback': { resolved: 'sans-serif' }, 'Body/Paragraph/Letter spacing': { resolved: 0.19 }, @@ -2370,8 +2474,10 @@ export const haymarket = { 'Label/Letter spacing': { resolved: 0.17 }, 'Body/Underline/md/Font fallback': { resolved: 'sans-serif' }, 'Body/Underline/md/Letter spacing': { resolved: 0.19 }, + 'Body/Underline/md/Text-Decoration': { resolved: 'underline' }, 'Body/Underline/sm/Font fallback': { resolved: 'sans-serif' }, 'Body/Underline/sm/Letter spacing': { resolved: 0.2 }, + 'Body/Underline/sm/Text-Decoration': { resolved: 'underline' }, 'Surface/Brand/Primary 1/OnSurface/Default': { resolved: '#FFFFFF' }, 'Surface/Brand/Primary 1/OnSurface/Accent': { resolved: '#FFFFFF' }, 'Surface/Brand/Primary 1/OnSurface/Accent Secondary': { resolved: '#FFFFFF' }, @@ -2406,11 +2512,11 @@ export const haymarket = { resolved: 400, alias: 'Font weight/Regular', }, - 'Title/xs/Size': { resolved: '', alias: 'Impl-Text size/sm' }, 'Title/sm/LowCase/Font family': { resolved: 'Prumo text', alias: 'Font family/Haymarket/Title', }, + 'Title/xs/Size': { resolved: '', alias: 'Impl-Text size/sm' }, 'Title/Decorative/lg/Size': { resolved: '', alias: 'Impl-Text size/xs' }, 'Title/Decorative/lg/Font weight': { resolved: 400, @@ -2572,6 +2678,23 @@ export const haymarket = { resolved: '#FFFFFF', alias: 'Neutral/Opacity/White/100', }, + 'Text/Feedback/Information Accent': { + resolved: '#284EA0', + alias: 'Scandic/Blue/70', + }, + 'Text/Feedback/Succes Accent': { + resolved: '#348337', + alias: 'Scandic/Green/60', + }, + 'Text/Feedback/Warning Accent': { + resolved: '#D17308', + alias: 'Scandic/Yellow/60', + }, + 'Text/Feedback/Error Accent': { + resolved: '#AD0015', + alias: 'Scandic/Red/70', + }, + 'Text/Feedback/Neutral Accent': { resolved: '#747474', alias: 'Neutral/50' }, 'Text/Brand/OnAccent/Default': { resolved: '#FFFFFF', alias: 'Neutral/Opacity/White/100', @@ -2637,9 +2760,9 @@ export const haymarket = { resolved: '#FBF7F6', alias: 'Signature/Haymarket/Vista White/0', }, - 'Surface/Secondary/Secondary': { - resolved: '#FBF7F6', - alias: 'Signature/Haymarket/Vista White/0', + 'Surface/Secondary/Default dark': { + resolved: '#F6ECEA', + alias: 'Signature/Haymarket/Vista White/10', }, 'Surface/Secondary/Hover': { resolved: '#efebea' }, 'Surface/Brand/Accent/Default': { @@ -2734,6 +2857,10 @@ export const haymarket = { resolved: '#805E45', alias: 'Signature/Haymarket/Antique Brass/60', }, + 'Icon/Interactive/Accent': { + resolved: '#805E45', + alias: 'Signature/Haymarket/Antique Brass/60', + }, 'Icon/Interactive/Disabled': { resolved: '#BFBFBF', alias: 'Neutral/30' }, 'Icon/Interactive/Placeholder': { resolved: '#747474', alias: 'Neutral/50' }, 'Icon/Feedback/Information': { @@ -2747,16 +2874,17 @@ export const haymarket = { 'Icon/Inverted': { resolved: '#FFFFFF', alias: 'Neutral/Opacity/White/100' }, 'Overlay/10': { resolved: '#1F1C1B1A', alias: 'Neutral/Opacity/Black/10' }, 'Overlay/20': { resolved: '#1F1C1B33', alias: 'Neutral/Opacity/Black/20' }, + 'Overlay/30': { resolved: '#1F1C1B33', alias: 'Neutral/Opacity/Black/20' }, 'Overlay/40': { resolved: '#1F1C1B66', alias: 'Neutral/Opacity/Black/40' }, 'Overlay/60': { resolved: '#1F1C1B99', alias: 'Neutral/Opacity/Black/60' }, 'Overlay/80': { resolved: '#1F1C1BCC', alias: 'Neutral/Opacity/Black/80' }, 'Overlay/90': { resolved: '#1F1C1BE6', alias: 'Neutral/Opacity/Black/90' }, - 'Component/Button/Brand/Primary/Default': { + 'Component/Button/Brand/Primary/Fill/Default': { resolved: '#1F1F1F', alias: 'Neutral/90', }, - 'Component/Button/Brand/Primary/Hover': { resolved: '#323232' }, - 'Component/Button/Brand/Primary/Disabled': { + 'Component/Button/Brand/Primary/Fill/Hover': { resolved: '#323232' }, + 'Component/Button/Brand/Primary/Fill/Disabled': { resolved: '#1F1C1B1A', alias: 'Neutral/Opacity/Black/10', }, @@ -2784,23 +2912,23 @@ export const haymarket = { resolved: '#FFFFFF00', alias: 'Neutral/Opacity/White/0', }, - 'Component/Button/Brand/Secondary/Default': { + 'Component/Button/Brand/Secondary/Fill/Default': { resolved: '#FFFFFF00', alias: 'Neutral/Opacity/White/0', }, - 'Component/Button/Brand/Secondary/Hover': { + 'Component/Button/Brand/Secondary/Fill/Hover': { resolved: '#FFFFFF00', alias: 'Neutral/Opacity/White/0', }, - 'Component/Button/Brand/Secondary/Inverted': { + 'Component/Button/Brand/Secondary/Fill/Inverted': { resolved: '#FFFFFF', alias: 'Neutral/Opacity/White/100', }, - 'Component/Button/Brand/Secondary/Hover Inverted': { + 'Component/Button/Brand/Secondary/Fill/Hover Inverted': { resolved: '#946F54', alias: 'Signature/Haymarket/Antique Brass/50', }, - 'Component/Button/Brand/Secondary/Disabled': { + 'Component/Button/Brand/Secondary/Fill/Disabled': { resolved: '#1F1C1B1A', alias: 'Neutral/Opacity/Black/10', }, @@ -2816,6 +2944,9 @@ export const haymarket = { resolved: '#FFFFFF', alias: 'Neutral/Opacity/White/100', }, + 'Component/Button/Brand/Secondary/On fill/Hover inverted': { + resolved: '#b5b5b5', + }, 'Component/Button/Brand/Secondary/On fill/Disabled': { resolved: '#8C8C8C', alias: 'Neutral/40', @@ -2833,18 +2964,18 @@ export const haymarket = { alias: 'Neutral/Opacity/White/100', }, 'Component/Button/Brand/Secondary/Border/Hover inverted': { - resolved: '#e6e6e6', + resolved: '#868686', }, 'Component/Button/Brand/Secondary/Border/Disabled': { resolved: '#1F1C1B1A', alias: 'Neutral/Opacity/Black/10', }, - 'Component/Button/Brand/Tertiary/Default': { + 'Component/Button/Brand/Tertiary/Fill/Default': { resolved: '#946F54', alias: 'Signature/Haymarket/Antique Brass/50', }, - 'Component/Button/Brand/Tertiary/Hover': { resolved: '#87664e' }, - 'Component/Button/Brand/Tertiary/Disabled': { + 'Component/Button/Brand/Tertiary/Fill/Hover': { resolved: '#87664e' }, + 'Component/Button/Brand/Tertiary/Fill/Disabled': { resolved: '#1F1C1B1A', alias: 'Neutral/Opacity/Black/10', }, @@ -2872,23 +3003,35 @@ export const haymarket = { resolved: '#FFFFFF00', alias: 'Neutral/Opacity/White/0', }, - 'Component/Button/Inverted/Default': { + 'Component/Button/Inverted/Fill/Default': { resolved: '#FFFFFF', alias: 'Neutral/Opacity/White/100', }, - 'Component/Button/Inverted/Faded': { + 'Component/Button/Inverted/Fill/Faded': { resolved: '#FFFFFFE6', alias: 'Neutral/Opacity/White/90', }, - 'Component/Button/Inverted/Hover': { resolved: '#f2f2f2' }, - 'Component/Button/Inverted/Hover Inverted': { + 'Component/Button/Inverted/Fill/Hover': { resolved: '#e6e5e5' }, + 'Component/Button/Inverted/Fill/Hover Inverted': { resolved: '#946F54', alias: 'Signature/Haymarket/Antique Brass/50', }, - 'Component/Button/Inverted/Disabled': { + 'Component/Button/Inverted/Fill/Disabled': { resolved: '#1F1C1B1A', alias: 'Neutral/Opacity/Black/10', }, + 'Component/Button/Inverted/Border/Default': { + resolved: '#FFFFFF00', + alias: 'Neutral/Opacity/White/0', + }, + 'Component/Button/Inverted/Border/Hover': { + resolved: '#FFFFFF00', + alias: 'Neutral/Opacity/White/0', + }, + 'Component/Button/Inverted/Border/Disable': { + resolved: '#FFFFFF00', + alias: 'Neutral/Opacity/White/0', + }, 'Component/Button/Inverted/On fill/Default': { resolved: '#1F1F1F', alias: 'Neutral/90', @@ -2902,18 +3045,6 @@ export const haymarket = { resolved: '#8C8C8C', alias: 'Neutral/40', }, - 'Component/Button/Inverted/Border/Default': { - resolved: '#FFFFFF00', - alias: 'Neutral/Opacity/White/0', - }, - 'Component/Button/Inverted/Border/Hover': { - resolved: '#FFFFFF00', - alias: 'Neutral/Opacity/White/0', - }, - 'Component/Button/Inverted/Border/Disable': { - resolved: '#FFFFFF00', - alias: 'Neutral/Opacity/White/0', - }, 'Border/Interactive/Default': { resolved: '#BFBFBF', alias: 'Neutral/30' }, 'Border/Divider/Default': { resolved: '#D9D9D9', alias: 'Neutral/20' }, 'Border/Divider/Subtle': { resolved: '#E9E9E9', alias: 'Neutral/15' }, @@ -2942,23 +3073,23 @@ export const haymarket = { resolved: '#5B8FD4', alias: 'Scandic/Blue/50', }, - 'Component/Button/Muted/Default': { + 'Component/Button/Muted/Fill/Default': { resolved: '#FFFFFF00', alias: 'Neutral/Opacity/White/0', }, - 'Component/Button/Muted/Hover': { - resolved: '#FFFFFF00', + 'Component/Button/Muted/Fill/Hover': { + resolved: '#FFFFFF0D', alias: 'Neutral/Opacity/White/5', }, - 'Component/Button/Muted/Disabled': { + 'Component/Button/Muted/Fill/Disabled': { resolved: '#FFFFFF1A', alias: 'Neutral/Opacity/White/10', }, - 'Component/Button/Muted/Hover inverted': { + 'Component/Button/Muted/Fill/Hover inverted': { resolved: '#1F1C1B0D', alias: 'Neutral/Opacity/Black/5', }, - 'Component/Button/Muted/Disabled inverted': { + 'Component/Button/Muted/Fill/Disabled inverted': { resolved: '#D9D9D9', alias: 'Neutral/20', }, @@ -3069,8 +3200,10 @@ export const marski = { 'Tag/Text-Transform': { resolved: 'unset' }, 'Link/md/Font fallback': { resolved: 'sans-serif' }, 'Link/md/Letter spacing': { resolved: 0.19 }, + 'Link/md/Text-Decoration': { resolved: 'underline' }, 'Link/sm/Font fallback': { resolved: 'sans-serif' }, 'Link/sm/Letter spacing': { resolved: 0.2 }, + 'Link/sm/Text-Decoration': { resolved: 'underline' }, 'Body/Lead text/Font fallback': { resolved: 'sans-serif' }, 'Body/Paragraph/Font fallback': { resolved: 'sans-serif' }, 'Body/Paragraph/Letter spacing': { resolved: 0.19 }, @@ -3081,8 +3214,10 @@ export const marski = { 'Label/Letter spacing': { resolved: 0.17 }, 'Body/Underline/md/Font fallback': { resolved: 'sans-serif' }, 'Body/Underline/md/Letter spacing': { resolved: 0.19 }, + 'Body/Underline/md/Text-Decoration': { resolved: 'underline' }, 'Body/Underline/sm/Font fallback': { resolved: 'sans-serif' }, 'Body/Underline/sm/Letter spacing': { resolved: 0.2 }, + 'Body/Underline/sm/Text-Decoration': { resolved: 'underline' }, 'Surface/Brand/Primary 1/OnSurface/Default': { resolved: '#FFFFFF' }, 'Surface/Brand/Primary 1/OnSurface/Accent': { resolved: '#FFFFFF' }, 'Surface/Brand/Primary 1/OnSurface/Accent Secondary': { resolved: '#FFFFFF' }, @@ -3117,11 +3252,11 @@ export const marski = { resolved: 500, alias: 'Font weight/Medium', }, - 'Title/xs/Size': { resolved: '', alias: 'Impl-Text size/sm' }, 'Title/sm/LowCase/Font family': { resolved: 'Helvetica Neue', alias: 'Font family/Marski/Title', }, + 'Title/xs/Size': { resolved: '', alias: 'Impl-Text size/sm' }, 'Title/Decorative/lg/Size': { resolved: '', alias: 'Impl-Text size/xs' }, 'Title/Decorative/lg/Font weight': { resolved: 700, @@ -3277,6 +3412,23 @@ export const marski = { resolved: '#FFFFFF', alias: 'Neutral/Opacity/White/100', }, + 'Text/Feedback/Information Accent': { + resolved: '#284EA0', + alias: 'Scandic/Blue/70', + }, + 'Text/Feedback/Succes Accent': { + resolved: '#348337', + alias: 'Scandic/Green/60', + }, + 'Text/Feedback/Warning Accent': { + resolved: '#D17308', + alias: 'Scandic/Yellow/60', + }, + 'Text/Feedback/Error Accent': { + resolved: '#AD0015', + alias: 'Scandic/Red/70', + }, + 'Text/Feedback/Neutral Accent': { resolved: '#747474', alias: 'Neutral/50' }, 'Text/Brand/OnAccent/Default': { resolved: '#FFFFFF', alias: 'Neutral/Opacity/White/100', @@ -3342,9 +3494,9 @@ export const marski = { resolved: '#ECEEEF', alias: 'Signature/Marski/Elephant/10', }, - 'Surface/Secondary/Secondary': { - resolved: '#ECEEEF', - alias: 'Signature/Marski/Elephant/10', + 'Surface/Secondary/Default dark': { + resolved: '#E0E3E5', + alias: 'Signature/Marski/Elephant/20', }, 'Surface/Secondary/Hover': { resolved: '#e0e2e3' }, 'Surface/Brand/Accent/Default': { resolved: '#575757', alias: 'Neutral/60' }, @@ -3439,6 +3591,10 @@ export const marski = { resolved: '#0D57F3', alias: 'Signature/Marski/Blue ribbon/70', }, + 'Icon/Interactive/Accent': { + resolved: '#0D57F3', + alias: 'Signature/Marski/Blue ribbon/70', + }, 'Icon/Interactive/Disabled': { resolved: '#BFBFBF', alias: 'Neutral/30' }, 'Icon/Interactive/Placeholder': { resolved: '#747474', alias: 'Neutral/50' }, 'Icon/Feedback/Information': { @@ -3452,16 +3608,17 @@ export const marski = { 'Icon/Inverted': { resolved: '#FFFFFF', alias: 'Neutral/Opacity/White/100' }, 'Overlay/10': { resolved: '#1F1C1B1A', alias: 'Neutral/Opacity/Black/10' }, 'Overlay/20': { resolved: '#1F1C1B33', alias: 'Neutral/Opacity/Black/20' }, + 'Overlay/30': { resolved: '#1F1C1B33', alias: 'Neutral/Opacity/Black/20' }, 'Overlay/40': { resolved: '#1F1C1B66', alias: 'Neutral/Opacity/Black/40' }, 'Overlay/60': { resolved: '#1F1C1B99', alias: 'Neutral/Opacity/Black/60' }, 'Overlay/80': { resolved: '#1F1C1BCC', alias: 'Neutral/Opacity/Black/80' }, 'Overlay/90': { resolved: '#1F1C1BE6', alias: 'Neutral/Opacity/Black/90' }, - 'Component/Button/Brand/Primary/Default': { + 'Component/Button/Brand/Primary/Fill/Default': { resolved: '#122937', alias: 'Signature/Marski/Elephant/100', }, - 'Component/Button/Brand/Primary/Hover': { resolved: '#283b48' }, - 'Component/Button/Brand/Primary/Disabled': { + 'Component/Button/Brand/Primary/Fill/Hover': { resolved: '#283b48' }, + 'Component/Button/Brand/Primary/Fill/Disabled': { resolved: '#1F1C1B1A', alias: 'Neutral/Opacity/Black/10', }, @@ -3489,23 +3646,23 @@ export const marski = { resolved: '#FFFFFF00', alias: 'Neutral/Opacity/White/0', }, - 'Component/Button/Brand/Secondary/Default': { + 'Component/Button/Brand/Secondary/Fill/Default': { resolved: '#FFFFFF00', alias: 'Neutral/Opacity/White/0', }, - 'Component/Button/Brand/Secondary/Hover': { + 'Component/Button/Brand/Secondary/Fill/Hover': { resolved: '#FFFFFF00', alias: 'Neutral/Opacity/White/0', }, - 'Component/Button/Brand/Secondary/Inverted': { + 'Component/Button/Brand/Secondary/Fill/Inverted': { resolved: '#FFFFFF', alias: 'Neutral/Opacity/White/100', }, - 'Component/Button/Brand/Secondary/Hover Inverted': { + 'Component/Button/Brand/Secondary/Fill/Hover Inverted': { resolved: '#122937', alias: 'Signature/Marski/Elephant/100', }, - 'Component/Button/Brand/Secondary/Disabled': { + 'Component/Button/Brand/Secondary/Fill/Disabled': { resolved: '#1F1C1B1A', alias: 'Neutral/Opacity/Black/10', }, @@ -3521,6 +3678,9 @@ export const marski = { resolved: '#FFFFFF', alias: 'Neutral/Opacity/White/100', }, + 'Component/Button/Brand/Secondary/On fill/Hover inverted': { + resolved: '#b2b9be', + }, 'Component/Button/Brand/Secondary/On fill/Disabled': { resolved: '#8C8C8C', alias: 'Neutral/40', @@ -3538,18 +3698,18 @@ export const marski = { alias: 'Neutral/Opacity/White/100', }, 'Component/Button/Brand/Secondary/Border/Hover inverted': { - resolved: '#e5e7e9', + resolved: '#818c95', }, 'Component/Button/Brand/Secondary/Border/Disabled': { resolved: '#1F1C1B1A', alias: 'Neutral/Opacity/Black/10', }, - 'Component/Button/Brand/Tertiary/Default': { + 'Component/Button/Brand/Tertiary/Fill/Default': { resolved: '#0D57F3', alias: 'Signature/Marski/Blue ribbon/70', }, - 'Component/Button/Brand/Tertiary/Hover': { resolved: '#1a54e7' }, - 'Component/Button/Brand/Tertiary/Disabled': { + 'Component/Button/Brand/Tertiary/Fill/Hover': { resolved: '#1a54e7' }, + 'Component/Button/Brand/Tertiary/Fill/Disabled': { resolved: '#1F1C1B1A', alias: 'Neutral/Opacity/Black/10', }, @@ -3577,23 +3737,35 @@ export const marski = { resolved: '#FFFFFF00', alias: 'Neutral/Opacity/White/0', }, - 'Component/Button/Inverted/Default': { + 'Component/Button/Inverted/Fill/Default': { resolved: '#FFFFFF', alias: 'Neutral/Opacity/White/100', }, - 'Component/Button/Inverted/Faded': { + 'Component/Button/Inverted/Fill/Faded': { resolved: '#FFFFFFE6', alias: 'Neutral/Opacity/White/90', }, - 'Component/Button/Inverted/Hover': { resolved: '#f2f2f2' }, - 'Component/Button/Inverted/Hover Inverted': { + 'Component/Button/Inverted/Fill/Hover': { resolved: '#e6e5e5' }, + 'Component/Button/Inverted/Fill/Hover Inverted': { resolved: '#122937', alias: 'Signature/Marski/Elephant/100', }, - 'Component/Button/Inverted/Disabled': { + 'Component/Button/Inverted/Fill/Disabled': { resolved: '#1F1C1B1A', alias: 'Neutral/Opacity/Black/10', }, + 'Component/Button/Inverted/Border/Default': { + resolved: '#FFFFFF00', + alias: 'Neutral/Opacity/White/0', + }, + 'Component/Button/Inverted/Border/Hover': { + resolved: '#FFFFFF00', + alias: 'Neutral/Opacity/White/0', + }, + 'Component/Button/Inverted/Border/Disable': { + resolved: '#FFFFFF00', + alias: 'Neutral/Opacity/White/0', + }, 'Component/Button/Inverted/On fill/Default': { resolved: '#122937', alias: 'Signature/Marski/Elephant/100', @@ -3607,18 +3779,6 @@ export const marski = { resolved: '#8C8C8C', alias: 'Neutral/40', }, - 'Component/Button/Inverted/Border/Default': { - resolved: '#FFFFFF00', - alias: 'Neutral/Opacity/White/0', - }, - 'Component/Button/Inverted/Border/Hover': { - resolved: '#FFFFFF00', - alias: 'Neutral/Opacity/White/0', - }, - 'Component/Button/Inverted/Border/Disable': { - resolved: '#FFFFFF00', - alias: 'Neutral/Opacity/White/0', - }, 'Border/Interactive/Default': { resolved: '#BFBFBF', alias: 'Neutral/30' }, 'Border/Divider/Default': { resolved: '#D9D9D9', alias: 'Neutral/20' }, 'Border/Divider/Subtle': { resolved: '#E9E9E9', alias: 'Neutral/15' }, @@ -3647,23 +3807,23 @@ export const marski = { resolved: '#5B8FD4', alias: 'Scandic/Blue/50', }, - 'Component/Button/Muted/Default': { + 'Component/Button/Muted/Fill/Default': { resolved: '#FFFFFF00', alias: 'Neutral/Opacity/White/0', }, - 'Component/Button/Muted/Hover': { + 'Component/Button/Muted/Fill/Hover': { resolved: '#FFFFFF', alias: 'Neutral/Opacity/White/100', }, - 'Component/Button/Muted/Disabled': { + 'Component/Button/Muted/Fill/Disabled': { resolved: '#FFFFFF', alias: 'Neutral/Opacity/White/100', }, - 'Component/Button/Muted/Hover inverted': { + 'Component/Button/Muted/Fill/Hover inverted': { resolved: '#1F1C1B0D', alias: 'Neutral/Opacity/Black/5', }, - 'Component/Button/Muted/Disabled inverted': { + 'Component/Button/Muted/Fill/Disabled inverted': { resolved: '#D9D9D9', alias: 'Neutral/20', }, @@ -3703,13 +3863,13 @@ export const hotelNorge = { 'Signature/Hotel Norge/Off White/60': { resolved: '#D9DAD6' }, 'Signature/Hotel Norge/Off White/70': { resolved: '#AAAAA7' }, 'Signature/Hotel Norge/Emerald/0': { resolved: '#C7DDD5' }, - 'Signature/Hotel Norge/Emerald/80': { resolved: '#3A655C' }, 'Signature/Hotel Norge/Off White/80': { resolved: '#838481' }, + 'Signature/Hotel Norge/Emerald/80': { resolved: '#3A655C' }, 'Signature/Hotel Norge/Off White/90': { resolved: '#6F716F' }, 'Signature/Hotel Norge/Emerald/90': { resolved: '#26544A' }, 'Signature/Hotel Norge/Off White/100': { resolved: '#646563' }, - 'Signature/Hotel Norge/Emerald/100': { resolved: '#004337' }, 'Signature/Hotel Norge/Dark blue/0': { resolved: '#B7C5C8' }, + 'Signature/Hotel Norge/Emerald/100': { resolved: '#004337' }, 'Signature/Hotel Norge/Dark blue/30': { resolved: '#858F97' }, 'Signature/Hotel Norge/Dark blue/80': { resolved: '#404655' }, 'Signature/Hotel Norge/Dark blue/90': { resolved: '#181E34' }, @@ -3751,8 +3911,10 @@ export const hotelNorge = { 'Tag/Text-Transform': { resolved: 'uppercase' }, 'Link/md/Font fallback': { resolved: 'sans-serif' }, 'Link/md/Letter spacing': { resolved: 0.19 }, + 'Link/md/Text-Decoration': { resolved: 'underline' }, 'Link/sm/Font fallback': { resolved: 'sans-serif' }, 'Link/sm/Letter spacing': { resolved: 0.2 }, + 'Link/sm/Text-Decoration': { resolved: 'underline' }, 'Body/Lead text/Font fallback': { resolved: 'sans-serif' }, 'Body/Paragraph/Font fallback': { resolved: 'sans-serif' }, 'Body/Paragraph/Letter spacing': { resolved: 0.19 }, @@ -3763,8 +3925,10 @@ export const hotelNorge = { 'Label/Letter spacing': { resolved: 0.17 }, 'Body/Underline/md/Font fallback': { resolved: 'sans-serif' }, 'Body/Underline/md/Letter spacing': { resolved: 0.19 }, + 'Body/Underline/md/Text-Decoration': { resolved: 'underline' }, 'Body/Underline/sm/Font fallback': { resolved: 'sans-serif' }, 'Body/Underline/sm/Letter spacing': { resolved: 0.2 }, + 'Body/Underline/sm/Text-Decoration': { resolved: 'underline' }, 'Surface/Brand/Primary 1/OnSurface/Default': { resolved: '#FFFFFF' }, 'Surface/Brand/Primary 1/OnSurface/Accent': { resolved: '#FFFFFF' }, 'Surface/Brand/Primary 1/OnSurface/Accent Secondary': { resolved: '#FFFFFF' }, @@ -3799,11 +3963,11 @@ export const hotelNorge = { resolved: 400, alias: 'Font weight/Regular', }, - 'Title/xs/Size': { resolved: '', alias: 'Impl-Text size/sm' }, 'Title/sm/LowCase/Font family': { resolved: 'Domaine Sans Text', alias: 'Font family/Hotel Norge/Title', }, + 'Title/xs/Size': { resolved: '', alias: 'Impl-Text size/sm' }, 'Title/Decorative/lg/Size': { resolved: '', alias: 'Impl-Text size/sm' }, 'Title/Decorative/lg/Font weight': { resolved: 400, @@ -3959,6 +4123,23 @@ export const hotelNorge = { 'Text/Interactive/Error': { resolved: '#AD0015', alias: 'Scandic/Red/70' }, 'Text/Interactive/Placeholder': { resolved: '#747474', alias: 'Neutral/50' }, 'Text/Brand/OnAccent/Heading': { resolved: '#1F1F1F', alias: 'Neutral/90' }, + 'Text/Feedback/Information Accent': { + resolved: '#284EA0', + alias: 'Scandic/Blue/70', + }, + 'Text/Feedback/Succes Accent': { + resolved: '#348337', + alias: 'Scandic/Green/60', + }, + 'Text/Feedback/Warning Accent': { + resolved: '#D17308', + alias: 'Scandic/Yellow/60', + }, + 'Text/Feedback/Error Accent': { + resolved: '#AD0015', + alias: 'Scandic/Red/70', + }, + 'Text/Feedback/Neutral Accent': { resolved: '#747474', alias: 'Neutral/50' }, 'Text/Brand/OnAccent/Default': { resolved: '#1F1F1F', alias: 'Neutral/90' }, 'Text/Brand/OnAccent/Accent': { resolved: '#004337', @@ -4024,9 +4205,9 @@ export const hotelNorge = { resolved: '#EFF0EB', alias: 'Signature/Hotel Norge/Off White/50', }, - 'Surface/Secondary/Secondary': { - resolved: '#EFF0EB', - alias: 'Signature/Hotel Norge/Off White/50', + 'Surface/Secondary/Default dark': { + resolved: '#D9DAD6', + alias: 'Signature/Hotel Norge/Off White/60', }, 'Surface/Secondary/Hover': { resolved: '#e3e4df' }, 'Surface/Brand/Accent/Default': { @@ -4124,6 +4305,10 @@ export const hotelNorge = { resolved: '#26544A', alias: 'Signature/Hotel Norge/Emerald/90', }, + 'Icon/Interactive/Accent': { + resolved: '#26544A', + alias: 'Signature/Hotel Norge/Emerald/90', + }, 'Icon/Interactive/Disabled': { resolved: '#BFBFBF', alias: 'Neutral/30' }, 'Icon/Interactive/Placeholder': { resolved: '#747474', alias: 'Neutral/50' }, 'Icon/Feedback/Information': { @@ -4137,16 +4322,17 @@ export const hotelNorge = { 'Icon/Inverted': { resolved: '#FFFFFF', alias: 'Neutral/Opacity/White/100' }, 'Overlay/10': { resolved: '#1F1C1B1A', alias: 'Neutral/Opacity/Black/10' }, 'Overlay/20': { resolved: '#1F1C1B33', alias: 'Neutral/Opacity/Black/20' }, + 'Overlay/30': { resolved: '#1F1C1B33', alias: 'Neutral/Opacity/Black/20' }, 'Overlay/40': { resolved: '#1F1C1B66', alias: 'Neutral/Opacity/Black/40' }, 'Overlay/60': { resolved: '#1F1C1B99', alias: 'Neutral/Opacity/Black/60' }, 'Overlay/80': { resolved: '#1F1C1BCC', alias: 'Neutral/Opacity/Black/80' }, 'Overlay/90': { resolved: '#1F1C1BE6', alias: 'Neutral/Opacity/Black/90' }, - 'Component/Button/Brand/Primary/Default': { + 'Component/Button/Brand/Primary/Fill/Default': { resolved: '#181E34', alias: 'Signature/Hotel Norge/Dark blue/90', }, - 'Component/Button/Brand/Primary/Hover': { resolved: '#2c3146' }, - 'Component/Button/Brand/Primary/Disabled': { + 'Component/Button/Brand/Primary/Fill/Hover': { resolved: '#2c3146' }, + 'Component/Button/Brand/Primary/Fill/Disabled': { resolved: '#1F1C1B1A', alias: 'Neutral/Opacity/Black/10', }, @@ -4174,23 +4360,23 @@ export const hotelNorge = { resolved: '#FFFFFF00', alias: 'Neutral/Opacity/White/0', }, - 'Component/Button/Brand/Secondary/Default': { + 'Component/Button/Brand/Secondary/Fill/Default': { resolved: '#FFFFFF00', alias: 'Neutral/Opacity/White/0', }, - 'Component/Button/Brand/Secondary/Hover': { + 'Component/Button/Brand/Secondary/Fill/Hover': { resolved: '#FFFFFF00', alias: 'Neutral/Opacity/White/0', }, - 'Component/Button/Brand/Secondary/Inverted': { + 'Component/Button/Brand/Secondary/Fill/Inverted': { resolved: '#FFFFFF', alias: 'Neutral/Opacity/White/100', }, - 'Component/Button/Brand/Secondary/Hover Inverted': { + 'Component/Button/Brand/Secondary/Fill/Hover Inverted': { resolved: '#004337', alias: 'Signature/Hotel Norge/Emerald/100', }, - 'Component/Button/Brand/Secondary/Disabled': { + 'Component/Button/Brand/Secondary/Fill/Disabled': { resolved: '#1F1C1B1A', alias: 'Neutral/Opacity/Black/10', }, @@ -4206,6 +4392,9 @@ export const hotelNorge = { resolved: '#FFFFFF', alias: 'Neutral/Opacity/White/100', }, + 'Component/Button/Brand/Secondary/On fill/Hover inverted': { + resolved: '#b3b4bd', + }, 'Component/Button/Brand/Secondary/On fill/Disabled': { resolved: '#8C8C8C', alias: 'Neutral/40', @@ -4223,18 +4412,18 @@ export const hotelNorge = { alias: 'Neutral/Opacity/White/100', }, 'Component/Button/Brand/Secondary/Border/Hover inverted': { - resolved: '#e5e6e9', + resolved: '#838593', }, 'Component/Button/Brand/Secondary/Border/Disabled': { resolved: '#1F1C1B1A', alias: 'Neutral/Opacity/Black/10', }, - 'Component/Button/Brand/Tertiary/Default': { + 'Component/Button/Brand/Tertiary/Fill/Default': { resolved: '#004337', alias: 'Signature/Hotel Norge/Emerald/100', }, - 'Component/Button/Brand/Tertiary/Hover': { resolved: '#215448' }, - 'Component/Button/Brand/Tertiary/Disabled': { + 'Component/Button/Brand/Tertiary/Fill/Hover': { resolved: '#215448' }, + 'Component/Button/Brand/Tertiary/Fill/Disabled': { resolved: '#1F1C1B1A', alias: 'Neutral/Opacity/Black/10', }, @@ -4262,23 +4451,35 @@ export const hotelNorge = { resolved: '#FFFFFF00', alias: 'Neutral/Opacity/White/0', }, - 'Component/Button/Inverted/Default': { + 'Component/Button/Inverted/Fill/Default': { resolved: '#FFFFFF', alias: 'Neutral/Opacity/White/100', }, - 'Component/Button/Inverted/Faded': { + 'Component/Button/Inverted/Fill/Faded': { resolved: '#FFFFFFE6', alias: 'Neutral/Opacity/White/90', }, - 'Component/Button/Inverted/Hover': { resolved: '#f2f2f2' }, - 'Component/Button/Inverted/Hover Inverted': { + 'Component/Button/Inverted/Fill/Hover': { resolved: '#e6e5e5' }, + 'Component/Button/Inverted/Fill/Hover Inverted': { resolved: '#004337', alias: 'Signature/Hotel Norge/Emerald/100', }, - 'Component/Button/Inverted/Disabled': { + 'Component/Button/Inverted/Fill/Disabled': { resolved: '#1F1C1B1A', alias: 'Neutral/Opacity/Black/10', }, + 'Component/Button/Inverted/Border/Default': { + resolved: '#FFFFFF00', + alias: 'Neutral/Opacity/White/0', + }, + 'Component/Button/Inverted/Border/Hover': { + resolved: '#FFFFFF00', + alias: 'Neutral/Opacity/White/0', + }, + 'Component/Button/Inverted/Border/Disable': { + resolved: '#FFFFFF00', + alias: 'Neutral/Opacity/White/0', + }, 'Component/Button/Inverted/On fill/Default': { resolved: '#181E34', alias: 'Signature/Hotel Norge/Dark blue/90', @@ -4292,18 +4493,6 @@ export const hotelNorge = { resolved: '#8C8C8C', alias: 'Neutral/40', }, - 'Component/Button/Inverted/Border/Default': { - resolved: '#FFFFFF00', - alias: 'Neutral/Opacity/White/0', - }, - 'Component/Button/Inverted/Border/Hover': { - resolved: '#FFFFFF00', - alias: 'Neutral/Opacity/White/0', - }, - 'Component/Button/Inverted/Border/Disable': { - resolved: '#FFFFFF00', - alias: 'Neutral/Opacity/White/0', - }, 'Border/Interactive/Default': { resolved: '#BFBFBF', alias: 'Neutral/30' }, 'Border/Divider/Default': { resolved: '#D9D9D9', alias: 'Neutral/20' }, 'Border/Divider/Subtle': { resolved: '#E9E9E9', alias: 'Neutral/15' }, @@ -4332,23 +4521,23 @@ export const hotelNorge = { resolved: '#5B8FD4', alias: 'Scandic/Blue/50', }, - 'Component/Button/Muted/Default': { + 'Component/Button/Muted/Fill/Default': { resolved: '#FFFFFF00', alias: 'Neutral/Opacity/White/0', }, - 'Component/Button/Muted/Hover': { + 'Component/Button/Muted/Fill/Hover': { resolved: '#FFFFFF', alias: 'Neutral/Opacity/White/100', }, - 'Component/Button/Muted/Disabled': { + 'Component/Button/Muted/Fill/Disabled': { resolved: '#FFFFFF', alias: 'Neutral/Opacity/White/100', }, - 'Component/Button/Muted/Hover inverted': { + 'Component/Button/Muted/Fill/Hover inverted': { resolved: '#1F1C1B0D', alias: 'Neutral/Opacity/Black/5', }, - 'Component/Button/Muted/Disabled inverted': { + 'Component/Button/Muted/Fill/Disabled inverted': { resolved: '#D9D9D9', alias: 'Neutral/20', }, @@ -4428,8 +4617,10 @@ export const grandHotel = { 'Tag/Text-Transform': { resolved: 'uppercase' }, 'Link/md/Font fallback': { resolved: 'sans-serif' }, 'Link/md/Letter spacing': { resolved: 0.19 }, + 'Link/md/Text-Decoration': { resolved: 'underline' }, 'Link/sm/Font fallback': { resolved: 'sans-serif' }, 'Link/sm/Letter spacing': { resolved: 0.2 }, + 'Link/sm/Text-Decoration': { resolved: 'underline' }, 'Body/Lead text/Font fallback': { resolved: 'sans-serif' }, 'Body/Paragraph/Font fallback': { resolved: 'sans-serif' }, 'Body/Paragraph/Letter spacing': { resolved: 0.19 }, @@ -4440,8 +4631,10 @@ export const grandHotel = { 'Label/Letter spacing': { resolved: 0.17 }, 'Body/Underline/md/Font fallback': { resolved: 'sans-serif' }, 'Body/Underline/md/Letter spacing': { resolved: 0.19 }, + 'Body/Underline/md/Text-Decoration': { resolved: 'underline' }, 'Body/Underline/sm/Font fallback': { resolved: 'sans-serif' }, 'Body/Underline/sm/Letter spacing': { resolved: 0.2 }, + 'Body/Underline/sm/Text-Decoration': { resolved: 'underline' }, 'Surface/Brand/Primary 1/OnSurface/Default': { resolved: '#FFFFFF' }, 'Surface/Brand/Primary 1/OnSurface/Accent': { resolved: '#FFFFFF' }, 'Surface/Brand/Primary 1/OnSurface/Accent Secondary': { resolved: '#FFFFFF' }, @@ -4476,11 +4669,11 @@ export const grandHotel = { resolved: 400, alias: 'Font weight/Regular', }, - 'Title/xs/Size': { resolved: '', alias: 'Impl-Text size/sm' }, 'Title/sm/LowCase/Font family': { resolved: 'Canela Deck', alias: 'Font family/Grand Hotel/Title', }, + 'Title/xs/Size': { resolved: '', alias: 'Impl-Text size/sm' }, 'Title/Decorative/lg/Size': { resolved: '', alias: 'Impl-Text size/xs' }, 'Title/Decorative/lg/Font weight': { resolved: 400, @@ -4639,6 +4832,23 @@ export const grandHotel = { 'Text/Interactive/Error': { resolved: '#AD0015', alias: 'Scandic/Red/70' }, 'Text/Interactive/Placeholder': { resolved: '#747474', alias: 'Neutral/50' }, 'Text/Brand/OnAccent/Heading': { resolved: '#1F1F1F', alias: 'Neutral/90' }, + 'Text/Feedback/Information Accent': { + resolved: '#284EA0', + alias: 'Scandic/Blue/70', + }, + 'Text/Feedback/Succes Accent': { + resolved: '#348337', + alias: 'Scandic/Green/60', + }, + 'Text/Feedback/Warning Accent': { + resolved: '#D17308', + alias: 'Scandic/Yellow/60', + }, + 'Text/Feedback/Error Accent': { + resolved: '#AD0015', + alias: 'Scandic/Red/70', + }, + 'Text/Feedback/Neutral Accent': { resolved: '#747474', alias: 'Neutral/50' }, 'Text/Brand/OnAccent/Default': { resolved: '#1F1F1F', alias: 'Neutral/90' }, 'Text/Brand/OnAccent/Accent': { resolved: '#1F1F1F', alias: 'Neutral/90' }, 'Text/Brand/OnPrimary 1/Heading': { @@ -4695,9 +4905,9 @@ export const grandHotel = { resolved: '#F7F6F5', alias: 'Signature/Grand Hotel/Cloudy/0', }, - 'Surface/Secondary/Secondary': { - resolved: '#F7F6F5', - alias: 'Signature/Grand Hotel/Cloudy/0', + 'Surface/Secondary/Default dark': { + resolved: '#EBEAE9', + alias: 'Signature/Grand Hotel/Cloudy/10', }, 'Surface/Secondary/Hover': { resolved: '#ebeae9' }, 'Surface/Brand/Accent/Default': { @@ -4795,6 +5005,10 @@ export const grandHotel = { resolved: '#AA546B', alias: 'Signature/Grand Hotel/Careys Pink/60', }, + 'Icon/Interactive/Accent': { + resolved: '#AA546B', + alias: 'Signature/Grand Hotel/Careys Pink/60', + }, 'Icon/Interactive/Disabled': { resolved: '#BFBFBF', alias: 'Neutral/30' }, 'Icon/Interactive/Placeholder': { resolved: '#747474', alias: 'Neutral/50' }, 'Icon/Feedback/Information': { @@ -4808,16 +5022,17 @@ export const grandHotel = { 'Icon/Inverted': { resolved: '#FFFFFF', alias: 'Neutral/Opacity/White/100' }, 'Overlay/10': { resolved: '#1F1C1B1A', alias: 'Neutral/Opacity/Black/10' }, 'Overlay/20': { resolved: '#1F1C1B33', alias: 'Neutral/Opacity/Black/20' }, + 'Overlay/30': { resolved: '#1F1C1B33', alias: 'Neutral/Opacity/Black/20' }, 'Overlay/40': { resolved: '#1F1C1B66', alias: 'Neutral/Opacity/Black/40' }, 'Overlay/60': { resolved: '#1F1C1B99', alias: 'Neutral/Opacity/Black/60' }, 'Overlay/80': { resolved: '#1F1C1BCC', alias: 'Neutral/Opacity/Black/80' }, 'Overlay/90': { resolved: '#1F1C1BE6', alias: 'Neutral/Opacity/Black/90' }, - 'Component/Button/Brand/Primary/Default': { + 'Component/Button/Brand/Primary/Fill/Default': { resolved: '#21252B', alias: 'Signature/Grand Hotel/Blue Bayoux/100', }, - 'Component/Button/Brand/Primary/Hover': { resolved: '#34373d' }, - 'Component/Button/Brand/Primary/Disabled': { + 'Component/Button/Brand/Primary/Fill/Hover': { resolved: '#34373d' }, + 'Component/Button/Brand/Primary/Fill/Disabled': { resolved: '#1F1C1B1A', alias: 'Neutral/Opacity/Black/10', }, @@ -4845,23 +5060,23 @@ export const grandHotel = { resolved: '#FFFFFF00', alias: 'Neutral/Opacity/White/0', }, - 'Component/Button/Brand/Secondary/Default': { + 'Component/Button/Brand/Secondary/Fill/Default': { resolved: '#FFFFFF00', alias: 'Neutral/Opacity/White/0', }, - 'Component/Button/Brand/Secondary/Hover': { + 'Component/Button/Brand/Secondary/Fill/Hover': { resolved: '#FFFFFF00', alias: 'Neutral/Opacity/White/0', }, - 'Component/Button/Brand/Secondary/Inverted': { + 'Component/Button/Brand/Secondary/Fill/Inverted': { resolved: '#FFFFFF', alias: 'Neutral/Opacity/White/100', }, - 'Component/Button/Brand/Secondary/Hover Inverted': { + 'Component/Button/Brand/Secondary/Fill/Hover Inverted': { resolved: '#B0C4CB', alias: 'Signature/Grand Hotel/Submarine/30', }, - 'Component/Button/Brand/Secondary/Disabled': { + 'Component/Button/Brand/Secondary/Fill/Disabled': { resolved: '#1F1C1B1A', alias: 'Neutral/Opacity/Black/10', }, @@ -4877,6 +5092,9 @@ export const grandHotel = { resolved: '#FFFFFF', alias: 'Neutral/Opacity/White/100', }, + 'Component/Button/Brand/Secondary/On fill/Hover inverted': { + resolved: '#b6b7b9', + }, 'Component/Button/Brand/Secondary/On fill/Disabled': { resolved: '#8C8C8C', alias: 'Neutral/40', @@ -4894,18 +5112,18 @@ export const grandHotel = { alias: 'Neutral/Opacity/White/100', }, 'Component/Button/Brand/Secondary/Border/Hover inverted': { - resolved: '#e6e6e7', + resolved: '#878a8d', }, 'Component/Button/Brand/Secondary/Border/Disabled': { resolved: '#1F1C1B1A', alias: 'Neutral/Opacity/Black/10', }, - 'Component/Button/Brand/Tertiary/Default': { + 'Component/Button/Brand/Tertiary/Fill/Default': { resolved: '#B0C4CB', alias: 'Signature/Grand Hotel/Submarine/30', }, - 'Component/Button/Brand/Tertiary/Hover': { resolved: '#b8cad0' }, - 'Component/Button/Brand/Tertiary/Disabled': { + 'Component/Button/Brand/Tertiary/Fill/Hover': { resolved: '#b8cad0' }, + 'Component/Button/Brand/Tertiary/Fill/Disabled': { resolved: '#1F1C1B1A', alias: 'Neutral/Opacity/Black/10', }, @@ -4930,23 +5148,35 @@ export const grandHotel = { resolved: '#FFFFFF00', alias: 'Neutral/Opacity/White/0', }, - 'Component/Button/Inverted/Default': { + 'Component/Button/Inverted/Fill/Default': { resolved: '#FFFFFF', alias: 'Neutral/Opacity/White/100', }, - 'Component/Button/Inverted/Faded': { + 'Component/Button/Inverted/Fill/Faded': { resolved: '#FFFFFFE6', alias: 'Neutral/Opacity/White/90', }, - 'Component/Button/Inverted/Hover': { resolved: '#f2f2f2' }, - 'Component/Button/Inverted/Hover Inverted': { + 'Component/Button/Inverted/Fill/Hover': { resolved: '#e6e5e5' }, + 'Component/Button/Inverted/Fill/Hover Inverted': { resolved: '#B0C4CB', alias: 'Signature/Grand Hotel/Submarine/30', }, - 'Component/Button/Inverted/Disabled': { + 'Component/Button/Inverted/Fill/Disabled': { resolved: '#1F1C1B1A', alias: 'Neutral/Opacity/Black/10', }, + 'Component/Button/Inverted/Border/Default': { + resolved: '#FFFFFF00', + alias: 'Neutral/Opacity/White/0', + }, + 'Component/Button/Inverted/Border/Hover': { + resolved: '#FFFFFF1A', + alias: 'Neutral/Opacity/White/10', + }, + 'Component/Button/Inverted/Border/Disable': { + resolved: '#FFFFFF1A', + alias: 'Neutral/Opacity/White/10', + }, 'Component/Button/Inverted/On fill/Default': { resolved: '#21252B', alias: 'Signature/Grand Hotel/Blue Bayoux/100', @@ -4960,18 +5190,6 @@ export const grandHotel = { resolved: '#8C8C8C', alias: 'Neutral/40', }, - 'Component/Button/Inverted/Border/Default': { - resolved: '#FFFFFF00', - alias: 'Neutral/Opacity/White/0', - }, - 'Component/Button/Inverted/Border/Hover': { - resolved: '#FFFFFF1A', - alias: 'Neutral/Opacity/White/10', - }, - 'Component/Button/Inverted/Border/Disable': { - resolved: '#FFFFFF1A', - alias: 'Neutral/Opacity/White/10', - }, 'Border/Interactive/Default': { resolved: '#BFBFBF', alias: 'Neutral/30' }, 'Border/Divider/Default': { resolved: '#D9D9D9', alias: 'Neutral/20' }, 'Border/Divider/Subtle': { resolved: '#E9E9E9', alias: 'Neutral/15' }, @@ -5000,20 +5218,20 @@ export const grandHotel = { resolved: '#5B8FD4', alias: 'Scandic/Blue/50', }, - 'Component/Button/Muted/Default': { + 'Component/Button/Muted/Fill/Default': { resolved: '#FFFFFF', alias: 'Neutral/Opacity/White/100', }, - 'Component/Button/Muted/Hover': { + 'Component/Button/Muted/Fill/Hover': { resolved: '#FFFFFF', alias: 'Neutral/Opacity/White/100', }, - 'Component/Button/Muted/Disabled': { + 'Component/Button/Muted/Fill/Disabled': { resolved: '#FFFFFF', alias: 'Neutral/Opacity/White/100', }, - 'Component/Button/Muted/Hover inverted': { resolved: '#f2f2f2' }, - 'Component/Button/Muted/Disabled inverted': { + 'Component/Button/Muted/Fill/Hover inverted': { resolved: '#f2f2f2' }, + 'Component/Button/Muted/Fill/Disabled inverted': { resolved: '#D9D9D9', alias: 'Neutral/20', },