@sb1/ffe-core 29.5.1 → 30.0.0

package/less/colors.less

@@ -2,6 +2,7 @@
 // ======== Ny visuell identitet ========
 //
 
+/* DEPRICATED. Skal ikke brukes lenger. Fargene fra colors-semantic skal brukes. */
 // Primærpalett
 @ffe-farge-fjell: #002776;
 @ffe-farge-fjell-70: tint(@ffe-farge-fjell, 30%);

package/less/theme.less

@@ -3,9 +3,10 @@
 /**
  * These variables are intended to support theming of components. Override any value to create your own look and feel.
  */
-
 :root,
 :host {
+    /* DEPRICATED, bruk colors-semantic i stedet for */
+
     /** Primærpalett */
     --ffe-farge-fjell: @ffe-farge-fjell;
     --ffe-farge-fjell-70: @ffe-farge-fjell-70;
@@ -61,6 +62,8 @@
     --ffe-farge-lysvarmgraa: @ffe-farge-lysvarmgraa;
     --ffe-farge-hvit: @ffe-farge-hvit;
 
+    /* END depricated */
+
     /** Font sizes */
     --ffe-fontsize-body-text: 1rem;
     --ffe-fontsize-small-text: 0.875rem;
@@ -125,18 +128,18 @@
     /** Theme base colors */
 
     /* Links, buttons and similar */
-    --ffe-g-primary-color: var(--ffe-farge-vann);
+    --ffe-g-primary-color: var(--ffe-color-fill-primary-default); //Depricated
 
     /* Headings, labels, hover, etc */
-    --ffe-g-secondary-color: var(--ffe-farge-fjell);
+    --ffe-g-secondary-color: var(--ffe-color-foreground-emphasis); //Depricated
 
     /* Error messages, invalid inputs, etc  */
-    --ffe-g-error-color: var(--ffe-farge-baer);
+    --ffe-g-error-color: var(--ffe-color-fill-feedback-critical); //Depricated
 
     /** Theme borders */
 
     /* Form element borders */
-    --ffe-g-border-color: var(--ffe-farge-varmgraa);
+    --ffe-g-border-color: var(--ffe-color-border-primary-default); //Depricated
     --ffe-g-border-radius: 8px;
     --ffe-g-border-radius-lg: 16px;
     --ffe-g-border-width: 1px;
@@ -162,34 +165,26 @@
     /** Typography */
 
     /* Default body text color */
-    --ffe-g-text-color: var(--ffe-farge-svart);
+    --ffe-g-text-color: var(--ffe-color-foreground-default);
 
     /* Lead paragraph */
-    --ffe-g-lead-color: var(--ffe-farge-fjell);
+    --ffe-g-lead-color: var(--ffe-color-border-primary-subtle);
 
     /* Headings */
-    --ffe-g-heading-color: var(--ffe-farge-fjell);
+    --ffe-g-heading-color: var(--ffe-color-border-primary-emphasis);
 
     /* Links */
-    --ffe-g-link-color: var(--ffe-farge-vann);
-    --ffe-g-link-color-hover: var(--ffe-farge-fjell);
-    --ffe-g-link-color-visited: var(--ffe-farge-lyng);
-    --ffe-g-link-icon-color-hover: var(--ffe-farge-natt);
-    --ffe-g-link-icon-color-focus: var(--ffe-farge-vann);
-
-    @media (prefers-color-scheme: dark) {
-        .regard-color-scheme-preference {
-            --ffe-g-primary-color: var(--ffe-farge-vann-70);
-            --ffe-g-secondary-color: var(--ffe-farge-vann-70);
-            --ffe-g-border-color: var(--ffe-farge-graa);
-            --ffe-g-text-color: var(--ffe-farge-lysgraa);
-            --ffe-g-lead-color: var(--ffe-farge-vann-70);
-            --ffe-g-heading-color: var(--ffe-farge-vann-70);
-            --ffe-g-link-color: var(--ffe-farge-vann-70);
-            --ffe-g-link-color-hover: var(--ffe-farge-vann-30);
-            --ffe-g-link-color-visited: var(--ffe-farge-lyng-70);
-            --ffe-g-link-icon-color-hover: var(--ffe-farge-vann-30);
-            --ffe-g-link-icon-color-focus: var(--ffe-farge-hvit);
-        }
-    }
+    --ffe-g-link-color: var(--ffe-color-foreground-interactive-link);
+    --ffe-g-link-color-hover: var(
+        --ffe-color-foreground-interactive-link-hover
+    );
+    --ffe-g-link-color-visited: var(
+        --ffe-color-foreground-interactive-link-pressed
+    );
+    --ffe-g-link-icon-color-hover: var(
+        --ffe-color-foreground-interactive-link-hover
+    );
+    --ffe-g-link-icon-color-focus: var(
+        --ffe-color-foreground-interactive-link-pressed
+    );
 }

package/less/typography.less

@@ -1,5 +1,4 @@
 @import 'breakpoints';
