fix: use css package instead of component-classes (#52)

* fix(package.json): bump @warp-ds/uno to -alpha.60 & @warp-ds/css to -alpha.33

* fix(components): import classes from @warp-ds/css

* fix(index.html): use new semantic color tokens from @warp-ds/css

* fix: use resets from Eik at 1.0.0-alpha.33

* docs(tags): add neutral variant of tag

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",