@fkui/theme-default 6.0.0

package/src/_css-variables.scss

@@ -0,0 +1,377 @@
+// stylelint-disable custom-property-empty-line-before -- technical debt, should just add a comment before each block
+
+@use "palette-variables" as *;
+
+@mixin css-variables {
+    // ***********
+    // TEXT COLORS
+    // ***********
+    --f-text-color-default: #{$palette-color-fk-black-100}; // global
+    --f-text-color-default-inverted: #{$palette-color-white-100}; // global
+    --f-text-color-discrete: #{$palette-color-fk-black-70}; // label, table
+    --f-text-color-weekday-weeknumber: #{$palette-color-fk-black-70};
+    --f-text-color-error: #{$palette-color-red-85}; // label, error-list, form-step
+
+    --f-text-color-link: #{$palette-color-bluebell-100};
+    --f-text-color-link-hover: #{$palette-color-fk-black-100};
+    --f-text-color-link-discrete: #{$palette-color-fk-black-100};
+    --f-text-color-link-discrete-hover: #{$palette-color-bluebell-100};
+
+    --f-text-color-heading-1: inherit;
+    --f-text-color-heading-2: inherit;
+    --f-text-color-heading-3: inherit;
+    --f-text-color-heading-4: inherit;
+    --f-text-color-heading-5: inherit;
+    --f-text-color-heading-6: inherit;
+    --f-text-color-input-disabled: #{$palette-color-fk-black-50}; // checkbox
+    --f-text-color-pageheader: #{$palette-color-green-a-100}; // navbar
+    --f-text-color-navbar: #{$palette-color-white-100}; // navbar
+    --f-text-color-navbar-active: #{$palette-color-white-100}; // navbar
+    --f-text-color-heading-expandable-panel: #{$palette-color-white-100};
+    --f-text-color-wizard-step-done: #{$palette-color-green-a-85}; // wizard-step
+
+    --f-text-color-button-standard: #{$palette-color-bluebell-100};
+    --f-text-color-button-discrete: #{$palette-color-bluebell-100};
+    --f-text-color-button-discrete-disabled: #{$palette-color-fk-black-50};
+    --f-text-color-button-discrete-hover: #{$palette-color-bluebell-120};
+    --f-text-color-button-discrete-inverted: #{$palette-color-white-100};
+    --f-text-color-button-discrete-inverted-hover: #{$palette-color-white-100};
+    --f-text-color-button-discrete-inverted-disabled: #{$palette-color-bluebell-15};
+
+    --f-text-color-menu: #{$palette-color-fk-black-100};
+    --f-text-color-menu-hover: #{$palette-color-fk-black-100};
+    --f-text-color-menu-horizontal-highlight: #{$palette-color-fk-black-100};
+
+    --f-text-color-popupmenu: #{$palette-color-fk-black-100};
+    --f-text-color-popupmenu-hover: #{$palette-color-fk-black-100};
+
+    --f-text-color-close-button: #{$palette-color-fk-black-100};
+
+    // ***********
+    // ICON COLORS
+    // ***********
+    --f-icon-color-white: #{$palette-color-white-100}; // global
+    --f-icon-color-black: #{$palette-color-fk-black-100}; // global
+    --f-icon-color-info: #{$palette-color-bluebell-100}; // message-box, modal, tooltip
+
+    --f-icon-color-primary: #{$palette-color-bluebell-100}; // select-field, file-item, file-selector, calendar
+    --f-icon-color-discrete: #{$palette-color-fk-black-70}; // wizard-step
+    --f-icon-color-success: #{$palette-color-green-a-85}; // message-box, text-field, form-step
+    --f-icon-color-warning: #{$palette-color-yellow-100}; // message-box, modal
+    --f-icon-color-error: #{$palette-color-red-100}; // message-box, text-field, textarea, modal, file-item
+    --f-icon-color-input: #{$palette-color-fk-black-50}; // textfield
+    --f-icon-color-notice: #{$palette-color-tegel-100}; // expandable-panel
+    --f-icon-color-loader: #{$palette-color-green-a-85};
+    --f-icon-color-expandable-panel: #{$palette-color-white-100};
+    --f-icon-color-expandable-paragraph: #{$palette-color-green-a-85};
+    --f-icon-color-table-header: #{$palette-color-fk-black-100}; // table
+    --f-icon-color-table-header-discrete: #{$palette-color-fk-black-50}; // table
+    --f-icon-color-sort-filter-dataset-close: #{$palette-color-fk-black-100}; // sort-filter-dataset
+    --f-icon-color-sort-filter-dataset-search: #{$palette-color-fk-black-50}; // sort-filter-dataset
+    --f-icon-color-wizard-step-pending: #{$palette-color-fk-black-5}; // wizard-step
+    --f-icon-color-wizard-step-done: #{$palette-color-green-a-85}; // wizard-step
+    --f-icon-color-success-background: #{$palette-color-green-a-15};
+
+    // *****************
+    // BACKGROUND COLORS
+    // *****************
+    --f-background-content: #{$palette-color-white-100}; // modal, expandable, navbar content
+    --f-background-form-step: #{$palette-color-fk-black-5}; // form-step
+    --f-background-input: #{$palette-color-white-100}; // input element
+    --f-background-input-selected: #{$palette-color-bluebell-100}; // checkbox, radiobutton
+    --f-background-input-selected-disabled: #{$palette-color-fk-black-50}; // checkbox, radiobutton
+    --f-background-error: #{$palette-color-red-5}; // modal, messagebox
+    --f-background-info: #{$palette-color-bluebell-5}; // modal, messagebox, tooltip
+    --f-background-warning: #{$palette-color-yellow-5}; // modal, messagebox
+    --f-background-success: #{$palette-color-green-a-5}; // modal, messagebox
+    --f-background-overlay: rgba(0, 0, 0, 0.75); // modal, loader
+
+    --f-background-progress: #{$palette-color-fk-black-15};
+    --f-background-progress-ongoing: #{$palette-color-yellow-85};
+    --f-background-progress-file-item-ongoing: #{$palette-color-yellow-85};
+    --f-background-progress-finished: #{$palette-color-green-b-85};
+    --f-background-pageheader-standard: #{$palette-color-white-100}; // navbar
+    --f-background-pageheader-primary: #{$palette-color-green-a-100}; // navbar
+    --f-background-pageheader-secondary: #{$palette-color-green-b-15}; // navbar
+    --f-background-skiplink-focus: #{$palette-color-bluebell-5};
+    --f-background-heading-expandable-panel: #{$palette-color-green-a-100};
+    --f-background-heading-expandable-panel-hover: #{$palette-color-green-a-85};
+    --f-background-expandable-panel: #{$palette-color-white-100};
+    --f-background-heading-static-panel: #{$palette-color-green-b-50};
+    --f-background-navbar: #{$palette-color-green-a-100};
+    --f-background-navbar-hover: #{$palette-color-green-b-100};
+    --f-background-code: #{$palette-color-fk-black-5};
+    --f-background-wizard-step-line: #{$palette-color-fk-black-70}; // wizard-step
+
+    --f-background-button-discrete-hover: none;
+    --f-background-sidepanel-button-tertiary-hover: #{$palette-color-bluebell-15}; //  FLeftPanel and FRightPanel
+
+    --f-background-grid-default: #{$palette-color-white-100}; // list, table
+    --f-background-grid-selected: #{$palette-color-bluebell-5}; // list, table
+    --f-background-grid-active: #{$palette-color-bluebell-15}; // list, table
+    --f-background-grid-hover: #{$palette-color-bluebell-5}; // list, table (also focus)
+    --f-background-grid-striped: #{$palette-color-fk-black-5}; // list, table
+    --f-background-grid-header: #{$palette-color-fk-black-5}; // table
+    --f-background-grid-focus-inner: #{$palette-color-bluebell-5}; // table
+
+    --f-background-tab-active: #{$palette-color-white-100};
+    --f-background-tab-inactive: #{$palette-color-bluebell-5};
+
+    --f-background-calendar-default: #{$palette-color-fk-black-5};
+    --f-background-calendar-selected: #{$palette-color-green-a-100};
+    --f-background-calendar-hover: #{$palette-color-bluebell-15};
+
+    --f-background-menu: #{$palette-color-fk-black-5};
+    --f-background-menu-vertical-hover: #{$palette-color-fk-black-15};
+    --f-background-menu-vertical-highlight: #{$palette-color-green-b-15};
+
+    --f-background-popupmenu: #{$palette-color-white-100};
+    --f-background-popupmenu-vertical-hover: #{$palette-color-fk-black-15};
+    --f-background-popupmenu-vertical-highlight: #{$palette-color-green-b-15};
+
+    --f-background-month: #{$palette-color-fk-black-5};
+    --f-background-dialogue-tree: #{$palette-color-white-100};
+    --f-background-dialogue-tree-hover: #{$palette-color-bluebell-15};
+
+    --f-background-modal-shelf: #{$palette-color-white-100};
+
+    // *************
+    // BORDER COLORS
+    // *************
+    --f-border-color-modal: #{$palette-color-fk-black-50};
+    --f-border-color-info: #{$palette-color-bluebell-100}; // message-box, modal
+    --f-border-color-success: #{$palette-color-green-a-85}; // message-box, textfield, textarea, form-step
+    --f-border-color-warning: #{$palette-color-yellow-100}; // message-box, modal
+    --f-border-color-error: #{$palette-color-red-100}; // message-box, modal, textfield, textarea
+    --f-border-color-input: #{$palette-color-fk-black-50};
+    --f-border-color-input-inner: #{$palette-color-bluebell-15}; // radiobutton
+    --f-border-color-input-inner-selected: #{$palette-color-bluebell-15}; // radiobutton
+    --f-border-color-input-inner-disabled: #{$palette-color-white-100}; // radiobutton
+    --f-border-color-card: #{$palette-color-fk-black-50}; // Card
+    --f-border-color-dialogue-tree: #{$palette-color-fk-black-50}; // Dialogue tree
+
+    --f-border-color-calendar-highlight: #{$palette-color-fk-black-70};
+    --f-border-color-calendar-disabled: #{$palette-color-fk-black-50};
+    --f-border-color-calendar-navbar: #{$palette-color-fk-black-15};
+    --f-border-color-calendar-selected: #{$palette-color-white-100};
+    --f-border-color-form-step: #{$palette-color-fk-black-15};
+    --f-border-color-progress-finished: #{$palette-color-green-b-120};
+    --f-border-color-progress-ongoing: #{$palette-color-fk-black-70};
+    --f-border-color-progress-file-item-ongoing: #{$palette-color-fk-black-70};
+
+    --f-border-color-panel: #{$palette-color-green-b-15}; // expandable-panel, static-panel palettfärg!?
+    --f-border-color-expandable-panel: #{$palette-color-green-a-100};
+    --f-border-color-static-panel: #{$palette-color-green-b-50};
+
+    --f-border-color-separator: #{$palette-color-fk-black-15}; // radio-button-group, file-item, expandable-paragraph
+    --f-border-color-separator-pageheader-standard: #{$palette-color-green-a-100};
+    --f-border-color-separator-pageheader-primary: #{$palette-color-white-100};
+    --f-border-color-separator-pageheader-secondary: #{$palette-color-green-a-100};
+    --f-border-color-separator-contextmenu: #{$palette-color-fk-black-50};
+    --f-border-color-navbar-active: #{$palette-color-white-100};
+    --f-border-color-navbar-hover: #{$palette-color-white-100};
+    --f-border-color-wizard-step-line: #{$palette-color-fk-black-70}; // wizard-step
+    --f-border-color-link: #{$palette-color-bluebell-100};
+    --f-border-color-link-hover: #{$palette-color-fk-black-50};
+    --f-border-color-link-discrete: #{$palette-color-fk-black-50};
+    --f-border-color-link-discrete-hover: #{$palette-color-bluebell-100};
+
+    --f-border-color-grid: #{$palette-color-fk-black-50}; // list, table
+    --f-border-color-grid-header: #{$palette-color-fk-black-50}; // list, table
+    --f-border-color-grid-hover: #{$palette-color-fk-black-50}; // list, table
+    --f-border-color-grid-expanded: #{$palette-color-fk-black-15}; // table
+    --f-border-color-expandable-panel-closed: none;
+
+    --f-border-color-menu-horizontal: #{$palette-color-green-a-100};
+    --f-border-color-menu-horizontal-hover: #{$palette-color-green-b-50};
+    --f-border-color-menu-horizontal-highlight: #{$palette-color-green-a-100};
+
+    --f-border-color-popupmenu: #{$palette-color-fk-black-15};
+
+    // *******************
+    // COLOR VARIABLES END
+    // *******************
+
+    /// Shadow variables
+    --f-box-modal-shadow: 0 0 20px rgba(0, 0, 0, 0.3); // Messagebox, modal, popup
+    --f-input-shadow-inset: inset 0 2px 3px rgba(0, 0, 0, 0.1); //  Inner shadow input fields
+
+    /// Font variables
+    --f-font-family: "ExpFont", "NeueHass", "Helvetica Neue", "Helvetica", "Roboto", "Arial", sans-serif;
+    --f-font-family-code: "Consolas", "Liberation Mono", "Courier", monospace;
+
+    /// Default font size, 1 rem will be based on this value.
+    --f-font-size-default-rem: 16px;
+
+    /// Default font size for larger viewports, 1 rem will be based on this value.
+    --f-font-size-default-large-up-rem: 16px;
+
+    /// Font weight
+    --f-font-weight-normal: 400;
+    --f-font-weight-medium: 700;
+    --f-font-weight-bold: 900;
+
+    /// Font line height
+    --f-line-height-small: 1.25;
+    --f-line-height-medium: 1.4;
+    --f-line-height-large: 1.5;
+
+    /// Font sizes, desktop and mobile
+    --f-font-size-h1: 2.5rem; // Desktop h1
+    --f-font-size-h2: 1.75rem; // Desktop h2, mobile h1
+    --f-font-size-xxx-large: 1.5rem; // Desktop h3, mobile h2
+    --f-font-size-h3: 1.375rem; // Desktop h4
+    $_f-font-size-h4: 1.25rem;
+    --f-font-size-h4: #{$_f-font-size-h4}; // Desktop h5, mobile h3
+    --f-font-size-large: 1.125rem; // Desktop h6, mobile h4
+    --f-font-size-standard: 1rem; // Desktop normal, mobile normal, h5, h6
+
+    /// Height, width and icon size variables
+    /// Default icon size
+    --f-icon-size-x-small: 0.75rem;
+    --f-icon-size-small: 1rem;
+    --f-icon-size-medium: 1.25rem;
+    --f-icon-size-large: 1.5rem;
+
+    /// Larger icon size
+    --f-icon-size-x-large: 2rem;
+
+    /// Smaller elements, for example progressbar
+    --f-height-small: 0.75rem; // progressbar
+    --f-height-medium: 1.25rem; // Form elements, for example checkbox and radio-button.
+    --f-height-large: 2.5rem; // Form elements, for example text field and select field.
+    --f-width-full: 100%; // Full-width, for example text field and select field.
+
+    /// Borders
+    --f-border-width-small: 1px; // Small used for progressbar
+    --f-border-width-medium: 2px; // button, chip, input elemenents, expandable panel, expandable paragraph, static panel, tooltip, file-item, messagebox, modal
+    --f-border-radius-small: 2px;
+
+    $_f-border-radius-medium: 4px;
+    --f-border-radius-medium: #{$_f-border-radius-medium}; // Medium used for for example button, select field, text field, textarea field.
+
+    /// Standard margin for components
+    --f-margin-component-bottom: 1.5rem;
+
+    /// Padding textfield, textarea, select
+    --padding-input-fields: 0 2.25rem 0 0.75rem;
+
+    /// Focus related
+    $_f-color-focus: $palette-color-fk-black-100;
+    --f-color-focus: #{$_f-color-focus};
+    --f-focus-box-shadow: 0 0 0 2px #{$palette-color-white-100}, 0 0 0 4px #{$_f-color-focus}, 0 0 0 6px #{$palette-color-white-100};
+
+    // Effect related variables
+    --f-animation-duration-short: 150ms;
+    --f-animation-duration-medium: 350ms;
+    --f-animation-duration-long: 500ms;
+    --f-animation-expand-open: all 400ms cubic-bezier(0.46, 0.03, 0.52, 0.96) 0s;
+    --f-animation-expand-close: all 500ms cubic-bezier(0.46, 0.03, 0.52, 0.96) 0s;
+
+    // Density
+    --f-density-factor: 1;
+
+    // ****************************
+    // COMPONENT SPECIFIC VARIABLES
+    // ****************************
+    --f-static-panel-heading-border: none;
+    --f-expandable-panel-heading-border-close: none;
+    --f-expandable-panel-heading-border-open: none;
+    --f-expandable-panel-heading-border-radius: #{$_f-border-radius-medium} #{$_f-border-radius-medium} 0 0;
+    --f-label-message-margin-top: 0.25rem;
+
+    $_f-button-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
+    --f-button-shadow: #{$_f-button-shadow};
+    --f-button-shadow-hover: #{$_f-button-shadow};
+    --f-button-min-width: 9.5rem;
+    --f-button-letter-spacing: 0.01rem;
+    --f-button-default-line-height: 1.5rem;
+    --f-button-discrete-radius-hover: none;
+    --f-button-discrete-table-column-action-margin: 0;
+    --f-button-discrete-table-column-action-border-radius: #{$_f-border-radius-medium};
+    --f-button-discrete-table-column-action-icon-margin: 0 2px 0 2px;
+    --f-button-tertiary-table-column-action-margin: 0 0 0 0.5rem;
+
+    $_f-button-default-padding-top: 1rem;
+    $_f-button-default-padding-right: 1.5rem;
+    $_f-button-default-padding-bottom: 1rem;
+    $_f-button-default-padding-left: 1.5rem;
+
+    --f-button-default-padding-top: #{$_f-button-default-padding-top};
+    --f-button-default-padding-right: #{$_f-button-default-padding-right};
+    --f-button-default-padding-bottom: #{$_f-button-default-padding-bottom};
+    --f-button-default-padding-left: #{$_f-button-default-padding-left};
+
+    --f-button-primary-padding-top: #{$_f-button-default-padding-top};
+    --f-button-primary-padding-right: #{$_f-button-default-padding-right};
+    --f-button-primary-padding-bottom: #{$_f-button-default-padding-bottom};
+    --f-button-primary-padding-left: #{$_f-button-default-padding-left};
+
+    --f-button-secondary-padding-top: #{$_f-button-default-padding-top};
+    --f-button-secondary-padding-right: #{$_f-button-default-padding-right};
+    --f-button-secondary-padding-bottom: #{$_f-button-default-padding-bottom};
+    --f-button-secondary-padding-left: #{$_f-button-default-padding-left};
+
+    --f-button-standard-padding-top: #{$_f-button-default-padding-top};
+    --f-button-standard-padding-right: #{$_f-button-default-padding-right};
+    --f-button-standard-padding-bottom: #{$_f-button-default-padding-bottom};
+    --f-button-standard-padding-left: #{$_f-button-default-padding-left};
+
+    --f-button-tertiary-padding-top: 0.75rem;
+    --f-button-tertiary-padding-right: 0.5rem;
+    --f-button-tertiary-padding-bottom: 0.75rem;
+    --f-button-tertiary-padding-left: 0.5rem;
+
+    $_f-button-discrete-padding-top: initial;
+    $_f-button-discrete-padding-right: initial;
+    $_f-button-discrete-padding-bottom: initial;
+    $_f-button-discrete-padding-left: initial;
+
+    --f-button-discrete-padding-top: #{$_f-button-discrete-padding-top};
+    --f-button-discrete-padding-right: #{$_f-button-discrete-padding-right};
+    --f-button-discrete-padding-bottom: #{$_f-button-discrete-padding-bottom};
+    --f-button-discrete-padding-left: #{$_f-button-discrete-padding-left};
+
+    --f-button-discrete-black-padding-top: #{$_f-button-discrete-padding-top};
+    --f-button-discrete-black-padding-right: #{$_f-button-discrete-padding-right};
+    --f-button-discrete-black-padding-bottom: #{$_f-button-discrete-padding-bottom};
+    --f-button-discrete-black-padding-left: #{$_f-button-discrete-padding-left};
+
+    --f-button-discrete-table-column-action-padding-top: 0.571rem;
+    --f-button-discrete-table-column-action-padding-right: 0.571rem;
+    --f-button-discrete-table-column-action-padding-bottom: 0.571rem;
+    --f-button-discrete-table-column-action-padding-left: 0.571rem;
+
+    --f-modal-close-button-margin: 1rem 1rem 0;
+    --f-modal-close-button-padding: none;
+    --f-modal-size-small: 500px;
+    --f-modal-size-medium: 700px;
+    --f-modal-size-large: 1200px;
+    --f-modal-size-fullwidth: 100%;
+    --f-modal-title-font-size: #{$_f-font-size-h4};
+
+    --f-tooltip-close-button-margin: 0.375rem 0.375rem 0.625rem 0.625rem;
+    --f-tooltip-border-color: #{$palette-color-fk-black-50};
+    --f-tooltip-border-width: var(--f-border-width-medium);
+
+    --f-loader-size: 4rem;
+    --f-loader-margin: 0 auto 3rem auto;
+
+    --f-table-body-row-padding: 0.5rem;
+
+    --f-list-item-itempane-padding: 1.25rem;
+
+    --i-popup-error-offset: 24px;
+
+    --f-tooltip-offset: 0px;
+    --f-tooltip-icon-size: 0px;
+
+    --f-logo-image-small: none;
+    --f-logo-image-large: none;
+    --f-logo-size-small: 0.8rem;
+    --f-logo-size-large: 0.8rem 6.195rem;
+
+    // ********************************
+    // COMPONENT SPECIFIC VARIABLES END
+    // ********************************
+}

