Codey

Appearance

Changelog ​

2.1.2-next.0 ​

Patch Changes ​

  • 8a98440: syncpack sortExports rule update.

2.1.1-next.0 ​

Patch Changes ​

  • fa871ef: Updated vue dependency from vue@3.5.13 to latest patch version vue@3.5.15.

2.1.0-next.0 ​

Minor Changes ​

  • 4262e65: Added a documentation class to replace xer-documentation from @xerius/codey-style

  • 2c681ac: Changed default (responsive) text sizes to be measured in rem instead of px. This should cause no change with default device settings. Now, when users select a different device/browser font-size (usually for accessibility reasons), our default responsive sizes should be relative to their selected font-size.

    Because our spacing and sizing variables are also rem based, they will all also follow the default scaling preference selected by the user.

Patch Changes ​

  • 2d3f110: Lists: fix styling of unordered lists that uses svgs to work better when the content is not just plain text

2.0.0-next.0 ​

Major Changes ​

  • dca02aa: Node: Upgraded from node@18.18 to node@22.14.

    To Migrate:

    • Update the node version in the volta configuration in the package.json file.
    • Update the engine version in the package.json file.
    • Update the node version in any ci/cd pipes that have a fixed version.
    • Remove your node_modules and run a npm install.
    • Ensure all dependencies are compatible with the new node version.

Minor Changes ​

  • 19bc32f: Updated & applied new tsconfig settings for consistant type checking within the codey repo.

Patch Changes ​

  • f740e78: Eslint: update to latest @xerius/eslint-config using helper function for flat config.

1.1.0-next.0 ​

Minor Changes ​

  • 1031b18: animation: Add spin-slow animation for loading indicator.

1.0.0-next.14 ​

Minor Changes ​

  • e5fbeb2: Typography: Made typo classes font, size and thickness !important so it can correctly override external lib styles.
  • 852f364: Charts: Added color export to js object for use with chartjs.
  • 398c8a7: Figma-token-import: added the import of Semantic tokens from a categorie like 'Buttons' to add to the theme css files.
  • 852f364: Chart: Added chart colors to export categories.

Patch Changes ​

  • 398c8a7: Theme Colors: The color value of some css theme color variables has been updated to match the design.

1.0.0-next.13 ​

Major Changes ​

  • 4f7fd49: Typography: Prefixed all typography classes with typo-.

    To Migrate:

    ONLY APPLICABLE when using the @xerius/codey-tailwind before this version.

    diff
    -primary-title
+typo-primary-title
-secondary-title
+typo-secondary-title
-tertiary-title
+typo-tertiary-title
-quaternary-title
+typo-quaternary-title
-quinary-title
+typo-quinary-title
-primary-text
+typo-primary-text
-secondary-text
+typo-secondary-text
-tertiary-text
+typo-tertiary-text
-quaternary-text
+typo-quaternary-text
-intro-text
+typo-intro-text
-quote-text
+typo-quote-text
-button-text
+typo-button-text
-button-text-small
+typo-button-text-small

Minor Changes ​

  • 6c523a8: Typography: Added button-small-text class
  • 4573fa6: Typography Lists: Add styling and Tailwind Classes to match designs.
  • 7c0ccbd: Typography: Update setup to support my-family fonts.
  • 1875596: Colors: Added extra tinted colors for states (danger & success)
  • 7c0ccbd: Colors: Update latest colors.
  • 1875596: Typography: Added quenternary-text

Patch Changes ​

  • d535c38: Typography: Add font antialiasing
  • 1875596: Typography: adjust text size of secondary & tertiary text to match designs.

1.0.0-next.12 ​

Minor Changes ​

  • 5ce7021: Add intellisense for custom title & text classes

1.0.0-next.11 ​

Minor Changes ​

  • be9d70d: Updated Figma colors to latest export.
  • 3ddad73: Added font-bold util class

Patch Changes ​

  • 3ddad73: Correct the codey-assets package version number used for fetching fonts.

1.0.0-next.10 ​

Minor Changes ​

  • 2f9f5db: Spacing: move available custom util to spacing from height-extensions for wider usage possibilities.
  • 2f9f5db: Colors: Update colors from figma import.

1.0.0-next.9 ​

Minor Changes ​

  • 3efcdc6: Typography: Added .typo-button-text class and set font scaling correctly.
  • db6d9de: spacings: Add 0 spacing.
  • d6c9308: Typegraphy: Apply bg-base and text-on-base colors to type classes.

Patch Changes ​

  • db6d9de: Typography: Fix theme typography class structure

1.0.0-next.8 ​

