fds-vue-core 2.1.1 → 2.1.3

package/src/slot-styles.css

@@ -1,93 +0,0 @@
-@import './tokens.css';
-
-/* Hide native clear button on search inputs */
-input[type='search']::-webkit-search-cancel-button {
-  display: none;
-}
-
-input[type='search']::-ms-clear {
-  display: none;
-}
-
-/* Styling FdsTable component */
-.fds-table-wrapper--bordered {
-  border: 1px solid var(--color-gray-100);
-  border-radius: var(--radius-lg);
-}
-
-/* Compact styling */
-.fds-table-wrapper.fds-table-wrapper--compact td,
-.fds-table-wrapper.fds-table-wrapper--compact th:not(.fds-table-head) {
-  padding: 0.5rem;
-}
-
-/* Base styles - works in both Vue scoped and standalone CSS */
-.fds-table-wrapper {
-  border-radius: var(--radius-lg);
-  overflow-x: auto;
-}
-
-/* Table styling - vanilla CSS version (for consuming repos) */
-.fds-table-wrapper table {
-  min-width: 100%;
-  border-collapse: collapse;
-  border-spacing: 0;
-}
-
-.fds-table-wrapper thead {
-  background-color: var(--color-blue_t-100);
-}
-
-.fds-table-wrapper thead tr:first-child th:first-child {
-  border-radius: var(--radius-lg) 0 0 0;
-}
-
-.fds-table-wrapper thead tr:first-child th:last-child {
-  border-radius: 0 var(--radius-lg) 0 0;
-}
-
-.fds-table-wrapper tbody {
-  background-color: var(--color-white);
-}
-
-.fds-table-wrapper tbody tr {
-  border-bottom: 1px solid var(--color-blue-100);
-}
-
-.fds-table-wrapper tbody tr:last-child {
-  border-bottom: none;
-}
-
-.fds-table-wrapper td,
-.fds-table-wrapper th:not(.fds-table-head) {
-  padding: 1rem;
-}
-
-.fds-table-wrapper td,
-.fds-table-wrapper th {
-  text-align: left;
-  vertical-align: top;
-  white-space: normal;
-}
-
-/* Remove margin from last child */
-.mb-0-last-child > *:last-child {
-  margin-bottom: 0 !important;
-}
-
-/* Styling links in default slot of FdsBlockAlert */
-.fds-block-alert-slot .link {
-  @apply text-gray-900;
-}
-
-/* Styling FdsModal component */
-@media screen and (max-width: 480px) {
-  .fds-modal__inner {
-    width: calc(100% - 2rem);
-  }
-}
-
-/* Styling FdsTabsItem component */
-.fds-tabs-item--disabled {
-  @apply cursor-not-allowed pointer-events-none opacity-35 select-none;
-}

package/src/style.css

@@ -1,89 +0,0 @@
-/* Importera tokens från tokens.css - alla design tokens definieras där */
-@import './tokens.css';
-@import 'tailwindcss';
-
-@layer base {
-  html,
-  body,
-  #app {
-    font-family: var(--font-main);
-    -webkit-font-smoothing: antialiased;
-    -moz-osx-font-smoothing: grayscale;
-  }
-}
-
-@layer components {
-  h1,
-  .h1 {
-    @apply font-heading text-2xl sm:text-4xl lg:text-6xl font-extrabold mb-3 mt-0;
-  }
-  h2,
-  .h2 {
-    @apply font-heading text-xl sm:text-3xl font-extrabold mt-4 mb-2;
-  }
-  .h2--small {
-    @apply font-heading text-xl font-extrabold mt-4 mb-2;
-  }
-
-  h3,
-  .h3 {
-    @apply font-heading text-xl font-extrabold mt-4 mb-2;
-  }
-
-  .h3--small {
-    @apply font-heading text-lg font-extrabold mt-4 mb-2;
-  }
-  h1:focus,
-  h2:focus,
-  h3:focus {
-    @apply focus:outline-0;
-  }
-  .label {
-    @apply font-bold mb-2 tracking-wide;
-  }
-  p {
-    @apply mb-4;
-  }
-  li:not(:last-child) {
-    @apply mb-2;
-  }
-  .link,
-  .html a {
-    @apply text-blue-600 hover:text-blue-700 active:text-blue-800 underline focus-visible:outline-dashed focus-visible:outline-2 focus-visible:outline-offset-4 focus-visible:outline-blue-500;
-  }
-
-  .capitalize-first::first-letter {
-    text-transform: uppercase;
-  }
-}
-
-@layer utilities {
-  /** Override browser background color when autocomplete field */
-  input:not(input[type='checkbox'], input[type='radio']),
-  textarea {
-    box-shadow: 0 0 0 1000px #fff inset !important;
-  }
-  /** Style active router link in main nav */
-  .nav-items .router-link-active {
-    @apply bg-blue-100 text-blue-700 font-bold;
-  }
-
-  #navMenu select {
-    @apply focus-visible:outline-dashed focus-visible:outline-2! focus-visible:outline-offset-4! focus-visible:outline-white-solid! focus:border-transparent!;
-  }
-
-  fds-button.fds-button--primary .fds-button__el,
-  fds-button.fds-button--secondary .fds-button__el {
-    @apply md:min-w-[120px]!;
-  }
-
-  /* Reverse spin utility for spinners */
-  @keyframes spin-reverse {
-    to {
-      transform: rotate(-360deg);
-    }
-  }
-  .animate-spin-reverse {
-    animation: spin-reverse 1s linear infinite;
-  }
-}