package/src/_int-css-variables.scss

@@ -0,0 +1,169 @@
+// stylelint-disable custom-property-empty-line-before -- technical debt, should just add a comment before each block
+
+@use "palette-variables" as *;
+
+@mixin css-variables {
+    // ********
+    // SEMANTIC
+    // ********
+    --fkds-color-action-border-primary-default: #{$palette-color-fk-black-50};
+    --fkds-color-action-background-primary-default: #{$palette-color-green-a-100};
+    --fkds-color-action-background-primary-hover: #{$palette-color-green-a-120};
+    --fkds-color-action-text-primary-default: #{$palette-color-green-a-100};
+
+    .button--secondary {
+        --fkds-color-action-text-primary-default: #{$palette-color-fk-black-100};
+    }
+
+    .button--tertiary {
+        &:hover {
+            --fkds-color-action-background-secondary-hover: #{$palette-color-fk-black-5};
+        }
+    }
+
+    // ***********
+    // TEXT COLORS
+    // ***********
+    --f-text-color-heading-1: #{$palette-color-green-a-100};
+    --f-text-color-heading-2: #{$palette-color-green-a-85};
+    --f-text-color-heading-3: #{$palette-color-fk-black-100};
+    --f-text-color-heading-4: #{$palette-color-fk-black-100};
+    --f-text-color-heading-5: #{$palette-color-fk-black-100};
+    --f-text-color-heading-6: #{$palette-color-fk-black-100};
+    --f-text-color-navbar: #{$palette-color-green-b-15};
+    --f-text-color-heading-expandable-panel: #{$palette-color-fk-black-100};
+    --f-text-color-button-standard: #{$palette-color-fk-black-100};
+    --f-text-color-button-discrete: #{$palette-color-green-a-100};
+    --f-text-color-button-discrete-hover: #{$palette-color-green-a-100};
+    --f-text-color-button-discrete-inverted: #{$palette-color-fk-black-5};
+    --f-text-color-button-discrete-inverted-hover: #{$palette-color-bluebell-5};
+
+    // ***********
+    // ICON COLORS
+    // ***********
+    --f-icon-color-primary: #{$palette-color-green-a-100};
+    --f-icon-color-expandable-panel: #{$palette-color-green-a-85};
+
+    // *****************
+    // BACKGROUND COLORS
+    // *****************
+    --f-background-input-selected: #{$palette-color-green-a-100};
+    --f-background-input-selected-disabled: #{$palette-color-green-b-15};
+    --f-background-heading-expandable-panel: #{$palette-color-bluebell-5};
+    --f-background-heading-expandable-panel-hover: #{$palette-color-bluebell-15};
+    --f-background-heading-static-panel: #{$palette-color-bluebell-5};
+    --f-background-button-primary: #{$palette-color-green-a-100};
+    --f-background-button-primary-hover: #{$palette-color-green-a-120};
+    --f-background-button-discrete-hover: #{$palette-color-fk-black-5};
+    --f-background-sidepanel-button-tertiary-hover: #{$palette-color-fk-black-15};
+    --f-background-grid-selected: #{$palette-color-green-a-5};
+    --f-background-grid-active: #{$palette-color-green-a-15};
+    --f-background-grid-striped: #{$palette-color-bluebell-5};
+    --f-background-grid-header: #{$palette-color-bluebell-5};
+    --f-background-menu-vertical-highlight: #{$palette-color-green-a-15};
+    --f-background-popupmenu-vertical-hover: #{$palette-color-black-15};
+    --f-background-popupmenu-vertical-highlight: #{$palette-color-green-a-15};
+
+    // *************
+    // BORDER COLORS
+    // *************
+    $f-border-color-panel: #{$palette-color-fk-black-15};
+    $f-border-color-expandable-panel-closed: #{$palette-color-fk-black-50};
+    --f-border-color-input-inner: #{$palette-color-white-100};
+    --f-border-color-input-inner-selected: #{$palette-color-green-a-5};
+    --f-border-color-card: #{$palette-color-fk-black-15};
+    --f-border-color-calendar-disabled: #{$palette-color-fk-black-30};
+    --f-border-color-panel: #{$f-border-color-panel};
+    --f-border-color-button-standard: #{$palette-color-fk-black-50};
+    --f-border-color-button-secondary: #{$palette-color-fk-black-50};
+    --f-border-color-grid: #{$palette-color-fk-black-15};
+    --f-border-color-expandable-panel-closed: #{$f-border-color-expandable-panel-closed};
+    --f-border-color-menu-horizontal-hover: #{$palette-color-green-b-100};
+
+    // *****************
+    // GENERAL VARIABLES
+    // *****************
+    $_font-size-h2: 1.35rem;
+    --f-font-family: "IntFont", "NeueHass", "Arial", "Helvetica Neue", "Helvetica", "Roboto", sans-serif;
+    --f-font-size-default-rem: 14px;
+    --f-font-size-default-large-up-rem: 14px;
+    --f-font-size-h1: 1.65rem;
+    --f-font-size-h2: #{$_font-size-h2};
+    --f-font-size-xxx-large: 1.2rem;
+    --f-font-size-h3: 1.2rem;
+    --f-font-size-h4: 1rem;
+    --f-font-size-large: 1rem;
+
+    $f-color-focus: #ffcc00;
+    --f-color-focus: #{$f-color-focus};
+    --f-focus-box-shadow: 0 0 0 2px #{$palette-color-white-100}, 0 0 0 4px #{$f-color-focus};
+
+    --f-height-large: 2.3rem;
+    --f-icon-size-small: 1.143rem;
+    --f-input-shadow-inset: none;
+    --f-border-width-medium: 1px;
+
+    // ****************************
+    // COMPONENT SPECIFIC VARIABLES
+    // ****************************
+    $_f-button-default-padding-top: 0.75rem;
+    $_f-button-default-padding-right: 1rem;
+    $_f-button-default-padding-bottom: 0.75rem;
+    $_f-button-default-padding-left: 1rem;
+    --f-button-shadow: none;
+    --f-button-shadow-hover: 0 1px 4px rgba(0, 0, 0, 0.4);
+    --f-button-min-width: 80px;
+    --f-button-letter-spacing: normal;
+    --f-button-default-line-height: calc(1.25 * 1rem);
+    --f-button-discrete-radius-hover: 3rem;
+    --f-button-discrete-table-column-action-margin: 0 0 0 0.9rem;
+    --f-button-discrete-table-column-action-border-radius: 0.4rem;
+    --f-button-default-padding-top: #{$_f-button-default-padding-top};
+    --f-button-default-padding-right: #{$_f-button-default-padding-right};
+    --f-button-default-padding-bottom: #{$_f-button-default-padding-bottom};
+    --f-button-default-padding-left: #{$_f-button-default-padding-left};
+    --f-button-primary-padding-top: #{$_f-button-default-padding-top};
+    --f-button-primary-padding-right: #{$_f-button-default-padding-right};
+    --f-button-primary-padding-bottom: #{$_f-button-default-padding-bottom};
+    --f-button-primary-padding-left: #{$_f-button-default-padding-left};
+    --f-button-secondary-padding-top: #{$_f-button-default-padding-top};
+    --f-button-secondary-padding-right: #{$_f-button-default-padding-right};
+    --f-button-secondary-padding-bottom: #{$_f-button-default-padding-bottom};
+    --f-button-secondary-padding-left: #{$_f-button-default-padding-left};
+    --f-button-standard-padding-top: #{$_f-button-default-padding-top};
+    --f-button-standard-padding-right: #{$_f-button-default-padding-right};
+    --f-button-standard-padding-bottom: #{$_f-button-default-padding-bottom};
+    --f-button-standard-padding-left: #{$_f-button-default-padding-left};
+    --f-button-discrete-padding-top: 0.6rem;
+    --f-button-discrete-padding-right: 1rem;
+    --f-button-discrete-padding-bottom: 0.6rem;
+    --f-button-discrete-padding-left: 1rem;
+    --f-button-discrete-black-padding-top: 0.4rem;
+    --f-button-discrete-black-padding-right: 0.4rem;
+    --f-button-discrete-black-padding-bottom: 0.4rem;
+    --f-button-discrete-black-padding-left: 0.4rem;
+    --f-button-discrete-table-column-action-padding-top: 0.2rem;
+    --f-button-discrete-table-column-action-padding-right: 0.2rem;
+    --f-button-discrete-table-column-action-padding-bottom: 0.2rem;
+    --f-button-discrete-table-column-action-padding-left: 0.2rem;
+
+    --f-expandable-panel-heading-border-close: 1px solid #{$f-border-color-expandable-panel-closed};
+    --f-expandable-panel-heading-border-open: 1px solid #{$f-border-color-panel};
+    --f-expandable-panel-heading-border-radius: none;
+
+    --f-label-message-margin-top: initial;
+
+    --f-list-item-itempane-padding: 0.8rem;
+
+    --f-modal-close-button-margin: 2px;
+    --f-modal-close-button-padding: 0.5rem;
+    --f-modal-title-font-size: #{$_font-size-h2};
+
+    --f-static-panel-heading-border: 1px solid #{$f-border-color-panel};
+
+    --f-table-body-row-padding: 0.4rem;
+
+    --f-tooltip-border-width: var(--f-border-width-small);
+
+    --i-popup-error-offset: 16px;
+}