-@import 'colors';
 
 .ffe-h1 {
     line-height: 2.25rem;
@@ -33,7 +32,7 @@
 
 .ffe-small-text,
 .ffe-micro-text {
-    color: var(--ffe-g-text-color);
+    color: var(--ffe-color-foreground-default);
     font-family: var(--ffe-g-font);
     font-weight: normal;
     font-variant-numeric: tabular-nums;
@@ -59,7 +58,7 @@
 .ffe-h4,
 .ffe-h5,
 .ffe-h6 {
-    color: var(--ffe-g-heading-color);
+    color: var(--ffe-color-foreground-emphasis);
     font-weight: normal;
     margin-bottom: var(--ffe-spacing-xs);
     margin-top: 0;
@@ -67,7 +66,7 @@
     overflow-wrap: anywhere;
 
     &--error {
-        color: var(--ffe-g-error-color);
+        color: var(--ffe-color-foreground-feedback-critical);
     }
 
     &--inline {
@@ -79,13 +78,8 @@
     }
 
     &--with-border {
-        border-bottom: 1px solid var(--ffe-farge-lysgraa);
+        border-bottom: var(--ffe-g-border-width) solid var(--ffe-color-foreground-emphasis);
         padding-bottom: var(--ffe-spacing-xs);
-        .regard-color-scheme-preference & {
-            @media (prefers-color-scheme: dark) {
-                border-color: var(--ffe-farge-graa);
-            }
-        }
     }
 
     &--no-underline {
@@ -111,7 +105,7 @@
 }
 
 .ffe-body-text {
-    color: var(--ffe-g-text-color);
+    color: var(--ffe-color-foreground-default);
     font-family: var(--ffe-g-font);
     font-variant-numeric: tabular-nums;
     line-height: 1.5rem;
@@ -124,7 +118,7 @@
     margin-bottom: 1em;
     margin-top: 0;
     line-height: 1.5rem;
-    color: var(--ffe-g-text-color);
+    color: var(--ffe-color-foreground-default);
     text-wrap: pretty;
 
     &--text-center {
@@ -150,20 +144,20 @@
 }
 
 .ffe-lead-paragraph {
-    color: var(--ffe-g-lead-color);
+    color: var(--ffe-color-foreground-emphasis);
     line-height: 1.5rem;
     font-size: var(--ffe-fontsize-lead-paragraph);
 }
 
 .ffe-sub-lead-paragraph {
-    color: var(--ffe-g-text-color);
+    color: var(--ffe-color-foreground-default);
     line-height: 1.5rem;
     font-size: var(--ffe-fontsize-sub-lead-paragraph);
 }
 
 .ffe-link-text {
-    border-bottom: 1px solid var(--ffe-g-link-color);
-    color: var(--ffe-g-link-color);
+    border-bottom: var(--ffe-g-border-width) solid var(--ffe-color-foreground-interactive-link);
+    color: var(--ffe-color-foreground-interactive-link);
     cursor: pointer;
     text-decoration: none;
     word-wrap: break-all;
@@ -172,15 +166,15 @@
 
     @media (hover: hover) and (pointer: fine) {
         &:hover {
-            border-bottom-color: var(--ffe-g-link-color-hover);
-            color: var(--ffe-g-link-color-hover);
+            border-bottom-color: var(--ffe-color-foreground-interactive-link-hover);
+            color: var(--ffe-color-foreground-interactive-link-hover);
             text-decoration: none;
         }
     }
 
     &:visited {
-        border-bottom-color: var(--ffe-g-link-color-visited);
-        color: var(--ffe-g-link-color-visited);
+        border-bottom-color: var(--ffe-color-foreground-interactive-link-pressed);
+        color: var(--ffe-color-foreground-interactive-link-pressed);
         text-decoration: none;
     }
 
@@ -189,24 +183,17 @@
     }
 
     &:focus {
-        border-color: var(--ffe-farge-hvit);
-        color: var(--ffe-farge-hvit);
+        border-color: var(--ffe-color-foreground-interactive-link-pressed);
+        color: var(--ffe-color-foreground-interactive-link-pressed);
         border-radius: 1px;
-        background-color: var(--ffe-g-link-color);
-        box-shadow: 0 0 0 2px var(--ffe-g-link-color);
+        background-color: var(--ffe-color-foreground-interactive-link);
+        box-shadow: 0 0 0 2px var(--ffe-color-foreground-interactive-link);
         outline: none;
-
-        .regard-color-scheme-preference & {
-            @media (prefers-color-scheme: dark) {
-                border-color: var(--ffe-farge-svart) !important;
-                color: var(--ffe-farge-svart) !important;
-            }
-        }
     }
 }
 
 .ffe-link-icon {
-    fill: var(--ffe-g-link-color);
+    fill: var(--ffe-color-foreground-interactive-link);
     display: inline-flex;
     border-radius: 1.5rem;
     border: 2px solid transparent;
@@ -215,30 +202,26 @@
 
     @media (hover: hover) and (pointer: fine) {
         &:hover {
-            fill: var(--ffe-g-link-icon-color-hover);
+            fill: var(--ffe-color-foreground-interactive-link-hover);
         }
     }
 
     &:focus {
-        box-shadow: 0 0 0 2px var(--ffe-g-link-icon-color-focus);
+        box-shadow: 0 0 0 2px var(--ffe-color-foreground-interactive-link-pressed);
     }
 }
 
 .ffe-divider-line {
     border: none;
-    border-bottom: solid 1px var(--ffe-farge-lysgraa);
+    border-bottom: var(--ffe-g-border-width) solid var(--ffe-color-border-primary-default);
     padding-top: 1px;
     padding-bottom: 1px;
     width: 100%;
-    .regard-color-scheme-preference & {
-        @media (prefers-color-scheme: dark) {
-            border-color: var(--ffe-farge-graa);
-        }
-    }
 }
 
 .ffe-strong-text {
     font-family: var(--ffe-g-font-strong);
+    color: var(--ffe-color-foreground-default);
     font-variant-numeric: tabular-nums;
     font-weight: normal;
 }
@@ -248,18 +231,15 @@
     font-variant-numeric: tabular-nums;
     font-weight: normal;
     font-style: normal;
+    color: var(--ffe-color-foreground-default);
 }
 
 .ffe-pre-text {
-    background-color: var(--ffe-farge-sand-70);
+    background-color: var(--ffe-color-background-subtle);
+    color: var(--ffe-color-foreground-default);
     font-family: consolas, menlo, monaco, monospace;
     margin: 0;
     text-align: left;
-    .regard-color-scheme-preference & {
-        @media (prefers-color-scheme: dark) {
-            background-color: var(--ffe-farge-koksgraa);
-        }
-    }
 }
 
 .ffe-inline-separator {

package/lib/index.js

@@ -16,7 +16,6 @@ var __exportStar = (this && this.__exportStar) || function(m, exports) {
 Object.defineProperty(exports, "__esModule", { value: true });
 __exportStar(require("./breakpoints"), exports);
 __exportStar(require("./colors"), exports);
-__exportStar(require("./colors-deprecated"), exports);
 __exportStar(require("./dimensions"), exports);
 __exportStar(require("./motion"), exports);
 __exportStar(require("./spacing"), exports);

package/lib/semanticColors.js

@@ -0,0 +1,121 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+
+exports.backgroundDefault = exports.backgroundSubtle = exports.surfacePrimaryDefault = exports.surfacePrimaryDefaultHover = exports.surfacePrimaryDefaultPressed = exports.surfaceSecondaryDefault = exports.surfaceSecondaryHover = exports.surfaceSecondaryPressed = exports.surfaceTertiaryDefault = exports.surfaceTertiaryHover = exports.surfaceTertiaryPressed = exports.surfaceFeedbackInfo = exports.surfaceFeedbackSuccess = exports.surfaceFeedbackWarning = exports.surfaceFeedbackCritical = exports.surfaceFeedbackTip = exports.fillPrimaryDefault = exports.fillPrimaryHover = exports.fillPrimaryPressed = exports.fillPrimarySelected = exports.fillPrimarySubtle = exports.fillPrimarySubtleHover = exports.fillPrimarySubtlePressed = exports.fillPrimaryInvisible = exports.fillSecondaryDefault = exports.fillSecondaryDefaultHover = exports.fillSecondaryDefaultPressed = exports.fillSecondarySubtle = exports.fillSecondarySubtleHover = exports.fillSecondarySubtlePressed = exports.fillTertiaryDefault = exports.fillTertiaryDefaultHover = exports.fillTertiaryDefaultPressed = exports.fillTertiarySubtle = exports.fillTertiarySubtleHover = exports.fillTertiarySubtlePressed = exports.fillFeedbackInfo = exports.fillFeedbackSuccess = exports.fillFeedbackWarning = exports.fillFeedbackCritical = exports.fillFeedbackTip = exports.foregroundDefault = exports.foregroundSubtle = exports.foregroundEmphasis = exports.foregroundInverse = exports.foregroundOnFillDefault = exports.foregroundOnFillInverse = exports.foregroundInteractiveLink = exports.foregroundInteractiveLinkHover = exports.foregroundInteractiveLinkPressed = exports.foregroundFeedbackInfo = exports.foregroundFeedbackSuccess = exports.foregroundFeedbackWarning = exports.foregroundFeedbackCritical = exports.foregroundFeedbackTip = exports.borderPrimaryDefault = exports.borderPrimaryHover = exports.borderPrimaryPressed = exports.borderPrimarySubtle = exports.borderPrimaryEmphasis = exports.borderPrimarySelected = exports.borderSecondaryDefault = exports.borderSecondaryHover = exports.borderSecondaryPressed = exports.borderTertiaryDefault = exports.borderTertiaryHover = exports.borderTertiaryPressed = exports.borderInteractiveFocus = exports.borderFeedbackInfo = exports.borderFeedbackSuccess = exports.borderFeedbackWarning = exports.borderFeedbackCritical = exports.borderFeedbackTip = exports.componentButtonActionBorderDefault = exports.componentButtonActionBorderHover = exports.componentButtonActionBorderPressed = exports.componentButtonActionFillDefault = exports.componentButtonActionFillHover = exports.componentButtonActionFillPressed = exports.componentButtonActionForegroundDefault = exports.componentButtonActionForegroundHover = exports.componentButtonPrimaryBorderDefault = exports.componentButtonPrimaryBorderHover = exports.componentButtonPrimaryBorderPressed = exports.componentButtonPrimaryFillDefault = exports.componentButtonPrimaryFillHover = exports.componentButtonPrimaryFillPressed = exports.componentButtonPrimaryForegroundDefault = exports.componentButtonPrimaryForegroundHover = exports.componentButtonSecondaryBorderDefault = exports.componentButtonSecondaryBorderHover = exports.componentButtonSecondaryBorderPressed = exports.componentButtonSecondaryFillDefault = exports.componentButtonSecondaryFillHover = exports.componentButtonSecondaryFillPressed = exports.componentButtonSecondaryForegroundDefault = exports.componentButtonSecondaryForegroundHover = exports.componentButtonTertiaryBorderDefault = exports.componentButtonTertiaryBorderHover = exports.componentButtonTertiaryBorderPressed = exports.componentButtonTertiaryFillDefault = exports.componentButtonTertiaryFillHover = exports.componentButtonTertiaryFillPressed = exports.componentButtonTertiaryForegroundDefault = exports.componentButtonTertiaryForegroundHover = exports.componentToggleswitchHandleDefault = exports.componentToggleswitchFillDefault = exports.componentToggleswitchFillDefaultHover = exports.componentToggleswitchFillDefaultPressed = exports.componentToggleswitchFillSelected = exports.componentToggleswitchFillSelectedHover = exports.componentToggleswitchFillSelectedPressed = exports.componentToggleswitchFillCritical = exports.componentLogoName = exports.componentLogoNumber1 = exports.componentLogoCircleDarkRed = exports.componentLogoCircleLightRed = void 0
+exports.backgroundDefault = 'var(--ffe-color-background-default)';
+exports.backgroundSubtle = 'var(--ffe-color-background-subtle)';
+exports.surfacePrimaryDefault = 'var(--ffe-color-surface-primary-default)';
+exports.surfacePrimaryDefaultHover = 'var(--ffe-color-surface-primary-default-hover)';
+exports.surfacePrimaryDefaultPressed = 'var(--ffe-color-surface-primary-default-pressed)';
+exports.surfaceSecondaryDefault = 'var(--ffe-color-surface-secondary-default)';
+exports.surfaceSecondaryHover = 'var(--ffe-color-surface-secondary-hover)';
+exports.surfaceSecondaryPressed = 'var(--ffe-color-surface-secondary-pressed)';
+exports.surfaceTertiaryDefault = 'var(--ffe-color-surface-tertiary-default)';
+exports.surfaceTertiaryHover = 'var(--ffe-color-surface-tertiary-hover)';
+exports.surfaceTertiaryPressed = 'var(--ffe-color-surface-tertiary-pressed)';
+exports.surfaceFeedbackInfo = 'var(--ffe-color-surface-feedback-info)';
+exports.surfaceFeedbackSuccess = 'var(--ffe-color-surface-feedback-success)';
+exports.surfaceFeedbackWarning = 'var(--ffe-color-surface-feedback-warning)';
+exports.surfaceFeedbackCritical = 'var(--ffe-color-surface-feedback-critical)';
+exports.surfaceFeedbackTip = 'var(--ffe-color-surface-feedback-tip)';
+exports.fillPrimaryDefault = 'var(--ffe-color-fill-primary-default)';
+exports.fillPrimaryHover = 'var(--ffe-color-fill-primary-hover)';
+exports.fillPrimaryPressed = 'var(--ffe-color-fill-primary-pressed)';
+exports.fillPrimarySelected = 'var(--ffe-color-fill-primary-selected)';
+exports.fillPrimarySubtle = 'var(--ffe-color-fill-primary-subtle)';
+exports.fillPrimarySubtleHover = 'var(--ffe-color-fill-primary-subtle-hover)';
+exports.fillPrimarySubtlePressed = 'var(--ffe-color-fill-primary-subtle-pressed)';
+exports.fillPrimaryInvisible = 'var(--ffe-color-fill-primary-invisible)';
+exports.fillSecondaryDefault = 'var(--ffe-color-fill-secondary-default)';
+exports.fillSecondaryDefaultHover = 'var(--ffe-color-fill-secondary-default-hover)';
+exports.fillSecondaryDefaultPressed = 'var(--ffe-color-fill-secondary-default-pressed)';
+exports.fillSecondarySubtle = 'var(--ffe-color-fill-secondary-subtle)';
+exports.fillSecondarySubtleHover = 'var(--ffe-color-fill-secondary-subtle-hover)';
+exports.fillSecondarySubtlePressed = 'var(--ffe-color-fill-secondary-subtle-pressed)';
+exports.fillTertiaryDefault = 'var(--ffe-color-fill-tertiary-default)';
+exports.fillTertiaryDefaultHover = 'var(--ffe-color-fill-tertiary-default-hover)';
+exports.fillTertiaryDefaultPressed = 'var(--ffe-color-fill-tertiary-default-pressed)';
+exports.fillTertiarySubtle = 'var(--ffe-color-fill-tertiary-subtle)';
+exports.fillTertiarySubtleHover = 'var(--ffe-color-fill-tertiary-subtle-hover)';
+exports.fillTertiarySubtlePressed = 'var(--ffe-color-fill-tertiary-subtle-pressed)';
+exports.fillFeedbackInfo = 'var(--ffe-color-fill-feedback-info)';
+exports.fillFeedbackSuccess = 'var(--ffe-color-fill-feedback-success)';
+exports.fillFeedbackWarning = 'var(--ffe-color-fill-feedback-warning)';
+exports.fillFeedbackCritical = 'var(--ffe-color-fill-feedback-critical)';
+exports.fillFeedbackTip = 'var(--ffe-color-fill-feedback-tip)';
+exports.foregroundDefault = 'var(--ffe-color-foreground-default)';
+exports.foregroundSubtle = 'var(--ffe-color-foreground-subtle)';
+exports.foregroundEmphasis = 'var(--ffe-color-foreground-emphasis)';
+exports.foregroundInverse = 'var(--ffe-color-foreground-inverse)';
+exports.foregroundOnFillDefault = 'var(--ffe-color-foreground-on-fill-default)';
+exports.foregroundOnFillInverse = 'var(--ffe-color-foreground-on-fill-inverse)';
+exports.foregroundInteractiveLink = 'var(--ffe-color-foreground-interactive-link)';
+exports.foregroundInteractiveLinkHover = 'var(--ffe-color-foreground-interactive-link-hover)';
+exports.foregroundInteractiveLinkPressed = 'var(--ffe-color-foreground-interactive-link-pressed)';
+exports.foregroundFeedbackInfo = 'var(--ffe-color-foreground-feedback-info)';
+exports.foregroundFeedbackSuccess = 'var(--ffe-color-foreground-feedback-success)';
+exports.foregroundFeedbackWarning = 'var(--ffe-color-foreground-feedback-warning)';
+exports.foregroundFeedbackCritical = 'var(--ffe-color-foreground-feedback-critical)';
+exports.foregroundFeedbackTip = 'var(--ffe-color-foreground-feedback-tip)';
+exports.borderPrimaryDefault = 'var(--ffe-color-border-primary-default)';
+exports.borderPrimaryHover = 'var(--ffe-color-border-primary-hover)';
+exports.borderPrimaryPressed = 'var(--ffe-color-border-primary-pressed)';
+exports.borderPrimarySubtle = 'var(--ffe-color-border-primary-subtle)';
+exports.borderPrimaryEmphasis = 'var(--ffe-color-border-primary-emphasis)';
+exports.borderPrimarySelected = 'var(--ffe-color-border-primary-selected)';
+exports.borderSecondaryDefault = 'var(--ffe-color-border-secondary-default)';
+exports.borderSecondaryHover = 'var(--ffe-color-border-secondary-hover)';
+exports.borderSecondaryPressed = 'var(--ffe-color-border-secondary-pressed)';
+exports.borderTertiaryDefault = 'var(--ffe-color-border-tertiary-default)';
+exports.borderTertiaryHover = 'var(--ffe-color-border-tertiary-hover)';
+exports.borderTertiaryPressed = 'var(--ffe-color-border-tertiary-pressed)';
+exports.borderInteractiveFocus = 'var(--ffe-color-border-interactive-focus)';
+exports.borderFeedbackInfo = 'var(--ffe-color-border-feedback-info)';
+exports.borderFeedbackSuccess = 'var(--ffe-color-border-feedback-success)';
+exports.borderFeedbackWarning = 'var(--ffe-color-border-feedback-warning)';
+exports.borderFeedbackCritical = 'var(--ffe-color-border-feedback-critical)';
+exports.borderFeedbackTip = 'var(--ffe-color-border-feedback-tip)';
+exports.componentButtonActionBorderDefault = 'var(--ffe-color-component-button-action-border-default)';
+exports.componentButtonActionBorderHover = 'var(--ffe-color-component-button-action-border-hover)';
+exports.componentButtonActionBorderPressed = 'var(--ffe-color-component-button-action-border-pressed)';
+exports.componentButtonActionFillDefault = 'var(--ffe-color-component-button-action-fill-default)';
+exports.componentButtonActionFillHover = 'var(--ffe-color-component-button-action-fill-hover)';
+exports.componentButtonActionFillPressed = 'var(--ffe-color-component-button-action-fill-pressed)';
+exports.componentButtonActionForegroundDefault = 'var(--ffe-color-component-button-action-foreground-default)';
+exports.componentButtonActionForegroundHover = 'var(--ffe-color-component-button-action-foreground-hover)';
+exports.componentButtonPrimaryBorderDefault = 'var(--ffe-color-component-button-primary-border-default)';
+exports.componentButtonPrimaryBorderHover = 'var(--ffe-color-component-button-primary-border-hover)';
+exports.componentButtonPrimaryBorderPressed = 'var(--ffe-color-component-button-primary-border-pressed)';
+exports.componentButtonPrimaryFillDefault = 'var(--ffe-color-component-button-primary-fill-default)';
+exports.componentButtonPrimaryFillHover = 'var(--ffe-color-component-button-primary-fill-hover)';
+exports.componentButtonPrimaryFillPressed = 'var(--ffe-color-component-button-primary-fill-pressed)';
+exports.componentButtonPrimaryForegroundDefault = 'var(--ffe-color-component-button-primary-foreground-default)';
+exports.componentButtonPrimaryForegroundHover = 'var(--ffe-color-component-button-primary-foreground-hover)';
+exports.componentButtonSecondaryBorderDefault = 'var(--ffe-color-component-button-secondary-border-default)';
+exports.componentButtonSecondaryBorderHover = 'var(--ffe-color-component-button-secondary-border-hover)';
+exports.componentButtonSecondaryBorderPressed = 'var(--ffe-color-component-button-secondary-border-pressed)';
+exports.componentButtonSecondaryFillDefault = 'var(--ffe-color-component-button-secondary-fill-default)';
+exports.componentButtonSecondaryFillHover = 'var(--ffe-color-component-button-secondary-fill-hover)';
+exports.componentButtonSecondaryFillPressed = 'var(--ffe-color-component-button-secondary-fill-pressed)';
+exports.componentButtonSecondaryForegroundDefault = 'var(--ffe-color-component-button-secondary-foreground-default)';
+exports.componentButtonSecondaryForegroundHover = 'var(--ffe-color-component-button-secondary-foreground-hover)';
+exports.componentButtonTertiaryBorderDefault = 'var(--ffe-color-component-button-tertiary-border-default)';
+exports.componentButtonTertiaryBorderHover = 'var(--ffe-color-component-button-tertiary-border-hover)';
+exports.componentButtonTertiaryBorderPressed = 'var(--ffe-color-component-button-tertiary-border-pressed)';
+exports.componentButtonTertiaryFillDefault = 'var(--ffe-color-component-button-tertiary-fill-default)';
+exports.componentButtonTertiaryFillHover = 'var(--ffe-color-component-button-tertiary-fill-hover)';
+exports.componentButtonTertiaryFillPressed = 'var(--ffe-color-component-button-tertiary-fill-pressed)';
+exports.componentButtonTertiaryForegroundDefault = 'var(--ffe-color-component-button-tertiary-foreground-default)';
+exports.componentButtonTertiaryForegroundHover = 'var(--ffe-color-component-button-tertiary-foreground-hover)';
+exports.componentToggleswitchHandleDefault = 'var(--ffe-color-component-toggleswitch-handle-default)';
+exports.componentToggleswitchFillDefault = 'var(--ffe-color-component-toggleswitch-fill-default)';
+exports.componentToggleswitchFillDefaultHover = 'var(--ffe-color-component-toggleswitch-fill-default-hover)';
+exports.componentToggleswitchFillDefaultPressed = 'var(--ffe-color-component-toggleswitch-fill-default-pressed)';
+exports.componentToggleswitchFillSelected = 'var(--ffe-color-component-toggleswitch-fill-selected)';
+exports.componentToggleswitchFillSelectedHover = 'var(--ffe-color-component-toggleswitch-fill-selected-hover)';
+exports.componentToggleswitchFillSelectedPressed = 'var(--ffe-color-component-toggleswitch-fill-selected-pressed)';
+exports.componentToggleswitchFillCritical = 'var(--ffe-color-component-toggleswitch-fill-critical)';
+exports.componentLogoName = 'var(--ffe-color-component-logo-name)';
+exports.componentLogoNumber1 = 'var(--ffe-color-component-logo-number1)';
+exports.componentLogoCircleDarkRed = 'var(--ffe-color-component-logo-circle-dark-red)';
+exports.componentLogoCircleLightRed = 'var(--ffe-color-component-logo-circle-light-red)';

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@sb1/ffe-core",
-    "version": "29.5.1",
+    "version": "30.0.0",
     "description": "Rammeverk for Felles Front End",
     "license": "MIT",
     "author": "SpareBank 1",
@@ -27,7 +27,7 @@
         "build": "npm run generate-semantic-colors && ./scripts/build.js tokens.config.js && ./scripts/build-custom-mq.js less/breakpoints.less css/custom-media-queries.css && ffe-buildtool tsc && lessc less/ffe.less css/ffe.css --autoprefix"
     },
     "devDependencies": {
-        "@sb1/ffe-buildtool": "^0.9.1",
+        "@sb1/ffe-buildtool": "^0.10.0",
         "case": "^1.5.5",
         "less": "^4.1.2",
         "postcss": "^8.3.6"
@@ -35,5 +35,5 @@
     "publishConfig": {
         "access": "public"
     },
-    "gitHead": "0e78fdb97c0d49fe152a4da4b0b883629623644d"
+    "gitHead": "5a72f08b0873cc96b0d439dd029839db4d5d4ea9"
 }

package/types/index.d.ts

@@ -1,6 +1,5 @@
 export * from './breakpoints';
 export * from './colors';
-export * from './colors-deprecated';
 export * from './dimensions';
 export * from './motion';
 export * from './spacing';

package/css/colors-deprecated.css

@@ -1,39 +0,0 @@
-:root,
-:host {
-  --ffe-blue-royal: #002776;
-  --ffe-blue-cobalt: #005aa4;
-  --ffe-blue-azure: #0071cd;
-  --ffe-blue-sky: #7fc6e8;
-  --ffe-blue-pale: #dff1f9;
-  --ffe-blue-ice: #eff8fc;
-  --ffe-blue-focus: #a1dfff;
-  --ffe-green: #37b441;
-  --ffe-green-shamrock: #008a00;
-  --ffe-green-emerald: #007b00;
-  --ffe-green-mint: #e1f4e3;
-  --ffe-orange: #ff9100;
-  --ffe-orange-fire: #da3d00;
-  --ffe-orange-salmon: #f3bbaa;
-  --ffe-red: #e60000;
-  --ffe-purple: #c94096;
-  --ffe-purple-magenta: #a20076;
-  --ffe-purple-violet: #551a8b;
-  --ffe-sand: #f8f5eb;
-  --ffe-white: #fff;
-  --ffe-grey: #adadad;
-  --ffe-grey-cloud: #f4f4f4;
-  --ffe-grey-silver: #ccc;
-  --ffe-grey-charcoal: #676767;
-  --ffe-grey-warm: #f6f6f3;
-  --ffe-black: #262626;
-  --ffe-blue-deep-sky: #008ed2;
-  --ffe-sand-ivory: #fbfaf5;
-  --ffe-black-darkmode: #000000;
-  --ffe-white-darkmode: #ffffff;
-  --ffe-grey-charcoal-darkmode: #1c1c1c;
-  --ffe-grey-darkmode: #292929;
-  --ffe-grey-silver-darkmode: #858585;
-  --ffe-grey-cloud-darkmode: #cccccc;
-  --ffe-blue-azure-darkmode: #0a91ff;
-  --ffe-red-darkmode: #ff2424;
-}

package/es/colors-deprecated.js

@@ -1,36 +0,0 @@
-export var blueRoyal = '#002776';
-export var blueCobalt = '#005aa4';
-export var blueAzure = '#0071cd';
-export var blueSky = '#7fc6e8';
-export var bluePale = '#dff1f9';
-export var blueIce = '#eff8fc';
-export var blueFocus = '#a1dfff';
-export var green = '#37b441';
-export var greenShamrock = '#008a00';
-export var greenEmerald = '#007b00';
-export var greenMint = '#e1f4e3';
-export var orange = '#ff9100';
-export var orangeFire = '#da3d00';
-export var orangeSalmon = '#f3bbaa';
-export var red = '#e60000';
-export var purple = '#c94096';
-export var purpleMagenta = '#a20076';
-export var purpleViolet = '#551a8b';
-export var sand = '#f8f5eb';
-export var white = '#fff';
-export var grey = '#adadad';
-export var greyCloud = '#f4f4f4';
-export var greySilver = '#ccc';
-export var greyCharcoal = '#676767';
-export var greyWarm = '#f6f6f3';
-export var black = '#262626';
-export var blueDeepSky = '#008ed2';
-export var sandIvory = '#fbfaf5';
-export var blackDarkmode = '#000000';
-export var whiteDarkmode = '#ffffff';
-export var greyCharcoalDarkmode = '#1c1c1c';
-export var greyDarkmode = '#292929';
-export var greySilverDarkmode = '#858585';
-export var greyCloudDarkmode = '#cccccc';
-export var blueAzureDarkmode = '#0a91ff';
-export var redDarkmode = '#ff2424';

package/less/colors-deprecated.less

@@ -1,59 +0,0 @@
-// ************************************** Deprecated *******************************************************'
-
-// Blue (Deprecated)
-@ffe-blue-royal: #002776; // Titles, lead, overlays
-@ffe-blue-cobalt: #005aa4; // Primary buttons, emphasis on blue areas and product cards
-@ffe-blue-azure: #0071cd; // Secondary buttons
-@ffe-blue-sky: #7fc6e8;
-@ffe-blue-pale: #dff1f9; // Info-boxes, etc.
-@ffe-blue-ice: #eff8fc; // Expandable table rows
-@ffe-blue-focus: #a1dfff; // Focus on buttons and controls
-
-// Green (Deprecated)
-@ffe-green: #37b441; // E.g. slider tool
-@ffe-green-shamrock: #008a00; // Action buttons, slider tool, (should indicate affordance)
-@ffe-green-emerald: #007b00;
-@ffe-green-mint: #e1f4e3; // ~20% opacity of ffe-green-shamrock. (Info-boxes, etc.)
-
-// Orange (Deprecated)
-@ffe-orange: #ff9100; // Campaigns
-@ffe-orange-fire: #da3d00; // Form validation, Error messages
-@ffe-orange-salmon: #f3bbaa; // ~20% opacity of ffe-orange-fire. (Info-boxes, etc.)
-
-// Red (Deprecated)
-@ffe-red: #e60000;
-
-// Purple (Deprecated)
-@ffe-purple: #c94096;
-@ffe-purple-magenta: #a20076;
-@ffe-purple-violet: #551a8b; // Visited links
-
-// Beige (Deprecated)
-@ffe-sand: #f8f5eb; // @ffe-sand + @ffe-sand-25
-
-// White (Deprecated)
-@ffe-white: #fff;
-
-// Grey (Deprecated)
-@ffe-grey: #adadad;
-@ffe-grey-cloud: #f4f4f4; // Background panels
-@ffe-grey-silver: #ccc; // Lines, borders, inactive tool elements (slider, etc.)
-@ffe-grey-charcoal: #676767;
-@ffe-grey-warm: #f6f6f3;
-
-// Black (Deprecated)
-@ffe-black: #262626; // Body text, and some other texts
-
-// Deprecated
-@ffe-blue-deep-sky: #008ed2; // Deprecated 05.2018 - Use @ffe-blue-azure in stead
-@ffe-sand-ivory: #fbfaf5; // Deprecated 05.2018 - Use @ffe-sand or @ffe-grey-warm in stead
-
-// Dark mode. Only for use in a native app context. (Deprecated)
-@ffe-black-darkmode: #000000; // Default background color
-@ffe-white-darkmode: #ffffff; // Emphasized text
-@ffe-grey-charcoal-darkmode: #1c1c1c; // Emphasized surfaces
-@ffe-grey-darkmode: #292929; // Interactive surfaces
-@ffe-grey-silver-darkmode: #858585; // Borders and accents
-@ffe-grey-cloud-darkmode: #cccccc; // Default font color on default background and form labels
-@ffe-blue-azure-darkmode: #0a91ff; // Primary interaction and icon color
-@ffe-red-darkmode: #ff2424; // Tweaked ffe-red for better contrast

package/lib/colors-deprecated.js

@@ -1,39 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.redDarkmode = exports.blueAzureDarkmode = exports.greyCloudDarkmode = exports.greySilverDarkmode = exports.greyDarkmode = exports.greyCharcoalDarkmode = exports.whiteDarkmode = exports.blackDarkmode = exports.sandIvory = exports.blueDeepSky = exports.black = exports.greyWarm = exports.greyCharcoal = exports.greySilver = exports.greyCloud = exports.grey = exports.white = exports.sand = exports.purpleViolet = exports.purpleMagenta = exports.purple = exports.red = exports.orangeSalmon = exports.orangeFire = exports.orange = exports.greenMint = exports.greenEmerald = exports.greenShamrock = exports.green = exports.blueFocus = exports.blueIce = exports.bluePale = exports.blueSky = exports.blueAzure = exports.blueCobalt = exports.blueRoyal = void 0;
-exports.blueRoyal = '#002776';
-exports.blueCobalt = '#005aa4';
-exports.blueAzure = '#0071cd';
-exports.blueSky = '#7fc6e8';
-exports.bluePale = '#dff1f9';
-exports.blueIce = '#eff8fc';
-exports.blueFocus = '#a1dfff';
-exports.green = '#37b441';
-exports.greenShamrock = '#008a00';
-exports.greenEmerald = '#007b00';
-exports.greenMint = '#e1f4e3';
-exports.orange = '#ff9100';
-exports.orangeFire = '#da3d00';
-exports.orangeSalmon = '#f3bbaa';
-exports.red = '#e60000';
-exports.purple = '#c94096';
-exports.purpleMagenta = '#a20076';
-exports.purpleViolet = '#551a8b';
-exports.sand = '#f8f5eb';
-exports.white = '#fff';
-exports.grey = '#adadad';
-exports.greyCloud = '#f4f4f4';
-exports.greySilver = '#ccc';
-exports.greyCharcoal = '#676767';
-exports.greyWarm = '#f6f6f3';
-exports.black = '#262626';
-exports.blueDeepSky = '#008ed2';
-exports.sandIvory = '#fbfaf5';
-exports.blackDarkmode = '#000000';
-exports.whiteDarkmode = '#ffffff';
-exports.greyCharcoalDarkmode = '#1c1c1c';
-exports.greyDarkmode = '#292929';
-exports.greySilverDarkmode = '#858585';
-exports.greyCloudDarkmode = '#cccccc';
-exports.blueAzureDarkmode = '#0a91ff';
-exports.redDarkmode = '#ff2424';