Major Changes ​

  • 1fb2c1b: spacings: removed responsive spacings.

    There will no longer be automatic changes to the spacings based on the screen size. Scaling will be done using font-size and the linked rem values. If specific spacings are needed for different screen sizes, they should be defined using the responsive breakpoints.

  • 1fb2c1b: REMOVE colors: Update color names and reduces depth of semantic tokens. More information on why this changed can be found here

    This does not need to be in the final changelog and only applies to user of pre-release 1.0.0-next.7!

    To Migrate:

    Go to the codey repo and copy the packages\tailwind\codemod\check-color-rename.js script. You need to install ignore in order to run it. after that run e.g. node .\check-color-rename.js . .\.gitignore. This wil scan all files for the removed tokens and give you a list of files that need to be updated. You can uncomment the write option, note that it does not do the replacements correctly as it does not respect the tailwind syntax.

    Below is a list of all color changes and the new mapping:

    Removed ValueUpdated Mapping
    cta-primary-containerprimary
    cta-primary-activeprimary
    cta-secondary-on-containerprimary
    cta-secondary-strokeprimary
    cta-primary-pressedprimary
    cta-primary-dragprimary
    cta-tertiary-on-containerprimary-emphasis
    cta-primary-hoverprimary-emphasis
    cta-primary-focusprimary-emphasis
    cta-secondary-on-container-interactionprimary-emphasis
    cta-secondary-stroke-interactionprimary-emphasis
    forms-stroke-hoverprimary-emphasis
    forms-stroke-activeprimary-emphasis
    forms-stroke-focusprimary-emphasis
    cta-secondary-containerbase
    cta-secondary-hoverprimary-tinted-emphasis
    cta-secondary-focusprimary-tinted-emphasis
    cta-secondary-pressedprimary-tinted-interaction
    cta-secondary-dragprimary-tinted-interaction
    stroke-inputon-base-de-emphasis
    forms-text-inputon-base-de-emphasis
    cta-inverse-primary-on-containeron-base-de-emphasis
    forms-containerbase
    forms-stroke-defaulton-base-muted
    forms-text-placeholderon-base-de-emphasis
    forms-stroke-errordanger
    forms-text-errordanger
    forms-text-helperon-base-de-emphasis
    forms-hoverbase-interaction
    forms-focusbase-interaction
    cta-interactive-containersecondary
    cta-interactive-hoversecondary-emphasis
    cta-inverse-primary-containerbase
    cta-inverse-secondary-strokeon-base-transparent
    cta-inverse-secondary-stroke-interactionon-base-transparent
    cta-inverse-primary-activebase-interaction
    cta-inverse-secondary-on-containeron-base-transparent
    cta-inverse-secondary-on-container-interactionon-base-transparent
    cta-inverse-tertiary-on-containeron-base-transparent
    cta-inverse-interactive-containersecondary
    cta-inverse-interactive-hoversecondary-emphasis
    cta-inverse-secondary-containerbase-transparent
    cta-inverse-secondary-hoverbase-transparent-emphasis
    cta-inverse-secondary-focusbase-transparent-emphasis
    cta-inverse-secondary-pressedbase-transparent-interaction
    cta-inverse-secondary-dragbase-transparent-interaction
    cta-inverse-primary-hoverbase-emphasis
    cta-inverse-primary-focusbase-emphasis
    cta-inverse-primary-pressedbase-interaction
    cta-inverse-primary-dragbase-interaction
    cta-inverse-tertiary-hoverbase-transparent
    cta-inverse-tertiary-focusbase-transparent-emphasis
    cta-inverse-tertiary-pressedbase-transparent-interaction
    cta-inverse-tertiary-dragbase-transparent-interaction
    cta-tertiary-hoverprimary-tinted-emphasis
    cta-tertiary-focusprimary-tinted-emphasis
    cta-tertiary-pressedprimary-tinted-interaction
    cta-tertiary-dragprimary-tinted-interaction
    text-h-1text-accent
    table-cell-surface-lighttable-cell-surface-1
    table-cell-surface-mediumtable-cell-surface-2
    table-header-surface-lighttable-header-surface-1
    table-header-surface-mediumtable-header-surface-2
    icon-interactiveicon-secondary
    stroke-lightstroke-muted
    icon-lighticon-inverse

1.0.0-next.7 ​

Patch Changes ​

  • 3a64757: REMOVE THIS LINE: Test for release raport

1.0.0-next.6 ​

Patch Changes ​

  • 3d73a51: Add missing peerDependency to autoprefixer.

1.0.0-next.5 ​

Patch Changes ​

  • 2e3d460: Adopt new assets url.

1.0.0-next.4 ​