package/src/_palette-variables.scss

@@ -0,0 +1,75 @@
+// Palette colors
+// Palette colors should follow the following palette-color-<name> convention.
+
+/// @group FK-Black
+$palette-color-fk-black-100: #1b1e23 !default;
+$palette-color-fk-black-70: #5f6165 !default;
+$palette-color-fk-black-50: #8d8e91 !default;
+$palette-color-fk-black-30: #bbbbbd !default;
+$palette-color-fk-black-15: #ddddde !default;
+$palette-color-fk-black-5: #f4f4f4 !default;
+$palette-color-white-100: #ffffff !default;
+
+/// @group Bluebell
+$palette-color-bluebell-120: #3b4292 !default;
+$palette-color-bluebell-100: #4a52b6 !default;
+$palette-color-bluebell-85: #656cc1 !default;
+$palette-color-bluebell-50: #a4a8db !default;
+$palette-color-bluebell-15: #e5e5f5 !default;
+$palette-color-bluebell-5: #f5f6fa !default;
+
+/// @group Green A
+$palette-color-green-a-120: #0e5532 !default;
+$palette-color-green-a-100: #116a3e !default;
+$palette-color-green-a-85: #35805b !default;
+$palette-color-green-a-50: #88b49f !default;
+$palette-color-green-a-15: #dbe9e2 !default;
+$palette-color-green-a-5: #f3f8f5 !default;
+
+/// @group Green B
+$palette-color-green-b-120: #4c7e56 !default;
+$palette-color-green-b-100: #5f9e6c !default;
+$palette-color-green-b-85: #77ad82 !default;
+$palette-color-green-b-50: #afcfb5 !default;
+$palette-color-green-b-15: #e7f0e9 !default;
+$palette-color-green-b-5: #f7faf8 !default;
+
+/// @group Yellow
+$palette-color-yellow-120: #cc980d !default;
+$palette-color-yellow-100: #ffbe10 !default;
+$palette-color-yellow-85: #ffc834 !default;
+$palette-color-yellow-50: #ffdf87 !default;
+$palette-color-yellow-15: #fff5db !default;
+$palette-color-yellow-5: #fffcf3 !default;
+
+/// @group Red
+$palette-color-red-120: #a21111 !default;
+$palette-color-red-100: #ca1515 !default;
+$palette-color-red-85: #d23838 !default;
+$palette-color-red-50: #e48a8a !default;
+$palette-color-red-15: #f7dcdc !default;
+$palette-color-red-5: #fcf3f3 !default;
+
+/// @group Orange
+$palette-color-orange-120: #c2700d !default;
+$palette-color-orange-100: #f38c10 !default;
+$palette-color-orange-85: #f59d34 !default;
+$palette-color-orange-50: #f9c587 !default;
+$palette-color-orange-15: #ffefdc !default;
+$palette-color-orange-5: #fef9f3 !default;
+
+/// @group Tegel
+$palette-color-tegel-100: #d34503 !default;
+$palette-color-tegel-15: #f8e3d9 !default;
+
+/// @group Plommon
+$palette-color-plommon-100: #a73a64 !default;
+$palette-color-plommon-15: #f2e1e8 !default;
+
+/// @group Senap
+$palette-color-senap-100: #ba7918 !default;
+$palette-color-senap-15: #f5ebdc !default;
+
+/// @group Hav
+$palette-color-hav-100: #4c669f !default;
+$palette-color-hav-15: #e4e8f1 !default;