package/src/tokens.css

@@ -1,252 +0,0 @@
-/* Tailwind CSS v4 @theme - alla tokens för att fungera som Tailwind utilities */
-@theme {
-  --font-main: 'IBM-Plex-Sans', 'Arial', sans-serif;
-  --font-heading: 'Raleway', 'Arial', sans-serif;
-
-  --breakpoint-2xs: 320px;
-  --breakpoint-xs: 360px;
-  --breakpoint-sm: 480px;
-  --breakpoint-md: 588px;
-  --breakpoint-lg: 824px;
-  --breakpoint-xl: 920px;
-  --breakpoint-2xl: 964px;
-  --breakpoint-3xl: 1068px;
-  --breakpoint-4xl: 1268px;
-  --breakpoint-5xl: 1436px;
-
-  --color-blue-100: #ebf4ff;
-  --color-blue-200: #c7e4fd;
-  --color-blue-300: #9acbfe;
-  --color-blue-400: #71abf5;
-  --color-blue-500: #3b87dd;
-  --color-blue-600: #1d69c2;
-  --color-blue-700: #0c4899;
-  --color-blue-800: #0f3164;
-  --color-blue-900: #051a3b;
-
-  --color-red-100: #ffefef;
-  --color-red-200: #fed7d5;
-  --color-red-300: #feb3b0;
-  --color-red-400: #fd857e;
-  --color-red-500: #fd4c43;
-  --color-red-600: #e31c0d;
-  --color-red-700: #a41107;
-  --color-red-800: #750a03;
-  --color-red-900: #3e0301;
-
-  --color-gray-100: rgba(0, 0, 0, 0.0475);
-  --color-gray-200: rgba(0, 0, 0, 0.12);
-  --color-gray-300: rgba(0, 0, 0, 0.225);
-  --color-gray-400: rgba(0, 0, 0, 0.34);
-  --color-gray-500: rgba(0, 0, 0, 0.4625);
-  --color-gray-600: rgba(0, 0, 0, 0.59);
-  --color-gray-700: rgba(0, 0, 0, 0.7);
-  --color-gray-800: rgba(0, 0, 0, 0.795);
-  --color-gray-900: rgba(0, 0, 0, 0.895);
-
-  --color-white-100: rgba(255, 255, 255, 0.0475);
-  --color-white-200: rgba(255, 255, 255, 0.12);
-  --color-white-300: rgba(255, 255, 255, 0.225);
-  --color-white-400: rgba(255, 255, 255, 0.34);
-  --color-white-500: rgba(255, 255, 255, 0.4625);
-  --color-white-600: rgba(255, 255, 255, 0.59);
-  --color-white-700: rgba(255, 255, 255, 0.7);
-  --color-white-800: rgba(255, 255, 255, 0.795);
-  --color-white-900: rgba(255, 255, 255, 0.895);
-  --color-white-solid: #fff;
-
-  --color-yellow-100: #fff2c6;
-  --color-yellow-200: #ffe385;
-  --color-yellow-300: #ffd04a;
-  --color-yellow-400: #ffba20;
-  --color-yellow-500: #f99807;
-  --color-yellow-600: #d96f02;
-  --color-yellow-700: #b74e06;
-  --color-yellow-800: #943b0c;
-  --color-yellow-900: #7a310d;
-
-  --color-green-100: #e6facd;
-  --color-green-200: #cff5a1;
-  --color-green-300: #aeeb6b;
-  --color-green-400: #90dd3e;
-  --color-green-500: #70c31f;
-  --color-green-600: #559c14;
-  --color-green-700: #417714;
-  --color-green-800: #375e16;
-  --color-green-900: #305017;
-
-  --color-blue_t-100: rgba(12, 72, 153, 0.0475);
-  --color-blue_t-200: rgba(12, 72, 153, 0.12);
-  --color-blue_t-300: rgba(12, 72, 153, 0.225);
-
-  --text-6xl: 2rem;
-  --text-5xl: 1.75rem;
-  --text-4xl: 1.625rem;
-  --text-3xl: 1.5rem;
-  --text-2xl: 1.375rem;
-  --text-xl: 1.25rem;
-  --text-lg: 1.125rem;
-  --text-base: 1rem;
-
-  --drop-shadow-xl: 0 16px 32px rgba(12, 72, 153, 0.12);
-  --drop-shadow-lg: 0 12px 24px rgba(12, 72, 153, 0.12);
-  --drop-shadow-md: 0 8px 16px rgba(12, 72, 153, 0.12);
-  --drop-shadow-sm: 0 4px 8px rgba(12, 72, 153, 0.12);
-  --drop-shadow-xs: 0 2px 4px rgba(12, 72, 153, 0.12);
-
-  --shadow-xl: 0 16px 32px rgba(12, 72, 153, 0.12);
-  --shadow-lg: 0 12px 24px rgba(12, 72, 153, 0.12);
-  --shadow-md: 0 8px 16px rgba(12, 72, 153, 0.12);
-  --shadow-sm: 0 4px 8px rgba(12, 72, 153, 0.12);
-  --shadow-xs: 0 2px 4px rgba(12, 72, 153, 0.12);
-
-  --radius-full: 9999px;
-  --radius-3xl: 2rem;
-  --radius-2xl: 1rem;
-  --radius-xl: 0.75rem;
-  --radius-lg: 0.5rem;
-  --radius-md: 0.25rem;
-  --radius-sm: 0.125rem;
-  --radius-none: 0;
-
-  --tracking-wide: 0.002em;
-  --tracking-normal: 0;
-  --tracking-tight: -0.005em;
-
-  --spacing-lg: 1.5;
-  --spacing-md: 1.335;
-  --spacing-sm: 1.2;
-}
-
-/* CSS-variabler för tokens - kan användas direkt i CSS (bakåtkompatibilitet) */
-:root,
-:host {
-  --font-main: 'IBM-Plex-Sans', 'Arial', sans-serif;
-  --font-heading: 'Raleway', 'Arial', sans-serif;
-
-  /* Breakpoints som CSS-variabler */
-  --breakpoint-2xs: 320px;
-  --breakpoint-xs: 360px;
-  --breakpoint-sm: 480px;
-  --breakpoint-md: 588px;
-  --breakpoint-lg: 824px;
-  --breakpoint-xl: 920px;
-  --breakpoint-2xl: 964px;
-  --breakpoint-3xl: 1068px;
-  --breakpoint-4xl: 1268px;
-  --breakpoint-5xl: 1436px;
-
-  /* Colors */
-  --color-blue-100: #ebf4ff;
-  --color-blue-200: #c7e4fd;
-  --color-blue-300: #9acbfe;
-  --color-blue-400: #71abf5;
-  --color-blue-500: #3b87dd;
-  --color-blue-600: #1d69c2;
-  --color-blue-700: #0c4899;
-  --color-blue-800: #0f3164;
-  --color-blue-900: #051a3b;
-
-  --color-red-100: #ffefef;
-  --color-red-200: #fed7d5;
-  --color-red-300: #feb3b0;
-  --color-red-400: #fd857e;
-  --color-red-500: #fd4c43;
-  --color-red-600: #e31c0d;
-  --color-red-700: #a41107;
-  --color-red-800: #750a03;
-  --color-red-900: #3e0301;
-
-  --color-gray-100: rgba(0, 0, 0, 0.0475);
-  --color-gray-200: rgba(0, 0, 0, 0.12);
-  --color-gray-300: rgba(0, 0, 0, 0.225);
-  --color-gray-400: rgba(0, 0, 0, 0.34);
-  --color-gray-500: rgba(0, 0, 0, 0.4625);
-  --color-gray-600: rgba(0, 0, 0, 0.59);
-  --color-gray-700: rgba(0, 0, 0, 0.7);
-  --color-gray-800: rgba(0, 0, 0, 0.795);
-  --color-gray-900: rgba(0, 0, 0, 0.895);
-
-  --color-white-100: rgba(255, 255, 255, 0.0475);
-  --color-white-200: rgba(255, 255, 255, 0.12);
-  --color-white-300: rgba(255, 255, 255, 0.225);
-  --color-white-400: rgba(255, 255, 255, 0.34);
-  --color-white-500: rgba(255, 255, 255, 0.4625);
-  --color-white-600: rgba(255, 255, 255, 0.59);
-  --color-white-700: rgba(255, 255, 255, 0.7);
-  --color-white-800: rgba(255, 255, 255, 0.795);
-  --color-white-900: rgba(255, 255, 255, 0.895);
-  --color-white-solid: #fff;
-
-  --color-yellow-100: #fff2c6;
-  --color-yellow-200: #ffe385;
-  --color-yellow-300: #ffd04a;
-  --color-yellow-400: #ffba20;
-  --color-yellow-500: #f99807;
-  --color-yellow-600: #d96f02;
-  --color-yellow-700: #b74e06;
-  --color-yellow-800: #943b0c;
-  --color-yellow-900: #7a310d;
-
-  --color-green-100: #e6facd;
-  --color-green-200: #cff5a1;
-  --color-green-300: #aeeb6b;
-  --color-green-400: #90dd3e;
-  --color-green-500: #70c31f;
-  --color-green-600: #559c14;
-  --color-green-700: #417714;
-  --color-green-800: #375e16;
-  --color-green-900: #305017;
-
-  --color-blue_t-100: rgba(12, 72, 153, 0.0475);
-  --color-blue_t-200: rgba(12, 72, 153, 0.12);
-  --color-blue_t-300: rgba(12, 72, 153, 0.225);
-
-  /* Typography */
-  --text-6xl: 2rem;
-  --text-5xl: 1.75rem;
-  --text-4xl: 1.625rem;
-  --text-3xl: 1.5rem;
-  --text-2xl: 1.375rem;
-  --text-xl: 1.25rem;
-  --text-lg: 1.125rem;
-  --text-base: 1rem;
-
-  /* Shadows */
-  --drop-shadow-xl: 0 16px 32px rgba(12, 72, 153, 0.12);
-  --drop-shadow-lg: 0 12px 24px rgba(12, 72, 153, 0.12);
-  --drop-shadow-md: 0 8px 16px rgba(12, 72, 153, 0.12);
-  --drop-shadow-sm: 0 4px 8px rgba(12, 72, 153, 0.12);
-  --drop-shadow-xs: 0 2px 4px rgba(12, 72, 153, 0.12);
-
-  --shadow-xl: 0 16px 32px rgba(12, 72, 153, 0.12);
-  --shadow-lg: 0 12px 24px rgba(12, 72, 153, 0.12);
-  --shadow-md: 0 8px 16px rgba(12, 72, 153, 0.12);
-  --shadow-sm: 0 4px 8px rgba(12, 72, 153, 0.12);
-  --shadow-xs: 0 2px 4px rgba(12, 72, 153, 0.12);
-
-  /* Border radius */
-  --radius-full: 9999px;
-  --radius-3xl: 2rem;
-  --radius-2xl: 1rem;
-  --radius-xl: 0.75rem;
-  --radius-lg: 0.5rem;
-  --radius-md: 0.25rem;
-  --radius-sm: 0.125rem;
-  --radius-none: 0;
-
-  /* Letter spacing */
-  --tracking-wide: 0.002em;
-  --tracking-normal: 0;
-  --tracking-tight: -0.005em;
-
-  /* Spacing */
-  --spacing-lg: 1.5;
-  --spacing-md: 1.335;
-  --spacing-sm: 1.2;
-}
-
-/* Styling links in default slot of FdsBlockAlert */
-.alert-content .link {
-  @apply text-gray-900;
-}

package/tsconfig.base.json

@@ -1,4 +0,0 @@
-{
-  "extends": "./configs/tsconfig.base.json"
-}
-