Major Changes ​

  • 642755b: Components: The xer- prefix has been removed from all components. This means that all Tailwind utility classes are now without the xer- prefix.

    Documentation: The documentation has been updated to reflect the changes in the components and it's own components have been updated to also have the removal of the Tailwind xer- prefix. Playground: The playground has been updated to reflect the changes in the components and it's own components have been updated to also have the removal of the Tailwind xer- prefix. Tailwind: The Tailwind package has been updated to have the removal of the Tailwind xer- prefix where Tailwind Utility classes were used and from the preset in the config file.

    To migrate:

    • Remove xer- prefix from the tailwind config files. (See the prefix and safelist options)
    • Remove the xer- prefix from all Tailwind utility classes.

    From:

    html
    <div class="xer-flex xer-flex-wrap xer-justify-content-center xer-gap-2">...</div>

    To:

    html
    <div class="flex flex-wrap justify-content-center gap-2">...</div>

1.0.0-next.3 ​

Patch Changes ​

  • 110d51c: Fix incorrect package exports paths

1.0.0-next.2 ​

Major Changes ​

  • 85ad291: Update package export structure.

1.0.0-next.1 ​

Major Changes ​

  • 62fc987: Update Typography and related class configuration.

    To Migrate:

    The below util classes are no longer available as these properties are now automatically applied based on the title or text class used.

    • Letter spacing is removed, tracking-1 & tracking-2 are no longer available.
    • Line height is removed, leading-0, leading-1, leading-2, leading-3 are no longer available.
    • Font Weight is removed, font-light, font-regular, font-medium, font-bold are no longer available.
    • Font Size is removed, text-xxs, text-xs, text-s, text-m, text-l, text-xl, text-xxl, text-xxxl are no longer available.

    The available text classes are:

    • .typo-primary-title
    • .typo-secondary-title
    • .typo-tertiary-title
    • .typo-quaternary-title
    • .typo-quinary-title
    • .typo-primary-text
    • .typo-secondary-text
    • .typo-intro-text
    • .typo-quote-text

1.0.0-next.0 ​

Major Changes ​

  • bab27e0: Color variable changes to match new xerius design and support theming.

    To Migrate:

    • Migration to the latest codey-components to get the correctly styled new components.
    • In case of own components, you can follow the mapping below to migrate:
    Old Color VariableNew Color Variable
    transparentprimary-inverse-transparent
    infoinfo
    info-15info-transparent-emphasis-10
    warningwarning
    successsuccess
    dangerdanger
    danger--hoverdanger-emphasis
    danger--activedanger
    errordanger
    whitebase
    blackon-base-emphasis
    primarybrand
    secondary-1secondary
    secondary-2quaternary
    secondary-3tertiary
    ctaprimary
    cta--hoverprimary-emphasis
    cta--activeprimary
    greysurface-inverse-4
    grey-1background
    grey-2surface-neutral-1
    grey-3surface-neutral-2
    grey-4surface-neutral-3
    grey-5surface-neutral-4
    grey-6surface-inverse-3
    grey-7surface-inverse-2
    grey-darkon-base
    backdropcolor-backdrop

All new color variable names are available through Tailwind.

  • bab27e0: Updated border radius to new values

    To Migrate:

    Old ValueNew Value
    lgmd
    xllg
    2xllg
    3xllg

  • bab27e0: Removed redundant shadows from config

    To Migrate:

    Old ValueNew Value
    shadow-1shadow
    shadow-2shadow
    shadow-3shadow
    shadow-4shadow
    shadow-5shadow
    shadow-6shadow
    shadow-7shadow
    shadow-8shadow

    At this moment there is only one shadow value.

  • bab27e0: Revert border config to tailwind defaults.

    To Migrate:

    Old ValueNew Value
    border-3border-2
    border-6border-4

    Other values remain the same.

  • bab27e0: Screen breakpoint names & values change to match the new design.

    To Migrate:

    Old ValueNew Value
    mobilexs
    tabletsm
    laptopmd
    desktoplg
    large-desktopxl

  • bab27e0: min-height: Reverted to tailwind defaults for the new design.

    To Migrate:

    • Update the following values to the new match:
    Old ValueNew ValueBreaks?
    min-h-0min-h-0
    min-h-1min-h-0.5💔
    min-h-2min-h-1💔
    min-h-3min-h-2💔
    min-h-4min-h-3💔
    min-h-5min-h-4💔
    min-h-6min-h-5💔
    min-h-7min-h-6💔
    min-h-8min-h-8
    min-h-9min-h-9
    min-h-10min-h-10
    min-h-11min-h-11
    min-h-12min-h-14 *💔
    min-h-13min-h-16 *💔
    min-h-14min-h-20💔
    min-h-15min-h-24 *💔
    min-h-16min-h-32 *💔
    min-h-17min-h-40💔
    min-h-1/4min-h-[25%]💔
    min-h-1/2min-h-[50%]💔
    min-h-3/4min-h-[75%]💔

    Note: * Values are not an exact match and differ 0.25rem from the original values.

  • 342d45d: First Release: Move all Tailwind & related theming config from codey-style to this package