fix: use css package instead of component-classes

components/alert/w-alert.vue

@@ -2,7 +2,7 @@
 import { computed } from 'vue';
 import { wExpandTransition } from '#generics';
 import { createModel, modelProps } from 'create-v-model';
-import { alert as ccAlert } from '@warp-ds/component-classes';
+import { alert as ccAlert } from '@warp-ds/css/component-classes';
 
 const props = defineProps({
  title: String,

components/attention/w-attention-arrow.vue

@@ -1,7 +1,7 @@
 <script setup>
  import { computed } from 'vue'
  import { props as attentionProps, opposites, rotation } from './attentionUtil.js'
- import { attention as ccAttention } from '@warp-ds/component-classes'
+ import { attention as ccAttention } from '@warp-ds/css/component-classes'
 
  const props = defineProps({
  ...attentionProps,

components/attention/w-attention.vue

@@ -1,6 +1,6 @@
 <script setup>
  import { watch, computed, ref, onMounted, nextTick } from 'vue'
- import { attention as ccAttention } from '@warp-ds/component-classes'
+ import { attention as ccAttention } from '@warp-ds/css/component-classes'
  import { computePosition, flip, offset, shift, arrow } from '@floating-ui/dom'
 
  import { absentProp } from '#util'

components/box/w-box.vue

@@ -1,5 +1,5 @@
 <script setup>
-import { box as ccBox } from '@warp-ds/component-classes';
+import { box as ccBox } from '@warp-ds/css/component-classes';
 import { computed } from 'vue';
 
 const props = defineProps({

components/breadcrumbs/w-breadcrumbs.vue

@@ -12,7 +12,7 @@
 <script setup>
 import { h, Fragment } from 'vue'
 import { interleave } from '@warp-ds/core/breadcrumbs'
-import { breadcrumbs as ccBreadcrumbs } from "@warp-ds/component-classes"
+import { breadcrumbs as ccBreadcrumbs } from "@warp-ds/css/component-classes"
 
 const props = defineProps({
  ariaLabel: { type: String, default: 'Her er du' }

components/button-group/w-button-group-item.vue

@@ -1,6 +1,6 @@
 <script setup>
 import { inject, computed } from 'vue';
-import { buttonGroupItem as ccButtonGroupItem } from '@warp-ds/component-classes';
+import { buttonGroupItem as ccButtonGroupItem } from '@warp-ds/css/component-classes';
 
 const props = defineProps({ selected: Boolean });
 const outlined = inject('outlined', false);

components/button-group/w-button-group.vue

@@ -10,7 +10,7 @@ export default { name: 'wButtonGroup' }
 
 <script setup>
 import { provide, computed, toRef } from 'vue';
-import { buttonGroup as ccButtonGroup } from '@warp-ds/component-classes';
+import { buttonGroup as ccButtonGroup } from '@warp-ds/css/component-classes';
 
 const props = defineProps({
  outlined: Boolean,

components/button/w-button.vue

@@ -11,7 +11,7 @@ export default { name: 'wButton' }
 
 <script setup>
 import { computed, useAttrs } from 'vue'
-import { button as ccButton } from '@warp-ds/component-classes';
+import { button as ccButton } from '@warp-ds/css/component-classes';
 
 const buttonTypes = [ 
  'primary',

components/card/w-card.vue

@@ -1,5 +1,5 @@
 <script setup>
-import { card as ccCard } from '@warp-ds/component-classes';
+import { card as ccCard } from '@warp-ds/css/component-classes';
 import { computed } from 'vue';
 
 const props = defineProps({

components/expandable/w-expandable.vue

@@ -26,7 +26,7 @@ import { ref, computed, watch, nextTick, useSlots } from 'vue'
 import { modelProps, createModel } from 'create-v-model'
 import { absentProp } from '#util'
 import { wExpandTransition as expandTransition } from '#generics'
-import { expandable as ccExpandable, box as ccBox } from '@warp-ds/component-classes'
+import { expandable as ccExpandable, box as ccBox } from '@warp-ds/css/component-classes'
 
 const props = defineProps({
  title: String,

components/forms/w-affix.vue

@@ -7,7 +7,7 @@
 </template>
 
 <script>
-import { suffix, prefix } from '@warp-ds/component-classes'
+import { suffix, prefix } from '@warp-ds/css/component-classes'
 import { computed } from 'vue'
 
 export default {

components/forms/w-field.vue

@@ -13,7 +13,7 @@
 
 <script>
 import { computed } from 'vue';
-import { input as ccInput, label as ccLabel, helpText as ccHelpText} from '@warp-ds/component-classes';
+import { input as ccInput, label as ccLabel, helpText as ccHelpText} from '@warp-ds/css/component-classes';
 import { createValidation } from './validation';
 import { id } from '#util';
 import { modelProps } from 'create-v-model';

components/forms/w-input.vue

@@ -33,7 +33,7 @@
 
 <script setup>
  import { ref, computed, useSlots } from 'vue';
- import { input as ccInput } from '@warp-ds/component-classes';
+ import { input as ccInput } from '@warp-ds/css/component-classes';
  import { createModel } from 'create-v-model';
  import { setupMask } from './w-input-mask.js';
  import { default as wField, fieldProps } from './w-field.vue';

components/forms/w-select.vue

@@ -38,7 +38,7 @@
 
 <script setup>
 import { computed } from 'vue';
-import { select as ccSelect } from '@warp-ds/component-classes';
+import { select as ccSelect } from '@warp-ds/css/component-classes';
 import { createModel } from 'create-v-model'
 import { default as wField, fieldProps } from './w-field.vue'
 

components/forms/w-suffix.vue

@@ -8,7 +8,7 @@
 
 <script>
 import { onMounted } from 'vue'
-import { suffix as c } from '@warp-ds/component-classes'
+import { suffix as c } from '@warp-ds/css/component-classes'
 
 export default {
  name: 'wSuffix',

components/forms/w-textarea.vue

@@ -18,7 +18,7 @@
 
 <script setup>
 import { computed } from 'vue';
-import { input as ccInput } from '@warp-ds/component-classes';
+import { input as ccInput } from '@warp-ds/css/component-classes';
 import { createModel } from 'create-v-model';
 import { default as wField, fieldProps } from './w-field.vue';
 

components/forms/w-toggle.vue

@@ -20,7 +20,7 @@
 
 <script setup>
 import { computed } from 'vue';
-import { toggle as ccToggle } from '@warp-ds/component-classes';
+import { toggle as ccToggle } from '@warp-ds/css/component-classes';
 import { default as wField, fieldProps } from './w-field.vue';
 import { wToggleItem } from '#generics';
 import { createModel } from 'create-v-model';

components/generic/w-clickable.vue

@@ -1,7 +1,7 @@
 
 <script setup>
 import { computed } from 'vue';
-import { clickable as ccClickable } from '@warp-ds/component-classes';
+import { clickable as ccClickable } from '@warp-ds/css/component-classes';
 import wToggleItem from './w-toggle-item.vue';
 
 const props = defineProps({

components/generic/w-dead-toggle.vue

@@ -1,5 +1,5 @@
 <script setup>
-import { toggle as ccToggle } from '@warp-ds/component-classes';
+import { toggle as ccToggle } from '@warp-ds/css/component-classes';
 import wToggleItem from './w-toggle-item.vue';
 import { computed } from 'vue';
 

components/generic/w-toggle-item.vue

@@ -2,7 +2,7 @@
 import { computed } from 'vue';
 import { id as uniqueId } from '#util';
 import { modelProps, createModel } from 'create-v-model';
-import { toggle as ccToggle } from '@warp-ds/component-classes';
+import { toggle as ccToggle } from '@warp-ds/css/component-classes';
 const p = defineProps({
  id: { ...uniqueId },
  label: String,

components/modal/w-modal.vue

@@ -1,6 +1,6 @@
 <script setup>
 import { ref, computed, watch, nextTick, onBeforeUnmount } from 'vue'
-import { modal as ccModal } from '@warp-ds/component-classes'
+import { modal as ccModal } from '@warp-ds/css/component-classes'
 import focusLock from 'dom-focus-lock'
 import { id } from '#util'
 import { setup as setupScrollLock, teardown as teardownScrollLock } from 'scroll-doctor'

components/pill/w-pill.vue

@@ -1,6 +1,6 @@
 <script setup>
 import { computed } from 'vue';
-import { pill as ccPill } from '@warp-ds/component-classes';
+import { pill as ccPill } from '@warp-ds/css/component-classes';
 
 const p = defineProps({
  label: String,

components/slider/w-slider.vue

@@ -8,7 +8,7 @@ import {
  onBeforeUnmount,
 } from 'vue';
 import { modelProps, createModel } from 'create-v-model';
-import { slider as ccSlider } from '@warp-ds/component-classes';
+import { slider as ccSlider } from '@warp-ds/css/component-classes';
 import { useDimensions, createHandlers } from '@warp-ds/core/slider';
 
 const attrs = useAttrs();

components/steps/w-step.vue

@@ -1,6 +1,6 @@
 <script setup>
 import { computed, inject } from 'vue';
-import { step as ccStep } from '@warp-ds/component-classes';
+import { step as ccStep } from '@warp-ds/css/component-classes';
 
 const vertical = inject('steps-vertical', true);
 const left = inject('steps-left', true);

components/steps/w-steps.vue

@@ -1,6 +1,6 @@
 <script setup>
 import { computed, ref, provide, watchEffect } from 'vue';
-import { steps as ccSteps } from '@warp-ds/component-classes';
+import { steps as ccSteps } from '@warp-ds/css/component-classes';
 
 const props = defineProps({
  horizontal: Boolean,

components/switch/w-switch.vue

@@ -1,6 +1,6 @@
 <script setup>
 import { computed, ref } from 'vue'
-import { switchToggle as ccSwitch } from '@warp-ds/component-classes'
+import { switchToggle as ccSwitch } from '@warp-ds/css/component-classes'
 import { createModel, modelProps } from 'create-v-model'
 import { id } from '#util'
 

components/tabs/w-tab.vue

@@ -1,5 +1,5 @@
 <script setup>
-import { tab as ccTab } from '@warp-ds/component-classes';
+import { tab as ccTab } from '@warp-ds/css/component-classes';
 import { inject, computed, onBeforeUnmount } from 'vue';
 
 const props = defineProps({

components/tabs/w-tabs.vue

@@ -1,5 +1,5 @@
 <script setup>
-import { gridLayout, tabs as ccTabs } from '@warp-ds/component-classes';
+import { gridLayout, tabs as ccTabs } from '@warp-ds/css/component-classes';
 import {
  provide,
  computed,

components/tag/w-tag.vue

@@ -1,5 +1,5 @@
 <script setup>
-import { ribbon as ccRibbon } from '@warp-ds/component-classes'
+import { ribbon as ccRibbon } from '@warp-ds/css/component-classes'
 import { computed } from 'vue'
 
 const props = defineProps({

dev/index.html

@@ -5,7 +5,8 @@
  <title>Warp: Vue</title>
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <link rel="icon" href="/favicon.ico" />
- <link rel="stylesheet" href="https://assets.finn.no/pkg/@warp-ds/tokens/v1/finn-no.css" />
+ <link rel="stylesheet" href="https://assets.finn.no/pkg/@warp-ds/css/1.0.0-alpha.33/tokens/finn-no.css" />
+ <link rel="stylesheet" href="https://assets.finn.no/pkg/@warp-ds/css/1.0.0-alpha.33/resets.min.css" />
  </head>
  <body>
  <div id="app"></div>

dev/pages/Tag.vue

@@ -10,6 +10,7 @@ const colorControls = [
  { name: 'Error', radio },
  { name: 'Disabled', radio },
  { name: 'Sponsored', radio },
+ { name: 'Neutral', radio },
 ]
 const color = reactive({ active: 'Info' })
 const activeColor = useIsActive(color)
@@ -28,7 +29,7 @@ const side = reactive(buildCheckboxState({ controls: sideControls }))
  <component-title title="Tag" />
 
  <token :state="[side, color]">
- <w-tag class="text-14" primary :topLeft="side['Top-left']" :topRight="side['Top-right']" :bottomLeft="side['Bottom-left']" :bottomRight="side['Bottom-right']" :info="activeColor('Info')" :success="activeColor('Success')" :warning="activeColor('Warning')" :error="activeColor('Error')" :disabled="activeColor('Disabled')" :sponsored="activeColor('Sponsored')">
+ <w-tag class="text-14" primary :topLeft="side['Top-left']" :topRight="side['Top-right']" :bottomLeft="side['Bottom-left']" :bottomRight="side['Bottom-right']" :info="activeColor('Info')" :success="activeColor('Success')" :warning="activeColor('Warning')" :error="activeColor('Error')" :disabled="activeColor('Disabled')" :sponsored="activeColor('Sponsored')" :neutral="activeColor('Neutral')">
  Hello Warp
  </w-tag>
  </token>

package.json

@@ -29,8 +29,8 @@
  "license": "Apache-2.0",
  "dependencies": {
  "@warp-ds/core": "^1.0.0",
- "@warp-ds/component-classes": "^1.0.0-alpha.116",
- "@warp-ds/uno": "1.0.0-alpha.49",
+ "@warp-ds/css": "^1.0.0-alpha.33",
+ "@warp-ds/uno": "^1.0.0-alpha.60",
  "@floating-ui/dom": "^1.4.2",
  "create-v-model": "^2.2.0",
  "dom-focus-lock": "^1.1.0",